@rebasepro/ui 0.6.0 → 0.6.1

package/dist/src/index.css

@@ -65,51 +65,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-normal;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
-    @apply text-base;
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
-export declare const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-export declare const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
+export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+export declare const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 export declare const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Alert.tsx

@@ -58,7 +58,7 @@ export const Alert: React.FC<AlertProps> = ({
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",
-                "rounded-md flex items-center gap-2",
+                "rounded-lg flex items-center gap-2",
                 classes,
                 outerClassName)}>
             <div className={cls("grow", className)}>{children}</div>

package/src/components/BooleanSwitchWithLabel.tsx

@@ -69,7 +69,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 !invisible && fieldBackgroundMixin,
                 !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),
                 disabled ? "cursor-default" : "cursor-pointer",
-                "rounded-md max-w-full justify-between box-border relative inline-flex items-center",
+                "rounded-lg max-w-full justify-between box-border relative inline-flex items-center",
                 !invisible && focus && !disabled ? focusedClasses : "",
                 error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
                 {

package/src/components/Button.tsx

@@ -32,17 +32,17 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
+        "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
         "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants

package/src/components/Chip.tsx

@@ -25,10 +25,10 @@ export interface ChipProps {
 }
 
 const sizeClassNames = {
-    smallest: "px-1.5 text-xs",
-    small: "px-2 py-0.5 text-sm",
-    medium: "px-3 py-1 text-sm",
-    large: "px-4 py-1.5 text-sm"
+    smallest: "px-1.5 py-px text-[10px]",
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-0.5 text-xs",
+    large: "px-3 py-1 text-xs"
 }
 
 /**
@@ -40,6 +40,21 @@ function isDarkMode(): boolean {
         document.documentElement.classList.contains("dark");
 }
 
+/**
+ * Helper to generate rgba from hex or standard colors.
+ */
+function getRgba(hex: string, alpha: number): string {
+    if (!hex || !hex.startsWith("#")) return hex;
+    let color = hex.slice(1);
+    if (color.length === 3) {
+        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+    }
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * @group Preview components
  */
@@ -50,28 +65,15 @@ export function Chip({
                          outlined,
                          onClick,
                          icon,
-                         size = "large",
+                         size = "medium",
                          className,
                          style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
-
-    // Resolve theme-aware colors
     const dark = isDarkMode();
 
-    // Helper to generate rgba from hex or standard colors
-    const getRgba = (hex: string, alpha: number): string => {
-        if (!hex || !hex.startsWith("#")) return hex;
-        let color = hex.slice(1);
-        if (color.length === 3) {
-            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-        }
-        const r = parseInt(color.slice(0, 2), 16);
-        const g = parseInt(color.slice(2, 4), 16);
-        const b = parseInt(color.slice(4, 6), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    };
+    const hasScheme = error || usedColorScheme;
 
     let textColor = "";
     let bgColor = "";
@@ -81,44 +83,44 @@ export function Chip({
         textColor = dark ? "#f87171" : "#dc2626";
     } else if (usedColorScheme) {
         textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-    } else {
-        textColor = dark ? "#d4d4d4" : "#404040";
     }
 
-    if (outlined) {
-        bgColor = getRgba(textColor, dark ? 0.12 : 0.06);
-        border = `1px solid ${getRgba(textColor, dark ? 0.25 : 0.18)}`;
-    } else {
-        if (error) {
-            bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
-            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
+    if (hasScheme) {
+        if (outlined) {
+            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);
+            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
+        } else if (error) {
+            bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
         } else if (usedColorScheme) {
             bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-        } else {
-            bgColor = dark ? "#1f1f1f" : "#f4f4f5";
-            border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
         }
     }
 
     return (
         <div
-            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
-                onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "",
+                "transition-colors duration-150",
+                !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700",
+                !hasScheme && outlined && "bg-transparent dark:bg-transparent",
+                onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "",
                 sizeClassNames[size],
                 className)}
             onClick={onClick}
             style={{
-                backgroundColor: bgColor,
-                color: textColor,
-                border: border || undefined,
+                ...(hasScheme ? {
+                    backgroundColor: bgColor,
+                    color: textColor,
+                    border: border || undefined,
+                } : {}),
                 overflow: "hidden",
                 ...style
             }}
         >
-            {children}
             {icon}
+            {children}
         </div>
     );
 }

package/src/components/DateTimeField.tsx

@@ -225,7 +225,7 @@ hour12: false,
             <style>{inputStyles}</style>
             <div
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     {
@@ -272,7 +272,7 @@ hour12: false,
                     className={cls(
                         "w-full outline-hidden bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
-                        "rounded-md",
+                        "rounded-lg",
                         {
                             "min-h-[28px]": size === "smallest",
                             "min-h-[32px]": size === "small",

package/src/components/Dialog.tsx

@@ -127,7 +127,7 @@ export const Dialog = ({
                                 fullHeight && !fullScreen ? "h-full" : undefined,
                                 "text-surface-accent-900 dark:text-white",
                                 "justify-center items-center",
-                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
+                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
                                 "ease-in-out duration-200",
                                 scrollable && "overflow-y-auto",
                                 displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",

package/src/components/ExpandablePanel.tsx

@@ -82,7 +82,7 @@ export function ExpandablePanel({
             <Collapsible.Root
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md",
+                    "rounded-lg",
                     "w-full",
                     className
                 )}

package/src/components/FileUpload.tsx

@@ -70,7 +70,7 @@ export function FileUpload({
         className={cls(
             fieldBackgroundMixin,
             "flex gap-2",
-            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
+            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {
                 "h-44": size === "large",
                 "h-28": size === "medium",

package/src/components/FilterChip.tsx

@@ -58,14 +58,14 @@ export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(f
             className={cls(
                 "inline-flex items-center gap-1 rounded-full",
                 "font-medium whitespace-nowrap select-none shrink-0",
-                "transition-all duration-150",
+                "transition-colors duration-150",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                 sizeClasses[size],
                 active
                     ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]"
                     : cls(
                         "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
-                        !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"
+                        !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"
                     ),
                 disabled && "opacity-50 cursor-not-allowed",
                 className

package/src/components/IconButton.tsx

@@ -21,7 +21,7 @@ const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 da
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    smallest: "w-7 !h-7 min-w-7 min-h-7",
     large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {

package/src/components/MultiSelect.tsx

@@ -235,7 +235,7 @@ export const MultiSelect = React.forwardRef<
                                     "px-2": size === "small" || size === "smallest",
                                     "px-4": size === "medium" || size === "large"
                                 },
-                                "select-none rounded-md text-sm",
+                                "select-none rounded-lg text-sm",
                                 "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,

package/src/components/Select.tsx

@@ -139,7 +139,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {...props}>
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
             <div className={cls(
-                "select-none rounded-md text-sm",
+                "select-none rounded-lg text-sm",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 "relative flex items-center",
@@ -169,7 +169,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         } : "",
                         "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
-                        "select-none rounded-md text-sm",
+                        "select-none rounded-lg text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
                         disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",

package/src/components/Table.tsx

@@ -19,7 +19,7 @@ export const Table = React.memo(({
                           ...rest
                       }: TableProps) => (
     <table
-        className={cls("text-left text-surface-900 dark:text-white rounded-md overflow-x-auto", className)}
+        className={cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className)}
         style={style}
         {...rest}
     >
@@ -88,7 +88,7 @@ export const TableRow = React.memo(({
         style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
-            onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
+            onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "",
             className
         )}
         {...rest}

package/src/components/TextField.tsx

@@ -131,7 +131,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     invisible ? focusedInvisibleMixin : "",
-                    "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                    "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
                     label ? "pt-8 pb-2" : "py-2",
                     disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                     inputClassName
@@ -149,7 +149,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     "w-full outline-none bg-transparent leading-normal px-3",
-                    "rounded-md",
+                    "rounded-lg",
                     "focused:text-text-primary focused:dark:text-text-primary-dark",
                     invisible ? focusedInvisibleMixin : "",
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -187,7 +187,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             <div
                 ref={ref}
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     error ? "border border-red-500 dark:border-red-600" : "",

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -31,7 +31,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<Record<string, un
                     "flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800",
                     rowClassName ? rowClassName(rowData) : "",
                     {
-                        "hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
+                        "hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
                         "cursor-pointer ": onRowClick
                     }
                 )}

package/src/index.css

@@ -65,51 +65,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-normal;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
-    @apply text-base;
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-export const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
-export const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-export const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
+export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+export const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+export const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 export const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";