feat(styles): add browser scss builder system
This commit is contained in:
@@ -70,6 +70,7 @@ __tests__/ # Jest tests
|
||||
- Change Log content is sourced from `src/data/toolkit/changelog.json`.
|
||||
- Credits Toolkit data is sourced from `src/data/toolkit/credits.json` and synced through the socket server.
|
||||
- Toolkit Images and Audio records can upload files through the socket into `src/assets/images/uploads/` and `src/assets/music/uploads/`.
|
||||
- Local Toolkit authoring uses `http://127.0.0.1:5175` by default so it does not collide with deployed socket automation.
|
||||
- Deployed Toolkit authoring uses `http://bone-kingdom.tabitha.tealthrone:5174` and intentionally runs from the shared repo workspace so edits update development JSON/assets while coding continues.
|
||||
- Toolkit seed datasets live under `src/data/toolkit/` and are exported through `src/data/index.ts`.
|
||||
- Shared data interfaces live under `src/data/types/`.
|
||||
@@ -125,6 +126,17 @@ __tests__/ # Jest tests
|
||||
- Browser SCSS: `src/assets/scss/`
|
||||
- Add or update asset type declarations in `src/types/assets.d.ts` when needed.
|
||||
|
||||
### Work with browser SCSS
|
||||
|
||||
1. Use `src/assets/scss/index.scss` as the only browser SCSS entrypoint.
|
||||
2. Add design tokens and CSS custom properties in `__variables.scss`.
|
||||
3. Add shared browser mixins in `__mixins.scss`.
|
||||
4. Keep reset, root, and browser-wide element rules in `__globals.scss` and `__scrollbars.scss`.
|
||||
5. Put reusable `.blb-*` class builders in the concern-specific partials: `__typography.scss`, `__layout.scss`, `__surfaces.scss`, `__buttons.scss`, `__forms.scss`, and `__toolkit.scss`.
|
||||
6. Do not add ad hoc browser CSS in screen files. Add or extend a builder class in `src/assets/scss/`, then reference that class from the browser-only surface that needs it.
|
||||
7. Shared React Native screens and native-compatible components still use `StyleSheet.create()` unless a task explicitly asks for a web-only class-based migration.
|
||||
8. Keep browser-only class usage, DOM APIs, and web-specific styling assumptions inside `.web.tsx` files, `src/web/`, or explicitly browser-only surfaces.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
|
||||
Reference in New Issue
Block a user