Merge pull request 'UI: init label typography' (#2625) from hsjobeki/clan-core:hsjobeki-main into main

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/core-plugin.ts

@@ -7,6 +7,71 @@ import { parseColor } from "tailwindcss/lib/util/color";
 const toRGB = (value: string) =>
   "rgb(" + parseColor(value).color.join(" ") + ")";
 
+const mkBorderUtils = (
+  theme: (n: string) => unknown,
+  prefix: string,
+  cssProperty: string,
+) => ({
+  // - def colors
+  [`.${prefix}-def-1`]: {
+    [cssProperty]: theme("colors.secondary.50"),
+  },
+  [`.${prefix}-def-2`]: {
+    [cssProperty]: theme("colors.secondary.100"),
+  },
+  [`.${prefix}-def-3`]: {
+    [cssProperty]: theme("colors.secondary.200"),
+  },
+  [`.${prefix}-def-4`]: {
+    [cssProperty]: theme("colors.secondary.300"),
+  },
+  [`.${prefix}-def-5`]: {
+    [cssProperty]: theme("colors.secondary.400"),
+  },
+  // - inverse colors
+  [`.${prefix}-inv-1`]: {
+    [cssProperty]: theme("colors.secondary.800"),
+  },
+  [`.${prefix}-inv-2`]: {
+    [cssProperty]: theme("colors.secondary.900"),
+  },
+  [`.${prefix}-inv-3`]: {
+    [cssProperty]: theme("colors.secondary.900"),
+  },
+  [`.${prefix}-inv-4`]: {
+    [cssProperty]: theme("colors.secondary.950"),
+  },
+  [`.${prefix}-inv-5`]: {
+    [cssProperty]: theme("colors.black"),
+  },
+
+  [`.${prefix}-int-1`]: {
+    [cssProperty]: theme("colors.info.500"),
+  },
+  [`.${prefix}-int-2`]: {
+    [cssProperty]: theme("colors.info.600"),
+  },
+  [`.${prefix}-int-3`]: {
+    [cssProperty]: theme("colors.info.700"),
+  },
+  [`.${prefix}-int-4`]: {
+    [cssProperty]: theme("colors.info.800"),
+  },
+
+  [`.${prefix}-semantic-1`]: {
+    [cssProperty]: theme("colors.error.500"),
+  },
+  [`.${prefix}-semantic-2`]: {
+    [cssProperty]: theme("colors.error.600"),
+  },
+  [`.${prefix}-semantic-3`]: {
+    [cssProperty]: theme("colors.error.700"),
+  },
+  [`.${prefix}-semantic-4`]: {
+    [cssProperty]: theme("colors.error.800"),
+  },
+});
+
 export default plugin.withOptions(
   (_options = {}) =>
     ({ addUtilities, theme }) => {
@@ -44,6 +109,19 @@ export default plugin.withOptions(
           backgroundColor: theme("colors.primary.950"),
         },
         // bg inverse accent
+        ".bg-acc-1": {
+          backgroundColor: theme("colors.primary.50"),
+        },
+        ".bg-acc-2": {
+          backgroundColor: theme("colors.secondary.100"),
+        },
+        ".bg-acc-3": {
+          backgroundColor: theme("colors.secondary.200"),
+        },
+        ".bg-acc-4": {
+          backgroundColor: theme("colors.secondary.300"),
+        },
+        // bg inverse accent
         ".bg-inv-acc-1": {
           backgroundColor: theme("colors.secondary.500"),
         },
@@ -53,6 +131,9 @@ export default plugin.withOptions(
         ".bg-inv-acc-3": {
           backgroundColor: theme("colors.secondary.700"),
         },
+        ".bg-inv-acc-4": {
+          backgroundColor: theme("colors.primary.900"),
+        },
 
         // Text colors
         ".fg-def-1": {
@@ -81,39 +162,22 @@ export default plugin.withOptions(
           color: theme("colors.secondary.400"),
         },
 
-        // Border colors
-        ".border-def-1": {
-          borderColor: theme("colors.secondary.50"),
+        ".fg-semantic-1": {
+          color: theme("colors.error.500"),
         },
-        ".border-def-2": {
-          borderColor: theme("colors.secondary.100"),
+        ".fg-semantic-2": {
+          color: theme("colors.error.600"),
         },
-        ".border-def-3": {
-          borderColor: theme("colors.secondary.200"),
+        ".fg-semantic-3": {
+          color: theme("colors.error.700"),
         },
-        ".border-def-4": {
-          borderColor: theme("colors.secondary.300"),
-        },
-        ".border-def-5": {
-          borderColor: theme("colors.secondary.400"),
-        },
-        // border inverse
-        ".border-inv-1": {
-          borderColor: theme("colors.secondary.800"),
-        },
-        ".border-inv-2": {
-          borderColor: theme("colors.secondary.900"),
-        },
-        ".border-inv-3": {
-          borderColor: theme("colors.secondary.900"),
-        },
-        ".border-inv-4": {
-          borderColor: theme("colors.secondary.950"),
-        },
-        ".border-inv-5": {
-          borderColor: theme("colors.black"),
+        ".fg-semantic-4": {
+          color: theme("colors.error.800"),
         },
 
+        ...mkBorderUtils(theme, "border", "borderColor"),
+        ...mkBorderUtils(theme, "outline", "outlineColor"),
+
         // Example: dark mode utilities (all elements within <html class="dark"> )
         // ".dark .bg-def-1": {
         //   backgroundColor: theme("colors.black"),
@@ -194,6 +258,7 @@ export default plugin.withOptions(
           },
         },
         boxShadow: {
+          "input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
           "inner-primary":
             "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
           "inner-primary-active":

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,