SquidSpirit
39e712036e
All checks were successful
Frontend CI / build (push) Successful in 1m39s
### Description This PR introduces support for dark background colors on post labels. Specifically, the following changes have been made: 1. **Luminance & Color Contrast**: Added `isDark` and `contrastingTextColor` getters in `ColorViewModel`. The color contrast detection has been improved to use the standard sRGB relative luminance formula (per WCAG 2.x standard) with a threshold of `0.179` to determine if a background is dark, ensuring much more accurate contrast adjustments than a simple YIQ calculation. 2. **Text Color Adjustment**: Sets the text color of the `PostLabel` dynamically to `#ffffff` if the background is dark, and inherits the default color if the background is light. 3. **Indicator Dot Styling**: Adjusts the background color of the small decorative dot inside `PostLabel` using a lighter variant (`lighten(0.4)`) on dark labels, and a darker variant (`darken(0.2)`) on light labels to ensure visual clarity. ### Package Changes _No response_ ### Screenshots _No response_ ### Reference Resolves #165 ### Checklist - [x] A milestone is set - [x] The related issues has been linked to this branch Reviewed-on: #298 Co-authored-by: SquidSpirit <squid@squidspirit.com> Co-committed-by: SquidSpirit <squid@squidspirit.com>
Frontend
Development
Prerequisites
Setup
-
Install dependencies:
pnpm install -
Start development server:
pnpm dev -
Build for production:
pnpm build -
Preview production build:
pnpm preview
Development Commands
- Type checking:
pnpm check - Type checking (watch mode):
pnpm check:watch - Linting:
pnpm lint - Formatting:
pnpm format
Project Structure
The frontend is built with SvelteKit and Tailwind CSS following Clean Architecture principles:
src/lib/- Core application modules organized by featuresrc/routes/- SvelteKit route pagessrc/app.html- Main HTML templatesrc/app.css- Global styles
Each feature module in src/lib/ follows the Clean Architecture pattern:
domain/- Business logic and entitiesapplication/- Use cases and application servicesadapter/- Interface adapters (presenters, view models)framework/- External frameworks (UI components, API services)
Technology Stack
- Framework: SvelteKit 5
- Styling: Tailwind CSS 4
- UI Components: bits-ui, Lucide icons
- Type Safety: TypeScript
- Linting: ESLint with Prettier
- Package Manager: pnpm