From 53303523db1a941907766902bcf79b3f320b4dd2 Mon Sep 17 00:00:00 2001 From: Peter Sanderson Date: Mon, 30 Sep 2024 12:37:21 +0200 Subject: [PATCH] chore: better explanation for themeing in packags in comments --- packages/components/src/config/colors.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/components/src/config/colors.ts b/packages/components/src/config/colors.ts index d5d347d86d0..c9f1d5dda94 100644 --- a/packages/components/src/config/colors.ts +++ b/packages/components/src/config/colors.ts @@ -1,12 +1,12 @@ import { boxShadows, colorVariants } from '@trezor/theme'; -// TODO: button hover color could be derived from its based color by applying something like opacity/darkening -// same goes for gradients +// TODO: button hover color could be derived from its based color +// by applying something like opacity/darkening, same goes for gradients type LightThemeProps = typeof intermediaryTheme.light; type DarkThemeProps = typeof intermediaryTheme.dark; -// extracts values for common props (eg. NEUE_BG_GREEN: "#00854D" | "#e3ede0") +// Extracts values for common props (eg. NEUE_BG_GREEN: "#00854D" | "#e3ede0") type CommonThemeProps = { [K in keyof LightThemeProps & keyof DarkThemeProps]: LightThemeProps[K] | DarkThemeProps[K]; }; @@ -14,7 +14,18 @@ type CommonThemeProps = { type PropsOnlyInLightTheme = Omit; type PropsOnlyInDarkTheme = Omit; -// all common theme props and their values are nicely listed, props that are specific to given theme are marked optional +/** + * IMPORTANT: + * + * You have to do this in the every package where you are accessing these theme props + * 1) create `styled.d.ts` file in the root of the project with overwrite of DefaultTheme + * 2) add `typescript-styled-plugin` into the packages devDependencies + * + * See `suite` package for reference. + */ + +// All common theme props and their values are nicely listed, +// props that are specific to given theme are marked optional. export type SuiteThemeColors = CommonThemeProps & Partial & Partial;