44 lines
1.3 KiB
Text
44 lines
1.3 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
|
|
import { extractCssColourVariables } from '../../utils/parseCss';
|
|
|
|
{/* @ts-ignore */}
|
|
import greyScheme from '$lib/scss/colours/thematic/\_grey.scss?raw';
|
|
|
|
{/* @ts-ignore */}
|
|
import trScheme from '$lib/scss/colours/thematic/\_tr.scss?raw';
|
|
|
|
{/* @ts-ignore */}
|
|
import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
|
|
|
|
<Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# Colours
|
|
|
|
Several colour schemes are accessible through CSS variables in the tables below.
|
|
|
|
<CopyColourTable
|
|
title="Grey"
|
|
header={['Colour', 'CSS variable']}
|
|
body={extractCssColourVariables(greyScheme)}
|
|
included
|
|
partial="thematic/_grey.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Thomson Reuters"
|
|
header={['Colour', 'CSS variable']}
|
|
body={extractCssColourVariables(trScheme)}
|
|
included
|
|
partial="thematic/_tr.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Nord"
|
|
header={['Colour', 'CSS variable']}
|
|
body={extractCssColourVariables(nordScheme)}
|
|
partial="thematic/_nord.scss"
|
|
/>
|