wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

logos

Browse source
This commit is contained in:
hobbes7878 2024-11-19 21:34:32 +00:00
parent 6621adfb6c
commit ef578b086a
42 changed files with 332 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.storybook/Theme.ts
View file

@ -4,7 +4,6 @@ export default create({
base: 'light',
brandTitle: 'Reuters Graphics components',
brandUrl: 'https://reuters-graphics.github.io/graphics-components/',
brandImage:
'https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg',
brandImage: './logo.svg',
brandTarget: '_self',
});

1
.storybook/main.ts
View file

@ -3,6 +3,7 @@ import remarkGfm from 'remark-gfm';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
staticDirs: ['../public'],
addons: [
'@storybook/addon-svelte-csf',
'@storybook/addon-links',

130
.storybook/preview.ts
View file

@ -7,77 +7,83 @@ import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
import svelte from './svelte-highlighting.js';
import type { Preview } from '@storybook/svelte';
SyntaxHighlighter.registerLanguage('scss', scss);
SyntaxHighlighter.registerLanguage('svelte', svelte);
SyntaxHighlighter.registerLanguage('markdown', markdown);
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
previewTabs: { 'storybook/docs/panel': { index: -1 } },
controls: {
expanded: true,
sort: 'requiredFirst',
matchers: {
color: /(background|colour|Colour)$/i,
date: /Date$/,
const preview: Preview = {
// @ts-ignore Is OK
decorators: [() => Wrapper],
tags: ['autodocs'],
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
previewTabs: { 'storybook/docs/panel': { index: -1 } },
controls: {
expanded: true,
sort: 'requiredFirst',
matchers: {
color: /(background|colour|Colour)$/i,
date: /Date$/,
},
},
},
layout: 'fullscreen',
options: {
// https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
storySort: {
method: 'alphabetical-by-kind',
includeNames: true,
order: [
'Intro',
'Guides',
[
'Using these docs',
'Using with the Graphics Kit',
'Using with Google docs',
'Customising components with SCSS',
'*',
'Getting help',
],
'Layout',
['Intro', '*'],
'Theming',
['Theme', 'CSS variables', '*'],
'Components',
['Intro', '*'],
'*',
'Utilities',
['Intro', '*'],
'SCSS',
['Intro', '*'],
'Styles',
[
layout: 'fullscreen',
options: {
// https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
storySort: {
method: 'alphabetical-by-kind',
includeNames: true,
order: [
'Intro',
'Colours',
['Intro', 'Primary', 'Thematic', '*'],
'Tokens',
['Intro', 'Typography', '*'],
],
'Actions',
['Intro', '*'],
'Contributing',
[
'Quickstart',
'Component Basics',
'Guides',
[
'Using these docs',
'Using with the Graphics Kit',
'Using with Google docs',
'Customising components with SCSS',
'*',
'Getting help',
],
'Layout',
['Intro', '*'],
'Theming',
['Theme', 'CSS variables', '*'],
'Components',
['Intro', '*'],
'*',
'Writing Stories',
'Recipes: Basic story',
'Recipes: Story with custom docs',
'Recipes: Story with custom controls',
'Recipes: Story with media',
'Recipes: Story for a component with slots',
'Writing docs pages',
'Utilities',
['Intro', '*'],
'SCSS',
['Intro', '*'],
'Styles',
[
'Intro',
'Colours',
['Intro', 'Primary', 'Thematic', '*'],
'Tokens',
['Intro', 'Typography', '*'],
],
'Actions',
['Intro', '*'],
'Contributing',
[
'Quickstart',
'Component Basics',
'*',
'Writing Stories',
'Recipes: Basic story',
'Recipes: Story with custom docs',
'Recipes: Story with custom controls',
'Recipes: Story with media',
'Recipes: Story for a component with slots',
'Writing docs pages',
],
],
],
},
},
},
};
export const decorators = [() => Wrapper];
export const tags = ['autodocs'];
export default preview;

67
public/logo.svg Normal file
View file

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1608.56 474.84">
<defs>
<style>
.cls-2 {
fill: #D64000;
}
.cls-3 {
fill: #212223;
}
</style>
</defs>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<path class="cls-2" d="M410.49,63.73c6.04,6.05,9.39,14.13,9.39,22.68s-3.32,16.64-9.39,22.68c-12.49,12.5-32.83,12.5-45.32,0-6.04-6.05-9.39-14.1-9.39-22.68s3.32-16.64,9.39-22.68c6.26-6.27,14.46-9.4,22.66-9.4s16.43,3.13,22.66,9.4Z"/>
<path class="cls-2" d="M63.85,411.02c-12.49-12.5-12.49-32.86,0-45.37,6.04-6.05,14.08-9.4,22.66-9.4s16.62,3.32,22.66,9.4c12.49,12.5,12.49,32.87,0,45.37-6.07,6.08-14.11,9.4-22.66,9.4s-16.62-3.32-22.66-9.4Z"/>
<path class="cls-2" d="M308.11,66.23l-.22-.09c-6.82-2.88-12.14-8.24-14.96-15.1-2.88-6.92-2.88-14.54,0-21.49,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.44,7.11-2.16,10.74-2.16s7.29.72,10.73,2.16c14.3,5.92,21.09,22.37,15.18,36.69-5.92,14.32-22.34,21.12-36.65,15.2Z"/>
<path class="cls-2" d="M155.61,406.45c3.63,0,7.26.72,10.7,2.13,14.3,5.92,21.09,22.37,15.18,36.69-2.88,6.93-8.26,12.34-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-14.3-5.92-21.09-22.37-15.18-36.69,2.88-6.92,8.26-12.34,15.18-15.2,3.47-1.44,7.1-2.16,10.73-2.16l.03.03Z"/>
<path class="cls-2" d="M261.2,24.06c0,12.91-10.2,23.47-22.94,24.06h-1.09c-13.27,0-24.04-10.81-24.04-24.06S223.93,0,237.17,0s24.04,10.84,24.04,24.09v-.03Z"/>
<path class="cls-2" d="M213.1,450.78c0-13.29,10.8-24.06,24.03-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.03-10.81-24.03-24.06Z"/>
<path class="cls-2" d="M163.34,58.84c-4.94,2.04-10.36,2.04-15.34,0-4.98-2.07-8.83-5.92-10.86-10.87-4.22-10.24.63-21.99,10.86-26.22,2.5-1.03,5.07-1.54,7.64-1.54,7.89,0,15.34,4.7,18.56,12.41,2.03,4.98,2.03,10.43,0,15.35-2.03,4.98-5.88,8.84-10.86,10.87Z"/>
<path class="cls-2" d="M310.97,416c2.5-1.04,5.1-1.57,7.7-1.57s5.2.53,7.67,1.53c4.98,2.07,8.83,5.92,10.86,10.87,2.04,4.98,2.04,10.43,0,15.35-2.03,4.98-5.88,8.83-10.86,10.87-4.97,2.04-10.39,2.04-15.36,0-4.98-2.04-8.83-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,2.04-4.95,5.89-8.8,10.86-10.84Z"/>
<path class="cls-2" d="M97.8,75.29c6.17,6.17,6.26,16.1.31,22.4l-.34.34c-6.26,6.27-16.46,6.27-22.72,0-6.26-6.27-6.26-16.48,0-22.75,3.13-3.13,7.23-4.7,11.36-4.7s8.23,1.57,11.36,4.7h.03Z"/>
<path class="cls-2" d="M376.34,376.9c3.1-3.13,7.23-4.7,11.33-4.7s8.23,1.57,11.36,4.7c3.04,3.01,4.69,7.05,4.69,11.34s-1.66,8.33-4.69,11.37c-6.26,6.3-16.43,6.27-22.72,0-3.04-3.04-4.69-7.11-4.69-11.37s1.66-8.3,4.69-11.34h.03Z"/>
<path class="cls-2" d="M32.61,174.29c-10.23-4.23-15.08-16.01-10.86-26.22,2.03-4.98,5.88-8.84,10.86-10.87,2.5-1,5.1-1.54,7.7-1.54s5.2.5,7.67,1.54c10.23,4.23,15.09,16.01,10.86,26.22-2.03,4.98-5.88,8.84-10.86,10.87-4.98,2.04-10.42,2.04-15.34,0h-.03Z"/>
<path class="cls-2" d="M441.79,300.61c4.97,2.04,8.82,5.89,10.86,10.87,2.03,4.98,2.03,10.4,0,15.35-4.23,10.21-15.96,15.1-26.2,10.84-4.98-2.04-8.82-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,3.19-7.71,10.67-12.38,18.56-12.38,2.54,0,5.13.5,7.64,1.54Z"/>
<path class="cls-2" d="M0,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06S0,250.8,0,237.54Z"/>
<path class="cls-2" d="M426.26,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.04-10.81-24.04-24.06Z"/>
<path class="cls-2" d="M14.24,329.81c-5.92-14.32.88-30.73,15.18-36.69,6.92-2.88,14.52-2.88,21.47,0,6.92,2.88,12.3,8.27,15.18,15.2,2.88,6.93,2.88,14.54,0,21.49-2.88,6.92-8.26,12.31-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2Z"/>
<path class="cls-2" d="M408.04,166.49c-2.85-6.92-2.85-14.54,0-21.46,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.47,7.1-2.16,10.67-2.16,11.02,0,21.47,6.52,25.95,17.33,5.92,14.32-.88,30.73-15.18,36.69-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2h.03Z"/>
<path class="cls-2" d="M305.36,305.69c-8.79,8.77-8.79,23.09,0,31.86,8.79,8.8,23.07,8.8,31.86,0,4.26-4.26,6.6-9.9,6.6-15.92s-2.35-11.69-6.6-15.91c-4.38-4.39-10.14-6.58-15.9-6.58s-11.58,2.19-15.96,6.55h0Z"/>
<path class="cls-2" d="M117.55,223.79c-9.51-2.54-15.15-12.34-12.61-21.87,1.25-4.61,4.19-8.46,8.33-10.84,2.72-1.6,5.79-2.41,8.86-2.41,1.53,0,3.1.19,4.63.6,4.6,1.25,8.45,4.2,10.83,8.33,2.38,4.14,3,8.96,1.78,13.57-2.53,9.52-12.33,15.2-21.85,12.63h.03Z"/>
<path class="cls-2" d="M347.49,285.48c-4.6-1.25-8.45-4.2-10.83-8.33-2.38-4.14-3-8.96-1.78-13.57,1.25-4.61,4.19-8.46,8.32-10.84,2.75-1.6,5.82-2.41,8.89-2.41,1.28,0,2.56.13,3.82.41l.85.22c9.51,2.54,15.15,12.38,12.61,21.87-1.25,4.61-4.19,8.46-8.32,10.84-4.13,2.38-8.95,3.04-13.55,1.79v.03Z"/>
<path class="cls-2" d="M108.41,271.95c-1.97-7.36,2.16-14.91,9.3-17.3l.81-.22c7.61-2.07,15.46,2.51,17.49,10.12,1,3.7.5,7.55-1.44,10.87-1.91,3.29-5.01,5.67-8.67,6.67-3.69,1-7.51.5-10.86-1.44-3.29-1.91-5.66-5.01-6.67-8.68l.03-.03Z"/>
<path class="cls-2" d="M344.92,219.06l-.63-.38c-2.97-1.94-5.1-4.86-6.01-8.3-2.03-7.64,2.47-15.48,10.11-17.55,7.57-2.04,15.46,2.51,17.49,10.12,2.03,7.61-2.47,15.48-10.11,17.51-3.69,1-7.51.47-10.86-1.44v.03Z"/>
<path class="cls-2" d="M160.96,328.65l-.41.41c-4.19,4.2-11.02,4.2-15.21,0-4.19-4.2-4.19-10.99,0-15.2,4.19-4.2,11.02-4.2,15.21,0,2.03,2.04,3.16,4.73,3.16,7.61,0,2.69-.97,5.2-2.75,7.18Z"/>
<path class="cls-2" d="M328.84,145.53c2.03,2.04,3.16,4.73,3.16,7.61s-1.13,5.58-3.16,7.61c-4.19,4.2-11.02,4.2-15.21,0-2.03-2.07-3.16-4.73-3.16-7.61s1.13-5.58,3.16-7.61c2.07-2.04,4.73-3.16,7.61-3.16s5.57,1.1,7.61,3.13v.03Z"/>
<path class="cls-2" d="M218.7,345.32c1.91,3.29,2.41,7.18,1.44,10.87-1,3.7-3.35,6.77-6.67,8.68-3.32,1.91-7.17,2.41-10.86,1.44-7.61-2.04-12.14-9.9-10.11-17.51,1-3.7,3.35-6.77,6.67-8.68,3.29-1.91,7.14-2.41,10.86-1.44,3.69,1,6.76,3.35,8.67,6.67v-.03Z"/>
<path class="cls-2" d="M255.51,129.58c-1.91-3.29-2.41-7.17-1.44-10.87,1-3.7,3.35-6.77,6.67-8.68,2.19-1.25,4.63-1.91,7.1-1.91,1.25,0,2.47.16,3.72.47,3.69,1,6.76,3.35,8.67,6.67,1.91,3.29,2.41,7.17,1.44,10.87-2.03,7.61-9.89,12.16-17.49,10.12-3.69-1-6.76-3.35-8.67-6.67Z"/>
<path class="cls-2" d="M276.98,337.08l.75.44c3.73,2.41,6.38,6.08,7.54,10.37,2.54,9.52-3.1,19.33-12.61,21.87-4.63,1.26-9.42.6-13.55-1.78-4.13-2.38-7.07-6.24-8.32-10.84-1.25-4.61-.6-9.43,1.78-13.57,2.38-4.13,6.23-7.08,10.83-8.33,1.57-.41,3.13-.59,4.67-.59,3.1,0,6.13.81,8.89,2.41l.03.03Z"/>
<path class="cls-2" d="M210.97,139.64c-9.48,2.54-19.28-3.13-21.85-12.63-2.53-9.52,3.1-19.33,12.61-21.87,1.53-.41,3.07-.6,4.6-.6,7.89,0,15.12,5.26,17.24,13.22,2.53,9.52-3.1,19.33-12.61,21.87Z"/>
<path class="cls-2" d="M153.01,175.51c12.41,0,22.47-10.07,22.47-22.49s-10.06-22.49-22.47-22.49-22.47,10.07-22.47,22.49,10.06,22.49,22.47,22.49Z"/>
</g>
<g>
<g>
<path class="cls-3" d="M536.58,47.31h89.16c48.17,0,80.4,28.11,80.4,72.02,0,27.83-14.7,50.07-37.53,60.9l43.15,83.46h-51.91l-36.92-72.66h-39.42v72.66h-46.93V47.31ZM583.51,85.94v66.46h38.49c22.22,0,36.28-12.98,36.28-33.07s-14.06-33.39-36.28-33.39h-38.49Z"/>
<path class="cls-3" d="M718.44,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.48c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.71-31.84-85.71-80.99ZM837.93,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.97,30.29h72.57Z"/>
<path class="cls-3" d="M1009.81,104.84h44.12v158.89h-39.1l-4.06-19.17c-10.32,12.35-24.39,21.01-47.25,21.01-33.15,0-63.81-16.39-63.81-72.66v-88.1h44.12v82.23c0,28.43,9.4,42.36,31.3,42.36s34.72-15.76,34.72-45.14v-79.45l-.03.03Z"/>
<path class="cls-3" d="M1080.01,60.42h44.12v44.51h36.6v36.8h-36.6v69.56c0,11.12,4.38,15.77,15.63,15.77h22.83v36.77h-36.6c-30.66,0-45.97-15.13-45.97-45.42V60.42Z"/>
<path class="cls-3" d="M1169.86,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.47c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.7-31.84-85.7-80.99ZM1289.36,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.96,30.29h72.57Z"/>
<path class="cls-3" d="M1451.32,104.8v39.58h-17.52c-26.28,0-36.28,17.31-36.28,41.41v77.9h-44.12V104.8h40.06l4.06,23.79c8.76-14.21,21.26-23.79,46.29-23.79h7.51Z"/>
<path class="cls-3" d="M1500.28,210.87c1.57,13.9,13.74,23.5,35.35,23.5,18.45,0,29.73-5.88,29.73-16.99,0-12.98-10.94-13.9-36.92-17.31-37.53-4.33-66.62-12.67-66.62-45.42s27.84-52.25,69.11-51.93c43.16,0,72.89,18.86,75.09,51.3h-42.23c-1.25-12.67-13.46-20.41-31.29-20.41s-28.45,6.19-28.45,16.4c0,12.07,13.78,13.3,36.92,16.08,36.92,3.69,67.58,12.07,67.58,47.92,0,31.52-30.02,51.62-73.21,51.62s-75.06-20.72-76.94-54.71h41.91l-.03-.03Z"/>
</g>
<g>
<path class="cls-3" d="M534.98,369.02c0-8.94,1.29-17.05,3.87-24.34,2.58-7.28,6.39-13.56,11.44-18.83,5.04-5.27,11.27-9.34,18.66-12.21,7.4-2.86,15.91-4.3,25.54-4.3,13.76,0,25.57,2.06,35.43,6.19l-2.24,12.56c-4.82-1.6-9.83-2.95-15.05-4.04-5.22-1.09-10.87-1.63-16.94-1.63-14.68,0-25.94,3.96-33.8,11.87-7.86,7.91-11.78,19.55-11.78,34.92s3.84,26.09,11.52,34.23c7.68,8.14,18.63,12.21,32.85,12.21,3.55,0,7.14-.2,10.75-.6,3.61-.4,6.79-.89,9.55-1.46v-38.87h14.45v48.16c-2.06.69-4.42,1.35-7.05,1.98-2.64.63-5.48,1.17-8.51,1.63-3.04.46-6.17.83-9.37,1.12-3.21.29-6.36.43-9.46.43-9.86,0-18.55-1.49-26.06-4.47-7.51-2.98-13.76-7.11-18.75-12.38-4.99-5.27-8.75-11.49-11.27-18.66-2.52-7.16-3.78-14.99-3.78-23.48Z"/>
<path class="cls-3" d="M755.82,345.29c0,7.91-2.32,14.79-6.97,20.64-4.64,5.85-11.04,9.86-19.18,12.04l32.34,47.99h-18.23l-29.93-46.61h-28.04v46.61h-15.14v-114.55h48.5c5.96,0,11.24.86,15.82,2.58,4.58,1.72,8.43,4.07,11.52,7.05,3.1,2.98,5.42,6.54,6.97,10.66,1.55,4.13,2.32,8.66,2.32,13.59ZM740.52,345.29c0-6.88-2.04-12.18-6.11-15.91-4.07-3.72-9.83-5.59-17.29-5.59h-31.3v43.34h31.3c7.34,0,13.07-1.98,17.2-5.93s6.19-9.26,6.19-15.91Z"/>
<path class="cls-3" d="M832.36,311.41h16.68l42.66,114.55h-15.31l-10.66-30.1h-50.05l-10.49,30.1h-15.31l42.48-114.55ZM820.15,383.13h41.28l-20.64-59.68-20.64,59.68Z"/>
<path class="cls-3" d="M925.07,311.41h46.1c5.85,0,11.03.92,15.57,2.75,4.53,1.84,8.34,4.3,11.44,7.4s5.44,6.74,7.05,10.92c1.6,4.19,2.41,8.69,2.41,13.5s-.8,9.15-2.41,13.33c-1.61,4.19-3.96,7.86-7.05,11.01-3.1,3.16-6.91,5.65-11.44,7.48-4.53,1.84-9.72,2.75-15.57,2.75h-30.96v45.41h-15.14v-114.55ZM969.44,368.16c7.22,0,12.84-1.98,16.86-5.93,4.01-3.96,6.02-9.37,6.02-16.25s-2.01-12.3-6.02-16.25c-4.02-3.96-9.63-5.93-16.86-5.93h-29.24v44.38h29.24Z"/>
<path class="cls-3" d="M1043.06,311.41h15.14v49.36h58.31v-49.36h15.14v114.55h-15.14v-51.77h-58.31v51.77h-15.14v-114.55Z"/>
<path class="cls-3" d="M1176.53,311.41h15.14v114.55h-15.14v-114.55Z"/>
<path class="cls-3" d="M1245.67,368.68c0,14.68,3.9,26.03,11.7,34.06,7.8,8.03,18.75,12.04,32.85,12.04,5.16,0,9.86-.46,14.1-1.38,4.24-.92,8.2-2.06,11.87-3.44l2.41,12.21c-3.33,1.61-7.74,2.98-13.24,4.13-5.5,1.14-11.47,1.72-17.89,1.72-8.83,0-16.74-1.41-23.74-4.21-7-2.81-12.96-6.79-17.89-11.95-4.93-5.16-8.72-11.38-11.35-18.66-2.64-7.28-3.96-15.45-3.96-24.51s1.32-17.23,3.96-24.51c2.64-7.28,6.42-13.5,11.35-18.66,4.93-5.16,10.89-9.14,17.89-11.95,6.99-2.81,14.91-4.21,23.74-4.21,6.42,0,12.38.58,17.89,1.72,5.5,1.15,9.92,2.52,13.24,4.13l-2.41,12.21c-3.67-1.38-7.63-2.52-11.87-3.44-4.24-.92-8.94-1.38-14.1-1.38-14.1,0-25.06,4.02-32.85,12.04-7.8,8.03-11.7,19.38-11.7,34.06Z"/>
<path class="cls-3" d="M1432.46,395.34c0,10.32-3.7,18.35-11.09,24.08-7.4,5.74-17.57,8.6-30.53,8.6-6.88,0-13.82-.8-20.81-2.41-7-1.6-13.48-3.61-19.44-6.02l3.44-12.21c5.62,2.3,11.61,4.21,17.97,5.76,6.36,1.55,12.64,2.32,18.83,2.32,8.14,0,14.65-1.49,19.52-4.47,4.87-2.98,7.31-7.68,7.31-14.1s-2.47-11.09-7.4-14.36c-4.93-3.27-12.38-6.16-22.36-8.69-12.62-3.1-22.05-7.16-28.29-12.21-6.25-5.04-9.37-12.04-9.37-20.98,0-10.89,3.64-18.83,10.92-23.82,7.28-4.99,17.4-7.48,30.36-7.48,7.34,0,13.99.66,19.95,1.98,5.96,1.32,11.58,3.18,16.86,5.59l-2.92,12.21c-4.82-2.06-10.12-3.81-15.91-5.25-5.79-1.43-11.73-2.15-17.8-2.15-8.49,0-15.05,1.32-19.69,3.96-4.64,2.64-6.97,7.34-6.97,14.1,0,3.21.57,5.88,1.72,8,1.15,2.12,2.89,3.93,5.25,5.42,2.35,1.49,5.33,2.84,8.94,4.04,3.61,1.2,7.88,2.49,12.81,3.87,5.16,1.49,10.09,3.13,14.79,4.9,4.7,1.78,8.83,3.96,12.38,6.54,3.55,2.58,6.36,5.71,8.43,9.37,2.06,3.67,3.1,8.14,3.1,13.42Z"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

2
src/actions/cssVariables/cssVariables.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
<Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# `cssVariables`
An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this:

2
src/actions/resizeObserver/resizeObserver.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# `resizeObserver`
An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:

238
src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
View file

@ -1,61 +1,207 @@
<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
<script lang="ts">
/** "Kinesis" colour */
export let logoColour: string = '#FA6400';
/** Primary text colour, i.e., "Reuters" */
export let primaryTextColour: string = '#404040';
/** Secondary text colour, i.e., "Graphics" */
export let secondaryTextColour: string = '#666666';
export let logoColour: string = '#D64000';
/** Text colour */
export let textColour: string = '#212223';
/** CSS width value */
export let width: string = '100%';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1608.56 474.84"
aria-hidden="true"
focusable="false"
viewBox="0 0 219.32 32.43"
style="width: {width};"
style="width: {width}; --logoColour: {logoColour}; --textColour: {textColour};"
>
<path
d="M30.72,16.3a1.57,1.57,0,1,1-1.56-1.57A1.56,1.56,0,0,1,30.72,16.3Zm-4.8-2.74a.94.94,0,1,0,.94.94A.94.94,0,0,0,25.92,13.56Zm-1.11-3.28a1.2,1.2,0,1,0,0,2.39,1.2,1.2,0,0,0,0-2.39ZM22.87,7.79A1.11,1.11,0,1,0,24,8.9,1.11,1.11,0,0,0,22.87,7.79ZM20.43,6.31a.95.95,0,1,0,.94.94A.94.94,0,0,0,20.43,6.31ZM17.85,5.7a.8.8,0,0,0,0,1.6.8.8,0,0,0,0-1.6Zm-2.53.11a.61.61,0,0,0-.61.62.61.61,0,0,0,.61.61.61.61,0,0,0,.62-.61A.62.62,0,0,0,15.32,5.81Zm-2.2.54a.53.53,0,1,0,.53.52A.52.52,0,0,0,13.12,6.35Zm-1.88.83a.46.46,0,0,0,0,.92.46.46,0,1,0,0-.92ZM9.58,8.27a.53.53,0,1,0,.53.53A.53.53,0,0,0,9.58,8.27ZM8,9.8a.61.61,0,1,0,.61.61A.61.61,0,0,0,8,9.8Zm-1.31,2a.73.73,0,1,0,.73.73A.73.73,0,0,0,6.7,11.84Zm-.76,2.63a.77.77,0,1,0,.77.77A.77.77,0,0,0,5.94,14.47Zm0,2.68a.94.94,0,1,0,.94.94A.94.94,0,0,0,6,17.15ZM7.1,19.92a1.2,1.2,0,0,0,0,2.39,1.2,1.2,0,1,0,0-2.39Zm2,2.66a1.11,1.11,0,1,0,1.11,1.1A1.1,1.1,0,0,0,9.05,22.58Zm2.36,1.77a.94.94,0,1,0,.94.93A.94.94,0,0,0,11.41,24.35Zm2.65.95a.8.8,0,0,0,0,1.59.8.8,0,1,0,0-1.59Zm2.53.25a.61.61,0,1,0,.61.61A.61.61,0,0,0,16.59,25.55Zm2.2-.36a.53.53,0,0,0,0,1.06.53.53,0,0,0,0-1.06Zm1.88-.7a.46.46,0,0,0-.45.46.45.45,0,0,0,.45.45.46.46,0,0,0,.46-.45A.47.47,0,0,0,20.67,24.49Zm1.66-1.23a.53.53,0,0,0-.53.53.53.53,0,1,0,1.06,0A.53.53,0,0,0,22.33,23.26Zm1.57-1.69a.61.61,0,0,0,0,1.22.61.61,0,1,0,0-1.22Zm1.31-2.28a.73.73,0,0,0-.72.73.72.72,0,0,0,.72.72.73.73,0,0,0,.73-.72A.73.73,0,0,0,25.21,19.29ZM26,16.58a.77.77,0,1,0,.77.77A.76.76,0,0,0,26,16.58Zm-3-.88a.73.73,0,1,0,0,1.45.73.73,0,1,0,0-1.45Zm-2.82-.65a.41.41,0,1,0,.41.41A.41.41,0,0,0,20.15,15.05Zm-.78-2a.57.57,0,0,0-.57.57.57.57,0,1,0,.57-.57Zm-1.86-1.64a.77.77,0,0,0,0,1.54.77.77,0,1,0,0-1.54ZM15,11.16a.87.87,0,1,0,.87.87A.88.88,0,0,0,15,11.16Zm-2.13,1.21a.83.83,0,1,0,.83.83A.83.83,0,0,0,12.87,12.37Zm-1.09,2.28a.57.57,0,0,0-.56.56.56.56,0,1,0,1.12,0A.57.57,0,0,0,11.78,14.65Zm0,2.14a.41.41,0,1,0,.41.41A.41.41,0,0,0,11.82,16.79Zm.74,1.63A.58.58,0,0,0,12,19a.57.57,0,0,0,1.14,0A.58.58,0,0,0,12.56,18.42Zm1.86,1.27a.77.77,0,0,0-.77.77.78.78,0,1,0,.77-.77Zm2.51.06a.88.88,0,1,0,.87.87A.87.87,0,0,0,16.93,19.75Zm2.14-1.13a.83.83,0,0,0-.83.83.84.84,0,0,0,.83.84.85.85,0,0,0,.84-.84A.84.84,0,0,0,19.07,18.62Zm1.09-1.73a.56.56,0,1,0,.56.56A.56.56,0,0,0,20.16,16.89Zm2.44-4.12a.94.94,0,1,0,.94.94A.94.94,0,0,0,22.6,12.77ZM21,10.14a1.12,1.12,0,1,0,1.12,1.12A1.12,1.12,0,0,0,21,10.14ZM18.62,8.67a1,1,0,1,0,1,1A1,1,0,0,0,18.62,8.67ZM16,8.38a.88.88,0,1,0,.88.88A.87.87,0,0,0,16,8.38Zm-2.66.85a.66.66,0,1,0,.66.66A.66.66,0,0,0,13.3,9.23Zm-2.24,1.56a.61.61,0,1,0,.61.61A.61.61,0,0,0,11.06,10.79ZM9.54,13a.61.61,0,0,0-.61.61.62.62,0,0,0,.61.61.61.61,0,0,0,.61-.61A.61.61,0,0,0,9.54,13ZM8.9,15.46a.72.72,0,0,0-.72.72.73.73,0,0,0,.72.73.73.73,0,0,0,.73-.73A.73.73,0,0,0,8.9,15.46ZM9.28,18a.94.94,0,1,0,.93.94A.94.94,0,0,0,9.28,18Zm1.58,2.27A1.12,1.12,0,1,0,12,21.34,1.12,1.12,0,0,0,10.86,20.22Zm2.41,1.7a1,1,0,1,0,1,1A1,1,0,0,0,13.27,21.92Zm2.65.53a.89.89,0,1,0,.89.89A.89.89,0,0,0,15.92,22.45Zm2.66-.39a.66.66,0,1,0,0,1.31.66.66,0,1,0,0-1.31Zm2.24-1.45a.6.6,0,0,0-.6.61.61.61,0,1,0,.6-.61Zm1.52-2.25a.61.61,0,0,0-.61.61A.61.61,0,0,0,23,19,.61.61,0,0,0,22.34,18.36Zm6.2-7.6a1.36,1.36,0,1,0,1.35,1.36A1.35,1.35,0,0,0,28.54,10.76Zm-1.72-3.1A1.15,1.15,0,1,0,28,8.81,1.15,1.15,0,0,0,26.82,7.66ZM24.27,5.22a1,1,0,1,0,1,1A1,1,0,0,0,24.27,5.22ZM21.41,3.75a.8.8,0,1,0,.8.8A.8.8,0,0,0,21.41,3.75ZM18.6,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,18.6,3ZM16,2.79a.6.6,0,1,0,.6.6A.6.6,0,0,0,16,2.79ZM13.32,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,13.32,3Zm-2.82.76a.8.8,0,1,0,.81.8A.8.8,0,0,0,10.5,3.75ZM7.64,5.22a1,1,0,1,0,1,1A1,1,0,0,0,7.64,5.22ZM5.09,7.66A1.15,1.15,0,1,0,6.24,8.81,1.15,1.15,0,0,0,5.09,7.66ZM3.37,10.77a1.35,1.35,0,1,0,1.36,1.35A1.35,1.35,0,0,0,3.37,10.77Zm-.62,4A1.57,1.57,0,1,0,4.32,16.3,1.56,1.56,0,0,0,2.75,14.73Zm.63,4.39a1.35,1.35,0,1,0,1.35,1.35A1.35,1.35,0,0,0,3.38,19.12Zm1.71,3.51a1.15,1.15,0,0,0,0,2.3,1.15,1.15,0,0,0,0-2.3Zm2.55,2.76a1,1,0,1,0,1,1A1,1,0,0,0,7.64,25.39Zm2.86,1.84a.81.81,0,1,0,.81.81A.8.8,0,0,0,10.5,27.23Zm2.82,1a.7.7,0,1,0,.69.7A.69.69,0,0,0,13.32,28.21ZM16,28.6a.6.6,0,0,0-.6.6.59.59,0,0,0,.6.59.58.58,0,0,0,.59-.59A.59.59,0,0,0,16,28.6Zm2.64-.39a.7.7,0,1,0,.69.7A.7.7,0,0,0,18.6,28.21Zm2.81-1a.81.81,0,1,0,.81.8A.81.81,0,0,0,21.41,27.24Zm2.86-1.86a1,1,0,1,0,1,1A1,1,0,0,0,24.27,25.38Zm2.55-2.75A1.15,1.15,0,1,0,28,23.78,1.15,1.15,0,0,0,26.82,22.63Zm1.72-3.51a1.36,1.36,0,1,0,1.35,1.35A1.35,1.35,0,0,0,28.54,19.12Z"
fill="{logoColour}"
></path>
<path
d="M49,23H46.68c-.21,0-.29-.2-.38-.38L43.58,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.36.38H38.45a.39.39,0,0,1-.38-.38V10.23c0-.38.23-.51.61-.56a38.87,38.87,0,0,1,4.48-.25c2.91,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.21.21,0,0,1,49,23Zm-2.84-9.32c0-1.41-1.1-2-3-2-.4,0-2.12,0-2.46.08v4.1c.3,0,2.13.06,2.46.06,1.94,0,3-.38,3-2Zm8.11,5.59c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.37.38v1.2c0,.27-.09.37-.37.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.37.14.37.4v1.21a.38.38,0,0,1-.37.38H55.75c-1.43,0-1.49,0-1.49,1.63V15h6.05a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38H54.26ZM69.4,23.15c-3,0-5.66-1.32-5.66-5.35V9.93a.36.36,0,0,1,.38-.36H66a.36.36,0,0,1,.38.36V17.8c0,2.16,1,3.18,3,3.18s3-1,3-3.18V9.93a.36.36,0,0,1,.38-.36h1.87a.36.36,0,0,1,.38.36V17.8C75.07,21.83,72.45,23.15,69.4,23.15ZM87.51,11.76H83.74V22.63a.4.4,0,0,1-.39.38H81.48a.39.39,0,0,1-.38-.38V11.76H77.33a.35.35,0,0,1-.38-.33V9.93a.36.36,0,0,1,.38-.36H87.51a.36.36,0,0,1,.37.36v1.5A.34.34,0,0,1,87.51,11.76ZM113.19,23h-2.31c-.21,0-.28-.2-.37-.38L107.78,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.35.38h-1.89a.39.39,0,0,1-.38-.38V10.23c0-.38.22-.51.6-.56a38.87,38.87,0,0,1,4.48-.25c2.92,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.22.22,0,0,1,113.19,23Zm-2.83-9.32c0-1.41-1.11-2-3-2-.39,0-2.12,0-2.46.08v4.1c.31,0,2.14.06,2.46.06,2,0,3-.38,3-2Zm10,9.48a20.58,20.58,0,0,1-4.28-.5.41.41,0,0,1-.35-.38V20.93a.36.36,0,0,1,.35-.36h0a35.51,35.51,0,0,0,4.28.34c1.68,0,2.19-.6,2.19-1.7,0-1.42-3.38-2.2-5-2.88A3.39,3.39,0,0,1,115.38,13c0-2.08,1.67-3.59,5.19-3.59a18.93,18.93,0,0,1,4.09.49.38.38,0,0,1,.34.36v1.4a.32.32,0,0,1-.32.34h0a41.56,41.56,0,0,0-4.19-.34c-1.4,0-2.45.49-2.45,1.34,0,.62.71,1.19,1.55,1.53l3.2,1.26c1.59.65,2.62,1.59,2.62,3.4S124.19,23.17,120.41,23.17Zm-28-3.89c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.38.38v1.2c0,.27-.1.37-.38.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.38.14.38.4v1.21a.38.38,0,0,1-.38.38H93.93c-1.43,0-1.49,0-1.49,1.63V15h6a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38h-6Z"
fill="{primaryTextColour}"
></path>
<g>
<path
d="M139.13,9.65a9.7,9.7,0,0,1,3.77.64l-.17.92a10.21,10.21,0,0,0-3.52-.6c-3.43,0-5.51,2.16-5.51,5.7s2,5.7,5.41,5.7a12.38,12.38,0,0,0,2.66-.31V17.14h1.06v5.28a13.27,13.27,0,0,1-3.74.52c-4.18,0-6.49-2.78-6.49-6.63S135,9.65,139.13,9.65Z"
fill="{secondaryTextColour}"
></path>
<path
d="M151.69,17l3.75,5.67h-1.25l-3.67-5.59h-3.66v5.59h-1.1V9.88h5.06c2.68,0,4,1.58,4,3.6A3.57,3.57,0,0,1,151.69,17Zm-1-6.25h-3.85v5.43h3.85a2.66,2.66,0,0,0,3-2.74C153.67,11.81,152.63,10.79,150.71,10.79Z"
fill="{secondaryTextColour}"
></path>
<path
d="M161.74,9.88h1.2l4.81,12.83h-1.09l-1.35-3.66h-6L158,22.71h-1.1Zm-2.06,8.22H165l-2.64-7.33Z"
fill="{secondaryTextColour}"
></path>
<path
d="M169.84,9.88h4.83a3.59,3.59,0,0,1,3.93,3.7,3.63,3.63,0,0,1-3.93,3.7h-3.74v5.43h-1.09Zm4.73,6.47a2.62,2.62,0,0,0,2.91-2.77,2.65,2.65,0,0,0-2.93-2.79h-3.62v5.56Z"
fill="{secondaryTextColour}"
></path>
<path
d="M180.89,9.88H182v5.76h7.28V9.88h1.12V22.71h-1.12V16.62H182v6.09h-1.1Z"
fill="{secondaryTextColour}"
></path>
<path d="M193.76,9.88h1.1V22.71h-1.1Z" fill="{secondaryTextColour}"></path>
<path
d="M203.91,9.65a9.26,9.26,0,0,1,3.35.6l-.17.9a9.38,9.38,0,0,0-3-.54c-3.37,0-5.41,2.18-5.41,5.68s2,5.68,5.41,5.68a9.38,9.38,0,0,0,3-.54l.17.91a9.26,9.26,0,0,1-3.35.6c-4,0-6.35-2.68-6.35-6.65S199.92,9.65,203.91,9.65Z"
fill="{secondaryTextColour}"
></path>
<path
d="M213.43,22.94A12.07,12.07,0,0,1,209,22l.27-.9a10.81,10.81,0,0,0,4.16.94c2,0,3.35-.81,3.35-2.46s-1.22-2.31-3.68-2.95c-3-.77-4.14-1.91-4.14-3.62,0-2.27,1.68-3.35,4.51-3.35a9.32,9.32,0,0,1,3.94.83l-.21.9a9.43,9.43,0,0,0-3.73-.82c-2.16,0-3.41.61-3.41,2.38,0,1.56,1.11,2.1,3.44,2.78,2.62.75,4.38,1.5,4.38,3.77S216.16,22.94,213.43,22.94Z"
fill="{secondaryTextColour}"
></path>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<path
class="logo-kinesis"
d="M410.49,63.73c6.04,6.05,9.39,14.13,9.39,22.68s-3.32,16.64-9.39,22.68c-12.49,12.5-32.83,12.5-45.32,0-6.04-6.05-9.39-14.1-9.39-22.68s3.32-16.64,9.39-22.68c6.26-6.27,14.46-9.4,22.66-9.4s16.43,3.13,22.66,9.4Z"
></path>
<path
class="logo-kinesis"
d="M63.85,411.02c-12.49-12.5-12.49-32.86,0-45.37,6.04-6.05,14.08-9.4,22.66-9.4s16.62,3.32,22.66,9.4c12.49,12.5,12.49,32.87,0,45.37-6.07,6.08-14.11,9.4-22.66,9.4s-16.62-3.32-22.66-9.4Z"
></path>
<path
class="logo-kinesis"
d="M308.11,66.23l-.22-.09c-6.82-2.88-12.14-8.24-14.96-15.1-2.88-6.92-2.88-14.54,0-21.49,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.44,7.11-2.16,10.74-2.16s7.29.72,10.73,2.16c14.3,5.92,21.09,22.37,15.18,36.69-5.92,14.32-22.34,21.12-36.65,15.2Z"
></path>
<path
class="logo-kinesis"
d="M155.61,406.45c3.63,0,7.26.72,10.7,2.13,14.3,5.92,21.09,22.37,15.18,36.69-2.88,6.93-8.26,12.34-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-14.3-5.92-21.09-22.37-15.18-36.69,2.88-6.92,8.26-12.34,15.18-15.2,3.47-1.44,7.1-2.16,10.73-2.16l.03.03Z"
></path>
<path
class="logo-kinesis"
d="M261.2,24.06c0,12.91-10.2,23.47-22.94,24.06h-1.09c-13.27,0-24.04-10.81-24.04-24.06S223.93,0,237.17,0s24.04,10.84,24.04,24.09v-.03Z"
></path>
<path
class="logo-kinesis"
d="M213.1,450.78c0-13.29,10.8-24.06,24.03-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.03-10.81-24.03-24.06Z"
></path>
<path
class="logo-kinesis"
d="M163.34,58.84c-4.94,2.04-10.36,2.04-15.34,0-4.98-2.07-8.83-5.92-10.86-10.87-4.22-10.24.63-21.99,10.86-26.22,2.5-1.03,5.07-1.54,7.64-1.54,7.89,0,15.34,4.7,18.56,12.41,2.03,4.98,2.03,10.43,0,15.35-2.03,4.98-5.88,8.84-10.86,10.87Z"
></path>
<path
class="logo-kinesis"
d="M310.97,416c2.5-1.04,5.1-1.57,7.7-1.57s5.2.53,7.67,1.53c4.98,2.07,8.83,5.92,10.86,10.87,2.04,4.98,2.04,10.43,0,15.35-2.03,4.98-5.88,8.83-10.86,10.87-4.97,2.04-10.39,2.04-15.36,0-4.98-2.04-8.83-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,2.04-4.95,5.89-8.8,10.86-10.84Z"
></path>
<path
class="logo-kinesis"
d="M97.8,75.29c6.17,6.17,6.26,16.1.31,22.4l-.34.34c-6.26,6.27-16.46,6.27-22.72,0-6.26-6.27-6.26-16.48,0-22.75,3.13-3.13,7.23-4.7,11.36-4.7s8.23,1.57,11.36,4.7h.03Z"
></path>
<path
class="logo-kinesis"
d="M376.34,376.9c3.1-3.13,7.23-4.7,11.33-4.7s8.23,1.57,11.36,4.7c3.04,3.01,4.69,7.05,4.69,11.34s-1.66,8.33-4.69,11.37c-6.26,6.3-16.43,6.27-22.72,0-3.04-3.04-4.69-7.11-4.69-11.37s1.66-8.3,4.69-11.34h.03Z"
></path>
<path
class="logo-kinesis"
d="M32.61,174.29c-10.23-4.23-15.08-16.01-10.86-26.22,2.03-4.98,5.88-8.84,10.86-10.87,2.5-1,5.1-1.54,7.7-1.54s5.2.5,7.67,1.54c10.23,4.23,15.09,16.01,10.86,26.22-2.03,4.98-5.88,8.84-10.86,10.87-4.98,2.04-10.42,2.04-15.34,0h-.03Z"
></path>
<path
class="logo-kinesis"
d="M441.79,300.61c4.97,2.04,8.82,5.89,10.86,10.87,2.03,4.98,2.03,10.4,0,15.35-4.23,10.21-15.96,15.1-26.2,10.84-4.98-2.04-8.82-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,3.19-7.71,10.67-12.38,18.56-12.38,2.54,0,5.13.5,7.64,1.54Z"
></path>
<path
class="logo-kinesis"
d="M0,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06S0,250.8,0,237.54Z"
></path>
<path
class="logo-kinesis"
d="M426.26,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.04-10.81-24.04-24.06Z"
></path>
<path
class="logo-kinesis"
d="M14.24,329.81c-5.92-14.32.88-30.73,15.18-36.69,6.92-2.88,14.52-2.88,21.47,0,6.92,2.88,12.3,8.27,15.18,15.2,2.88,6.93,2.88,14.54,0,21.49-2.88,6.92-8.26,12.31-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2Z"
></path>
<path
class="logo-kinesis"
d="M408.04,166.49c-2.85-6.92-2.85-14.54,0-21.46,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.47,7.1-2.16,10.67-2.16,11.02,0,21.47,6.52,25.95,17.33,5.92,14.32-.88,30.73-15.18,36.69-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2h.03Z"
></path>
<path
class="logo-kinesis"
d="M305.36,305.69c-8.79,8.77-8.79,23.09,0,31.86,8.79,8.8,23.07,8.8,31.86,0,4.26-4.26,6.6-9.9,6.6-15.92s-2.35-11.69-6.6-15.91c-4.38-4.39-10.14-6.58-15.9-6.58s-11.58,2.19-15.96,6.55h0Z"
></path>
<path
class="logo-kinesis"
d="M117.55,223.79c-9.51-2.54-15.15-12.34-12.61-21.87,1.25-4.61,4.19-8.46,8.33-10.84,2.72-1.6,5.79-2.41,8.86-2.41,1.53,0,3.1.19,4.63.6,4.6,1.25,8.45,4.2,10.83,8.33,2.38,4.14,3,8.96,1.78,13.57-2.53,9.52-12.33,15.2-21.85,12.63h.03Z"
></path>
<path
class="logo-kinesis"
d="M347.49,285.48c-4.6-1.25-8.45-4.2-10.83-8.33-2.38-4.14-3-8.96-1.78-13.57,1.25-4.61,4.19-8.46,8.32-10.84,2.75-1.6,5.82-2.41,8.89-2.41,1.28,0,2.56.13,3.82.41l.85.22c9.51,2.54,15.15,12.38,12.61,21.87-1.25,4.61-4.19,8.46-8.32,10.84-4.13,2.38-8.95,3.04-13.55,1.79v.03Z"
></path>
<path
class="logo-kinesis"
d="M108.41,271.95c-1.97-7.36,2.16-14.91,9.3-17.3l.81-.22c7.61-2.07,15.46,2.51,17.49,10.12,1,3.7.5,7.55-1.44,10.87-1.91,3.29-5.01,5.67-8.67,6.67-3.69,1-7.51.5-10.86-1.44-3.29-1.91-5.66-5.01-6.67-8.68l.03-.03Z"
></path>
<path
class="logo-kinesis"
d="M344.92,219.06l-.63-.38c-2.97-1.94-5.1-4.86-6.01-8.3-2.03-7.64,2.47-15.48,10.11-17.55,7.57-2.04,15.46,2.51,17.49,10.12,2.03,7.61-2.47,15.48-10.11,17.51-3.69,1-7.51.47-10.86-1.44v.03Z"
></path>
<path
class="logo-kinesis"
d="M160.96,328.65l-.41.41c-4.19,4.2-11.02,4.2-15.21,0-4.19-4.2-4.19-10.99,0-15.2,4.19-4.2,11.02-4.2,15.21,0,2.03,2.04,3.16,4.73,3.16,7.61,0,2.69-.97,5.2-2.75,7.18Z"
></path>
<path
class="logo-kinesis"
d="M328.84,145.53c2.03,2.04,3.16,4.73,3.16,7.61s-1.13,5.58-3.16,7.61c-4.19,4.2-11.02,4.2-15.21,0-2.03-2.07-3.16-4.73-3.16-7.61s1.13-5.58,3.16-7.61c2.07-2.04,4.73-3.16,7.61-3.16s5.57,1.1,7.61,3.13v.03Z"
></path>
<path
class="logo-kinesis"
d="M218.7,345.32c1.91,3.29,2.41,7.18,1.44,10.87-1,3.7-3.35,6.77-6.67,8.68-3.32,1.91-7.17,2.41-10.86,1.44-7.61-2.04-12.14-9.9-10.11-17.51,1-3.7,3.35-6.77,6.67-8.68,3.29-1.91,7.14-2.41,10.86-1.44,3.69,1,6.76,3.35,8.67,6.67v-.03Z"
></path>
<path
class="logo-kinesis"
d="M255.51,129.58c-1.91-3.29-2.41-7.17-1.44-10.87,1-3.7,3.35-6.77,6.67-8.68,2.19-1.25,4.63-1.91,7.1-1.91,1.25,0,2.47.16,3.72.47,3.69,1,6.76,3.35,8.67,6.67,1.91,3.29,2.41,7.17,1.44,10.87-2.03,7.61-9.89,12.16-17.49,10.12-3.69-1-6.76-3.35-8.67-6.67Z"
></path>
<path
class="logo-kinesis"
d="M276.98,337.08l.75.44c3.73,2.41,6.38,6.08,7.54,10.37,2.54,9.52-3.1,19.33-12.61,21.87-4.63,1.26-9.42.6-13.55-1.78-4.13-2.38-7.07-6.24-8.32-10.84-1.25-4.61-.6-9.43,1.78-13.57,2.38-4.13,6.23-7.08,10.83-8.33,1.57-.41,3.13-.59,4.67-.59,3.1,0,6.13.81,8.89,2.41l.03.03Z"
></path>
<path
class="logo-kinesis"
d="M210.97,139.64c-9.48,2.54-19.28-3.13-21.85-12.63-2.53-9.52,3.1-19.33,12.61-21.87,1.53-.41,3.07-.6,4.6-.6,7.89,0,15.12,5.26,17.24,13.22,2.53,9.52-3.1,19.33-12.61,21.87Z"
></path>
<path
class="logo-kinesis"
d="M153.01,175.51c12.41,0,22.47-10.07,22.47-22.49s-10.06-22.49-22.47-22.49-22.47,10.07-22.47,22.49,10.06,22.49,22.47,22.49Z"
></path>
</g>
<g>
<g>
<path
class="logo-text"
d="M536.58,47.31h89.16c48.17,0,80.4,28.11,80.4,72.02,0,27.83-14.7,50.07-37.53,60.9l43.15,83.46h-51.91l-36.92-72.66h-39.42v72.66h-46.93V47.31ZM583.51,85.94v66.46h38.49c22.22,0,36.28-12.98,36.28-33.07s-14.06-33.39-36.28-33.39h-38.49Z"
></path>
<path
class="logo-text"
d="M718.44,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.48c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.71-31.84-85.71-80.99ZM837.93,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.97,30.29h72.57Z"
></path>
<path
class="logo-text"
d="M1009.81,104.84h44.12v158.89h-39.1l-4.06-19.17c-10.32,12.35-24.39,21.01-47.25,21.01-33.15,0-63.81-16.39-63.81-72.66v-88.1h44.12v82.23c0,28.43,9.4,42.36,31.3,42.36s34.72-15.76,34.72-45.14v-79.45l-.03.03Z"
></path>
<path
class="logo-text"
d="M1080.01,60.42h44.12v44.51h36.6v36.8h-36.6v69.56c0,11.12,4.38,15.77,15.63,15.77h22.83v36.77h-36.6c-30.66,0-45.97-15.13-45.97-45.42V60.42Z"
></path>
<path
class="logo-text"
d="M1169.86,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.47c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.7-31.84-85.7-80.99ZM1289.36,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.96,30.29h72.57Z"
></path>
<path
class="logo-text"
d="M1451.32,104.8v39.58h-17.52c-26.28,0-36.28,17.31-36.28,41.41v77.9h-44.12V104.8h40.06l4.06,23.79c8.76-14.21,21.26-23.79,46.29-23.79h7.51Z"
></path>
<path
class="logo-text"
d="M1500.28,210.87c1.57,13.9,13.74,23.5,35.35,23.5,18.45,0,29.73-5.88,29.73-16.99,0-12.98-10.94-13.9-36.92-17.31-37.53-4.33-66.62-12.67-66.62-45.42s27.84-52.25,69.11-51.93c43.16,0,72.89,18.86,75.09,51.3h-42.23c-1.25-12.67-13.46-20.41-31.29-20.41s-28.45,6.19-28.45,16.4c0,12.07,13.78,13.3,36.92,16.08,36.92,3.69,67.58,12.07,67.58,47.92,0,31.52-30.02,51.62-73.21,51.62s-75.06-20.72-76.94-54.71h41.91l-.03-.03Z"
></path>
</g>
<g>
<path
class="logo-text"
d="M534.98,369.02c0-8.94,1.29-17.05,3.87-24.34,2.58-7.28,6.39-13.56,11.44-18.83,5.04-5.27,11.27-9.34,18.66-12.21,7.4-2.86,15.91-4.3,25.54-4.3,13.76,0,25.57,2.06,35.43,6.19l-2.24,12.56c-4.82-1.6-9.83-2.95-15.05-4.04-5.22-1.09-10.87-1.63-16.94-1.63-14.68,0-25.94,3.96-33.8,11.87-7.86,7.91-11.78,19.55-11.78,34.92s3.84,26.09,11.52,34.23c7.68,8.14,18.63,12.21,32.85,12.21,3.55,0,7.14-.2,10.75-.6,3.61-.4,6.79-.89,9.55-1.46v-38.87h14.45v48.16c-2.06.69-4.42,1.35-7.05,1.98-2.64.63-5.48,1.17-8.51,1.63-3.04.46-6.17.83-9.37,1.12-3.21.29-6.36.43-9.46.43-9.86,0-18.55-1.49-26.06-4.47-7.51-2.98-13.76-7.11-18.75-12.38-4.99-5.27-8.75-11.49-11.27-18.66-2.52-7.16-3.78-14.99-3.78-23.48Z"
></path>
<path
class="logo-text"
d="M755.82,345.29c0,7.91-2.32,14.79-6.97,20.64-4.64,5.85-11.04,9.86-19.18,12.04l32.34,47.99h-18.23l-29.93-46.61h-28.04v46.61h-15.14v-114.55h48.5c5.96,0,11.24.86,15.82,2.58,4.58,1.72,8.43,4.07,11.52,7.05,3.1,2.98,5.42,6.54,6.97,10.66,1.55,4.13,2.32,8.66,2.32,13.59ZM740.52,345.29c0-6.88-2.04-12.18-6.11-15.91-4.07-3.72-9.83-5.59-17.29-5.59h-31.3v43.34h31.3c7.34,0,13.07-1.98,17.2-5.93s6.19-9.26,6.19-15.91Z"
></path>
<path
class="logo-text"
d="M832.36,311.41h16.68l42.66,114.55h-15.31l-10.66-30.1h-50.05l-10.49,30.1h-15.31l42.48-114.55ZM820.15,383.13h41.28l-20.64-59.68-20.64,59.68Z"
></path>
<path
class="logo-text"
d="M925.07,311.41h46.1c5.85,0,11.03.92,15.57,2.75,4.53,1.84,8.34,4.3,11.44,7.4s5.44,6.74,7.05,10.92c1.6,4.19,2.41,8.69,2.41,13.5s-.8,9.15-2.41,13.33c-1.61,4.19-3.96,7.86-7.05,11.01-3.1,3.16-6.91,5.65-11.44,7.48-4.53,1.84-9.72,2.75-15.57,2.75h-30.96v45.41h-15.14v-114.55ZM969.44,368.16c7.22,0,12.84-1.98,16.86-5.93,4.01-3.96,6.02-9.37,6.02-16.25s-2.01-12.3-6.02-16.25c-4.02-3.96-9.63-5.93-16.86-5.93h-29.24v44.38h29.24Z"
></path>
<path
class="logo-text"
d="M1043.06,311.41h15.14v49.36h58.31v-49.36h15.14v114.55h-15.14v-51.77h-58.31v51.77h-15.14v-114.55Z"
></path>
<path class="logo-text" d="M1176.53,311.41h15.14v114.55h-15.14v-114.55Z"
></path>
<path
class="logo-text"
d="M1245.67,368.68c0,14.68,3.9,26.03,11.7,34.06,7.8,8.03,18.75,12.04,32.85,12.04,5.16,0,9.86-.46,14.1-1.38,4.24-.92,8.2-2.06,11.87-3.44l2.41,12.21c-3.33,1.61-7.74,2.98-13.24,4.13-5.5,1.14-11.47,1.72-17.89,1.72-8.83,0-16.74-1.41-23.74-4.21-7-2.81-12.96-6.79-17.89-11.95-4.93-5.16-8.72-11.38-11.35-18.66-2.64-7.28-3.96-15.45-3.96-24.51s1.32-17.23,3.96-24.51c2.64-7.28,6.42-13.5,11.35-18.66,4.93-5.16,10.89-9.14,17.89-11.95,6.99-2.81,14.91-4.21,23.74-4.21,6.42,0,12.38.58,17.89,1.72,5.5,1.15,9.92,2.52,13.24,4.13l-2.41,12.21c-3.67-1.38-7.63-2.52-11.87-3.44-4.24-.92-8.94-1.38-14.1-1.38-14.1,0-25.06,4.02-32.85,12.04-7.8,8.03-11.7,19.38-11.7,34.06Z"
></path>
<path
class="logo-text"
d="M1432.46,395.34c0,10.32-3.7,18.35-11.09,24.08-7.4,5.74-17.57,8.6-30.53,8.6-6.88,0-13.82-.8-20.81-2.41-7-1.6-13.48-3.61-19.44-6.02l3.44-12.21c5.62,2.3,11.61,4.21,17.97,5.76,6.36,1.55,12.64,2.32,18.83,2.32,8.14,0,14.65-1.49,19.52-4.47,4.87-2.98,7.31-7.68,7.31-14.1s-2.47-11.09-7.4-14.36c-4.93-3.27-12.38-6.16-22.36-8.69-12.62-3.1-22.05-7.16-28.29-12.21-6.25-5.04-9.37-12.04-9.37-20.98,0-10.89,3.64-18.83,10.92-23.82,7.28-4.99,17.4-7.48,30.36-7.48,7.34,0,13.99.66,19.95,1.98,5.96,1.32,11.58,3.18,16.86,5.59l-2.92,12.21c-4.82-2.06-10.12-3.81-15.91-5.25-5.79-1.43-11.73-2.15-17.8-2.15-8.49,0-15.05,1.32-19.69,3.96-4.64,2.64-6.97,7.34-6.97,14.1,0,3.21.57,5.88,1.72,8,1.15,2.12,2.89,3.93,5.25,5.42,2.35,1.49,5.33,2.84,8.94,4.04,3.61,1.2,7.88,2.49,12.81,3.87,5.16,1.49,10.09,3.13,14.79,4.9,4.7,1.78,8.83,3.96,12.38,6.54,3.55,2.58,6.36,5.71,8.43,9.37,2.06,3.67,3.1,8.14,3.1,13.42Z"
></path>
</g>
</g>
</g>
</svg>
<style lang="scss">
<style>
.logo-kinesis {
fill: var(--logoColour);
}
.logo-text {
fill: var(--textColour);
}
</style>

4
src/components/ReutersLogo/ReutersLogo.svelte
View file

@ -1,9 +1,9 @@
<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
<script lang="ts">
/** "Kinesis" colour */
export let logoColour: string = '#FA6400';
export let logoColour: string = '#D64000';
/** Text colour */
export let textColour: string = '#404040';
export let textColour: string = '#212223';
/** CSS width value */
export let width: string = '100%';
</script>

3
src/components/ToolsHeader/ToolsHeader.svelte
View file

@ -27,8 +27,7 @@
*/
export let logoProps: {
logoColour?: string;
primaryTextColor?: string;
secondaryTextColor?: string;
textColor?: string;
} = { logoColour: '#404040' };
/**

2
src/docs/actions/intro.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Actions/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Actions
Svelte [actions](https://svelte.dev/tutorial/actions) are arbitrary functions that run after Svelte "mounts" an element in the DOM.

2
src/docs/contributing/component-guidelines.mdx
View file

@ -6,8 +6,6 @@ import { parameters } from '../utils/docsPage.js';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Component guidelines
## Dependencies

2
src/docs/contributing/quickstart.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Contributing/Quickstart" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Contributing
Reuters Graphics team members can contribute new components, and we welcome pull requests for any of our existing components from the community.

2
src/docs/contributing/story-recipes/basic-story.mdx
View file

@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Recipes: Basic story
To make a basic story, you'll need to setup a few things from storybook's Svelte [Component Story Framework (CSF)](https://storybook.js.org/docs/svelte/api/csf) library.

2
src/docs/contributing/story-recipes/story-with-custom-controls.mdx
View file

@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Recipes: Story with custom controls
You can customise the controls in Storybook's built-in [controls panel](https://storybook.js.org/docs/svelte/essentials/controls) by passing [argTypes](https://storybook.js.org/docs/svelte/api/argtypes) to `Meta` like this:

2
src/docs/contributing/story-recipes/story-with-custom-docs.mdx
View file

@ -10,8 +10,6 @@ import '../../docStyles.scss';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Recipes: Story with custom docs
You can add custom markdown to your story page by importing and using markdown files.

2
src/docs/contributing/story-recipes/story-with-media.mdx
View file

@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Recipes: Story with media
To use media files in your stories, import them directly.

2
src/docs/contributing/writing-component-stories.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Contributing/Writing stories" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Writing component stories
As well as writing your component, you should also document how to use it using Storybook "stories."

4
src/docs/contributing/writing-docs-stories.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Contributing/Writing docs pages" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Writing docs-only pages
You can write docs-only pages in simple markdown using MDX format.
@ -29,8 +27,6 @@ import { parameters } from '$docs/utils/docsPage.js';
<Meta title="SCSS/Special rules" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# My docs page
Your docs TK...

2
src/docs/guides/customising-with-scss.mdx
View file

@ -13,8 +13,6 @@ import winningImg from './imgs/scss-winning.png';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Customising components with SCSS
One of the most powerful ways to customise components isn't props or, even, Svelte.

2
src/docs/guides/getting-help.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Guides/Getting help" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Getting help
🚨 **If you're on deadline**, talk to your editor who can point you to the nearest developer.

2
src/docs/guides/google-docs.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Guides/Using with Google docs" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Using with Google docs
Most of the default examples in these docs show how to use components by passing data into them directly through props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.

2
src/docs/guides/graphics-kit.mdx
View file

@ -6,8 +6,6 @@ import { parameters } from '../utils/docsPage.js';
parameters={{ ...parameters }}
/>
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Using with the Graphics Kit
If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.

2
src/docs/guides/using-docs.mdx
View file

@ -10,8 +10,6 @@ import moreStoriesImg from './imgs/more-stories.png';
<Meta title="Guides/Using these docs" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Using these docs
The docs in this site include interactive examples of how to use our components, explanations of how our basic design system works and helpful docs on SCSS tools you can use to customise your page.

2
src/docs/intro.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from './utils/docsPage.js';
<Meta title="Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# @reuters-graphics/graphics-components
<p>

2
src/docs/layout/intro.mdx
View file

@ -5,8 +5,6 @@ import WellImg from './article-well.jpg';
<Meta title="Layout/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Layout
Layout components setup our default page structure.

2
src/docs/styles/colours/intro.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../../utils/docsPage.js';
<Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Working with colours
Colour palettes are provided as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) you can use in your own styles. Some are included by default, others can be imported in your global stylesheet and then used.

2
src/docs/styles/colours/primary.mdx
View file

@ -27,8 +27,6 @@ import roseScheme from '../../../scss/colours/primary/_rose.scss?raw';
<Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Primary colours
<CopyColourTable

2
src/docs/styles/colours/thematic.mdx
View file

@ -8,8 +8,6 @@ import nordScheme from '../../../scss/colours/thematic/_nord.scss?raw';
<Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Thematic colours
<CopyColourTable

2
src/docs/styles/intro.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from './../utils/docsPage.js';
<Meta title="Styles/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Styles
This library also includes our main SCSS stylesheets with pre-defined classes you can use to style your page.

2
src/docs/styles/tokens/accessibility/main.mdx
View file

@ -7,8 +7,6 @@ import visibilityStyles from '../../../../scss/tokens/accessibility/_visibility.
<Meta title="Styles/Tokens/Accessibility" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Accessibility tokens
<CopyTable

2
src/docs/styles/tokens/backgrounds/main.mdx
View file

@ -7,8 +7,6 @@ import backgroundColor from '../../../../scss/tokens/backgrounds/_background-col
<Meta title="Styles/Tokens/Backgrounds" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Background tokens
<CopyTable

2
src/docs/styles/tokens/borders/main.mdx
View file

@ -9,8 +9,6 @@ import borderWidth from '../../../../scss/tokens/borders/_border-width.scss?raw'
<Meta title="Styles/Tokens/Borders" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Border tokens
<CopyTable

2
src/docs/styles/tokens/flexbox/main.mdx
View file

@ -16,8 +16,6 @@ import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?
<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Flexbox tokens
Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent [CSS tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

2
src/docs/styles/tokens/interactivity/_main.mdx
View file

@ -8,8 +8,6 @@ import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events
<Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Interactivity tokens
<CopyTable

2
src/docs/styles/tokens/intro.mdx
View file

@ -9,8 +9,6 @@ import color from '../../../scss/tokens/text/_color.scss?inline';
<Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Style tokens
All of the components in this library have been styled using a system of tokens. The style tokens give us a lot of flexibility and ultimately make for the most concise CSS possible.

2
src/docs/styles/tokens/layout/main.mdx
View file

@ -12,8 +12,6 @@ import position from '../../../../scss/tokens/layout/_position.scss?raw';
<Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Layout tokens
<CopyTable

2
src/docs/styles/tokens/sizing/main.mdx
View file

@ -11,8 +11,6 @@ import width from '../../../../scss/tokens/sizing/_width.scss?inline';
<Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Sizing tokens
<CopyTable

2
src/docs/styles/tokens/spacers/main.mdx
View file

@ -9,8 +9,6 @@ import fluidPadding from '../../../../scss/tokens/spacers/_fluid-padding.scss?in
<Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Spacer tokens
Spacers include tokens that control static and fluid margins and paddings.

2
src/docs/styles/tokens/typography/main.mdx
View file

@ -22,8 +22,6 @@ import './styles.scss';
<Meta title="Styles/Tokens/Typography" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Typography tokens
<CopyTable

2
src/docs/styles/tokens/variables/main.mdx
View file

@ -8,8 +8,6 @@ import block from '../../../../scss/tokens/variables/_block.scss?raw';
<Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Token variables
These are SCSS mirrors of some of the default CSS variables used in the `Theme`. Use them in places where CSS variables cannot be used. e.g. You can write `media-queries` to target the block widths using the `block` vars, which is not possible using CSS variables.

2
src/docs/theme-builder/theme-builder.mdx
View file

@ -5,8 +5,6 @@ import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Theme builder
Use this tool to create a custom theme for your page then update the `Theme` component in your project.

2
src/docs/theming/css-variables.mdx
View file

@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# CSS variables
The [`Theme`](?path=/docs/components-theme--default) component uses **[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)** to control major parts of your page's theme.