# Project

This is a case study for creating a Yellow Cyberpunk theme called "CyberDuck" that is suitable for
use in a React project. It is based on Bootstrap v5 and Material icons.

## Stylesheets

We use a modular system based on SASS (SCSS), all style elements are stored in `src/styles`, each
Bootstrap core component gets its own file under `src/styles/components`.

**SCSS convention:**:
- Use modern `@use` and single-source SASS maps
- Component code should prefer compile-time SASS colors when using Sass functions, and read emitted
  CSS custom properties (`--color-variant-*`, `--cyberduck-void-*`, `--cyberduck-font-display`) for
  runtime theming.
- Order `@use` statements to include sass-builtins first, then bootstrap includes, then local includes

**Fonts:**
- Google fonts are included in `index.html`; the display font is referenced via `--cyberduck-font-display`
  and `$cyberduck-font-display`.

**Colors:**
- The base background color variants are `--cyberduck-void-<shade>`, accents are `--cyberduck-yellow-<shade>`.
- All other colors stick to the Cyberpunk theme and use vibrant, neon style color palettes.

**Where to change visuals:**
- Edit partials under `src/styles/components` (e.g. `_navbar.scss`, `_card.scss`, `_footer.scss`).
- Update tokens in `src/styles/_variables.scss` to change palette or fonts globally.

## React

We use a modular system based on React Components, all are stored in `src/components`. Generic components
are stored in that base folder, more specific Components that are only used by one other type of component
get their own subfolder. Components have short, but descriptive names often mathing the type of tag,
container or view they represent.

**React/Typescript convention:**
- Use imports, multi imports from the same package are split over multiple lines so it generates clean diffs
- Imports are ordered: first React and React plugin imports, then third party imports, then local code
  imports and the last imports are stylesheets. Global stylesheets are imported before local imports.

## Testing

Run the specific npm test commands for when making changes:
- For style updates run `npm run styles:check`

Don't run `npm run dev` without permission; if you want visual QA, ask me to run it and I will report
the URL and warnings.

## Changes strategy

Prefer patching over running external commands. Prefer inline replacement over removing files and
regenerating them.

When you need feedback from me, use the VSCode dialog option when possible, optimize interactions
with me to avoid typing where possible.