123 lines
8.4 KiB
JavaScript
123 lines
8.4 KiB
JavaScript
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};
|