ui/typography: adds general typography component

pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx

@@ -1,10 +1,17 @@
 import {SidebarFlyout} from './SidebarFlyout'
+import {Typography} from '@/src/components/Typography'
 
-export const SidebarHeader = ()=>{
+interface SidebarHeader {
+    clanName?: string
+}
+
+export const SidebarHeader = (props:SidebarHeader)=>{
+    const {clanName} = props
+    
     return <header class="sidebar__header">
         <div class="sidebar__header__inner">
             <div class="sidebar__profile">P</div>
-            <h3 class="sidebar__title">Paul's Clan</h3>
+            <Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName || 'Untitled'}</Typography>
         </div>
         <SidebarFlyout/>
     </header>

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

@@ -1,4 +1,8 @@
 import { type JSX } from "solid-js"
+import { activeURI } from "@/src/App"
+import { createQuery } from "@tanstack/solid-query";
+import { callApi } from "@/src/api";
+
 import { List } from "../Helpers";
 
 import {SidebarHeader} from "./SidebarHeader"
@@ -11,9 +15,23 @@ export const SidebarSection = (props:{children: JSX.Element}) =>{
 }
 
 export const Sidebar = () => {
+    const query = createQuery(() => ({
+        queryKey: [activeURI(), "meta"],
+        queryFn: async () => {
+                const curr = activeURI();
+                if (curr) {
+                const result = await callApi("show_clan_meta", { uri: curr });
+                
+                if (result.status === "error") throw new Error("Failed to fetch data");
+                
+                return result.data;
+            }
+        },
+    }));
+
  return (
     <div class="sidebar bg-opacity-95">
-        <SidebarHeader/>
+        <SidebarHeader clanName={query.data?.name}/>
         <div class="sidebar__body">
             <SidebarSection>    
                 <List gapSize="small">

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

@@ -0,0 +1,23 @@
+.fnt-clr-primary {
+    color: var(--clr-fg-def-1);
+}
+
+.fnt-clr-secondary {
+    color: var(--clr-fg-def-2);
+}
+
+.fnt-clr-tertiary {
+    color: var(--clr-fg-def-3);
+}
+
+.fnt-clr-primary.fnt-clr--inverted {
+    color: var(--clr-fg-inv-1);
+}
+
+.fnt-clr-secondary.fnt-clr--inverted {
+    color: var(--clr-fg-inv-2);
+}
+
+.fnt-clr-tertiary.fnt-clr--inverted {
+    color: var(--clr-fg-inv-3);
+}

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

@@ -0,0 +1,3 @@
+@import './typography-body.css';
+@import './typography-title.css';
+@import './typography-headline.css'

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

@@ -0,0 +1,17 @@
+.fnt-body-default {
+    font-size: 1rem;
+    line-height: 132%;
+    letter-spacing: 3%;
+}
+
+.fnt-body-s {
+    font-size: 0.875rem;
+    line-height: 132%;
+    letter-spacing: 3%;
+}
+
+.fnt-body-xs {
+    font-size: 0.75rem;
+    line-height: 132%;
+    letter-spacing: 3%;
+}

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

@@ -0,0 +1,17 @@
+.fnt-headline-default {
+    font-size: 1.5rem;
+    line-height: 116%;
+    letter-spacing: 1%;
+}
+
+.fnt-headline-m {
+    font-size: 1.75rem;
+    line-height: 116%;
+    letter-spacing: 1%;
+}
+
+.fnt-headline-l {
+    font-size: 2rem;
+    line-height: 116%;
+    letter-spacing: 1%;
+}

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

@@ -0,0 +1,18 @@
+.fnt-title-default {
+    font-size: 1.125rem;
+    line-height: 124%;
+    letter-spacing: 3%;
+}
+
+
+.fnt-title-m {
+    font-size: 1.25rem;
+    line-height: 124%;
+    letter-spacing: 3%;
+}
+
+.fnt-title-l {
+    font-size: 1.375rem;
+    line-height: 124%;
+    letter-spacing: 3%;
+}

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

@@ -0,0 +1,27 @@
+@import './typography-hierarchy/';
+@import './typography-color.css';
+
+.fnt-weight-normal {
+    font-weight: normal;
+}
+
+.fnt-weight-medium {
+    font-weight: medium;
+}
+
+.fnt-weight-bold {
+    font-weight: bold;
+}
+
+
+.fnt-weight-normal.fnt-clr--inverted {
+    font-weight: light;
+}
+
+.fnt-weight-medium.fnt-clr--inverted {
+    font-weight: normal;
+}
+
+.fnt-weight-bold.fnt-clr--inverted {
+    font-weight: 600;
+}

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

@@ -0,0 +1,27 @@
+import {type JSX} from 'solid-js'
+import {Dynamic} from 'solid-js/web'
+
+import './css/typography.css'
+
+type Hierarchy = 'body' | 'title' | 'headline'
+type Size = 'default' | 'xs' | 's' | 'm' | 'l'
+type Color = 'primary' | 'secondary' | 'tertiary'
+type Weight = 'normal' | 'medium' | 'bold'
+type Tag = 'span' | 'p' | 'h1' | 'h2' |'h3'| 'h4'  
+
+interface Typography {
+    hierarchy: Hierarchy
+    weight: Weight
+    color: Color
+    inverted: boolean
+    size: Size
+    tag: Tag
+    children: JSX.Element
+    classes?: string
+}
+
+export const Typography = (props: Typography) => {
+    const {size, color, inverted, hierarchy, weight, tag, children, classes} = props
+    
+    return <Dynamic component={tag} class={`${classes? classes + ' ' : ''} fnt-${hierarchy}-${size} fnt-clr-${color} fnt-clr--${inverted ? 'inverted' : 'default'} fnt-${weight}`}>{children}</Dynamic>
+}