165 lines
4.5 KiB
Text
165 lines
4.5 KiB
Text
import { Meta } from '@storybook/blocks';
|
|
import { parameters } from '../../utils/docsPage.js';
|
|
import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
|
|
import { extractCssColourVariables } from '../../utils/parseCss';
|
|
import greyScheme from '../../../scss/colours/primary/_grey.scss?raw';
|
|
import slateScheme from '../../../scss/colours/primary/_slate.scss?raw';
|
|
import zincScheme from '../../../scss/colours/primary/_zinc.scss?raw';
|
|
import neutralScheme from '../../../scss/colours/primary/_neutral.scss?raw';
|
|
import stoneScheme from '../../../scss/colours/primary/_stone.scss?raw';
|
|
import redScheme from '../../../scss/colours/primary/_red.scss?raw';
|
|
import orangeScheme from '../../../scss/colours/primary/_orange.scss?raw';
|
|
import amberScheme from '../../../scss/colours/primary/_amber.scss?raw';
|
|
import yellowScheme from '../../../scss/colours/primary/_yellow.scss?raw';
|
|
import limeScheme from '../../../scss/colours/primary/_lime.scss?raw';
|
|
import greenScheme from '../../../scss/colours/primary/_green.scss?raw';
|
|
import emeraldScheme from '../../../scss/colours/primary/_emerald.scss?raw';
|
|
import tealScheme from '../../../scss/colours/primary/_teal.scss?raw';
|
|
import cyanScheme from '../../../scss/colours/primary/_cyan.scss?raw';
|
|
import skyScheme from '../../../scss/colours/primary/_sky.scss?raw';
|
|
import blueScheme from '../../../scss/colours/primary/_blue.scss?raw';
|
|
import indigoScheme from '../../../scss/colours/primary/_indigo.scss?raw';
|
|
import violetScheme from '../../../scss/colours/primary/_violet.scss?raw';
|
|
import purpleScheme from '../../../scss/colours/primary/_purple.scss?raw';
|
|
import fuchsiaScheme from '../../../scss/colours/primary/_fuchsia.scss?raw';
|
|
import pinkScheme from '../../../scss/colours/primary/_pink.scss?raw';
|
|
import roseScheme from '../../../scss/colours/primary/_rose.scss?raw';
|
|
|
|
<Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# Primary colours
|
|
|
|
<CopyColourTable
|
|
title="Grey"
|
|
body={extractCssColourVariables(greyScheme)}
|
|
included
|
|
partial="primary/_grey.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Slate"
|
|
body={extractCssColourVariables(slateScheme)}
|
|
partial="primary/_slate.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Zinc"
|
|
body={extractCssColourVariables(zincScheme)}
|
|
partial="primary/_zinc.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Neutral"
|
|
body={extractCssColourVariables(neutralScheme)}
|
|
partial="primary/_neutral.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Stone"
|
|
body={extractCssColourVariables(stoneScheme)}
|
|
partial="primary/_stone.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Red"
|
|
body={extractCssColourVariables(redScheme)}
|
|
partial="primary/_red.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Orange"
|
|
body={extractCssColourVariables(orangeScheme)}
|
|
partial="primary/_orange.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Amber"
|
|
body={extractCssColourVariables(amberScheme)}
|
|
partial="primary/_amber.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Yellow"
|
|
body={extractCssColourVariables(yellowScheme)}
|
|
partial="primary/_yellow.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Lime"
|
|
body={extractCssColourVariables(limeScheme)}
|
|
partial="primary/_lime.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Green"
|
|
body={extractCssColourVariables(greenScheme)}
|
|
partial="primary/_green.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Emerald"
|
|
body={extractCssColourVariables(emeraldScheme)}
|
|
partial="primary/_emerald.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Teal"
|
|
body={extractCssColourVariables(tealScheme)}
|
|
partial="primary/_teal.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Cyan"
|
|
body={extractCssColourVariables(cyanScheme)}
|
|
partial="primary/_cyan.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Sky"
|
|
body={extractCssColourVariables(skyScheme)}
|
|
partial="primary/_sky.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Blue"
|
|
body={extractCssColourVariables(blueScheme)}
|
|
partial="primary/_blue.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Indigo"
|
|
body={extractCssColourVariables(indigoScheme)}
|
|
partial="primary/_indigo.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Violet"
|
|
body={extractCssColourVariables(violetScheme)}
|
|
partial="primary/_violet.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Purple"
|
|
body={extractCssColourVariables(purpleScheme)}
|
|
partial="primary/_purple.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Fuchsia"
|
|
body={extractCssColourVariables(fuchsiaScheme)}
|
|
partial="primary/_fuchsia.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Pink"
|
|
body={extractCssColourVariables(pinkScheme)}
|
|
partial="primary/_pink.scss"
|
|
/>
|
|
|
|
<CopyColourTable
|
|
title="Rose"
|
|
body={extractCssColourVariables(roseScheme)}
|
|
partial="primary/_rose.scss"
|
|
/>
|