import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as i,C as t}from"./index-Z-6k0Xrj.js";import{T as c,D as a,C as l,a as h,B as d,I as m}from"./Theme.stories-BIad30u9.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Theme-BVfrVjCx.js";import"./style-DvJ3IcV1.js";import"./flatten-CQmJgKju.js";import"./Article-DL33WKIV.js";import"./actions-BHcvdwVC.js";import"./attributes-Cg6aLqN3.js";import"./Headline-C-tkYFZ6.js";import"./Block-D3Ui8rd-.js";import"./Byline-BhU2Zjcl.js";import"./each-CVpBMMjG.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./Markdown-DUxFwijc.js";import"./BodyText-CXnxLnBi.js";import"./GraphicBlock-uLJTqaY1.js";import"./PaddingReset-_TGvg1_B.js";import"./SiteHeader-D-9D6sLa.js";import"./index-client-BAw8T8-V.js";import"./ReutersLogo-B33L6wtg.js";import"./window-DXjFTZv5.js";import"./index-TQx7jkZs.js";import"./time-7uMnD1vs.js";import"./advancedFormat-DF-l3-BJ.js";import"./dayjs.min-CfWDS3UC.js";function s(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:c}),`
`,e.jsx(n.h1,{id:"theme",children:"Theme"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Theme"})," component wraps your page content and uses ",e.jsx(n.a,{href:"../?path=/docs/scss-css-variables--page",children:"CSS variables"})," to set major colour and typography styles for your page. All the components from this library that are added to your page will use the CSS variables set by ",e.jsx(n.code,{children:"Theme"}),"."]}),`
`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.a,{href:"?path=/docs/components-theming-theme-builder--docs",children:"theme builder"})," to test custom themes."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Theme } from '@reuters-graphics/graphics-components';
<\/script>

<Theme base="light">
  <!-- Page content, now styled according to your theme! -->
</Theme>
`})}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:["In the graphics kit, the ",e.jsx(n.code,{children:"Theme"})," is set in both ",e.jsx(n.code,{children:"pages/+page.svelte"})," and in ",e.jsx(n.code,{children:"App.svelte"}),"."]}),`
`]}),`
`,e.jsx(t,{of:a}),`
`,e.jsx(n.h2,{id:"custom-theme",children:"Custom theme"}),`
`,e.jsx(n.p,{children:"You can customise your page's theme in two ways:"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsxs(n.li,{children:["Choose the ",e.jsx(n.code,{children:"base"})," theme, either ",e.jsx(n.code,{children:"light"})," or ",e.jsx(n.code,{children:"dark"})]}),`
`,e.jsxs(n.li,{children:["Pass a custom theme object to the ",e.jsx(n.code,{children:"theme"})," prop, which will override styles in the ",e.jsx(n.code,{children:"base"})," theme."]}),`
`]}),`
`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.a,{href:"?path=/docs/components-theming-theme-builder--docs",children:"theme builder"})," to see what properties you can customise."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Theme
  base="dark"
  theme={{
    colour: { accent: 'var(--tr-light-orange)' },
    font: { family: { hed: '"Newsreader Text", serif' } },
  }}
>
  <!-- Page content -->
</Theme>
`})}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," The ",e.jsx(n.code,{children:"Theme"})," component only styles child components or elements, so if you're changing the background colour of your page, make sure to also set the ",e.jsx(n.code,{children:"background-color"})," on your ",e.jsx(n.code,{children:"body"})," element in global SCSS."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
body {
  background-color: #2e3440;
}
`})}),`
`]}),`
`,e.jsx(t,{of:l}),`
`,e.jsx(n.h2,{id:"custom-font",children:"Custom font"}),`
`,e.jsxs(n.p,{children:["To use typefaces other than the defaults provided by the graphics kit, download the font files from services such as ",e.jsx(n.a,{href:"https://fonts.google.com/",rel:"nofollow",children:"Google Fonts"})," or ",e.jsx(n.a,{href:"https://fonts.adobe.com/",rel:"nofollow",children:"Adobe Typekit"}),". Make a folder called ",e.jsx(n.code,{children:"fonts"})," inside ",e.jsx(n.code,{children:"statics/"})," and put the font file -- for example, ",e.jsx(n.code,{children:"IndieFlower-Regular.ttf"})," downloaded from ",e.jsx(n.a,{href:"https://fonts.google.com/share?selection.family=Indie+Flower",rel:"nofollow",children:"Google Fonts"})," -- in ",e.jsx(n.code,{children:"statics/fonts/"}),"."]}),`
`,e.jsxs(n.p,{children:["Then, declare it as a ",e.jsx(n.code,{children:"@font-face"})," in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`/* global.scss in the graphics kit */
@font-face {
  // If you're unsure of the font-family name,
  // click on "Get embed code" on the Google font page and check the CSS class.
  font-family: 'Indie Flower';

  // Path to the font file. Change format depending on the font file type.
  src: url('/fonts/IndieFlower-Regular.ttf') format('truetype');
  font-weight: normal; // Optional
  font-style: normal; // Optional
}
`})}),`
`,e.jsxs(n.p,{children:["Finally, pass the font to the appropriate text type in ",e.jsx(n.code,{children:"Theme"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Theme
  base="light"
  theme={{
    font: {
      family: {
        hed: 'IndieFlower', // Set header text font to \`IndieFlower\`
        body: 'IndieFlower', // Set body text font to \`IndieFlower\`
        // etc...
      },
    },
  }}
>
  <!-- Page content -->
</Theme>
`})}),`
`,e.jsx(t,{of:h}),`
`,e.jsx(n.h2,{id:"background-patterns",children:"Background patterns"}),`
`,e.jsxs(n.p,{children:["To use a background pattern or image, set the background colour property in ",e.jsx(n.code,{children:"Theme"})," to ",e.jsx(n.code,{children:"transparent"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Theme
  base="dark"
  theme={{
    colour: { background: 'transparent' },
  }}
>
  <!-- Page content -->
</Theme>
`})}),`
`,e.jsxs(n.p,{children:["Then in ",e.jsx(n.code,{children:"global.scss"}),", set your image, which should be stored in ",e.jsx(n.code,{children:"statics/images/"}),", as ",e.jsx(n.code,{children:"background-image"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`/* global.scss */
body {
  background-image: url('/images/my-pattern.png');
}
`})}),`
`,e.jsx(n.p,{children:"You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`/* global.scss
Main nav container */
.nav-container .inner {
  background: darkblue !important;
  /* Dropdown menu */
  .dropdown {
    background: darkblue !important;
  }
}
/* Mobile nav overlay */
header + .overlay {
  background: darkblue !important;
}
`})}),`
`,e.jsx(t,{of:d}),`
`,e.jsx(n.h2,{id:"inheritance",children:"Inheritance"}),`
`,e.jsxs(n.p,{children:["Styles that use ",e.jsx(n.code,{children:"Theme"}),"'s CSS variables will always use those set by the nearest parent ",e.jsx(n.code,{children:"Theme"}),". That lets you change the theme for parts of your page by simply wrapping that bit in a new ",e.jsx(n.code,{children:"Theme"})," with different styles."]}),`
`,e.jsx(n.p,{children:"The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Theme } from '@reuters-graphics/graphics-components';
<\/script>

<Theme>
  <!-- Page content styled with the default light theme. -->
  <Theme theme={{ colour: { background: 'lightgrey' } }}>
    <!-- A darker background for this section. -->
  </Theme>
  <!-- Back to normal here... -->
</Theme>
`})}),`
`,e.jsx(t,{of:m})]})}function Z(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(s,{...o})}):s(o)}export{Z as default};