@sesamehr/react-design-system 0.1.0 → 1.0.0

package/src/assets/styles/theme-v3.css

@@ -0,0 +1,215 @@
+@import './primitives-v3.css';
+
+:root {
+  --font-primary: var(--color-zinc-900);
+  --font-secondary: var(--color-zinc-500);
+  --font-tertiary: var(--color-zinc-400);
+  --font-error: var(--color-red-500);
+  --font-success: var(--color-green-500);
+  --font-warning: var(--color-amber-500);
+  --font-info: var(--color-blue-500);
+
+  --border-default: var(--color-zinc-200);
+  --border-hover: var(--color-brand-300);
+
+  --success: var(--color-green-500);
+  --success-foreground: var(--color-white);
+  --success-100: var(--color-green-100);
+  --success-300: var(--color-green-300);
+  --success-500: var(--color-green-500);
+
+  --bg-base: var(--color-white);
+  --bg-muted: var(--color-zinc-50);
+  --bg-subtle: var(--color-zinc-100);
+
+  --neutral-1: var(--color-white);
+  --neutral-50: var(--color-zinc-50);
+  --neutral-100: var(--color-zinc-100);
+  --neutral-200: var(--color-zinc-200);
+  --neutral-300: var(--color-zinc-300);
+  --neutral-400: var(--color-zinc-400);
+  --neutral-500: var(--color-zinc-500);
+  --neutral-600: var(--color-zinc-600);
+  --neutral-700: var(--color-zinc-700);
+  --neutral-800: var(--color-zinc-800);
+  --neutral-900: var(--color-zinc-900);
+  --neutral-950: var(--color-zinc-950);
+
+  --brand: var(--color-brand-500);
+  --brand-hover: color-mix(in srgb, var(--color-brand-500) 90%, white);
+  --brand-foreground: var(--color-white);
+
+  --background-custom: #f5f5f7;
+  --background-custom-gradient: #e0e7ee;
+
+  --brand-accent-300: var(--color-emerald-300);
+  --brand-accent-500: var(--color-emerald-500);
+  --brand-accent-900: var(--color-emerald-900);
+}
+
+:root {
+  --background: var(--color-white);
+  --foreground: var(--color-zinc-900);
+
+  --card: var(--color-white);
+  --card-foreground: var(--color-zinc-900);
+
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-zinc-900);
+
+  --primary: var(--color-zinc-900);
+  --primary-foreground: var(--color-white);
+
+  --secondary: var(--color-zinc-100);
+  --secondary-foreground: var(--color-zinc-900);
+
+  --muted: var(--color-zinc-200);
+  --muted-foreground: var(--color-zinc-500);
+
+  --accent: var(--color-zinc-100);
+  --accent-foreground: var(--color-zinc-900);
+
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-white);
+
+  --success: var(--color-green-500);
+  --success-foreground: var(--color-white);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-white);
+  --error: var(--color-red-500);
+  --error-foreground: var(--color-white);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-white);
+
+  --border: var(--color-zinc-200);
+  --input: var(--color-zinc-200);
+  --ring: var(--color-zinc-200);
+  --ring-error: var(--color-red-200);
+
+  --chart-1: var(--color-brand-400);
+  --chart-2: var(--color-brand-500);
+  --chart-3: var(--color-brand-600);
+  --chart-4: var(--color-brand-700);
+  --chart-5: var(--color-brand-800);
+
+  --sidebar-background: var(--color-white);
+  --sidebar-foreground: var(--color-zinc-900);
+  --sidebar-primary: var(--color-brand-500);
+  --sidebar-primary-foreground: var(--color-white);
+  --sidebar-accent: var(--color-zinc-100);
+  --sidebar-accent-foreground: var(--color-zinc-900);
+  --sidebar-border: var(--color-zinc-200);
+  --sidebar-ring: var(--color-brand-500);
+}
+
+@theme inline {
+  --color-font-primary: var(--font-primary);
+  --color-font-secondary: var(--font-secondary);
+  --color-font-tertiary: var(--font-tertiary);
+  --color-font-error: var(--font-error);
+  --color-font-success: var(--font-success);
+  --color-font-warning: var(--font-warning);
+  --color-font-info: var(--font-info);
+  --color-border-default: var(--border-default);
+  --color-border-hover: var(--border-hover);
+  --color-bg-base: var(--bg-base);
+  --color-bg-muted: var(--bg-muted);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-neutral-1: var(--neutral-1);
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+  --color-neutral-950: var(--neutral-950);
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-100: var(--success-100);
+  --color-success-300: var(--success-300);
+  --color-success-500: var(--success-500);
+
+  --color-background-custom: var(--background-custom);
+  --color-background-custom-gradient: var(--background-custom-gradient);
+  --color-brand-accent-300: var(--brand-accent-300);
+  --color-brand-accent-500: var(--brand-accent-500);
+  --color-brand-accent-900: var(--brand-accent-900);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-ring-error: var(--ring-error);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-4xl: var(--radius-4xl);
+  --radius-DEFAULT: var(--radius-DEFAULT);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}