23 lines
2.7 KiB
JavaScript
23 lines
2.7 KiB
JavaScript
import{M as l}from"./chunk-S4VUQJ4A-6012e64b.js";import{p as i,j as e}from"./jsx-runtime-bcef64ff.js";import{C as a}from"./Table-5b2980cc.js";import{s}from"./parseCss-afe2fffb.js";import{u as c}from"./index-f12770ea.js";import"./iframe-8b410132.js";import"../sb-preview/runtime.js";import"./index-20ac22d7.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-1d070ae9.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const m=`// SCSS mirrors for theme CSS variables
|
|
$theme-colour-background: var(--theme-colour-background);
|
|
$theme-colour-text-primary: var(--theme-colour-text-primary);
|
|
$theme-colour-text-secondary: var(--theme-colour-text-secondary);
|
|
$theme-colour-accent: var(--theme-colour-accent);
|
|
$theme-colour-brand-logo: var(--theme-colour-brand-logo);
|
|
$theme-colour-brand-rules: var(--theme-colour-brand-rules);
|
|
$theme-colour-brand-shadow: var(--theme-colour-brand-shadow);
|
|
`,d=`// SCSS mirrors for default block widths
|
|
$column-width-narrower: 330px !default;
|
|
$column-width-narrow: 510px !default;
|
|
$column-width-normal: 660px !default;
|
|
$column-width-wide: 930px !default;
|
|
$column-width-wider: 1200px !default;
|
|
`;function n(o){const r=Object.assign({p:"p",img:"img",h1:"h1",code:"code"},c(),o.components);return e.jsxs(e.Fragment,{children:[`
|
|
`,`
|
|
`,e.jsx(l,{title:"Styles/Tokens/SCSS Variables",parameters:{...i}}),`
|
|
`,e.jsx(r.p,{children:e.jsx(r.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,e.jsx(r.h1,{id:"token-variables",children:"Token variables"}),`
|
|
`,e.jsxs(r.p,{children:["These are SCSS mirrors of some of the default CSS variables used in the ",e.jsx(r.code,{children:"Theme"}),". Use them in places where CSS variables cannot be used. e.g. You can write ",e.jsx(r.code,{children:"media-queries"})," to target the block widths using the ",e.jsx(r.code,{children:"block"})," vars, which is not possible using CSS variables."]}),`
|
|
`,e.jsx(a,{title:"Theme",header:["Variable","Properties"],body:s(m),copyable:[!0,!1]}),`
|
|
`,e.jsx(a,{title:"Block",header:["Variable","Properties"],body:s(d),copyable:[!0,!1]})]})}function h(o={}){const{wrapper:r}=Object.assign({},c(),o.components);return r?e.jsx(r,{...o,children:e.jsx(n,{...o})}):n(o)}const p=()=>{throw new Error("Docs-only story")};p.parameters={docsOnly:!0};const t={title:"Styles/Tokens/SCSS Variables",parameters:{...i},tags:["stories-mdx"],includeStories:["__page"]};t.parameters=t.parameters||{};t.parameters.docs={...t.parameters.docs||{},page:h};const M=["__page"];export{M as __namedExportsOrder,p as __page,t as default};
|
|
//# sourceMappingURL=main.stories-8746a02c.js.map
|