Add a layout/flex:basis atom for flex-basis

[eastagiletracker]

This PR proposes a layout/flex:basis atom, so flex-basis can be set from a class the same way layout/width already sets width (fixes #94). We include this PR work along with a full history of your repo at https://eastagiletracker.com/projects/368. You can sign in with your GitHub ID to claim ownership of the project.

What this adds

layout/flex currently exposes grow and shrink, but there is no atom for the third part of the shorthand, so a flex child that needs a main-axis size has to fall back to an inline style or a one-off class. On main at 86ddc5d, a fresh build has no such declaration anywhere:

$ sass src/stylesheets/main.scss dist/sol.css
$ grep -c 'flex-basis' dist/sol.css
0

The change is 12 lines in src/stylesheets/atoms/_layout.scss, inside the existing @include atom(flex) block and directly after grow, shrink. It follows the layout/width shape exactly: the base class sets flex-basis: var(--layout--flex--basis) so any value can be inlined, and variant-percentages — the same mixin layout/width uses — generates 0%–100% in 5% steps plus the accurate 33%/66%, along with the auto and clear resets. The breakpoint prefixes come along for free, so @768/layout/flex:basis:50% works like every other layout atom. 390 selectors in total: 26 classes across the base rendering and the 14 breakpoints.

How it was verified

Rebuilding dist/sol.css before and after and diffing the two 4.4 MB files: every substantive added line is a layout/flex:basis selector or one of its custom-property declarations, nothing was removed, and no other rule moved. Sass's warning output is byte-identical between the two builds, so nothing new is flagged at build time. The stylesheet grows by 44,179 bytes, 1.00%.

Behavior was checked in a real browser against both builds — three flex children in a 600px layout/flex:row container, reading computed style:

class on the child                    before build      after build
------------------------------------  ----------------  -----------------
layout/flex:basis:50%                 auto / 5.56px     50% / 300px
layout/flex:basis:25%                 auto / 5.56px     25% / 150px
layout/flex:basis                     auto / 5px        120px / 120px
  (style="--layout--flex--basis: 12rem")

(computed flex-basis / used width, 600px container)

yarn test is green on both trees — 3 suites, 44 tests, no change either way. I did not add a Sass test for this: there is no CSS test harness in the repo today, and a full main.scss compile takes about five minutes here, so adding one to yarn test seemed like your call to make rather than mine. The build-and-grep above replays the compiled half in one command, and the browser check is a layout/flex:row container with the three children above.

The change is purely additive — no existing class, placeholder or custom property is renamed, removed or redefined, and the new atom does not @extend into anything that already exists.

How this was managed

Your issues and pull requests were imported into a board (102 stories, 5 labels), and this work was tracked on it as Add atom for flex-basis, on the board at https://eastagiletracker.com/projects/368.

If you'd rather not receive contributions like this, reply no-more-prs on this pull request and we won't open any further ones on your repositories.

---

Lawrence W. Sinclair
CEO / East Agile
linkedin.com/in/lwsinclair/
eastagile.com