19 lines
2 KiB
JavaScript
19 lines
2 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as l}from"./index-Z-6k0Xrj.js";import{p as c}from"./docsPage-CT2vyZOj.js";import{C as t}from"./Table-F-lkejrq.js";import{s as a}from"./parseCss-DFN8Q8fx.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./index-D7HDsfES.js";const i=`// 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);
|
|
`,m=`// 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={code:"code",h1:"h1",p:"p",...s(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(l,{title:"Styles/Tokens/SCSS Variables",parameters:{...c}}),`
|
|
`,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(t,{title:"Theme",header:["Variable","Properties"],body:a(i),copyable:[!0,!1]}),`
|
|
`,e.jsx(t,{title:"Block",header:["Variable","Properties"],body:a(m),copyable:[!0,!1]})]})}function C(o={}){const{wrapper:r}={...s(),...o.components};return r?e.jsx(r,{...o,children:e.jsx(n,{...o})}):n(o)}export{C as default};
|