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

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

Browse source 
Renames Theme type
This commit is contained in:
MinamiFunakoshiTR 2025-07-14 10:35:16 -04:00 committed by GitHub
commit 5312fa0c7e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hungry-tigers-mix.md Normal file
View file

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

4
src/components/Theme/@types/component.ts
View file

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

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

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

2
src/components/Theme/themes/common.js
View file

@ -1,4 +1,4 @@
/** @type {Omit<import('../@types/component').Theme, "colour">} */ /** @type {Omit<import('../@types/component').ThemeConfig, "colour">} */
/* Generated from /* 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 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
*/ */

2
src/components/Theme/themes/dark.js
View file

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

2
src/components/Theme/themes/light.js
View file

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

4
src/components/Theme/utils/merge.ts
View file

@ -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> { function isObject(item: unknown): item is Record<string, unknown> {
return item !== null && typeof item === 'object' && !Array.isArray(item); 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>>( export default function merge<T extends Record<string, unknown>>(
target: T, target: T,
...sources: (Theme | CustomTheme)[] ...sources: (ThemeConfig | CustomThemeConfig)[]
): T { ): T {
if (!sources.length) return target; if (!sources.length) return target;
const source = sources.shift(); const source = sources.shift();