diff --git a/.changeset/neat-spiders-jump.md b/.changeset/neat-spiders-jump.md new file mode 100644 index 00000000..6804dccc --- /dev/null +++ b/.changeset/neat-spiders-jump.md @@ -0,0 +1,5 @@ +--- +'@reuters-graphics/graphics-components': patch +--- + +Reuters Graphics logo refresh diff --git a/.storybook/Theme.ts b/.storybook/Theme.ts index 3fcb0cf6..e01ec3f7 100644 --- a/.storybook/Theme.ts +++ b/.storybook/Theme.ts @@ -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', }); diff --git a/.storybook/main.ts b/.storybook/main.ts index b0576bfd..8ca31d94 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -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', diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 0a2ac4bd..ba4d2b9c 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -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; diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 00000000..516fe50d --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/actions/cssVariables/cssVariables.mdx b/src/actions/cssVariables/cssVariables.mdx index 7121af15..4e48eb38 100644 --- a/src/actions/cssVariables/cssVariables.mdx +++ b/src/actions/cssVariables/cssVariables.mdx @@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js'; -![](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: diff --git a/src/actions/resizeObserver/resizeObserver.mdx b/src/actions/resizeObserver/resizeObserver.mdx index b1fddab9..e7a57ebe 100644 --- a/src/actions/resizeObserver/resizeObserver.mdx +++ b/src/actions/resizeObserver/resizeObserver.mdx @@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js'; -![](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: diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte index 03ceb94d..64e0a1cf 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte @@ -1,61 +1,207 @@ - diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte index d07132b6..7f0e5b41 100644 --- a/src/components/ReutersLogo/ReutersLogo.svelte +++ b/src/components/ReutersLogo/ReutersLogo.svelte @@ -1,9 +1,9 @@ diff --git a/src/components/ToolsHeader/ToolsHeader.svelte b/src/components/ToolsHeader/ToolsHeader.svelte index 869db16e..5f9652f5 100644 --- a/src/components/ToolsHeader/ToolsHeader.svelte +++ b/src/components/ToolsHeader/ToolsHeader.svelte @@ -27,8 +27,7 @@ */ export let logoProps: { logoColour?: string; - primaryTextColor?: string; - secondaryTextColor?: string; + textColor?: string; } = { logoColour: '#404040' }; /** diff --git a/src/docs/actions/intro.mdx b/src/docs/actions/intro.mdx index 2118f759..372eb4ab 100644 --- a/src/docs/actions/intro.mdx +++ b/src/docs/actions/intro.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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. diff --git a/src/docs/contributing/component-guidelines.mdx b/src/docs/contributing/component-guidelines.mdx index 02ef27ef..a63a6cb8 100644 --- a/src/docs/contributing/component-guidelines.mdx +++ b/src/docs/contributing/component-guidelines.mdx @@ -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 diff --git a/src/docs/contributing/quickstart.mdx b/src/docs/contributing/quickstart.mdx index 074ef98d..0b9932d5 100644 --- a/src/docs/contributing/quickstart.mdx +++ b/src/docs/contributing/quickstart.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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. diff --git a/src/docs/contributing/story-recipes/basic-story.mdx b/src/docs/contributing/story-recipes/basic-story.mdx index 8667f69b..ef182677 100644 --- a/src/docs/contributing/story-recipes/basic-story.mdx +++ b/src/docs/contributing/story-recipes/basic-story.mdx @@ -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. diff --git a/src/docs/contributing/story-recipes/story-with-custom-controls.mdx b/src/docs/contributing/story-recipes/story-with-custom-controls.mdx index 65079685..7afe748e 100644 --- a/src/docs/contributing/story-recipes/story-with-custom-controls.mdx +++ b/src/docs/contributing/story-recipes/story-with-custom-controls.mdx @@ -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: diff --git a/src/docs/contributing/story-recipes/story-with-custom-docs.mdx b/src/docs/contributing/story-recipes/story-with-custom-docs.mdx index 3169fb55..048b0e67 100644 --- a/src/docs/contributing/story-recipes/story-with-custom-docs.mdx +++ b/src/docs/contributing/story-recipes/story-with-custom-docs.mdx @@ -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. diff --git a/src/docs/contributing/story-recipes/story-with-media.mdx b/src/docs/contributing/story-recipes/story-with-media.mdx index a8c1f5a1..e7eb5b4e 100644 --- a/src/docs/contributing/story-recipes/story-with-media.mdx +++ b/src/docs/contributing/story-recipes/story-with-media.mdx @@ -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. diff --git a/src/docs/contributing/writing-component-stories.mdx b/src/docs/contributing/writing-component-stories.mdx index 17bebe30..0c345cf1 100644 --- a/src/docs/contributing/writing-component-stories.mdx +++ b/src/docs/contributing/writing-component-stories.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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." diff --git a/src/docs/contributing/writing-docs-stories.mdx b/src/docs/contributing/writing-docs-stories.mdx index f5914b80..85bea3f6 100644 --- a/src/docs/contributing/writing-docs-stories.mdx +++ b/src/docs/contributing/writing-docs-stories.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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'; -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # My docs page Your docs TK... diff --git a/src/docs/guides/customising-with-scss.mdx b/src/docs/guides/customising-with-scss.mdx index f1fa7a53..500a4d43 100644 --- a/src/docs/guides/customising-with-scss.mdx +++ b/src/docs/guides/customising-with-scss.mdx @@ -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. diff --git a/src/docs/guides/getting-help.mdx b/src/docs/guides/getting-help.mdx index 77b13fc2..959079da 100644 --- a/src/docs/guides/getting-help.mdx +++ b/src/docs/guides/getting-help.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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. diff --git a/src/docs/guides/google-docs.mdx b/src/docs/guides/google-docs.mdx index 7807332f..aa57707b 100644 --- a/src/docs/guides/google-docs.mdx +++ b/src/docs/guides/google-docs.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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. diff --git a/src/docs/guides/graphics-kit.mdx b/src/docs/guides/graphics-kit.mdx index ca2701f4..fbec50d5 100644 --- a/src/docs/guides/graphics-kit.mdx +++ b/src/docs/guides/graphics-kit.mdx @@ -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. diff --git a/src/docs/guides/using-docs.mdx b/src/docs/guides/using-docs.mdx index b4e2187a..f361ba2d 100644 --- a/src/docs/guides/using-docs.mdx +++ b/src/docs/guides/using-docs.mdx @@ -10,8 +10,6 @@ import moreStoriesImg from './imgs/more-stories.png'; -![](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. diff --git a/src/docs/intro.mdx b/src/docs/intro.mdx index 4adf749f..cd73e94c 100644 --- a/src/docs/intro.mdx +++ b/src/docs/intro.mdx @@ -3,8 +3,6 @@ import { parameters } from './utils/docsPage.js'; -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # @reuters-graphics/graphics-components

diff --git a/src/docs/layout/intro.mdx b/src/docs/layout/intro.mdx index 3e610b78..0de84f9a 100644 --- a/src/docs/layout/intro.mdx +++ b/src/docs/layout/intro.mdx @@ -5,8 +5,6 @@ import WellImg from './article-well.jpg'; -![](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. diff --git a/src/docs/styles/colours/intro.mdx b/src/docs/styles/colours/intro.mdx index 73640160..bc09a6d5 100644 --- a/src/docs/styles/colours/intro.mdx +++ b/src/docs/styles/colours/intro.mdx @@ -3,8 +3,6 @@ import { parameters } from '../../utils/docsPage.js'; -![](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. diff --git a/src/docs/styles/colours/primary.mdx b/src/docs/styles/colours/primary.mdx index 926b662f..f18203bc 100644 --- a/src/docs/styles/colours/primary.mdx +++ b/src/docs/styles/colours/primary.mdx @@ -27,8 +27,6 @@ import roseScheme from '../../../scss/colours/primary/_rose.scss?raw'; -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Primary colours -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Thematic colours -![](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. diff --git a/src/docs/styles/tokens/accessibility/main.mdx b/src/docs/styles/tokens/accessibility/main.mdx index 76e2f303..77df2364 100644 --- a/src/docs/styles/tokens/accessibility/main.mdx +++ b/src/docs/styles/tokens/accessibility/main.mdx @@ -7,8 +7,6 @@ import visibilityStyles from '../../../../scss/tokens/accessibility/_visibility. -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Accessibility tokens -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Background tokens -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Border tokens -![](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/). diff --git a/src/docs/styles/tokens/interactivity/_main.mdx b/src/docs/styles/tokens/interactivity/_main.mdx index d2dc80f8..1bc9d2cf 100644 --- a/src/docs/styles/tokens/interactivity/_main.mdx +++ b/src/docs/styles/tokens/interactivity/_main.mdx @@ -8,8 +8,6 @@ import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Interactivity tokens -![](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. diff --git a/src/docs/styles/tokens/layout/main.mdx b/src/docs/styles/tokens/layout/main.mdx index 166f6214..2ce82c16 100644 --- a/src/docs/styles/tokens/layout/main.mdx +++ b/src/docs/styles/tokens/layout/main.mdx @@ -12,8 +12,6 @@ import position from '../../../../scss/tokens/layout/_position.scss?raw'; -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Layout tokens -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Sizing tokens -![](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. diff --git a/src/docs/styles/tokens/typography/main.mdx b/src/docs/styles/tokens/typography/main.mdx index 2879b917..c8f5bac0 100644 --- a/src/docs/styles/tokens/typography/main.mdx +++ b/src/docs/styles/tokens/typography/main.mdx @@ -22,8 +22,6 @@ import './styles.scss'; -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - # Typography tokens -![](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. diff --git a/src/docs/theme-builder/theme-builder.mdx b/src/docs/theme-builder/theme-builder.mdx index 104701c6..17db6d57 100644 --- a/src/docs/theme-builder/theme-builder.mdx +++ b/src/docs/theme-builder/theme-builder.mdx @@ -5,8 +5,6 @@ import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx'; -![](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. diff --git a/src/docs/theming/css-variables.mdx b/src/docs/theming/css-variables.mdx index 8d2b3f0e..e1d84332 100644 --- a/src/docs/theming/css-variables.mdx +++ b/src/docs/theming/css-variables.mdx @@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js'; -![](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.