23 lines
2.7 KiB
JavaScript
23 lines
2.7 KiB
JavaScript
import{M as m}from"./chunk-S4VUQJ4A-5db79c20.js";import{p as l,j as e}from"./jsx-runtime-6e781033.js";import{C as n}from"./Table-274a9189.js";import{s as i}from"./parseCss-a907c194.js";import{u as c}from"./index-aa3aef55.js";import"./iframe-4e4aec55.js";import"../sb-preview/runtime.js";import"./index-a0d66435.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-93b871ff.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const d=`// 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);
|
|
`,p=`// 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 h(t={}){const{wrapper:s}=Object.assign({},c(),t.components);return s?e.jsx(s,{...t,children:e.jsx(a,{})}):a();function a(){const r=Object.assign({p:"p",img:"img",h1:"h1",code:"code"},c(),t.components);return e.jsxs(e.Fragment,{children:[`
|
|
`,`
|
|
`,e.jsx(m,{title:"Styles/Tokens/SCSS Variables",parameters:{...l}}),`
|
|
`,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(n,{title:"Theme",header:["Variable","Properties"],body:i(d),copyable:[!0,!1]}),`
|
|
`,e.jsx(n,{title:"Block",header:["Variable","Properties"],body:i(p),copyable:[!0,!1]})]})}}const u=()=>{throw new Error("Docs-only story")};u.parameters={docsOnly:!0};const o={title:"Styles/Tokens/SCSS Variables",parameters:{...l},tags:["stories-mdx"],includeStories:["__page"]};o.parameters=o.parameters||{};o.parameters.docs={...o.parameters.docs||{},page:h};const V=["__page"];export{V as __namedExportsOrder,u as __page,o as default};
|
|
//# sourceMappingURL=main.stories-28571dcd.js.map
|