import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as t}from"./index-Z-6k0Xrj.js";import{p as a}from"./docsPage-CT2vyZOj.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function n(r){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Styles/Colours/Intro",parameters:{...a}}),`
`,e.jsx(o.h1,{id:"working-with-colours",children:"Working with colours"}),`
`,e.jsxs(o.p,{children:["Colour palettes are provided as ",e.jsx(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/--*",rel:"nofollow",children:"CSS variables"})," you can use in your own styles. Some are included by default, others can be imported in your global stylesheet and then used."]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-scss",children:`/* global.scss */
@use '@reuters-graphics/graphics-components/scss/colours/primary/blue';

p {
  color: var(--grey-400); // Included by default
}

p.blue-bg {
  color: white;
  background-colour: var(--blue-600); // Imported palette
}
`})})]})}function g(r={}){const{wrapper:o}={...s(),...r.components};return o?e.jsx(o,{...r,children:e.jsx(n,{...r})}):n(r)}export{g as default};