(components) feature: Use CSS @layer for specificity control

[Copilot]

Description

Implements CSS @layer to provide explicit cascade control. Users can now override component styles without resorting to specificity hacks or !important.

Solution

Established four layers in ascending specificity order:

@layer reset, global, utility, component;

Layer assignments:

• reset: CSS resets (src/styles/reset.scss)
• global: CSS custom properties for animations, typography, grid layout
• utility: Color, spacing, and visibility utilities (3 files)
• component: All component module styles (20 files)

Sass constraint: @use statements must precede @layer directives. Each file with imports places @use first, then wraps content in the appropriate layer.

Version: Tagged as patch update in changeset (.changeset/tangy-ways-reply.md)

Additional Notes

Users can now override any component style by adding their own unlayered CSS or by creating a higher-priority layer. Browser support: 96%+ (all modern browsers).

Example generated CSS:

@layer component {
  .modal { opacity: var(--scale, 0); }
}
@layer utility {
  .bg-primary { background-color: #000; }
}

Screenshots

N/A - CSS structural change with no visual impact. Verified via Storybook build output showing correct @layer directives.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[COMP] Use CSS @layer</issue_title>
<issue_description># Description

CSS Layer is here and it's well supported. We should use it! It will give us even more control over specificity.

For starters, let's create 4 layers:
@layer reset, global, utility, component

1. reset: as the name suggests, let's add our reset on this layer
2. global: easy one too, adds any global stuff to this, like, setting html background color and what not
3. utility: all utilities go here, colors, spacing, etc
4. component: this one will require touching quite a few files, but the idea is to add component styles to this layer that way users of the component system can bump specificity with ease</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [COMP] Use CSS @layer #186

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

🦋 Changeset detected

Latest commit: 12c0134

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wethegit/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[andrewrubin]

Great job, copilot 👏

[marlonmarcello]

@copilot lint is erroring with the following:

src/styles/global.scss
  4:1  ✖  Unexpected empty line before at-rule  at-rule-empty-line-before

[Copilot]

@copilot lint is erroring with the following:

src/styles/global.scss

...

Fixed in 4a26246. Removed the empty line before the @layer directive in src/styles/global.scss.

[marlonmarcello]

@copilot make sure you run yarn changeset and tag this is a patch update

[Copilot]

@copilot make sure you run yarn changeset and tag this is a patch update

Done in 12c0134. Created a patch changeset for @wethegit/components.