UI: typography add color: 'inherit'

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"],

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],
     )}
   >
     {

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"