40 lines
5 KiB
JavaScript
40 lines
5 KiB
JavaScript
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
|