@moldable-ai/ui 0.2.22 → 0.2.24

package/src/styles/index.css

@@ -186,6 +186,11 @@
   --font-sans: var(--font-family-ui);
   --font-mono: var(--font-family-mono);
 
+  --text-11: 11px;
+  --text-13: 13px;
+  --text-16: 16px;
+  --text-18: 18px;
+  --text-24: 24px;
   --text-ui-display: var(--type-display-size);
   --text-ui-display--line-height: var(--type-display-line-height);
   --text-ui-display--font-weight: var(--type-display-weight);
@@ -210,8 +215,15 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-control: var(--shape-control);
+  --radius-checkbox: var(--shape-checkbox);
   --radius-container: var(--shape-container);
   --radius-overlay: var(--shape-overlay);
+  --radius-popover: var(--shape-popover);
+  --radius-card: var(--shape-card);
+  --radius-group: var(--shape-group);
+  --radius-panel: var(--shape-panel);
+  --radius-dialog: var(--shape-dialog);
+  --radius-pill: var(--shape-pill);
   --radius-window: var(--window-corner-radius);
 
   --spacing-control-gap: var(--density-control-gap);
@@ -231,6 +243,7 @@
   --ease-spring: var(--motion-ease-spring);
   --shadow-panel: var(--material-shadow-panel);
   --shadow-overlay: var(--material-shadow-overlay);
+  --shadow-dialog: var(--material-shadow-dialog);
   --shadow-window: var(--material-shadow-window);
 
   --color-background: var(--background);
@@ -273,6 +286,12 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-pending: var(--pending);
+  --color-pending-foreground: var(--pending-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -699,39 +718,46 @@
     system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-family-mono: ui-monospace, Menlo, Consolas, monospace;
 
-  --type-display-size: 2rem;
-  --type-display-line-height: 2.25rem;
-  --type-display-weight: 650;
-  --type-display-tracking: -0.035em;
-  --type-heading-size: 1.5rem;
-  --type-heading-line-height: 1.75rem;
-  --type-heading-weight: 650;
-  --type-heading-tracking: -0.025em;
-  --type-title-size: 1.125rem;
-  --type-title-line-height: 1.5rem;
+  --type-display-size: var(--text-24);
+  --type-display-line-height: 28px;
+  --type-display-weight: 600;
+  --type-display-tracking: -0.02em;
+  --type-heading-size: var(--text-18);
+  --type-heading-line-height: 22px;
+  --type-heading-weight: 600;
+  --type-heading-tracking: -0.012em;
+  --type-title-size: var(--text-16);
+  --type-title-line-height: 20px;
   --type-title-weight: 600;
-  --type-title-tracking: -0.015em;
-  --type-body-size: 0.8125rem;
-  --type-body-line-height: 1.25rem;
-  --type-label-size: 0.75rem;
-  --type-label-line-height: 1rem;
-  --type-caption-size: 0.625rem;
-  --type-caption-line-height: 0.75rem;
+  --type-title-tracking: -0.006em;
+  --type-body-size: var(--text-13);
+  --type-body-line-height: 18px;
+  --type-label-size: var(--text-13);
+  --type-label-line-height: 16px;
+  --type-caption-size: var(--text-11);
+  --type-caption-line-height: 14px;
 
   --density-control-height-xs: 1.5rem;
-  --density-control-height-sm: 2rem;
-  --density-control-height-md: 2.25rem;
-  --density-control-height-lg: 2.5rem;
-  --density-control-gap: 0.375rem;
-  --density-control-padding-inline: 0.75rem;
-  --density-row-height: 2.25rem;
-  --density-toolbar-height: 2.5rem;
-  --density-pane-padding: 0.75rem;
-  --density-section-gap: 1rem;
-
-  --shape-control: 0.5rem;
-  --shape-container: 0.65rem;
-  --shape-overlay: 0.75rem;
+  --density-control-height-sm: 1.75rem;
+  --density-control-height-md: 2rem;
+  --density-control-height-lg: 2.25rem;
+  --density-control-gap: 0.3125rem;
+  --density-control-padding-inline: 0.625rem;
+  --density-row-height: 2rem;
+  --density-toolbar-height: 2.375rem;
+  --density-pane-padding: 0.625rem;
+  --density-section-gap: 0.875rem;
+
+  --shape-control: 10px;
+  --shape-checkbox: 4px;
+  --shape-popover: 12px;
+  --shape-card: 12px;
+  --shape-group: 12px;
+  --shape-panel: 16px;
+  --shape-dialog: 22px;
+  --shape-pill: 9999px;
+  --shape-container: var(--shape-card);
+  --shape-overlay: var(--shape-popover);
 
   --motion-duration-instant: 80ms;
   --motion-duration-fast: 120ms;
@@ -742,7 +768,7 @@
   --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
   --motion-ease-spring: cubic-bezier(0.22, 1.15, 0.36, 1);
 
-  --radius: 0.65rem;
+  --radius: var(--shape-card);
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -754,22 +780,22 @@
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.5 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.5866 0.1994 31.76);
   --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.7145 0.185 45.03);
+  --ring: oklch(0.2 0 0 / 48%);
   --model-effort-blue: #339cff;
   --model-effort-purple: #924ff7;
   --model-effort-sparkle: #fff;
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-1: var(--info);
+  --chart-2: var(--success);
+  --chart-3: var(--pending);
+  --chart-4: var(--neutral);
+  --chart-5: var(--accent-foreground);
   --sidebar: oklch(0.967 0.001 286.375);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.7145 0.185 45.03);
@@ -777,15 +803,21 @@
   --sidebar-accent: oklch(0.9212 0.0029 264.54);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.7145 0.185 45.03);
-  --warning: oklch(0.75 0.15 75);
-  --warning-foreground: oklch(0.35 0.1 75);
-  --success: oklch(0.65 0.2 145);
-  --success-foreground: oklch(0.985 0 0);
-  --status-running: oklch(0.65 0.2 145);
-  --status-stopped: oklch(0.552 0.016 285.938);
-  --status-pending: oklch(0.75 0.15 75);
-  --status-error: oklch(0.5866 0.1994 31.76);
+  --sidebar-ring: var(--ring);
+  --info: oklch(0.6 0.16 250);
+  --info-foreground: oklch(0.42 0.14 250);
+  --neutral: oklch(0.64 0.012 286);
+  --neutral-foreground: oklch(0.43 0.012 286);
+  --pending: oklch(0.64 0.14 75);
+  --pending-foreground: oklch(0.42 0.12 75);
+  --warning: oklch(0.64 0.14 75);
+  --warning-foreground: oklch(0.4 0.12 75);
+  --success: oklch(0.53 0.17 145);
+  --success-foreground: oklch(0.4 0.13 145);
+  --status-running: var(--success);
+  --status-stopped: var(--neutral);
+  --status-pending: var(--pending);
+  --status-error: var(--destructive);
 
   --text-primary: var(--foreground);
   --text-secondary: var(--muted-foreground);
@@ -860,10 +892,15 @@
   --material-clear-blur: 12px;
   --material-clear-saturation: 1.24;
   --material-shadow-panel:
-    0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
+    inset 0 0 0 1px var(--separator), 0 1px 2px oklch(0.15 0.005 285 / 5%),
+    0 5px 14px oklch(0.15 0.005 285 / 5%);
   --material-shadow-overlay:
-    0 8px 24px oklch(0.15 0.005 285 / 12%), 0 2px 6px oklch(0.15 0.005 285 / 8%);
-  --material-shadow-window: 0 24px 80px oklch(0.1 0.005 285 / 22%);
+    inset 0 0 0 1px var(--separator), 0 4px 12px oklch(0.12 0.004 285 / 9%),
+    0 16px 38px oklch(0.12 0.004 285 / 13%);
+  --material-shadow-dialog:
+    inset 0 0 0 1px var(--separator), 0 12px 32px oklch(0.1 0.004 285 / 12%),
+    0 32px 88px oklch(0.1 0.004 285 / 18%);
+  --material-shadow-window: 0 28px 96px oklch(0.1 0.005 285 / 24%);
 
   /*
    * Renderer boundary for embedded and standalone windows. The host may set
@@ -947,22 +984,22 @@
   --secondary: oklch(0.3375 0.0035 286.21);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.3375 0.0035 286.21);
-  --muted-foreground: oklch(0.705 0.015 286.067);
+  --muted-foreground: oklch(0.74 0.012 286);
   --accent: oklch(0.3375 0.0035 286.21);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.7145 0.185 45.03);
+  --ring: oklch(0.92 0 0 / 40%);
   --model-effort-blue: #339cff;
   --model-effort-purple: #ad7bf9;
   --model-effort-sparkle: #fff;
-  --chart-1: oklch(0.7145 0.185 45.03);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-1: var(--info);
+  --chart-2: var(--success);
+  --chart-3: var(--pending);
+  --chart-4: var(--neutral);
+  --chart-5: var(--accent-foreground);
   --sidebar: oklch(0.235 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.7145 0.185 45.03);
@@ -970,15 +1007,21 @@
   --sidebar-accent: oklch(0.3375 0.0035 286.21);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.7145 0.185 45.03);
-  --warning: oklch(0.8 0.12 75);
-  --warning-foreground: oklch(0.25 0.08 75);
+  --sidebar-ring: var(--ring);
+  --info: oklch(0.72 0.15 250);
+  --info-foreground: oklch(0.78 0.11 250);
+  --neutral: oklch(0.7 0.012 286);
+  --neutral-foreground: oklch(0.76 0.012 286);
+  --pending: oklch(0.79 0.12 80);
+  --pending-foreground: oklch(0.84 0.1 80);
+  --warning: oklch(0.79 0.12 80);
+  --warning-foreground: oklch(0.84 0.1 80);
   --success: oklch(0.7 0.18 145);
-  --success-foreground: oklch(0.235 0 0);
-  --status-running: oklch(0.7 0.18 145);
-  --status-stopped: oklch(0.705 0.015 286.067);
-  --status-pending: oklch(0.8 0.12 75);
-  --status-error: oklch(0.704 0.191 22.216);
+  --success-foreground: oklch(0.8 0.12 145);
+  --status-running: var(--success);
+  --status-stopped: var(--neutral);
+  --status-pending: var(--pending);
+  --status-error: var(--destructive);
   --material-regular-fill: color-mix(
     in oklch,
     var(--background) 68%,
@@ -1004,10 +1047,15 @@
   --material-clear-border: oklch(1 0 0 / 18%);
   --material-clear-highlight: oklch(1 0 0 / 10%);
   --material-shadow-panel:
-    0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
+    inset 0 0 0 1px var(--separator), 0 2px 5px oklch(0 0 0 / 28%),
+    0 8px 22px oklch(0 0 0 / 22%);
   --material-shadow-overlay:
-    0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
-  --material-shadow-window: 0 28px 96px oklch(0 0 0 / 48%);
+    inset 0 0 0 1px var(--separator), 0 8px 22px oklch(0 0 0 / 36%),
+    0 24px 56px oklch(0 0 0 / 46%);
+  --material-shadow-dialog:
+    inset 0 0 0 1px var(--separator), 0 16px 44px oklch(0 0 0 / 42%),
+    0 40px 112px oklch(0 0 0 / 58%);
+  --material-shadow-window: 0 32px 112px oklch(0 0 0 / 56%);
   /* Terminal - same dark look in dark mode */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -1036,6 +1084,14 @@
     --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
     --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
     --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --shape-control: 6px;
+    --shape-checkbox: 3px;
+    --shape-popover: 6px;
+    --shape-card: 6px;
+    --shape-group: 6px;
+    --shape-panel: 6px;
+    --shape-dialog: 6px;
+    --shape-pill: 6px;
     --material-regular-fill: color-mix(
       in oklch,
       var(--material-regular-fallback) 92%,
@@ -1048,6 +1104,10 @@
       transparent
     );
     --material-clear-border: var(--separator-strong);
+    --material-shadow-panel: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-overlay: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-dialog: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-window: inset 0 0 0 1px var(--separator-strong);
     --window-border: var(--separator-strong);
   }
 }
@@ -1067,6 +1127,14 @@
   --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
   --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
   --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --shape-control: 6px;
+  --shape-checkbox: 3px;
+  --shape-popover: 6px;
+  --shape-card: 6px;
+  --shape-group: 6px;
+  --shape-panel: 6px;
+  --shape-dialog: 6px;
+  --shape-pill: 6px;
   --material-regular-fill: color-mix(
     in oklch,
     var(--material-regular-fallback) 92%,
@@ -1079,6 +1147,10 @@
     transparent
   );
   --material-clear-border: var(--separator-strong);
+  --material-shadow-panel: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-overlay: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-dialog: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-window: inset 0 0 0 1px var(--separator-strong);
   --window-border: var(--separator-strong);
 }
 
@@ -1121,6 +1193,7 @@
     --material-saturation: 1;
     --material-shadow-panel: none;
     --material-shadow-overlay: none;
+    --material-shadow-dialog: none;
     --material-shadow-window: none;
   }
 }