Merge pull request #199 from reuters-graphics/syntax-theme
Syntax theme
This commit is contained in:
Jon McClure
GitHub
commit
0f2efef446
16 changed files with 210 additions and 79 deletions
5
.changeset/itchy-papayas-burn.md
Normal file
5
.changeset/itchy-papayas-burn.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@reuters-graphics/graphics-components': patch
|
||||
---
|
||||
|
||||
Docs syntax highlighting and organisation
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<script>
|
||||
import Article from '../src/components/Article/Article.svelte';
|
||||
import Theme from '../src/components/Theme/Theme.svelte';
|
||||
|
||||
import 'prism-themes/themes/prism-nord.css';
|
||||
</script>
|
||||
|
||||
<Theme>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use './syntax.scss';
|
||||
|
||||
body {
|
||||
font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const preview: Preview = {
|
|||
// https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
|
||||
storySort: {
|
||||
method: 'alphabetical-by-kind',
|
||||
includeNames: true,
|
||||
includeNames: false,
|
||||
order: [
|
||||
'Intro',
|
||||
'Guides',
|
||||
|
|
@ -46,17 +46,8 @@ const preview: Preview = {
|
|||
'*',
|
||||
'Getting help',
|
||||
],
|
||||
'Layout',
|
||||
['Intro', '*'],
|
||||
'Theming',
|
||||
['Theme', 'CSS variables', '*'],
|
||||
'Components',
|
||||
['Intro', '*'],
|
||||
'*',
|
||||
'Utilities',
|
||||
['Intro', '*'],
|
||||
'SCSS',
|
||||
['Intro', '*'],
|
||||
'Styles',
|
||||
[
|
||||
'Intro',
|
||||
|
|
|
|||
145
.storybook/syntax.scss
Normal file
145
.storybook/syntax.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/**
|
||||
* Nord theme styling for source code in docs
|
||||
*/
|
||||
|
||||
.docblock-source {
|
||||
border: 6px solid #333 !important;
|
||||
overflow: hidden;
|
||||
border-radius: 6px !important;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.19),
|
||||
0 6px 6px rgba(0, 0, 0, 0.23) !important;
|
||||
padding: 0 !important;
|
||||
button {
|
||||
background-color: #0071a1;
|
||||
color: white;
|
||||
border-top-left-radius: 0;
|
||||
&:focus {
|
||||
box-shadow: #4ee8c4 0 -3px 0 0 inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div pre.prismjs {
|
||||
background-color: #2e3440 !important;
|
||||
color: #f8f8f2;
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
|
||||
monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #2e3440;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #9199aa;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #b48ead;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a3be8c;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #88c0d0;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ebcb8b;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
25
package.json
25
package.json
|
|
@ -42,25 +42,24 @@
|
|||
"@storybook/addon-actions": "^8.4.4",
|
||||
"@storybook/addon-backgrounds": "^8.4.4",
|
||||
"@storybook/addon-controls": "^8.4.4",
|
||||
"@storybook/addon-docs": "^8.2.9",
|
||||
"@storybook/addon-essentials": "^8.2.9",
|
||||
"@storybook/addon-docs": "^8.4.4",
|
||||
"@storybook/addon-interactions": "^8.4.4",
|
||||
"@storybook/addon-links": "^8.4.4",
|
||||
"@storybook/addon-mdx-gfm": "^8.2.9",
|
||||
"@storybook/addon-mdx-gfm": "^8.4.4",
|
||||
"@storybook/addon-measure": "^8.4.4",
|
||||
"@storybook/addon-outline": "^8.4.4",
|
||||
"@storybook/addon-svelte-csf": "^4.1.7",
|
||||
"@storybook/addon-toolbars": "^8.4.4",
|
||||
"@storybook/addon-viewport": "^8.4.4",
|
||||
"@storybook/blocks": "^8.2.9",
|
||||
"@storybook/builder-vite": "^8.2.9",
|
||||
"@storybook/components": "^8.2.9",
|
||||
"@storybook/manager-api": "^8.2.9",
|
||||
"@storybook/blocks": "^8.4.4",
|
||||
"@storybook/builder-vite": "^8.4.4",
|
||||
"@storybook/components": "^8.4.4",
|
||||
"@storybook/manager-api": "^8.4.4",
|
||||
"@storybook/mdx2-csf": "^1.1.0",
|
||||
"@storybook/svelte": "^8.2.9",
|
||||
"@storybook/svelte-vite": "^8.2.9",
|
||||
"@storybook/test": "^8.2.9",
|
||||
"@storybook/theming": "^8.2.9",
|
||||
"@storybook/svelte": "^8.4.4",
|
||||
"@storybook/svelte-vite": "^8.4.4",
|
||||
"@storybook/test": "^8.4.4",
|
||||
"@storybook/theming": "^8.4.4",
|
||||
"@sveltejs/package": "^2.3.4",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
||||
"@types/css": "^0.0.37",
|
||||
|
|
@ -74,6 +73,7 @@
|
|||
"@types/prompts": "^2.4.9",
|
||||
"@types/proper-url-join": "^2.1.1",
|
||||
"@types/pym.js": "^1.3.2",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-syntax-highlighter": "^15.5.7",
|
||||
"change-case": "^4.1.2",
|
||||
"chromatic": "^7.1.0",
|
||||
|
|
@ -91,6 +91,7 @@
|
|||
"postcss": "^8.4.41",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-svelte": "^3.2.6",
|
||||
"prism-themes": "^1.9.0",
|
||||
"prompts": "^2.4.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"publint": "^0.2.10",
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
"remark-gfm": "^4.0.0",
|
||||
"rimraf": "^5.0.0",
|
||||
"sass": "^1.77.8",
|
||||
"storybook": "^8.2.9",
|
||||
"storybook": "^8.4.4",
|
||||
"svelte": "^4.2.18",
|
||||
"svelte-loader": "^3.2.3",
|
||||
"tiny-glob": "^0.2.9",
|
||||
|
|
|
|||
|
|
@ -73,10 +73,7 @@ importers:
|
|||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-docs':
|
||||
specifier: ^8.2.9
|
||||
version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-essentials':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-interactions':
|
||||
specifier: ^8.4.4
|
||||
|
|
@ -85,7 +82,7 @@ importers:
|
|||
specifier: ^8.4.4
|
||||
version: 8.4.4(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-mdx-gfm':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-measure':
|
||||
specifier: ^8.4.4
|
||||
|
|
@ -103,31 +100,31 @@ importers:
|
|||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/blocks':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/builder-vite':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
|
||||
'@storybook/components':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/manager-api':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/mdx2-csf':
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
'@storybook/svelte':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19)
|
||||
'@storybook/svelte-vite':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
|
||||
'@storybook/test':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/theming':
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@sveltejs/package':
|
||||
specifier: ^2.3.4
|
||||
|
|
@ -168,6 +165,9 @@ importers:
|
|||
'@types/pym.js':
|
||||
specifier: ^1.3.2
|
||||
version: 1.3.2
|
||||
'@types/react':
|
||||
specifier: ^18.3.12
|
||||
version: 18.3.12
|
||||
'@types/react-syntax-highlighter':
|
||||
specifier: ^15.5.7
|
||||
version: 15.5.13
|
||||
|
|
@ -219,6 +219,9 @@ importers:
|
|||
prettier-plugin-svelte:
|
||||
specifier: ^3.2.6
|
||||
version: 3.2.8(prettier@3.3.3)(svelte@4.2.19)
|
||||
prism-themes:
|
||||
specifier: ^1.9.0
|
||||
version: 1.9.0
|
||||
prompts:
|
||||
specifier: ^2.4.2
|
||||
version: 2.4.2
|
||||
|
|
@ -250,7 +253,7 @@ importers:
|
|||
specifier: ^1.77.8
|
||||
version: 1.81.0
|
||||
storybook:
|
||||
specifier: ^8.2.9
|
||||
specifier: ^8.4.4
|
||||
version: 8.4.4(prettier@3.3.3)
|
||||
svelte:
|
||||
specifier: ^4.2.18
|
||||
|
|
@ -1008,16 +1011,6 @@ packages:
|
|||
peerDependencies:
|
||||
storybook: ^8.4.4
|
||||
|
||||
'@storybook/addon-essentials@8.4.4':
|
||||
resolution: {integrity: sha512-0ObUQ98zZkeWqP2k3Un5jny3WxT3THgUKZUGD+mR8eq6CuTmJ3bUXWzDHreuDxQwgr8s5f04XD8IcRvjZ9IRgA==}
|
||||
peerDependencies:
|
||||
storybook: ^8.4.4
|
||||
|
||||
'@storybook/addon-highlight@8.4.4':
|
||||
resolution: {integrity: sha512-k7EUxiMe8RCasmgfa6ZKx7UG6kU9RooTYGwqY5TG5xAQOzDwKn4qom+OYkT/9/6lORhJrUe2GgQLCrq/WGpS1A==}
|
||||
peerDependencies:
|
||||
storybook: ^8.4.4
|
||||
|
||||
'@storybook/addon-interactions@8.4.4':
|
||||
resolution: {integrity: sha512-izqcc6tY0BiKW7DYrEnoXUEH9FYDPWNfQnqqE0nVBv3BS2DoNmm8M9SB8fZx7pPfw53cMJBGt3vrlY0Wtxy1+Q==}
|
||||
peerDependencies:
|
||||
|
|
@ -3515,6 +3508,9 @@ packages:
|
|||
resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
prism-themes@1.9.0:
|
||||
resolution: {integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==}
|
||||
|
||||
prismjs@1.27.0:
|
||||
resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -5104,27 +5100,6 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
|
||||
'@storybook/addon-essentials@8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))':
|
||||
dependencies:
|
||||
'@storybook/addon-actions': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-backgrounds': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-controls': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-docs': 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-highlight': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-measure': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-outline': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-toolbars': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
'@storybook/addon-viewport': 8.4.4(storybook@8.4.4(prettier@3.3.3))
|
||||
storybook: 8.4.4(prettier@3.3.3)
|
||||
ts-dedent: 2.2.0
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
|
||||
'@storybook/addon-highlight@8.4.4(storybook@8.4.4(prettier@3.3.3))':
|
||||
dependencies:
|
||||
'@storybook/global': 5.0.0
|
||||
storybook: 8.4.4(prettier@3.3.3)
|
||||
|
||||
'@storybook/addon-interactions@8.4.4(storybook@8.4.4(prettier@3.3.3))':
|
||||
dependencies:
|
||||
'@storybook/global': 5.0.0
|
||||
|
|
@ -6602,7 +6577,7 @@ snapshots:
|
|||
eslint-scope: 7.2.2
|
||||
eslint-utils: 3.0.0(eslint@8.4.1)
|
||||
eslint-visitor-keys: 3.4.3
|
||||
espree: 9.2.0
|
||||
espree: 9.6.1
|
||||
esquery: 1.6.0
|
||||
esutils: 2.0.3
|
||||
fast-deep-equal: 3.1.3
|
||||
|
|
@ -8326,6 +8301,8 @@ snapshots:
|
|||
dependencies:
|
||||
parse-ms: 4.0.0
|
||||
|
||||
prism-themes@1.9.0: {}
|
||||
|
||||
prismjs@1.27.0: {}
|
||||
|
||||
prismjs@1.29.0: {}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
Reuters Graphics' official logo.
|
||||
Reuters Graphics team logo.
|
||||
|
||||
> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component.
|
||||
> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
The official home of the Reuters logo.
|
||||
The official Reuters logo.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
|
|||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
||||
// @ts-ignore scss
|
||||
import classes from './styles.module.scss';
|
||||
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
|
||||
import { prismNord } from '../syntax/nord';
|
||||
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
|
||||
|
||||
SyntaxHighlighter.registerLanguage('scss', scss);
|
||||
|
|
@ -44,7 +44,7 @@ const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
|
|||
<p>Included</p>
|
||||
</div>
|
||||
: <div className={classes.importsnippet}>
|
||||
<SyntaxHighlighter language="scss" style={prism}>
|
||||
<SyntaxHighlighter language="scss" style={prismNord}>
|
||||
{`// global.scss \n@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`}
|
||||
</SyntaxHighlighter>
|
||||
<Copyable partial={partial} />
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@ $header: #5e81ac;
|
|||
.importsnippet :global {
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
|
|
@ -146,6 +147,7 @@ $header: #5e81ac;
|
|||
}
|
||||
|
||||
pre {
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
|
||||
margin-top: 0 !important;
|
||||
border-radius: 4px;
|
||||
border: 1px solid hsla(203, 50%, 30%, 0.15);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import VariableTable from '../CSSVariables/VariableTable';
|
|||
import classes from './styles.module.scss';
|
||||
import darkTheme from '../../../../components/Theme/themes/dark';
|
||||
import lightTheme from '../../../../components/Theme/themes/light';
|
||||
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
|
||||
import { prismNord } from '../../syntax/nord';
|
||||
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
|
||||
import svelteSyntax from '../../../../../.storybook/svelte-highlighting';
|
||||
import { updatedDiff } from 'deep-object-diff';
|
||||
|
|
@ -26,7 +26,7 @@ const NewTheme = ({ theme, themeName }) => {
|
|||
Use the code below to adapt the <code>Theme</code> component for your
|
||||
new design:
|
||||
</p>
|
||||
<SyntaxHighlighter language="svelte" style={prism}>
|
||||
<SyntaxHighlighter language="svelte" style={prismNord}>
|
||||
{`<Theme
|
||||
base="${themeName}"
|
||||
theme={${JSON.stringify(updates, null, 2).replaceAll('"', "'")}}
|
||||
|
|
@ -38,7 +38,7 @@ const NewTheme = ({ theme, themeName }) => {
|
|||
{bgChanged && (
|
||||
<SyntaxHighlighter
|
||||
language="scss"
|
||||
style={prism}
|
||||
style={prismNord}
|
||||
customStyle={{ maxHeight: '140px' }}
|
||||
>
|
||||
{`// global.scss
|
||||
|
|
|
|||
|
|
@ -6,4 +6,10 @@
|
|||
line-height: 18px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
|
||||
border: 0 !important;
|
||||
padding: 1em 1.5em !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { parameters } from '../utils/docsPage.js';
|
|||
|
||||
import WellImg from './article-well.jpg';
|
||||
|
||||
<Meta title="Layout/Intro" parameters={{ ...parameters }} />
|
||||
<Meta title="Components/Page layout/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
# Layout
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { parameters } from '../utils/docsPage.js';
|
|||
|
||||
import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
|
||||
|
||||
<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
|
||||
<Meta title="Components/Theming/Theme builder" parameters={{ ...parameters }} />
|
||||
|
||||
# Theme builder
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
|
||||
<Meta title="Components/Theming/CSS variables" parameters={{ ...parameters }} />
|
||||
|
||||
# CSS variables
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue