mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-05-04 02:34:52 +00:00
copilot-swe-agent[bot]
b6934ac8cb
- Fixed SCSS @forward declarations in variables.scss - Added stub implementations for GitHub workflow log functions - Fixed import paths for auth session files - Fixed import paths for database-dbal.server exports - Fixed import paths for package server utilities - Fixed import paths for secure-db operations - Used relative path for DBAL client import Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
Styles (src/styles/)
Global and component-specific stylesheets using SCSS.
Structure
styles/
├── variables.scss # Design tokens and CSS variables
├── mixins.scss # SCSS mixins and utilities
├── themes.scss # Theme definitions
├── global.scss # Global styles
└── components/ # Component-scoped styles
├── buttons.scss
├── forms.scss
└── ...
Design Tokens
Colors
- Primary: Purple/Accent
- Secondary: Supporting colors
- Neutral: Grays
Typography
- Body: IBM Plex Sans (14px/1.6 line-height)
- Headings: Space Grotesk (bold)
- Code: JetBrains Mono (monospace)
Spacing
Uses 8px base unit:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
Usage
Import in components:
@import '@/styles/variables';
@import '@/styles/mixins';
.my-component {
@include flex-center;
padding: var(--spacing-md);
background: var(--primary-color);
}
Theming
Themes are defined in theme.json with CSS variables injected at runtime for dynamic switching.
See /docs/ for detailed styling guidelines.