@trycompai/design-system 1.0.1 → 1.0.3

package/src/styles/globals.css

@@ -1,6 +1,80 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+/* Ramp font: Lausanne */
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-300.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-300.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-300-Italic.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-300-Italic.woff') format('woff');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-350.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-350.woff') format('woff');
+  font-weight: 350;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-350-Italic.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-350-Italic.woff') format('woff');
+  font-weight: 350;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-400.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-400.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-400-Italic.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-400-Italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-700.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-700.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Lausanne';
+  src:
+    url('../fonts/TWKLausanne/TWKLausanne-700-Italic.woff2') format('woff2'),
+    url('../fonts/TWKLausanne/TWKLausanne-700-Italic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* Include design system components in Tailwind's content scan */
 @source "../components/**/*.tsx";
 
@@ -8,19 +82,20 @@
 
 @layer base {
   :root {
+    --font-sans: 'Lausanne', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.6 0.13 163);
-    --primary-foreground: oklch(0.98 0.02 166);
-    --secondary: oklch(0.967 0.001 286.375);
+    --primary: oklch(0.596 0.145 163.225);
+    --primary-foreground: oklch(0.979 0.021 166.113);
+    --secondary: oklch(0.92 0.001 286.375);
     --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
+    --muted: oklch(0.91 0 0);
     --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
+    --accent: oklch(0.91 0 0);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.58 0.22 27);
     --success: oklch(0.6 0.16 145);
@@ -29,17 +104,17 @@
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
     --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.85 0.13 165);
-    --chart-2: oklch(0.77 0.15 163);
-    --chart-3: oklch(0.7 0.15 162);
-    --chart-4: oklch(0.6 0.13 163);
-    --chart-5: oklch(0.51 0.1 166);
-    --radius: 0.45rem;
+    --chart-1: oklch(0.845 0.143 164.978);
+    --chart-2: oklch(0.765 0.177 163.223);
+    --chart-3: oklch(0.696 0.17 162.48);
+    --chart-4: oklch(0.596 0.145 163.225);
+    --chart-5: oklch(0.508 0.118 165.612);
+    --radius: 0.3rem;
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.6 0.13 163);
-    --sidebar-primary-foreground: oklch(0.98 0.02 166);
-    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-primary: oklch(0.596 0.145 163.225);
+    --sidebar-primary-foreground: oklch(0.979 0.021 166.113);
+    --sidebar-accent: oklch(0.91 0 0);
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
@@ -51,8 +126,8 @@
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.7 0.15 162);
-    --primary-foreground: oklch(0.26 0.05 173);
+    --primary: oklch(0.696 0.17 162.48);
+    --primary-foreground: oklch(0.262 0.051 172.552);
     --secondary: oklch(0.274 0.006 286.033);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.269 0 0);
@@ -66,15 +141,15 @@
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.85 0.13 165);
-    --chart-2: oklch(0.77 0.15 163);
-    --chart-3: oklch(0.7 0.15 162);
-    --chart-4: oklch(0.6 0.13 163);
-    --chart-5: oklch(0.51 0.1 166);
+    --chart-1: oklch(0.845 0.143 164.978);
+    --chart-2: oklch(0.765 0.177 163.223);
+    --chart-3: oklch(0.696 0.17 162.48);
+    --chart-4: oklch(0.596 0.145 163.225);
+    --chart-5: oklch(0.508 0.118 165.612);
     --sidebar: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.77 0.15 163);
-    --sidebar-primary-foreground: oklch(0.26 0.05 173);
+    --sidebar-primary: oklch(0.696 0.17 162.48);
+    --sidebar-primary-foreground: oklch(0.262 0.051 172.552);
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
@@ -83,6 +158,7 @@
 }
 
 @theme inline {
+  --font-sans: 'Lausanne', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -128,7 +204,63 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    font-family: var(--font-sans);
+  }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+}
+
+/* Lausanne-only weight mapping.
+   We DO NOT have 500/600 files, so make Tailwind's common semantic weights resolve to real faces. */
+@layer utilities {
+  .font-normal {
+    font-weight: 350;
+  }
+  .font-medium {
+    font-weight: 400;
+  }
+  .font-semibold {
+    font-weight: 700;
+  }
+}
+
+/* View Transitions API for smooth page transitions */
+@view-transition {
+  navigation: auto;
+}
+
+::view-transition-old(page-content) {
+  animation: fade-out 250ms ease-out forwards;
+}
+
+::view-transition-new(page-content) {
+  animation: fade-in 250ms ease-out forwards;
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Page content animation fallback for non-View Transitions browsers */
+[data-slot="page-layout"] {
+  view-transition-name: page-content;
+  animation: page-enter 250ms ease-out;
+}
+
+@keyframes page-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }

package/src/components/molecules/stack.tsx

@@ -1,72 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-const stackVariants = cva('flex', {
-  variants: {
-    direction: {
-      row: 'flex-row',
-      column: 'flex-col',
-      'row-reverse': 'flex-row-reverse',
-      'column-reverse': 'flex-col-reverse',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-      baseline: 'items-baseline',
-    },
-    textAlign: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    gap: {
-      '0': 'gap-0',
-      '0.5': 'gap-0.5',
-      '1': 'gap-1',
-      '1.5': 'gap-1.5',
-      '2': 'gap-2',
-      '2.5': 'gap-2.5',
-      '3': 'gap-3',
-      '4': 'gap-4',
-      '5': 'gap-5',
-      '6': 'gap-6',
-      '8': 'gap-8',
-      '10': 'gap-10',
-      '12': 'gap-12',
-    },
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
-  },
-  defaultVariants: {
-    direction: 'column',
-    gap: '0',
-    wrap: false,
-  },
-});
-
-interface StackProps
-  extends Omit<React.ComponentProps<'div'>, 'className'>, VariantProps<typeof stackVariants> {}
-
-function Stack({ direction, align, justify, gap, wrap, textAlign, ...props }: StackProps) {
-  return (
-    <div
-      data-slot="stack"
-      className={stackVariants({ direction, align, justify, gap, wrap, textAlign })}
-      {...props}
-    />
-  );
-}
-
-export { Stack, stackVariants };