Styles

Author: Aitem

packages/react-components/src/components/ui/tabs.tsx

@@ -56,7 +56,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "px-3 py-2 text-sm font-regular cursor-pointer text-text-tertiary data-[state=active]:text-text-primary  border-b-2 data-[state=active]:border-border-brand border-transparent hover:text-text-tertiary-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow,border] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "label px-3 py-2 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary  border-b-2 data-[state=active]:border-border-brand border-transparent hover:text-text-tertiary-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow,border] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

packages/react-components/src/index.css

@@ -2,11 +2,14 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "./tokens.css";
+@import "./typography.css";
 
 @custom-variant dark (&:is(.dark *));
 
 /* Aliases here, light/dark theme specific */
+
 @theme {
+
   --color-text-primary: var(--color-neutral-900); 
     --color-text-primary-on-brand: var(--color-neutral-50); 
 

packages/react-components/src/typography.css

@@ -0,0 +1,6 @@
+.label {
+    font-size: var(--font-size-sm);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-leading-5);
+}