apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-12 19:55:19 +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**
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**
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.
5. **Neutral precision**
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
- 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.
- Shadows: reserved for the composer, menus, dialogs, and active segmented controls.
- 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
- **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.
- **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.

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

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