diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css index 6e0623940d..6f5d25b384 100644 --- a/frontend/src/lib/assets/app.css +++ b/frontend/src/lib/assets/app.css @@ -3,6 +3,12 @@ @tailwind components; @tailwind utilities; +@media (min-width: 1760px) { + :root { + font-size: 18px; + } +} + @layer base { /* Light mode: default border color */ @@ -10,7 +16,7 @@ .border-x, .border-y, .divide-x > :not([hidden]) ~ :not([hidden]), .divide-y > :not([hidden]) ~ :not([hidden]) { - border-color: #e5e7eb; /* gray-200 */ + border-color: rgb(var(--color-border-light)); } /* Dark mode: change border color */ @@ -18,7 +24,7 @@ .dark .border-x, .dark .border-y, .dark .divide-x > :not([hidden]) ~ :not([hidden]), .dark .divide-y > :not([hidden]) ~ :not([hidden]) { - border-color: #4b5563; /* gray-700 */ + border-color: rgb(var(--color-border-light)); } /* Chrome, Edge, and Safari */ @@ -193,3 +199,10 @@ svelte-virtual-list-contents > * + * { ); } +/* Prevent clock icon in input[type="time"] making the input taller */ + +/* Chrome, Safari, Edge, Opera */ +input[type="time"]::-webkit-calendar-picker-indicator { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/frontend/src/lib/assets/tokens/README.md b/frontend/src/lib/assets/tokens/README.md new file mode 100644 index 0000000000..182966b886 --- /dev/null +++ b/frontend/src/lib/assets/tokens/README.md @@ -0,0 +1 @@ +The content of tokens.json is auto-generated by the 'Figma Variables to JSON' extension diff --git a/frontend/src/lib/assets/tokens/colorTokensConfig.ts b/frontend/src/lib/assets/tokens/colorTokensConfig.ts new file mode 100644 index 0000000000..619272a469 --- /dev/null +++ b/frontend/src/lib/assets/tokens/colorTokensConfig.ts @@ -0,0 +1,2 @@ +export const lightModeName = 'light' as const +export const darkModeName = 'dark-3' as const diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json new file mode 100644 index 0000000000..3dd358a9a7 --- /dev/null +++ b/frontend/src/lib/assets/tokens/tokens.json @@ -0,0 +1,403 @@ +{ + "tokens": { + "light": { + "surface-accent-primary": "#758ff8", + "surface-accent-hover": "#5074f6", + "surface-accent-clicked": "#2c5beb", + "text-primary": "#3d4758", + "text-secondary": "#718096", + "text-primary-inverse": "#f3f6f8", + "text-secondary-inverse": "#d3d6d8", + "text-tertiary-inverse": "#a8a9ac", + "surface-selected": "#ffffff", + "surface-disabled": "#d8d8e433", + "surface-secondary": "#efeff4", + "surface-hover": "#eeeef4", + "surface-primary": "#fbfbfd", + "border-light": "#e5e7eb", + "border-normal": "#9ca3af", + "border-accent": "#2c5beb", + "surface-accent-selected": "#bfdbfe4c", + "surface-accent-secondary": "#293676", + "surface-tertiary": "#ffffff", + "text-emphasis": "#1d2430", + "text-hint": "#8d93a1", + "text-disabled": "#a0aec0", + "surface-accent-secondary-hover": "#1e255f", + "surface-accent-secondary-clicked": "#303f82", + "component-button-accent-secondary": "#ffffff", + "text-emphasis-inverse": "#f3f4f6", + "reserved-ai": "#a02cde", + "component-virtual-node": "#dce0f1", + "text-accent": "#5074f6", + "border-selected": "#a0affa", + "surface-sunken": "#e8e8ef", + "text-tertiary": "#505c70", + "surface-input": "#ffffff" + }, + "dark": { + "surface-accent-primary": "#758ff8", + "surface-accent-hover": "#5074f6", + "surface-accent-clicked": "#2c5beb", + "text-primary": "#d4d7dd", + "text-secondary": "#aab0bb", + "text-primary-inverse": "#2d3748", + "text-secondary-inverse": "#666e7b", + "text-tertiary-inverse": "#a4a9b2", + "surface-selected": "#434c5e", + "surface-disabled": "#21273266", + "surface-secondary": "#2e3440", + "surface-hover": "#454f64", + "surface-primary": "#3b4252", + "border-light": "#485971", + "border-normal": "#718096", + "border-accent": "#a0affa", + "surface-accent-selected": "#6790c34c", + "surface-accent-secondary": "#e8ebfb", + "surface-tertiary": "#434c5e", + "text-emphasis": "#f3f4f6", + "text-hint": "#b3bac8", + "text-disabled": "#717b88", + "surface-accent-secondary-hover": "#c3c9df", + "surface-accent-secondary-clicked": "#9da6ca", + "component-button-accent-secondary": "#f3f4f6", + "text-emphasis-inverse": "#2d3748", + "reserved-ai": "#f0c6fb", + "component-virtual-node": "#4c566a", + "text-accent": "#c7cefc", + "border-selected": "#758ff8", + "surface-sunken": "#2e3440", + "text-tertiary": "#a8aeb7", + "surface-input": "#2e3440" + }, + "dark-3": { + "surface-accent-primary": "#7085db", + "surface-accent-hover": "#5670d5", + "surface-accent-clicked": "#425bbd", + "text-primary": "#d4d7dd", + "text-secondary": "#a9b0ba", + "text-primary-inverse": "#2d3748", + "text-secondary-inverse": "#666e7b", + "text-tertiary-inverse": "#a4a9b2", + "surface-selected": "#434c5e", + "surface-disabled": "#212732", + "surface-secondary": "#272c35", + "surface-hover": "#454f64", + "surface-primary": "#2e3441", + "border-light": "#374457", + "border-normal": "#a9b0ba", + "border-accent": "#a0affa", + "surface-accent-selected": "#6790c44c", + "surface-accent-secondary": "#e8ebfb", + "surface-tertiary": "#353c4a", + "text-emphasis": "#eeeff2", + "text-hint": "#8d93a1", + "text-disabled": "#9098a2", + "surface-accent-secondary-hover": "#c3c9df", + "surface-accent-secondary-clicked": "#9da6ca", + "component-button-accent-secondary": "#f3f4f6", + "text-emphasis-inverse": "#2d3748", + "reserved-ai": "#f0c6fb", + "component-virtual-node": "#4c566a", + "text-accent": "#c7cefc", + "border-selected": "#758ff8", + "surface-sunken": "#242832", + "text-tertiary": "#a8aeb7", + "surface-input": "#292e38" + } + }, + "primitives": { + "light": { + "light-blue": "#bcd4fc", + "blue": "#5e81ac", + "dark-blue": "#394a6d", + "accent-blue": "#2c5beb", + "transparent": "#ffffff00", + "deep-blue-900": "#1e255f", + "deep-blue-800": "#293676", + "deep-blue-700": "#303f82", + "deep-blue-600": "#39498e", + "deep-blue-500": "#3f5097", + "deep-blue-400": "#5b6aa5", + "deep-blue-300": "#7784b4", + "deep-blue-200": "#9da6ca", + "deep-blue-100": "#c3c9df", + "deep-blue-50": "#e7eaf2", + "luminance-blue-900": "#1e3a8a", + "luminance-blue-800": "#0d3cc5", + "luminance-blue-700": "#1847d2", + "luminance-blue-600": "#2652df", + "luminance-blue-500": "#2c5beb", + "luminance-blue-400": "#5074f6", + "luminance-blue-300": "#758ff8", + "luminance-blue-200": "#a0affa", + "luminance-blue-100": "#c7cefc", + "luminance-blue-50": "#e9ecfe", + "nord-0": "#2e3440", + "nord-1": "#3b4252", + "nord-2": "#434c5e", + "nord-3": "#4c566a", + "nord-5": "#e5e9f0", + "nord-6": "#eceff4", + "nord-7": "#8fbcbb", + "nord-8": "#88c0d0", + "nord-9": "#81a1c1", + "nord-10": "#5e81ac", + "nord-4": "#d8dee9", + "nord-11": "#bf616a", + "nord-12": "#d08770", + "nord-13": "#ebcb8b", + "nord-14": "#a3be8c", + "nord-15": "#b48ead" + } + }, + "guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } }, + "tailwind-c-s-s-v-3-3-2": { + "mode-1": { + "black": "#000000", + "white": "#ffffff", + "slate-50": "#f8fafc", + "slate-100": "#f1f5f9", + "slate-200": "#e2e8f0", + "slate-300": "#cbd5e1", + "slate-400": "#94a3b8", + "slate-500": "#64748b", + "slate-600": "#475569", + "slate-700": "#334155", + "slate-800": "#1e293b", + "slate-900": "#0f172a", + "slate-950": "#020617", + "gray-50": "#f9fafb", + "gray-100": "#f3f4f6", + "gray-200": "#e5e7eb", + "gray-300": "#d1d5db", + "gray-400": "#9ca3af", + "gray-500": "#6b7280", + "gray-600": "#4b5563", + "gray-700": "#374151", + "gray-800": "#1f2937", + "gray-900": "#111827", + "gray-950": "#030712", + "zinc-50": "#fafafa", + "zinc-100": "#f4f4f5", + "zinc-200": "#e4e4e7", + "zinc-300": "#d4d4d8", + "zinc-400": "#a1a1aa", + "zinc-500": "#71717a", + "zinc-600": "#52525b", + "zinc-700": "#3f3f46", + "zinc-800": "#27272a", + "zinc-900": "#18181b", + "zinc-950": "#09090b", + "neutral-50": "#fafafa", + "neutral-100": "#f5f5f5", + "neutral-200": "#e5e5e5", + "neutral-300": "#d4d4d4", + "neutral-400": "#a3a3a3", + "neutral-500": "#737373", + "neutral-600": "#525252", + "neutral-700": "#404040", + "neutral-800": "#262626", + "neutral-900": "#171717", + "neutral-950": "#0a0a0a", + "stone-50": "#fafaf9", + "stone-100": "#f5f5f4", + "stone-200": "#e7e5e4", + "stone-300": "#d6d3d1", + "stone-400": "#a8a29e", + "stone-500": "#78716c", + "stone-600": "#57534e", + "stone-700": "#44403c", + "stone-800": "#292524", + "stone-900": "#1c1917", + "stone-950": "#0c0a09", + "red-50": "#fef2f2", + "red-100": "#fee2e2", + "red-200": "#fecaca", + "red-300": "#fca5a5", + "red-400": "#f87171", + "red-500": "#ef4444", + "red-600": "#dc2626", + "red-700": "#b91c1c", + "red-800": "#991b1b", + "red-900": "#7f1d1d", + "red-950": "#450a0a", + "orange-50": "#fff7ed", + "orange-100": "#ffedd5", + "orange-200": "#fed7aa", + "orange-300": "#fdba74", + "orange-400": "#fb923c", + "orange-500": "#f97316", + "orange-600": "#ea580c", + "orange-700": "#c2410c", + "orange-800": "#9a3412", + "orange-900": "#7c2d12", + "orange-950": "#431407", + "amber-50": "#fffbeb", + "amber-100": "#fef3c7", + "amber-200": "#fde68a", + "amber-300": "#fcd34d", + "amber-400": "#fbbf24", + "amber-500": "#f59e0b", + "amber-600": "#d97706", + "amber-700": "#b45309", + "amber-800": "#92400e", + "amber-900": "#78350f", + "amber-950": "#451a03", + "yellow-50": "#fefce8", + "yellow-100": "#fef9c3", + "yellow-200": "#fef08a", + "yellow-300": "#fde047", + "yellow-400": "#facc15", + "yellow-500": "#eab308", + "yellow-600": "#ca8a04", + "yellow-700": "#a16207", + "yellow-800": "#854d0e", + "yellow-900": "#713f12", + "yellow-950": "#422006", + "lime-50": "#f7fee7", + "lime-100": "#ecfccb", + "lime-200": "#d9f99d", + "lime-300": "#bef264", + "lime-400": "#a3e635", + "lime-500": "#84cc16", + "lime-600": "#65a30d", + "lime-700": "#4d7c0f", + "lime-800": "#3f6212", + "lime-900": "#365314", + "lime-950": "#1a2e05", + "green-50": "#f0fdf4", + "green-100": "#dcfce7", + "green-200": "#bbf7d0", + "green-300": "#86efac", + "green-400": "#4ade80", + "green-500": "#22c55e", + "green-600": "#16a34a", + "green-700": "#15803d", + "green-800": "#166534", + "green-900": "#14532d", + "green-950": "#052e16", + "emerald-50": "#ecfdf5", + "emerald-100": "#d1fae5", + "emerald-200": "#a7f3d0", + "emerald-300": "#6ee7b7", + "emerald-400": "#34d399", + "emerald-500": "#10b981", + "emerald-600": "#059669", + "emerald-700": "#047857", + "emerald-800": "#065f46", + "emerald-900": "#064e3b", + "emerald-950": "#022c22", + "teal-50": "#f0fdfa", + "teal-100": "#ccfbf1", + "teal-200": "#99f6e4", + "teal-300": "#5eead4", + "teal-400": "#2dd4bf", + "teal-500": "#14b8a6", + "teal-600": "#0d9488", + "teal-700": "#0f766e", + "teal-800": "#115e59", + "teal-900": "#134e4a", + "teal-950": "#042f2e", + "cyan-50": "#ecfeff", + "cyan-100": "#cffafe", + "cyan-200": "#a5f3fc", + "cyan-300": "#67e8f9", + "cyan-400": "#22d3ee", + "cyan-500": "#06b6d4", + "cyan-600": "#0891b2", + "cyan-700": "#0e7490", + "cyan-800": "#155e75", + "cyan-900": "#164e63", + "cyan-950": "#083344", + "sky-50": "#f0f9ff", + "sky-100": "#e0f2fe", + "sky-200": "#bae6fd", + "sky-300": "#7dd3fc", + "sky-400": "#38bdf8", + "sky-500": "#0ea5e9", + "sky-600": "#0284c7", + "sky-700": "#0369a1", + "sky-800": "#075985", + "sky-900": "#0c4a6e", + "sky-950": "#082f49", + "blue-50": "#eff6ff", + "blue-100": "#dbeafe", + "blue-200": "#bfdbfe", + "blue-300": "#93c5fd", + "blue-400": "#60a5fa", + "blue-500": "#3b82f6", + "blue-600": "#2563eb", + "blue-700": "#1d4ed8", + "blue-800": "#1e40af", + "blue-900": "#1e3a8a", + "blue-950": "#172554", + "indigo-50": "#eef2ff", + "indigo-100": "#e0e7ff", + "indigo-200": "#c7d2fe", + "indigo-300": "#a5b4fc", + "indigo-400": "#818cf8", + "indigo-500": "#6366f1", + "indigo-600": "#4f46e5", + "indigo-700": "#4338ca", + "indigo-800": "#3730a3", + "indigo-900": "#312e81", + "indigo-950": "#1e1b4b", + "violet-50": "#f5f3ff", + "violet-100": "#ede9fe", + "violet-200": "#ddd6fe", + "violet-300": "#c4b5fd", + "violet-400": "#a78bfa", + "violet-500": "#8b5cf6", + "violet-600": "#7c3aed", + "violet-700": "#6d28d9", + "violet-800": "#5b21b6", + "violet-900": "#4c1d95", + "violet-950": "#2e1065", + "purple-50": "#faf5ff", + "purple-100": "#f3e8ff", + "purple-200": "#e9d5ff", + "purple-300": "#d8b4fe", + "purple-400": "#c084fc", + "purple-500": "#a855f7", + "purple-600": "#9333ea", + "purple-700": "#7e22ce", + "purple-800": "#6b21a8", + "purple-900": "#581c87", + "purple-950": "#3b0764", + "fuchsia-50": "#fdf4ff", + "fuchsia-100": "#fae8ff", + "fuchsia-200": "#f5d0fe", + "fuchsia-300": "#f0abfc", + "fuchsia-400": "#e879f9", + "fuchsia-500": "#d946ef", + "fuchsia-600": "#c026d3", + "fuchsia-700": "#a21caf", + "fuchsia-800": "#86198f", + "fuchsia-900": "#701a75", + "fuchsia-950": "#4a044e", + "pink-50": "#fdf2f8", + "pink-100": "#fce7f3", + "pink-200": "#fbcfe8", + "pink-300": "#f9a8d4", + "pink-400": "#f472b6", + "pink-500": "#ec4899", + "pink-600": "#db2777", + "pink-700": "#be185d", + "pink-800": "#9d174d", + "pink-900": "#831843", + "pink-950": "#500724", + "rose-50": "#fff1f2", + "rose-100": "#ffe4e6", + "rose-200": "#fecdd3", + "rose-300": "#fda4af", + "rose-400": "#fb7185", + "rose-500": "#f43f5e", + "rose-600": "#e11d48", + "rose-700": "#be123c", + "rose-800": "#9f1239", + "rose-900": "#881337", + "rose-950": "#4c0519" + } + } +} diff --git a/frontend/src/lib/components/AIProviderPicker.svelte b/frontend/src/lib/components/AIProviderPicker.svelte index 26b78f21f3..821302887d 100644 --- a/frontend/src/lib/components/AIProviderPicker.svelte +++ b/frontend/src/lib/components/AIProviderPicker.svelte @@ -229,36 +229,33 @@ }) -
resource
+resource
model
+model