import{M as c}from"./chunk-PCJTTTQV-da3c586f.js";import{p as l,j as e}from"./jsx-runtime-539b76a3.js";import{u as a}from"./index-297ebefe.js";import"./iframe-6f6d727c.js";import"../sb-preview/runtime.js";import"./extends-b40c5bac.js";import"./_commonjsHelpers-725317a4.js";import"./index-d475d2ea.js";import"./index-d37d4223.js";import"./index-1a79a776.js";import"./index-356e4a49.js";function i(n={}){const{wrapper:s}=Object.assign({},a(),n.components);return s?e.jsx(s,{...n,children:e.jsx(t,{})}):t();function t(){const o=Object.assign({p:"p",img:"img",h1:"h1",a:"a",code:"code",em:"em",blockquote:"blockquote",strong:"strong",pre:"pre",h2:"h2",h3:"h3"},a(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"SCSS/CSS variables",parameters:{...l}}),`
`,e.jsx(o.p,{children:e.jsx(o.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
`,e.jsx(o.h1,{id:"css-variables",children:"CSS variables"}),`
`,e.jsxs(o.p,{children:["Several ",e.jsx(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"nofollow noopener noreferrer",children:"CSS variables"})," are provided by the ",e.jsx(o.a,{href:"?path=/docs/components-theme--default",children:e.jsx(o.code,{children:"Theme"})})," component. All other components in this library use these variables for styling basic colours and typography. You can (and probably ",e.jsx(o.em,{children:"should"}),") use them in you own code, too."]}),`
`,e.jsxs(o.blockquote,{children:[`
`,e.jsxs(o.p,{children:["In the future, client's may be allowed to override our CSS variables to match their own house styles. So when using CSS variables, it's a good idea to set a ",e.jsx(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values",target:"_blank",rel:"nofollow noopener noreferrer",children:"fallback value"}),", in case a client misconfigures a variable override."]}),`
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"Note:"})," CSS variables do not currently affect ",e.jsx(o.a,{href:"https://github.com/reuters-graphics/ai2svelte/",target:"_blank",rel:"nofollow noopener noreferrer",children:"ai2svelte"})," graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics."]}),`
`]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-html",children:`<p>My custom text</p>

<style lang="scss">
  p {
    color: var(--theme-colour-text-primary, #333);
    font-family: var(--theme-font-family-body, Knowledge);
  }
</style>
`})}),`
`,e.jsx(o.h2,{id:"variables",children:"Variables"}),`
`,e.jsx(o.h3,{id:"colours",children:"Colours"}),`
`,e.jsxs(o.p,{children:[`| CSS variable                    | Role                            |
| ------------------------------- | ------------------------------- |
| `,e.jsx(o.code,{children:"--theme-colour-background"}),`     | Background colour               |
| `,e.jsx(o.code,{children:"--theme-colour-text-primary"}),`   | Primary text colour body text   |
| `,e.jsx(o.code,{children:"--theme-colour-text-secondary"}),` | Secondary text colour for notes |
| `,e.jsx(o.code,{children:"--theme-colour-accent"}),`         | A single accent colour          |
| `,e.jsx(o.code,{children:"--theme-colour-brand-logo"}),`     | Reuters logo kinesis colour     |
| `,e.jsx(o.code,{children:"--theme-colour-brand-rules"}),`    | Rules in header and footer      |
| `,e.jsx(o.code,{children:"--theme-colour-brand-shadow"}),"   | Box shadow on header            |"]}),`
`,e.jsx(o.h3,{id:"fonts",children:"Fonts"}),`
`,e.jsxs(o.p,{children:[`| CSS variable                     | Role                            |
| -------------------------------- | ------------------------------- |
| `,e.jsx(o.code,{children:"--theme-font-size-base"}),`         | Base font size                  |
| `,e.jsx(o.code,{children:"--theme-font-family-serif"}),`      | Base serif font family          |
| `,e.jsx(o.code,{children:"--theme-font-family-sans-serif"}),` | Base sans-serif font family     |
| `,e.jsx(o.code,{children:"--theme-font-family-monospace"}),`  | Base monospace font family      |
| `,e.jsx(o.code,{children:"--theme-font-family-hed"}),"        | Headline (",e.jsx(o.code,{children:"h1"}),`) font family     |
| `,e.jsx(o.code,{children:"--theme-font-family-subhed"}),"     | Subhead (",e.jsx(o.code,{children:"h2"}),"-",e.jsx(o.code,{children:"h6"}),`) font family |
| `,e.jsx(o.code,{children:"--theme-font-family-body"}),`       | Body text font family           |
| `,e.jsx(o.code,{children:"--theme-font-family-note"}),"       | Note font family                |"]})]})}}const d=()=>{throw new Error("Docs-only story")};d.parameters={docsOnly:!0};const r={title:"SCSS/CSS variables",parameters:{...l},tags:["stories-mdx"],includeStories:["__page"]};r.parameters=r.parameters||{};r.parameters.docs={...r.parameters.docs||{},page:i};const v=["__page"];export{v as __namedExportsOrder,d as __page,r as default};
//# sourceMappingURL=css-variables.stories-af76efdb.js.map