apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-07-09 20:52:20 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

revert to neutral colors

Browse source
This commit is contained in:
Arjun 2026-05-18 22:16:03 +05:30
parent 25d1616907
commit d6388ddcb0
2 changed files with 81 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/x/apps/renderer/DESIGN_LANGUAGE.md
View file

@ -16,21 +16,21 @@ Rowboat should feel like a command center for people who live in notes, agents,
4. **Notes as the canvas** 4. **Notes as the canvas**
The editor and conversation stay visually dominant. Chrome is supportive, not decorative. Avoid nested cards and oversized empty states in work surfaces. The editor and conversation stay visually dominant. Chrome is supportive, not decorative. Avoid nested cards and oversized empty states in work surfaces.
5. **Warm precision** 5. **Neutral precision**
The palette pairs paper, ink, and graphite neutrals with earned signal colors: muted blue for structure, teal-green for command tools, amber for attention, and red for destructive state. The palette follows the dev color system: white and graphite surfaces, black/white primary actions, neutral command tools, and reserved semantic colors for destructive and chart states.
## Tokens ## Tokens
- Radius: `8px` for controls and cards, smaller where density matters. - Radius: `8px` for controls and cards, smaller where density matters.
- Backgrounds: warm paper in light mode, graphite ink in dark mode. - Backgrounds: dev defaults in light and dark mode.
- Borders: one-step darker than surfaces, quiet enough to separate panels without tinting them. - Borders: one-step darker than surfaces, quiet enough to separate panels without tinting them.
- Shadows: reserved for the composer, menus, dialogs, and active segmented controls. - Shadows: reserved for the composer, menus, dialogs, and active segmented controls.
- Type: system sans with tabular-feeling OpenType features enabled; no negative tracking. - Type: system sans with tabular-feeling OpenType features enabled; no negative tracking.
- Accent use: muted blue carries structure and focus. Teal-green is reserved for command/action affordances; amber and red are reserved for state. - Accent use: primary and command affordances use the neutral dev palette. Extra hues are reserved for semantic states and charts.
## Core Surfaces ## Core Surfaces
- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use the teal-green command treatment. - **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use neutral ink from the dev palette.
- **Titlebar/tabs:** slim, scan-first navigation. Active tabs get a bottom signal line, not a bulky filled pill. - **Titlebar/tabs:** slim, scan-first navigation. Active tabs get a bottom signal line, not a bulky filled pill.
- **Composer:** the highest-emphasis control outside the active canvas. It is slightly raised, flat, bordered by the primary tone, and sharp enough to feel like an input terminal. - **Composer:** the highest-emphasis control outside the active canvas. It is slightly raised, flat, bordered by the primary tone, and sharp enough to feel like an input terminal.
- **Messages:** user messages are compact structured blocks; assistant messages remain full-width and readable. - **Messages:** user messages are compact structured blocks; assistant messages remain full-width and readable.

152
apps/x/apps/renderer/src/App.css
View file

@ -981,91 +981,91 @@
:root { :root {
--radius: 0.5rem; --radius: 0.5rem;
--background: var(--bg-color, oklch(0.982 0.006 86)); --background: var(--bg-color, oklch(1 0 0));
--foreground: var(--text-color, oklch(0.205 0.018 255)); --foreground: var(--text-color, oklch(0.145 0 0));
--card: var(--bg-color, oklch(0.998 0.002 86)); --card: var(--bg-color, oklch(1 0 0));
--card-foreground: var(--text-color, oklch(0.205 0.018 255)); --card-foreground: var(--text-color, oklch(0.145 0 0));
--popover: var(--bg-color, oklch(0.998 0.002 86)); --popover: var(--bg-color, oklch(1 0 0));
--popover-foreground: var(--text-color, oklch(0.205 0.018 255)); --popover-foreground: var(--text-color, oklch(0.145 0 0));
--primary: var(--main-color, oklch(0.355 0.055 228)); --primary: var(--main-color, oklch(0.205 0 0));
--primary-foreground: var(--bg-color, oklch(0.985 0.002 86)); --primary-foreground: var(--bg-color, oklch(0.985 0 0));
--secondary: var(--sub-alt-color, oklch(0.94 0.007 86)); --secondary: var(--sub-alt-color, oklch(0.97 0 0));
--secondary-foreground: var(--text-color, oklch(0.255 0.022 255)); --secondary-foreground: var(--text-color, oklch(0.205 0 0));
--muted: var(--sub-alt-color, oklch(0.945 0.006 86)); --muted: var(--sub-alt-color, oklch(0.97 0 0));
--muted-foreground: var(--sub-color, oklch(0.515 0.026 255)); --muted-foreground: var(--sub-color, oklch(0.556 0 0));
--accent: var(--sub-color, oklch(0.91 0.009 86)); --accent: var(--sub-color, oklch(0.97 0 0));
--accent-foreground: var(--text-color, oklch(0.235 0.02 255)); --accent-foreground: var(--text-color, oklch(0.205 0 0));
--destructive: var(--error-color, oklch(0.57 0.19 24)); --destructive: var(--error-color, oklch(0.577 0.245 27.325));
--border: var(--sub-alt-color, oklch(0.875 0.008 86)); --border: var(--sub-alt-color, oklch(0.922 0 0));
--input: var(--sub-alt-color, oklch(0.89 0.007 86)); --input: var(--sub-alt-color, oklch(0.922 0 0));
--ring: var(--main-color, oklch(0.58 0.086 228)); --ring: var(--main-color, oklch(0.708 0 0));
--chart-1: oklch(0.55 0.14 230); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.61 0.14 155); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.62 0.16 42); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.55 0.13 310); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.66 0.12 92); --chart-5: oklch(0.769 0.188 70.08);
--sidebar: var(--bg-color, oklch(0.94 0.013 86)); --sidebar: var(--bg-color, oklch(0.985 0 0));
--sidebar-foreground: var(--text-color, oklch(0.245 0.02 255)); --sidebar-foreground: var(--text-color, oklch(0.145 0 0));
--sidebar-primary: var(--main-color, oklch(0.355 0.055 228)); --sidebar-primary: var(--main-color, oklch(0.205 0 0));
--sidebar-primary-foreground: var(--bg-color, oklch(0.985 0.002 86)); --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0));
--sidebar-accent: var(--sub-color, oklch(0.902 0.008 86)); --sidebar-accent: var(--sub-color, oklch(0.9 0 0));
--sidebar-accent-foreground: var(--text-color, oklch(0.24 0.02 255)); --sidebar-accent-foreground: var(--text-color, oklch(0.205 0 0));
--sidebar-border: var(--sub-alt-color, oklch(0.835 0.007 86)); --sidebar-border: var(--sub-alt-color, oklch(0.922 0 0));
--sidebar-ring: var(--main-color, oklch(0.58 0.086 228)); --sidebar-ring: var(--main-color, oklch(0.708 0 0));
--scrollbar-track: oklch(0.935 0.0055 86); --scrollbar-track: oklch(0.95 0 0);
--scrollbar-thumb: oklch(0.72 0.0105 86); --scrollbar-thumb: oklch(0.75 0 0);
--scrollbar-thumb-hover: oklch(0.62 0.013 86); --scrollbar-thumb-hover: oklch(0.65 0 0);
--rowboat-panel: oklch(0.972 0.006 86); --rowboat-panel: oklch(0.97 0 0);
--rowboat-raised: oklch(0.998 0.002 86); --rowboat-raised: oklch(1 0 0);
--rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%); --rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%);
--rowboat-hairline: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%); --rowboat-hairline: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%);
--rowboat-command: oklch(0.46 0.11 167); --rowboat-command: oklch(0.205 0 0);
--rowboat-attention: oklch(0.66 0.15 47); --rowboat-attention: oklch(0.646 0.222 41.116);
--rowboat-shadow: 0 1px 2px rgb(31 38 48 / 0.07), 0 18px 40px rgb(31 38 48 / 0.08); --rowboat-shadow: 0 1px 2px rgb(31 38 48 / 0.07), 0 18px 40px rgb(31 38 48 / 0.08);
--rowboat-shadow-soft: 0 1px 2px rgb(31 38 48 / 0.05), 0 8px 24px rgb(31 38 48 / 0.06); --rowboat-shadow-soft: 0 1px 2px rgb(31 38 48 / 0.05), 0 8px 24px rgb(31 38 48 / 0.06);
} }
.dark { .dark {
--background: var(--bg-color, oklch(0.18 0.012 255)); --background: var(--bg-color, oklch(0.145 0 0));
--foreground: var(--text-color, oklch(0.93 0.008 86)); --foreground: var(--text-color, oklch(0.985 0 0));
--card: var(--bg-color, oklch(0.225 0.015 255)); --card: var(--bg-color, oklch(0.205 0 0));
--card-foreground: var(--text-color, oklch(0.93 0.008 86)); --card-foreground: var(--text-color, oklch(0.985 0 0));
--popover: var(--bg-color, oklch(0.235 0.016 255)); --popover: var(--bg-color, oklch(0.205 0 0));
--popover-foreground: var(--text-color, oklch(0.93 0.008 86)); --popover-foreground: var(--text-color, oklch(0.985 0 0));
--primary: var(--main-color, oklch(0.77 0.08 86)); --primary: var(--main-color, oklch(0.922 0 0));
--primary-foreground: var(--bg-color, oklch(0.17 0.012 255)); --primary-foreground: var(--bg-color, oklch(0.205 0 0));
--secondary: var(--sub-alt-color, oklch(0.285 0.017 255)); --secondary: var(--sub-alt-color, oklch(0.269 0 0));
--secondary-foreground: var(--text-color, oklch(0.92 0.008 86)); --secondary-foreground: var(--text-color, oklch(0.985 0 0));
--muted: var(--sub-alt-color, oklch(0.285 0.017 255)); --muted: var(--sub-alt-color, oklch(0.269 0 0));
--muted-foreground: var(--sub-color, oklch(0.68 0.016 86)); --muted-foreground: var(--sub-color, oklch(0.708 0 0));
--accent: var(--sub-color, oklch(0.34 0.023 248)); --accent: var(--sub-color, oklch(0.269 0 0));
--accent-foreground: var(--text-color, oklch(0.95 0.006 86)); --accent-foreground: var(--text-color, oklch(0.985 0 0));
--destructive: var(--error-color, oklch(0.68 0.17 24)); --destructive: var(--error-color, oklch(0.704 0.191 22.216));
--border: var(--sub-alt-color, oklch(0.36 0.02 255 / 0.72)); --border: var(--sub-alt-color, oklch(1 0 0 / 10%));
--input: var(--sub-alt-color, oklch(0.36 0.02 255 / 0.78)); --input: var(--sub-alt-color, oklch(1 0 0 / 15%));
--ring: var(--main-color, oklch(0.74 0.08 86)); --ring: var(--main-color, oklch(0.556 0 0));
--chart-1: oklch(0.72 0.1 225); --chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.72 0.13 155); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.76 0.14 48); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.69 0.12 310); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.78 0.11 92); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: var(--bg-color, oklch(0.155 0.013 255)); --sidebar: var(--bg-color, oklch(0.205 0 0));
--sidebar-foreground: var(--text-color, oklch(0.89 0.01 86)); --sidebar-foreground: var(--text-color, oklch(0.985 0 0));
--sidebar-primary: var(--main-color, oklch(0.77 0.08 86)); --sidebar-primary: var(--main-color, oklch(0.488 0.243 264.376));
--sidebar-primary-foreground: var(--bg-color, oklch(0.17 0.012 255)); --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0));
--sidebar-accent: var(--sub-color, oklch(0.25 0.017 255)); --sidebar-accent: var(--sub-color, oklch(0.35 0 0));
--sidebar-accent-foreground: var(--text-color, oklch(0.94 0.008 86)); --sidebar-accent-foreground: var(--text-color, oklch(0.985 0 0));
--sidebar-border: var(--sub-alt-color, oklch(0.315 0.018 255 / 0.75)); --sidebar-border: var(--sub-alt-color, oklch(1 0 0 / 10%));
--sidebar-ring: var(--main-color, oklch(0.74 0.08 86)); --sidebar-ring: var(--main-color, oklch(0.556 0 0));
--scrollbar-track: oklch(0.21 0.014 255); --scrollbar-track: oklch(0.2 0 0);
--scrollbar-thumb: oklch(0.42 0.02 255); --scrollbar-thumb: oklch(0.4 0 0);
--scrollbar-thumb-hover: oklch(0.51 0.025 255); --scrollbar-thumb-hover: oklch(0.5 0 0);
--rowboat-panel: oklch(0.205 0.014 255); --rowboat-panel: oklch(0.269 0 0);
--rowboat-raised: oklch(0.245 0.016 255); --rowboat-raised: oklch(0.205 0 0);
--rowboat-wash: color-mix(in oklab, var(--background) 80%, var(--primary) 20%); --rowboat-wash: color-mix(in oklab, var(--background) 80%, var(--primary) 20%);
--rowboat-hairline: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%); --rowboat-hairline: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%);
--rowboat-command: oklch(0.72 0.13 165); --rowboat-command: oklch(0.922 0 0);
--rowboat-attention: oklch(0.78 0.13 58); --rowboat-attention: oklch(0.769 0.188 70.08);
--rowboat-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 22px 44px rgb(0 0 0 / 0.28); --rowboat-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 22px 44px rgb(0 0 0 / 0.28);
--rowboat-shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px rgb(0 0 0 / 0.18); --rowboat-shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px rgb(0 0 0 / 0.18);
} }