@elizaos/app-core 2.0.0-alpha.37

package/src/styles/base.css

@@ -0,0 +1,196 @@
+/* Milady — Theme System */
+
+:root {
+  /* Backgrounds */
+  --bg: #ffffff;
+  --bg-accent: #faf7ec;
+  --bg-elevated: #fffdf6;
+  --bg-hover: #f8f1d7;
+  --bg-muted: #fcf9ef;
+
+  --card: #fffdf6;
+  --card-foreground: #1e2329;
+  --surface: #ffffff;
+
+  /* Text */
+  --text: #1e2329;
+  --text-strong: #11161c;
+  --chat-text: #1e2329;
+  --muted: #6d737a;
+  --muted-strong: #4d535a;
+
+  /* Borders */
+  --border: #d6d3c6;
+  --border-strong: #b8b29f;
+  --border-hover: #f0b90b;
+  --input: #d6d3c6;
+  --ring: #f0b90b;
+
+  /* Accent */
+  --accent: #f0b90b;
+  --accent-hover: #d8a108;
+  --accent-muted: #d8a108;
+  --accent-subtle: rgba(240, 185, 11, 0.12);
+  --accent-foreground: #1a1f26;
+  --primary: #f0b90b;
+  --primary-foreground: #1a1f26;
+
+  /* Status */
+  --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;
+  --info: #2ebd85;
+
+  --focus: rgba(240, 185, 11, 0.18);
+  --focus-ring: 0 0 0 2px #f0b90b;
+
+  /* Header */
+  --header-bar-bg: #fff8dc;
+  --header-bar-fg: #1e2329;
+  --section-bar-bg: #fff5cf;
+  --section-bar-fg: #1e2329;
+  --link-color: #c08d00;
+  --link-hover-color: #a97900;
+
+  --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;
+  --font-chat:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Legacy */
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --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;
+
+  /* Plugin UI Design Tokens */
+  --plugin-field-gap: 1rem;
+  --plugin-group-gap: 1.5rem;
+  --plugin-section-padding: 1.5rem;
+  --plugin-label-size: 0.8125rem;
+  --plugin-help-size: 0.6875rem;
+  --plugin-error-size: 0.6875rem;
+  --plugin-label: var(--text);
+  --plugin-help: var(--muted);
+  --plugin-error: var(--destructive);
+  --plugin-border: var(--border);
+  --plugin-focus-ring: var(--accent);
+  --plugin-input-height: 2.25rem;
+  --plugin-max-field-width: 32rem;
+
+  color-scheme: light;
+}
+
+[data-theme="dark"],
+.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%);
+  --info: #f0b90b;
+
+  --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%);
+  --section-bar-bg: hsl(220 14% 16%);
+  --section-bar-fg: hsl(40 10% 96%);
+  --link-color: var(--text);
+  --link-hover-color: #d8a108;
+
+  --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;
+  --font-chat:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+
+  /* Plugin UI */
+  --plugin-field-gap: 1rem;
+  --plugin-group-gap: 1.5rem;
+  --plugin-section-padding: 1.5rem;
+  --plugin-label-size: 0.8125rem;
+  --plugin-help-size: 0.6875rem;
+  --plugin-error-size: 0.6875rem;
+  --plugin-label: var(--text);
+  --plugin-help: var(--muted);
+  --plugin-error: var(--destructive);
+  --plugin-border: var(--border);
+  --plugin-focus-ring: var(--accent);
+  --plugin-input-height: 2.25rem;
+  --plugin-max-field-width: 32rem;
+
+  color-scheme: dark;
+}