From 4ffa33407c9dd65d9ff3d036a9b6ed0a4d81b9c3 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 6 Jan 2025 10:20:03 +0100
Subject: [PATCH] UI: typography add color: 'inherit'

---
 pkgs/webview-ui/app/src/components/Typography/index.tsx | 8 +++-----
 pkgs/webview-ui/app/src/components/group/index.tsx      | 2 +-
 pkgs/webview-ui/app/src/components/inputBase/index.tsx  | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/pkgs/webview-ui/app/src/components/Typography/index.tsx b/pkgs/webview-ui/app/src/components/Typography/index.tsx
index 29957aa35..fcc829ab0 100644
--- a/pkgs/webview-ui/app/src/components/Typography/index.tsx
+++ b/pkgs/webview-ui/app/src/components/Typography/index.tsx
@@ -80,14 +80,11 @@ interface _TypographyProps<H extends Hierarchy> {
   size: AllowedSizes<H>;
   children: JSX.Element;
   weight?: Weight;
-  color?: Color;
+  color?: Color | "inherit";
   inverted?: boolean;
   tag?: Tag;
   class?: string;
   classList?: Record<string, boolean>;
-  // Disable using the color prop
-  // A font color is provided via class / classList or inherited
-  useExternColor?: boolean;
 }
 
 export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
@@ -95,7 +92,8 @@ export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
     <Dynamic
       component={props.tag || "span"}
       class={cx(
-        !props.useExternColor && colorMap[props.color || "primary"],
+        props.color === "inherit" && "text-inherit",
+        props.color !== "inherit" && colorMap[props.color || "primary"],
         props.inverted && "fnt-clr--inverted",
         sizeHierarchyMap[props.hierarchy][props.size] as string,
         weightMap[props.weight || "normal"],
diff --git a/pkgs/webview-ui/app/src/components/group/index.tsx b/pkgs/webview-ui/app/src/components/group/index.tsx
index ef04e66f0..ff0437271 100644
--- a/pkgs/webview-ui/app/src/components/group/index.tsx
+++ b/pkgs/webview-ui/app/src/components/group/index.tsx
@@ -38,7 +38,7 @@ export const SectionHeader = (props: SectionHeaderProps) => (
   <div
     class={cx(
       "flex items-center gap-3 rounded-md px-3 py-2",
-      variantColorsMap[props.variant]
+      variantColorsMap[props.variant],
     )}
   >
     {
diff --git a/pkgs/webview-ui/app/src/components/inputBase/index.tsx b/pkgs/webview-ui/app/src/components/inputBase/index.tsx
index eda2298ff..b879e7550 100644
--- a/pkgs/webview-ui/app/src/components/inputBase/index.tsx
+++ b/pkgs/webview-ui/app/src/components/inputBase/index.tsx
@@ -132,7 +132,7 @@ export const InputLabel = (props: InputLabelProps) => {
           {props.required && (
             <Typography
               class="inline-flex px-1 align-text-top leading-[0.5] fg-def-4"
-              useExternColor={true}
+              color="inherit"
               hierarchy="label"
               weight="bold"
               size="xs"