From 85255ae4cea1a59153b700a99ce5e4de37dda771 Mon Sep 17 00:00:00 2001 From: Sebastian-ubs <141921979+Sebastian-ubs@users.noreply.github.com> Date: Thu, 8 Aug 2024 09:05:22 +0200 Subject: [PATCH] preview: add more info about theming (#1054) add more info about theming --- .../guide/theming.guide.component.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/lib/platform-bible-react/src/preview/components/guide/theming.guide.component.tsx b/lib/platform-bible-react/src/preview/components/guide/theming.guide.component.tsx index bdae93a774..f4276a19fa 100644 --- a/lib/platform-bible-react/src/preview/components/guide/theming.guide.component.tsx +++ b/lib/platform-bible-react/src/preview/components/guide/theming.guide.component.tsx @@ -46,6 +46,46 @@ export default function ThemingGuide() { +

Overwriting styles

+

+ Try to not overwrite styles (colors). In case you need to, use Tailwind classes to apply + color variables, in the same way that shadcn does it. Shadcn defines the colors that you can + find on the next page. +

+
+

+ To overwrite styles use Tailwind css classes like{' '} + className="pr-bg-muted" on a header-like component and{' '} + className="pr-text-muted-foreground" for text on this component. +

+

+ You can also use shades of these colors with{' '} + className="pr-bg-muted/50", but try to stay consistent with how + shadcn applies these styles in a very deliberate, rare choice. +

+
+

+ Descriptions on which colors should be used in which context are still to be added to this + preview app. If you are unsure, check out how{' '} + + shadcn + {' '} + uses a similar thing or talk to the{' '} + + Paratext UX team + + . +

); }