Merge pull request 'Typography and contrast improvements for the UI' (#4797) from ui/typography-size-increases into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4797

pkgs/clan-app/ui/src/components/Button/Button.css

@@ -1,17 +1,12 @@
 .button {
   @apply flex gap-2 shrink-0 items-center justify-center;
-  @apply px-4 py-2;
-
-  height: theme(height.9);
-  border-radius: 3px;
+  @apply h-[2.125rem] px-4 py-2 rounded-[0.1875rem];
 
   /* Add transition for smooth width animation */
   transition: width 0.5s ease 0.1s;
 
   &.s {
-    @apply px-3 py-1.5;
-    height: theme(height.7);
-    border-radius: 2px;
+    @apply h-[1.625rem] px-3 py-1.5 rounded-[0.125rem];
 
     &:has(> .icon-start):has(> .label) {
       @apply pl-2;
@@ -22,6 +17,18 @@
     }
   }
 
+  &.xs {
+    @apply h-[1.125rem] gap-0.5 p-2 rounded-[0.125rem];
+
+    &:has(> .icon-start):has(> .label) {
+      @apply pl-1.5;
+    }
+
+    &:has(> .icon-end):has(> .label) {
+      @apply pr-1.5;
+    }
+  }
+
   &.primary {
     @apply bg-inv-acc-4 fg-inv-1;
     @apply border border-solid border-inv-4;

pkgs/clan-app/ui/src/components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
 
 const ButtonExamples: Component<ButtonProps> = (props) => (
   <>
-    <div class="grid w-fit grid-cols-4 gap-8">
+    <div class="grid w-fit grid-cols-6 gap-8">
       <div>
         <Button data-testid="default" {...props}>
           Label
@@ -19,6 +19,11 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button data-testid="xsmall" size="xs" {...props}>
+          Label
+        </Button>
+      </div>
       <div>
         <Button data-testid="default-disabled" {...props} disabled={true}>
           Disabled
@@ -35,6 +40,17 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
         </Button>
       </div>
 
+      <div>
+        <Button
+          data-testid="xsmall-disabled"
+          {...props}
+          disabled={true}
+          size="xs"
+        >
+          Disabled
+        </Button>
+      </div>
+
       <div>
         <Button data-testid="default-start-icon" {...props} startIcon="Flash">
           Label
@@ -50,6 +66,16 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-start-icon"
+          {...props}
+          startIcon="Flash"
+          size="xs"
+        >
+          Label
+        </Button>
+      </div>
       <div>
         <Button
           data-testid="default-disabled-start-icon"
@@ -72,6 +98,18 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
         </Button>
       </div>
 
+      <div>
+        <Button
+          data-testid="xsmall-disabled-start-icon"
+          {...props}
+          startIcon="Flash"
+          size="xs"
+          disabled={true}
+        >
+          Disabled
+        </Button>
+      </div>
+
       <div>
         <Button data-testid="default-end-icon" {...props} endIcon="Flash">
           Label
@@ -87,6 +125,16 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-end-icon"
+          {...props}
+          endIcon="Flash"
+          size="xs"
+        >
+          Label
+        </Button>
+      </div>
       <div>
         <Button
           data-testid="default-disabled-end-icon"
@@ -108,12 +156,27 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Disabled
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-disabled-end-icon"
+          {...props}
+          endIcon="Flash"
+          size="xs"
+          disabled={true}
+        >
+          Disabled
+        </Button>
+      </div>
+
       <div>
         <Button data-testid="default-icon" {...props} icon="Flash" />
       </div>
       <div>
         <Button data-testid="small-icon" {...props} icon="Flash" size="s" />
       </div>
+      <div>
+        <Button data-testid="xsmall-icon" {...props} icon="Flash" size="xs" />
+      </div>
       <div>
         <Button
           data-testid="default-disabled-icon"
@@ -131,6 +194,15 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           size="s"
         />
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-disabled-icon"
+          {...props}
+          icon="Flash"
+          disabled={true}
+          size="xs"
+        />
+      </div>
     </div>
   </>
 );

pkgs/clan-app/ui/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import "./Button.css";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 import { Loader } from "@/src/components/Loader/Loader";
 
-export type Size = "default" | "s";
+export type Size = "default" | "s" | "xs";
 export type Hierarchy = "primary" | "secondary";
 
 export type Action = () => Promise<void>;
@@ -28,6 +28,7 @@ export interface ButtonProps
 const iconSizes: Record<Size, string> = {
   default: "1rem",
   s: "0.8125rem",
+  xs: "0.625rem",
 };
 
 export const Button = (props: ButtonProps) => {

pkgs/clan-app/ui/src/components/Form/Label.tsx

@@ -36,7 +36,7 @@ export interface LabelProps {
 }
 
 export const Label = (props: LabelProps) => {
-  const descriptionSize = () => (props.size == "default" ? "xs" : "xxs");
+  const descriptionSize = () => (props.size == "default" ? "s" : "xs");
 
   return (
     <Show when={props.label}>

pkgs/clan-app/ui/src/components/Select/Select.module.css

@@ -60,7 +60,7 @@
 
   /* Option elements (typically <li>) */
   & [role="option"] {
-    @apply px-2 py-4 rounded-sm flex items-center gap-1 flex-shrink-0;
+    @apply p-2 rounded-sm flex items-center gap-1 flex-shrink-0;
 
     &[data-highlighted],
     &:focus-visible {

pkgs/clan-app/ui/src/components/Select/Select.tsx

@@ -100,9 +100,10 @@ export const Select = (props: SelectProps) => {
           </KSelect.ItemIndicator>
           <KSelect.ItemLabel>
             <Typography
-              hierarchy="body"
-              size="xs"
+              hierarchy="label"
+              size="s"
               weight="bold"
+              family="condensed"
               class="flex w-full items-center"
             >
               {props.item.rawValue.label}
@@ -115,9 +116,10 @@ export const Select = (props: SelectProps) => {
           when={!loading()}
           fallback={
             <Typography
-              hierarchy="body"
-              size="xs"
+              hierarchy="label"
+              size="s"
               weight="bold"
+              family="condensed"
               class="flex w-full items-center"
               color="secondary"
             >
@@ -126,9 +128,10 @@ export const Select = (props: SelectProps) => {
           }
         >
           <Typography
-            hierarchy="body"
-            size="xs"
+            hierarchy="label"
+            size="s"
             weight="bold"
+            family="condensed"
             class="flex w-full items-center"
           >
             {props.placeholder}
@@ -152,9 +155,10 @@ export const Select = (props: SelectProps) => {
           <KSelect.Value<Option>>
             {(state) => (
               <Typography
-                hierarchy="body"
-                size="xs"
+                hierarchy="label"
+                size="s"
                 weight="bold"
+                family="condensed"
                 class="flex w-full items-center"
               >
                 {state.selectedOption().label}

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css

@@ -9,13 +9,13 @@ div.sidebar-body {
   overflow-y: auto;
   scrollbar-width: none;
 
-  scrollbar-color: theme(colors.primary.700) theme(colors.primary.600);
-
-  background: linear-gradient(
-    180deg,
-    theme(colors.bg.inv.1) 0%,
-    theme(colors.bg.inv.3) 100%
-  );
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
+    linear-gradient(
+      180deg,
+      theme(colors.bg.inv.1) 0%,
+      theme(colors.bg.inv.3) 100%
+    );
 
   @apply backdrop-blur-sm;
 
@@ -27,14 +27,12 @@ div.sidebar-body {
     }
 
     & > .item {
-      @apply py-3 px-1.5 bg-inv-3 rounded-md mb-4;
-
       &:last-child {
         @apply mb-0;
       }
 
       & > .header {
-        @apply flex mb-4 px-2;
+        @apply flex mb-2 px-2;
 
         & > .trigger {
           @apply inline-flex items-center justify-between w-full;
@@ -61,6 +59,8 @@ div.sidebar-body {
 
       & > .content {
         @apply overflow-hidden flex flex-col;
+        @apply py-3 px-1.5 bg-inv-4 rounded-md mb-4;
+
         animation: slideAccordionUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 
         &[data-expanded] {

pkgs/clan-app/ui/src/components/Tag/Tag.css

@@ -1,5 +1,5 @@
 span.tag {
-  @apply flex items-center gap-1 w-fit px-2 py-1 rounded-full;
+  @apply flex items-center gap-1 w-fit px-2 py-[0.1875rem] rounded-full;
   @apply bg-def-4;
 
   &:focus-visible {

pkgs/clan-app/ui/src/components/Typography/Typography.css

@@ -28,25 +28,25 @@
     &.size-default {
       font-size: 1rem;
       line-height: 1.32;
-      letter-spacing: 0.02rem;
+      letter-spacing: 0.005rem;
     }
 
     &.size-s {
       font-size: 0.875rem;
       line-height: 1.32;
-      letter-spacing: 0.0175rem;
+      letter-spacing: 0.00875rem;
     }
 
     &.size-xs {
-      font-size: 0.75rem;
+      font-size: 0.8125rem;
       line-height: 1.32;
-      letter-spacing: 0.0225rem;
+      letter-spacing: 0.01625rem;
     }
 
     &.size-xxs {
-      font-size: 0.6875rem;
+      font-size: 0.75rem;
       line-height: 1.32;
-      letter-spacing: 0.00688rem;
+      letter-spacing: 0.015rem;
     }
   }
 
@@ -55,27 +55,21 @@
       font-family: "Archivo SemiCondensed", sans-serif;
 
       &.size-default {
-        font-size: 0.875rem;
-        line-height: 1;
-        letter-spacing: 0.0175rem;
+        font-size: 1rem;
+        line-height: normal;
+        letter-spacing: 0.02rem;
       }
 
       &.size-s {
-        font-size: 0.8125rem;
-        line-height: 1;
+        font-size: 0.875rem;
+        line-height: normal;
         letter-spacing: 0.0175rem;
       }
 
       &.size-xs {
-        font-size: 0.75rem;
-        line-height: 1;
-        letter-spacing: 0.0075rem;
-      }
-
-      &.size-xxs {
-        font-size: 0.6875rem;
-        line-height: 1;
-        letter-spacing: normal;
+        font-size: 0.8125rem;
+        line-height: normal;
+        letter-spacing: 0.008125rem;
       }
     }
 
@@ -83,20 +77,20 @@
       font-family: "Commit Mono", monospace;
 
       &.size-default {
-        font-size: 0.8125rem;
-        line-height: 1;
+        font-size: 1rem;
+        line-height: normal;
         letter-spacing: normal;
       }
 
       &.size-s {
-        font-size: 0.75rem;
-        line-height: 1;
+        font-size: 0.875rem;
+        line-height: normal;
         letter-spacing: normal;
       }
 
       &.size-xs {
-        font-size: 0.6875rem;
-        line-height: 1;
+        font-size: 0.8125rem;
+        line-height: normal;
         letter-spacing: normal;
       }
     }

pkgs/clan-app/ui/tailwind/core-plugin.ts

@@ -203,7 +203,7 @@ const colorSystem = {
       1: primaries.secondary["950"],
       2: primaries.secondary["900"],
       3: primaries.secondary["700"],
-      4: primaries.secondary["500"],
+      4: primaries.secondary["600"],
     },
     inv: {
       1: primaries.off.white,