feat(styles): add browser scss builder system
ci/woodpecker/push/woodpecker Pipeline was successful
Lint and Build Checks / Lint, Test, and Build (push) Failing after 345h51m17s

This commit is contained in:
2026-06-25 09:46:09 -05:00
parent 41e5f3182a
commit 1e9d3f0917
24 changed files with 651 additions and 55 deletions
+12
View File
@@ -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