23 lines
5.9 KiB
JavaScript
23 lines
5.9 KiB
JavaScript
import{M as c}from"./chunk-PCJTTTQV-8ea8b36c.js";import{p as d,j as e}from"./jsx-runtime-539b76a3.js";import{u as l}from"./index-297ebefe.js";import"./iframe-647e33a7.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(t={}){const{wrapper:o}=Object.assign({},l(),t.components);return o?e.jsx(o,{...t,children:e.jsx(n,{})}):n();function n(){const r=Object.assign({p:"p",img:"img",h1:"h1",a:"a",code:"code",em:"em",blockquote:"blockquote",strong:"strong",pre:"pre",h2:"h2",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},l(),t.components);return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"SCSS/CSS variables",parameters:{...d}}),`
|
|
`,e.jsx(r.p,{children:e.jsx(r.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,e.jsx(r.h1,{id:"css-variables",children:"CSS variables"}),`
|
|
`,e.jsxs(r.p,{children:["Several ",e.jsx(r.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(r.a,{href:"?path=/docs/components-theme--default",children:e.jsx(r.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(r.em,{children:"should"}),") use them in you own code, too."]}),`
|
|
`,e.jsxs(r.blockquote,{children:[`
|
|
`,e.jsxs(r.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(r.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(r.p,{children:[e.jsx(r.strong,{children:"Note:"})," CSS variables do not currently affect ",e.jsx(r.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(r.pre,{children:e.jsx(r.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(r.h2,{id:"variables",children:"Variables"}),`
|
|
`,e.jsx(r.h3,{id:"colours",children:"Colours"}),`
|
|
`,e.jsxs(r.table,{children:[e.jsx(r.thead,{children:e.jsxs(r.tr,{children:[e.jsx(r.th,{children:"CSS variable"}),e.jsx(r.th,{children:"Role"})]})}),e.jsxs(r.tbody,{children:[e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-background"})}),e.jsx(r.td,{children:"Background colour"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-text-primary"})}),e.jsx(r.td,{children:"Primary text colour body text"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-text-secondary"})}),e.jsx(r.td,{children:"Secondary text colour for notes"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-accent"})}),e.jsx(r.td,{children:"A single accent colour"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-brand-logo"})}),e.jsx(r.td,{children:"Reuters logo kinesis colour"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-brand-rules"})}),e.jsx(r.td,{children:"Rules in header and footer"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-colour-brand-shadow"})}),e.jsx(r.td,{children:"Box shadow on header"})]})]})]}),`
|
|
`,e.jsx(r.h3,{id:"fonts",children:"Fonts"}),`
|
|
`,e.jsxs(r.table,{children:[e.jsx(r.thead,{children:e.jsxs(r.tr,{children:[e.jsx(r.th,{children:"CSS variable"}),e.jsx(r.th,{children:"Role"})]})}),e.jsxs(r.tbody,{children:[e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-size-base"})}),e.jsx(r.td,{children:"Base font size"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-serif"})}),e.jsx(r.td,{children:"Base serif font family"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-sans-serif"})}),e.jsx(r.td,{children:"Base sans-serif font family"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-monospace"})}),e.jsx(r.td,{children:"Base monospace font family"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-hed"})}),e.jsxs(r.td,{children:["Headline (",e.jsx(r.code,{children:"h1"}),") font family"]})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-subhed"})}),e.jsxs(r.td,{children:["Subhead (",e.jsx(r.code,{children:"h2"}),"-",e.jsx(r.code,{children:"h6"}),") font family"]})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-body"})}),e.jsx(r.td,{children:"Body text font family"})]}),e.jsxs(r.tr,{children:[e.jsx(r.td,{children:e.jsx(r.code,{children:"--theme-font-family-note"})}),e.jsx(r.td,{children:"Note font family"})]})]})]})]})}}const a=()=>{throw new Error("Docs-only story")};a.parameters={docsOnly:!0};const s={title:"SCSS/CSS variables",parameters:{...d},tags:["stories-mdx"],includeStories:["__page"]};s.parameters=s.parameters||{};s.parameters.docs={...s.parameters.docs||{},page:i};const v=["__page"];export{v as __namedExportsOrder,a as __page,s as default};
|
|
//# sourceMappingURL=css-variables.stories-a3e9c557.js.map
|