UI: init label typography

pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/index.css

@@ -1,3 +1,4 @@
+@import "./typography-label.css";
 @import "./typography-body.css";
 @import "./typography-title.css";
 @import "./typography-headline.css";

pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-label.css

@@ -0,0 +1,14 @@
+.fnt-label-default {
+  font-size: 0.8125rem;
+  line-height: 100%;
+}
+
+.fnt-label-s {
+  font-size: 0.75rem;
+  line-height: 100%;
+}
+
+.fnt-label-xs {
+  font-size: 0.6875rem;
+  line-height: 100%;
+}

pkgs/webview-ui/app/src/components/Typography/index.tsx

@@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web";
 import cx from "classnames";
 import "./css/typography.css";
 
-type Hierarchy = "body" | "title" | "headline";
+type Hierarchy = "body" | "title" | "headline" | "label";
 type Color = "primary" | "secondary" | "tertiary";
 type Weight = "normal" | "medium" | "bold";
 type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4";
@@ -16,6 +16,11 @@ const colorMap: Record<Color, string> = {
 
 // type Size = "default" | "xs" | "s" | "m" | "l";
 interface SizeForHierarchy {
+  label: {
+    default: string;
+    xs: string;
+    s: string;
+  };
   body: {
     default: string;
     xs: string;
@@ -57,6 +62,11 @@ const sizeHierarchyMap: SizeForHierarchy = {
     m: cx("fnt-title-m"),
     l: cx("fnt-title-l"),
   },
+  label: {
+    default: cx("fnt-label-default"),
+    s: cx("fnt-label-s"),
+    xs: cx("fnt-label-xs"),
+  },
 };
 
 const weightMap: Record<Weight, string> = {
@@ -74,18 +84,20 @@ interface TypographyProps<H extends Hierarchy> {
   inverted?: boolean;
   tag?: Tag;
   class?: string;
+  classList?: Record<string, boolean>;
 }
 export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => {
   return (
     <Dynamic
       component={props.tag || "span"}
       class={cx(
-        props.class,
         colorMap[props.color || "primary"],
         props.inverted && "fnt-clr--inverted",
         sizeHierarchyMap[props.hierarchy][props.size] as string,
         weightMap[props.weight || "normal"],
+        props.class
       )}
+      classList={props.classList}
     >
       {props.children}
     </Dynamic>

pkgs/webview-ui/app/tailwind/typography.ts

@@ -10,6 +10,9 @@ export const typography: Partial<Config["theme"]> = {
     title: ["1.125rem", { lineHeight: "124%" }],
     "title-m": ["1.25rem", { lineHeight: "124%" }],
     "title-l": ["1.375rem", { lineHeight: "124%" }],
+    label: ["0.8125rem", { lineHeight: "100%" }],
+    "label-s": ["0.75rem", { lineHeight: "100%" }],
+    "label-xs": ["0.6875rem", { lineHeight: "124%" }],
   },
   // textColor: {
   //   ...defaultTheme.textColor,