What the scan of the four repos found: details that differ from one project to another. The value kept by this system is in bold; the repos are to be aligned on it.
| Topic | portfolio | vps-admin | Stabilité (Flutter) | Kept |
|---|---|---|---|---|
| State layer class | .state |
.st |
native (InkWell) | .st |
| Button variants | .btn.filled |
.btn-filled |
native | .btn-filled |
| Button label weight | 500 | 600 | 600 on FABs | 600 |
| Button height / padding | min 40, padding 24 | 40, padding 20 | native 40 | 40px, padding 20 |
| Wide button | 56px, radius 28 | 48px, radius 24 | native | 48px (btn-lg), 56px (btn-xl) for heroes |
| Icon button | 48px | 40px | native 48 | 40px web, 48px mobile (icon-btn lg) |
| Chip | outline 32px, 14px | full secc, 12px / 600 |
tonal StatusChip | full by default, chip-outline for metadata, chip-filter for choices |
| Card radius | 28 | 28 | 24 | 28 (radius-card), 24 compact |
| Light theme | complete | statuses only in styles.css, the rest from theme.ts | fromSeed |
complete roles in light and dark in tokens.json |
| Status colours | none | fixed ok / warn / bad |
via colorScheme.error |
ok / warn / bad everywhere |
| Code chip | absent | fixed dark background in both themes | absent | scc + outline-v, follows the theme |
| Expressive shapes | polar cosine formula (shapes.ts, build.py): 5 approximate shapes |
same formula | none | 26 official MaterialShapes (Pelote.SHAPES), without bursts, pixel, heart, puffy or flower. Replace shapes.ts and build.py with these paths; in Flutter, use the same paths or a port of RoundedPolygon |
scrollbar-gutter, scroll-reveal |
yes | no | not applicable | scroll-reveal reserved for the portfolio |
Watch out for
- The portfolio scroll-reveal starts at
opacity: 0: if the script does not run, content stays invisible. Plan a visible default state and only animate once the observer is ready. - The custom cursor (
mix-blend-mode: difference) is a portfolio signature: do not reuse it in apps. - vps-admin and Stabilité generate their colours from a source colour: the tokens in this system are the values for the default violet source, not a tint constraint.