Merge pull request #328 from reuters-graphics/mf-theme-type

Renames Theme type

.changeset/hungry-tigers-mix.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+renames Theme and CustomTheme types

src/components/Theme/@types/component.ts

@@ -42,12 +42,12 @@ export interface CustomFont {
   size?: Partial<FontSize>;
 }
 
-export interface Theme {
+export interface ThemeConfig {
   colour: Colour;
   font: Font;
 }
 
-export interface CustomTheme {
+export interface CustomThemeConfig {
   colour?: Partial<Colour>;
   font?: Partial<CustomFont>;
   [customProperty: string]: unknown;

src/components/Theme/Theme.svelte

@@ -14,7 +14,7 @@
   import mergeThemes from './utils/merge.js';
 
   // Types
-  import type { CustomTheme, Theme } from './@types/component';
+  import type { CustomThemeConfig, ThemeConfig } from './@types/component';
   import type { Snippet } from 'svelte';
   type Base = 'light' | 'dark';
 
@@ -22,7 +22,7 @@
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme | Theme;
+    theme?: CustomThemeConfig | ThemeConfig;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

src/components/Theme/themes/common.js

@@ -1,4 +1,4 @@
-/** @type {Omit<import('../@types/component').Theme, "colour">} */
+/** @type {Omit<import('../@types/component').ThemeConfig, "colour">} */
 /* Generated from
 https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=21&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
 */

src/components/Theme/themes/dark.js

@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {

src/components/Theme/themes/light.js

@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {

src/components/Theme/utils/merge.ts

@@ -1,4 +1,4 @@
-import type { Theme, CustomTheme } from '../@types/component';
+import type { ThemeConfig, CustomThemeConfig } from '../@types/component';
 
 function isObject(item: unknown): item is Record<string, unknown> {
   return item !== null && typeof item === 'object' && !Array.isArray(item);
@@ -9,7 +9,7 @@ function isObject(item: unknown): item is Record<string, unknown> {
  */
 export default function merge<T extends Record<string, unknown>>(
   target: T,
-  ...sources: (Theme | CustomTheme)[]
+  ...sources: (ThemeConfig | CustomThemeConfig)[]
 ): T {
   if (!sources.length) return target;
   const source = sources.shift();