Merge pull request #29 from minimaldesign/collapse-atoms-layer

Collapse the atoms cascade layer into components

Author: minimaldesign

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
         run: |
           set -e
           # layers survived the build (the preset-env polyfill must stay off)
-          grep -q '@layer settings, base, elements, global, atoms, components, pages, helpers;' dist/mcss.css
+          grep -q '@layer settings, base, elements, global, components, pages, helpers;' dist/mcss.css
           ! grep -q ':not(#' dist/mcss.css
           # no unresolved custom media or mixins shipped
           # (plain '@custom-media' appears in a comment; check real syntax)

DESIGN.md

@@ -208,15 +208,15 @@ Class naming is BEM-like with mCSS separators: `.block`, `.block_element`, `.blo
 
 ## Do's and Don'ts
 
-Do preserve the native cascade-layer setup: framework files import into named layers (`settings, base, elements, global, atoms, components, pages, helpers`) via `src/styles/framework/mcss.css`; site-only files import unlayered via `src/styles/_global.css`.
+Do preserve the native cascade-layer setup: framework files import into named layers (`settings, base, elements, global, components, pages, helpers`) via `src/styles/framework/mcss.css`; site-only files import unlayered via `src/styles/_global.css`.
 
-Do add new CSS files with the correct layer prefix, such as `component.name.css`, `atom.name.css`, or `help.name.css`, then import them with `layer(<name>)` in `framework/mcss.css` (framework) or plainly in `_global.css` (site).
+Do add new CSS files with the correct layer prefix, such as `component.name.css` or `help.name.css`, then import them with `layer(<name>)` in `framework/mcss.css` (framework) or plainly in `_global.css` (site).
 
 Do use semantic theme tokens when they exist. Raw palette tokens are fine for new semantic roles, but component CSS should converge on named component properties.
 
 Do keep all formatting at 2 spaces (CSS, Astro, JS, TS), per `.editorconfig`.
 
-Don't use page-specific CSS when a reusable component or atom is the better fit.
+Don't use page-specific CSS when a reusable component is the better fit.
 
 Don't bypass dark mode by hard-coding light-only text, border, or surface colors.
 

agents/content.md

@@ -34,7 +34,10 @@ Do not use the em dash character (`—`) in blog posts. Use commas, a colon, par
 | `title`      | string                                 | yes      |
 | `lastUpdate` | date                                   | yes      |
 | `version`    | number                                 | yes      |
-| `type`       | `"intro"` \| `"atom"` \| `"component"` | yes      |
+| `type`       | `"intro"` \| `"component"`             | yes      |
+| `cssOnly`    | boolean (optional)                     | no       |
+
+`cssOnly: true` marks class-only components with no Astro file (badge, button, toggle); it drives the "(CSS-only)" label in `/llms.txt`.
 
 `version` tracks the maturity of the documented component itself (not the doc): `< 1` = API may still change, `1.0` = stable contract, bump on breaking changes. Keep it honest — a component with open bugs isn't `1.0`.
 

agents/css.md

@@ -9,7 +9,7 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f
 ## Cascade rules (load-bearing)
 
 1. Framework layers, in priority order (later wins):
-   `settings, base, elements, global, atoms, components, pages, helpers`
+   `settings, base, elements, global, components, pages, helpers`
 2. **Unlayered CSS beats every layer for normal declarations.** That's the consumer guarantee ("your CSS wins") and why site CSS is unlayered.
 3. **Helpers are the exception: every helper declaration carries `!important`.** Important layered declarations beat unlayered CSS (the cascade inverts for important), so helpers win over site and consumer CSS too. They're element-level overrides, like inline styling. For important declarations layer order also inverts (earlier layer wins), which is why the reduced-motion block in `base.reset.css` still beats helpers.
 4. `!important` is REQUIRED in every helper declaration and banned everywhere else in the framework, except the reduced-motion block in `base.reset.css` and third-party override files (see `site/external.astro.css`). `help.colors.css` and `help.spacing.css` get it from their generators.
@@ -23,8 +23,7 @@ mCSS uses **native CSS cascade layers** (`@layer`) on top of an ITCSS-inspired f
 | base       | `base.*`      | Reset only (`base.reset.css`)                               |
 | elements   | `elements.*`  | Bare HTML element styles (text, form, media)                |
 | global     | `global.*`    | Structural patterns (a11y, grid, layout, prose, wrap)       |
-| atoms      | `atom.*`      | Small single-purpose UI (button, toggle)                    |
-| components | `component.*` | Library components (card, hero, notice, …)                  |
+| components | `component.*` | Library components (card, hero, notice, …), including CSS-only single-class ones (badge, button, toggle) |
 | pages      | `page.*`      | Page-specific styles that helpers may override              |
 | helpers    | `help.*`      | Utility overrides (colors, spacing, typography), all `!important`: beats everything, including unlayered CSS |
 

agents/structure.md

@@ -27,7 +27,6 @@ src/
 | --------------------- | --------------------------------- | ----------------------------------------------------------------------- |
 | New page route        | `src/pages/`                      | —                                                                       |
 | New reusable UI       | `src/components/`                 | If it needs CSS: add `component.<name>.css` (see rows below)            |
-| New atom style        | `src/styles/framework/atom.<name>.css` | Import with `layer(atoms)` in `framework/mcss.css`                 |
 | New library component style | `src/styles/framework/component.<name>.css` | Import with `layer(components)` in `framework/mcss.css` |
 | New site-only style   | `src/styles/site/<prefix>.<name>.css` | Import (unlayered) in `_global.css`                                 |
 | New blog post         | `src/content/blog/`               | Match schema (see agents/content.md)                                    |

dist/css/component.articleCard.css

@@ -24,7 +24,7 @@ xxl: 1920px
 
 /* truncate single line of text and adds … */
 
-@layer atoms {
+@layer components {
 /* BADGE */
 
 .badge {

dist/css/atom.badge.css dist/css/component.badge.cssdist/css/atom.badge.css renamed to dist/css/component.badge.css

@@ -24,7 +24,7 @@ xxl: 1920px
 
 /* truncate single line of text and adds … */
 
-@layer atoms {
+@layer components {
 .button,
 .bt {
   display: inline-flex;

dist/css/atom.button.css dist/css/component.button.cssdist/css/atom.button.css renamed to dist/css/component.button.css

@@ -109,8 +109,8 @@ xxl: 1920px
   transform: translate(var(--xs2), calc(var(--xs2) * -1));
 }
 
-/* Badge visuals come from the .badge atom (atom.badge.css); the Card
-   component renders class="badge card_badge" on each badge. */
+/* Badge visuals come from the badge component (component.badge.css); the
+   Card component renders class="badge card_badge" on each badge. */
 
 .card_tags {
   /* keep the tags clickable above the stretched .card_link */