@elizaos/ui 2.0.0-alpha.37

package/src/styles/theme.css

@@ -0,0 +1,193 @@
+@theme default {
+  --color-bg: var(--bg);
+  --color-bg-accent: var(--bg-accent);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-hover: var(--bg-hover);
+  --color-bg-muted: var(--bg-muted);
+
+  --color-card: var(--card);
+  --color-card-fg: var(--card-foreground);
+  --color-surface: var(--surface);
+
+  --color-txt: var(--text);
+  --color-txt-strong: var(--text-strong);
+  --color-txt-chat: var(--chat-text);
+  --color-muted: var(--muted);
+  --color-muted-strong: var(--muted-strong);
+
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-hover: var(--border-hover);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-muted: var(--accent-muted);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-fg: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-fg: var(--primary-foreground);
+
+  --color-ok: var(--ok);
+  --color-ok-muted: var(--ok-muted);
+  --color-ok-subtle: var(--ok-subtle);
+  --color-warn: var(--warn);
+  --color-warn-muted: var(--warn-muted);
+  --color-warn-subtle: var(--warn-subtle);
+  --color-danger: var(--danger);
+  --color-destructive: var(--destructive);
+  --color-destructive-fg: var(--destructive-foreground);
+  --color-destructive-subtle: var(--destructive-subtle);
+
+  --color-header-bg: var(--header-bar-bg);
+  --color-header-fg: var(--header-bar-fg);
+
+  --font-body: var(--font-body);
+  --font-mono: var(--mono);
+  --font-display: var(--font-display);
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+}
+
+@layer base {
+  :root {
+    --bg: #ffffff;
+    --bg-accent: #faf7ec;
+    --bg-elevated: #fffdf6;
+    --bg-hover: #f8f1d7;
+    --bg-muted: #fcf9ef;
+
+    --card: #fffdf6;
+    --card-foreground: #1e2329;
+    --surface: #ffffff;
+
+    --text: #1e2329;
+    --text-strong: #11161c;
+    --chat-text: #1e2329;
+    --muted: #6d737a;
+    --muted-strong: #4d535a;
+
+    --border: #d6d3c6;
+    --border-strong: #b8b29f;
+    --border-hover: #f0b90b;
+    --input: #d6d3c6;
+    --ring: #f0b90b;
+
+    --accent: #f0b90b;
+    --accent-hover: #d8a108;
+    --accent-muted: #d8a108;
+    --accent-subtle: rgba(240, 185, 11, 0.12);
+    --accent-foreground: #1a1f26;
+    --primary: #f0b90b;
+    --primary-foreground: #1a1f26;
+
+    --ok: #02c076;
+    --ok-muted: rgba(2, 192, 118, 0.7);
+    --ok-subtle: rgba(2, 192, 118, 0.12);
+    --destructive: #f6465d;
+    --destructive-foreground: #ffffff;
+    --destructive-subtle: rgba(246, 70, 93, 0.12);
+    --warn: #f0b90b;
+    --warn-muted: rgba(240, 185, 11, 0.7);
+    --warn-subtle: rgba(240, 185, 11, 0.12);
+    --danger: #f6465d;
+
+    --focus: rgba(240, 185, 11, 0.18);
+    --focus-ring: 0 0 0 2px #f0b90b;
+
+    --header-bar-bg: #fff8dc;
+    --header-bar-fg: #1e2329;
+
+    --mono: "Courier New", Courier, monospace;
+    --font-body:
+      "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "MS PGothic", arial, helvetica,
+      clean, sans-serif;
+    --font-display:
+      "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "MS PGothic", arial, helvetica,
+      clean, sans-serif;
+
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+    --radius: 0.5rem;
+
+    --duration-fast: 100ms;
+    --duration-normal: 150ms;
+    --duration-slow: 250ms;
+
+    color-scheme: light;
+  }
+
+  .dark {
+    --bg: hsl(220 16% 12%);
+    --bg-accent: hsl(220 14% 16%);
+    --bg-elevated: hsl(220 14% 10%);
+    --bg-hover: hsl(220 12% 20%);
+    --bg-muted: hsl(220 12% 20%);
+
+    --card: hsl(220 14% 14%);
+    --card-foreground: hsl(40 10% 94%);
+    --surface: hsl(220 14% 14%);
+
+    --text: hsl(40 10% 84%);
+    --text-strong: hsl(40 10% 96%);
+    --chat-text: hsl(40 10% 84%);
+    --muted: hsl(220 8% 56%);
+    --muted-strong: hsl(220 6% 68%);
+
+    --border: hsl(220 12% 22%);
+    --border-strong: hsl(220 10% 30%);
+    --border-hover: #f0b90b;
+    --input: hsl(220 12% 22%);
+    --ring: #f0b90b;
+
+    --accent: #f0b90b;
+    --accent-hover: #d8a108;
+    --accent-muted: #d8a108;
+    --accent-subtle: rgba(240, 185, 11, 0.12);
+    --accent-foreground: #1a1f26;
+    --primary: #f0b90b;
+    --primary-foreground: #1a1f26;
+
+    --ok: hsl(142 76% 36%);
+    --ok-muted: hsla(142 76% 36% / 0.7);
+    --ok-subtle: hsla(142 76% 36% / 0.1);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 100%);
+    --destructive-subtle: hsla(0 84% 60% / 0.1);
+    --warn: #f0b90b;
+    --warn-muted: rgba(240, 185, 11, 0.7);
+    --warn-subtle: rgba(240, 185, 11, 0.12);
+    --danger: hsl(0 84.2% 60.2%);
+
+    --focus: rgba(240, 185, 11, 0.2);
+    --focus-ring: 0 0 0 2px rgba(240, 185, 11, 0.5);
+
+    --header-bar-bg: hsl(220 16% 12%);
+    --header-bar-fg: hsl(40 10% 96%);
+
+    --mono: "Courier New", Courier, monospace;
+    --font-body:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
+    --font-display:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
+
+    color-scheme: dark;
+  }
+}