ui sanding

[Kitenite]

Summary by CodeRabbit

• New Features

  • Introduced tertiary color tokens for light and dark themes

• Style

  • Updated workspace items and tabs with new tertiary color styling
  • Replaced text "+" indicator with icon in add workspace button
  • Simplified top bar styling with adjusted borders
  • Refined panel and workspace view backgrounds
  • Enhanced active state visual feedback across UI elements

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces two new CSS color tokens (tertiary and tertiary-active) to the design system and updates multiple components across the desktop application to use these new tokens instead of previous color classes like bg-muted, bg-sidebar, and bg-sidebar-accent.

Changes

Cohort / File(s)	Summary
Design System Color Tokens apps/desktop/src/renderer/globals.css	Added new CSS custom properties --tertiary and --tertiary-active under both light (:root) and dark (.dark) themes, and mapped them to public color tokens --color-tertiary and --color-tertiary-active in the @theme block
Component Background Updates apps/desktop/src/renderer/screens/main/components/AppFrame.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx	Updated background color classes to use generic background tokens; AppFrame changed from bg-stone-950 to bg-background, WorkspaceView changed from bg-sidebar to bg-tertiary
Workspace Item & Tab Styling apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx	Updated active state styling from bg-muted/bg-sidebar-accent to bg-tertiary-active, and hover states to use bg-tertiary variants; added drag-over state styling
Workspace Dropdown & Group Header apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx, apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx	Added HiMiniPlus icon import in dropdown; updated WorkspaceGroupHeader with conditional transparent border when collapsed and 0.3s ease transition for border-bottom
Top Bar & Sidebar Theming apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx, apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx	Removed bottom border classes from TopBar; changed AnimatedBackground from bg-sidebar-accent to bg-tertiary-active
Mosaic Window Theme CSS apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css	Added border and border-radius to mosaic windows; updated toolbar background from var(--color-sidebar) to var(--color-tertiary), adjusted border-radius from var(--radius-xs) to var(--radius-sm), and changed focused toolbar background to var(--color-tertiary-active) with important flag

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

• Verify that the actual color values assigned to --tertiary and --tertiary-active in globals.css are appropriate for both light and dark themes
• Confirm the new tertiary color tokens provide adequate contrast and visual hierarchy across all updated components
• Cross-check the mosaic theme CSS changes integrate properly with the new token values

Possibly related PRs

• update tabs ui #76: Modifies AnimatedBackground component styling/background token classes similar to this PR's updates
• xterm ui #115: Updates mosaic-theme.css toolbar background variables and focused toolbar styling, overlapping with this PR's mosaic theme changes
• Group tabs for workspaces #116: Introduces grouped workspaces and project colors in workspace components; directly benefits from the new tertiary color token definitions in this PR

Poem

🐰 New tertiary hues now grace the screen,
Replacing dusty tones with colors clean,
From workspace tabs to mosaic panes,
The design system runs through vibrant veins,
A hoppy hop toward cohesion's gleam!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ui-sanding

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4f31295 and 5c6dab4.

📒 Files selected for processing (10)

• apps/desktop/src/renderer/globals.css (3 hunks)
• apps/desktop/src/renderer/screens/main/components/AppFrame.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx (2 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css (1 hunks)
• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx (2 hunks)
• apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}