feat(ui): add layers utility

[Fake-User]

is a wrapper component that can adjust the lightness of its children. We can use it to simulate depth. It will reduce the number tokens we use, and make it easier to just write correct styles.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added new Layer component enabling customizable depth levels for enhanced layout control.

• Style

  • Improved CSS theme system with enhanced color inheritance and semantic color mapping.
  • Refined visual styling for appearance settings and theme management.

• Refactor

  • Optimized module import paths and configuration settings.

Walkthrough

Introduces a new Layer component for managing depth-based CSS variable inheritance, integrates it into the Panel component via a new depth prop, updates the CSS theme system with new semantic color mappings and property inheritance, consolidates component import paths, and removes the @ui/* path alias from TypeScript configuration.

Changes

Cohort / File(s)	Summary
New UI Component Layer System js/app/packages/ui/components/Layer.tsx, js/app/packages/ui/components/Panel.tsx	Introduces new Layer component for depth-based CSS variable management; updates Panel to accept optional depth prop and wrap children in Layer component.
Import Path Migration js/app/packages/ui/components/Button.tsx, js/app/packages/ui/components/SegmentedControl.tsx	Consolidates cn utility imports from alias path @ui/utils/classname to relative path ../utils/classname.
Theme CSS Refactor js/app/packages/app/index.css	Major refactoring of CSS custom properties: changes @property declarations to use inherits: true, replaces --theme-* hue derivations with new semantic color mappings (--color-accent-ink, --color-dialog/*, etc.), adjusts --transition to 0s, and removes commented-out scrollbar styling.
Component Integration & Styling js/app/packages/app/component/settings/Appearance.tsx, js/app/packages/theme/components/ThemeList.tsx	Updates Appearance component to set depth={0} on all Panel instances; removes background color from outer list item in ThemeList.
Package Exports & Configuration js/app/packages/ui/index.ts, js/app/biome.jsonc, js/app/packages/ui/tsconfig.json	Exports new Layer component from UI package; updates Biome overrides to target packages/ui/**; removes @ui/* TypeScript path alias from UI package config.

Possibly related PRs

• fix(ui): panel #2863: Both PRs modify the Panel component structure and update UI package exports to include the new Layer component integration.
• fix(ui): make appearance editor more cohesive #2897: Both PRs update Panel.tsx with depth-based rendering and modify Appearance.tsx to utilize the updated Panel component.
• style(properties): restyle ceate property and select property modal #2656: Both PRs adjust the import path for the cn utility in SegmentedControl.tsx from alias to relative import.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title follows the conventional commits format (feat:) and is under 72 characters at 28 characters. It clearly describes the main change: adding a layers utility to the UI package.
Description check	✅ Passed	The description is directly related to the changeset, explaining the purpose and benefits of the new Layer component introduced in the PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}

[github-actions]

Preview: https://russell-layer-tvo8vo.preview.macro.com/app (00d1f6b)