@misoto22/folio 0.16.0 → 0.17.0

package/dist/website-workbench.css

@@ -0,0 +1,162 @@
+/*
+ * Workbench compositions.
+ *
+ * One grid for the whole page: 12 columns with a 24px gutter inside the page
+ * width. A section's heading takes columns 1–4 and its content an 8-column
+ * subgrid on columns 5–12, so every list, card and caption on the page shares
+ * the same vertical lines. Colour, rules and type come from the theme axes;
+ * the Workbench preset is `linen` + `ember` + `grotesk` + `quiet`, but these
+ * compositions read only roles and work under any preset.
+ */
+@layer components {
+  .folio-wb-section,
+  .folio-wb-hero {
+    --wb-gap: 24px;
+    max-inline-size: var(--w-page);
+    margin-inline: auto;
+    padding-inline: var(--page-pad);
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--wb-gap);
+  }
+
+  /* ─── Section ─────────────────────────────────────────────────────────── */
+  .folio-wb-section { margin-block-start: 7.5rem; }
+  .folio-wb-section:last-child { margin-block-end: 7.5rem; }
+  .folio-wb-section::before { content: ''; grid-column: 1 / -1; border-block-start: 1px solid var(--rule); margin-block-end: 2rem; }
+  .folio-wb-section-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1rem; padding-inline-end: 1.5rem; }
+  .folio-wb-section-body { grid-column: 5 / -1; min-inline-size: 0; }
+  .folio-wb-heading { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
+  .folio-wb-heading-lead { color: var(--ink-3-aa); }
+  .folio-wb-section-action a,
+  .folio-wb-link { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--accent-on-muted); text-decoration: none; font-size: .9375rem; }
+  .folio-wb-section-action a:hover,
+  .folio-wb-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+
+  /* ─── Hero ────────────────────────────────────────────────────────────── */
+  .folio-wb-hero { padding-block-start: clamp(4rem, 8vw, 6rem); row-gap: 3rem; align-items: end; }
+  .folio-wb-hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 1.75rem; }
+  .folio-wb-hero-statement { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.3; }
+  .folio-wb-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+  .folio-wb-hero-stats { grid-column: 10 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-gap); margin: 0; align-self: end; }
+  .folio-wb-hero-stats > div { display: flex; flex-direction: column-reverse; gap: .125rem; }
+  .folio-wb-hero-stats dd { margin: 0; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
+  .folio-wb-hero-stats dt { font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-hero-figure { grid-column: 1 / -1; }
+
+  /* ─── Figure ──────────────────────────────────────────────────────────── */
+  .folio-wb-figure { margin: 0; }
+  .folio-wb-figure-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 3 / 2; }
+  .folio-wb-figure[data-ratio='wide'] .folio-wb-figure-frame { aspect-ratio: 16 / 9; }
+  .folio-wb-figure[data-ratio='portrait'] .folio-wb-figure-frame { aspect-ratio: 4 / 5; }
+  .folio-wb-figure[data-ratio='panorama'] .folio-wb-figure-frame { aspect-ratio: 3 / 1; }
+  .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame img,
+  .folio-wb-card-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--slow) var(--ease); }
+  .folio-wb-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Tools ───────────────────────────────────────────────────────────── */
+  .folio-wb-tools { max-inline-size: var(--w-page); margin: 4.5rem auto 0; padding-inline: var(--page-pad); }
+  .folio-wb-tools-label { margin: 0 0 1.25rem; text-align: center; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
+  .folio-wb-tools li { display: grid; place-items: center; block-size: 4rem; border-radius: var(--radius); background: var(--paper-2); color: var(--ink-3-aa); transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease); }
+  .folio-wb-tools li:hover { color: var(--ink); background: var(--stone); }
+  .folio-wb-tools li svg { inline-size: 1.375rem; block-size: 1.375rem; }
+
+  /* ─── Cards ───────────────────────────────────────────────────────────── */
+  .folio-wb-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 24px; }
+  .folio-wb-card { position: relative; display: flex; flex-direction: column; gap: .375rem; }
+  .folio-wb-card-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-block-end: .625rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-card-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--ink); }
+  .folio-wb-card-title a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
+  .folio-wb-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
+  .folio-wb-card:has(a:focus-visible) .folio-wb-card-cover { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
+  .folio-wb-card-description,
+  .folio-wb-card-meta { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-card-meta { font-size: .8125rem; }
+  .folio-wb-card:hover .folio-wb-card-cover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-card:hover .folio-wb-card-cover img,
+  .folio-wb-figure:hover .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame:hover img { scale: 1.02; }
+  .folio-wb-tile { display: grid; align-items: end; block-size: 100%; padding: 1.25rem; color: var(--paper); background-color: var(--ink); background-image: linear-gradient(color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
+  .folio-wb-tile span { font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
+
+  /* ─── Entries ─────────────────────────────────────────────────────────── */
+  .folio-wb-entries { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; row-gap: 2rem; }
+  .folio-wb-entries > ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+  .folio-wb-entries[data-has-featured] > ul { grid-column: 5 / -1; }
+  .folio-wb-entries > ul > li + li { border-block-start: 1px solid var(--rule); }
+  .folio-wb-entries > ul > li { padding-block: 1.25rem; }
+  .folio-wb-entries > ul > li:first-child { padding-block-start: 0; }
+  .folio-wb-entry-featured { grid-column: 1 / span 4; position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background-color: var(--paper-2); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.625rem - 1px), var(--rule) calc(1.625rem - 1px) 1.625rem); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-entry-featured:hover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-entry-featured h3 { margin: 0 0 auto; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; color: var(--ink); }
+  .folio-wb-entry-featured p { margin: 0; font-size: .9375rem; line-height: 1.625rem; color: var(--ink-2); }
+  .folio-wb-entry-featured h3 a::after { content: ''; position: absolute; inset: 0; }
+  .folio-wb-entry h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; }
+  .folio-wb-entry h3 a,
+  .folio-wb-entry-featured h3 a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); text-decoration: none; }
+  .folio-wb-entry h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+  .folio-wb-entry-date { margin: 0 0 .25rem; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-entry-excerpt { margin: .375rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-entry-meta { margin: .375rem 0 0; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Chronology ──────────────────────────────────────────────────────── */
+  .folio-wb-chronology { margin: 0; }
+  .folio-wb-chronology ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
+  .folio-wb-chronology li p { margin: 0 0 .375rem; font-size: .8125rem; line-height: 1.4; color: var(--ink); white-space: nowrap; }
+  .folio-wb-chronology li[data-align='start'] p { margin-inline-start: var(--start); }
+  .folio-wb-chronology li[data-align='end'] p { text-align: end; padding-inline-end: calc(100% - var(--end)); }
+  .folio-wb-chronology-org { color: var(--ink-3-aa); }
+  .folio-wb-chronology-now { color: var(--accent-on-muted); }
+  .folio-wb-chronology-bar { display: block; margin-inline-start: var(--start); block-size: .5rem; inline-size: calc(var(--end) - var(--start)); min-inline-size: .75rem; border-radius: var(--radius-pill); }
+  .folio-wb-chronology li[data-kind='role'] .folio-wb-chronology-bar { background: var(--stone); }
+  .folio-wb-chronology li[data-kind='study'] .folio-wb-chronology-bar { box-shadow: inset 0 0 0 1px var(--rule-2); }
+  .folio-wb-chronology li[data-current] .folio-wb-chronology-bar { background: linear-gradient(90deg, var(--ink) calc(100% - .5rem), var(--accent) 0); }
+  .folio-wb-chronology-axis { display: flex; overflow: hidden; margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-2); }
+  .folio-wb-chronology-axis span { flex: 1; min-inline-size: 0; white-space: nowrap; padding: .5rem 0 0 .375rem; border-inline-start: 1px solid var(--rule); font-size: .8125rem; color: var(--ink-3-aa); font-variant-numeric: tabular-nums; }
+
+  /* ─── Mosaic ──────────────────────────────────────────────────────────── */
+  .folio-wb-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 24px; }
+  .folio-wb-mosaic-lead { grid-row: span 2; margin: 0; display: flex; flex-direction: column; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { flex: 1; }
+  .folio-wb-mosaic-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 4 / 5; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: auto; min-block-size: 100%; }
+  .folio-wb-mosaic-frame > a { position: absolute; inset: 0; display: block; }
+  .folio-wb-mosaic-lead figcaption { margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Contact ─────────────────────────────────────────────────────────── */
+  .folio-wb-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
+  .folio-wb-contact-address a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--rule-2); transition: text-decoration-color var(--mid) var(--ease); }
+  .folio-wb-contact-address a:hover { text-decoration-color: var(--ink); }
+
+
+  /* ─── Reveal ──────────────────────────────────────────────────────────── */
+  .folio-wb-reveal[data-reveal] { transition: opacity calc(var(--slow) * 1.2) var(--ease), translate calc(var(--slow) * 1.2) var(--ease); }
+  .folio-wb-reveal[data-reveal='hidden'] { opacity: 0; translate: 0 12px; }
+
+  .folio-wb-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+  /* ─── Narrow screens ──────────────────────────────────────────────────── */
+  @media (max-width: 47.5rem) {
+    .folio-wb-section { margin-block-start: 5rem; }
+    .folio-wb-section-head,
+    .folio-wb-section-body,
+    .folio-wb-hero-copy,
+    .folio-wb-hero-stats { grid-column: 1 / -1; }
+    .folio-wb-section-head { margin-block-end: 2rem; padding-inline-end: 0; }
+    .folio-wb-tools ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
+    .folio-wb-card-grid { grid-template-columns: minmax(0, 1fr); }
+    .folio-wb-entries > ul,
+    .folio-wb-entries[data-has-featured] > ul,
+    .folio-wb-entry-featured { grid-column: 1 / -1; }
+    .folio-wb-mosaic { grid-template-columns: 1fr 1fr; }
+    .folio-wb-mosaic-lead { grid-column: 1 / -1; grid-row: auto; }
+    .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: 4 / 5; }
+    .folio-wb-chronology li p { white-space: normal; }
+    /* A long career puts a dozen years on a phone-width axis; every other
+       label keeps them legible without pushing the page sideways. */
+    .folio-wb-chronology-axis span:nth-child(even) { color: transparent; }
+  }
+}
+

package/dist/website.css

@@ -23,3 +23,4 @@
 @import './website-conversation.css';
 @import './website-evidence.css';
 @import './website-controls.css';
+@import './website-workbench.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/folio",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",

package/skills/folio-design/rules/tokens.md

@@ -63,12 +63,14 @@ not just `:root`. An unset axis is the default.
 | Attribute | Values | Unset means |
 | --- | --- | --- |
 | `data-mode` | `light` `dark` | follows the app |
-| `data-accent` | `clay` `cobalt` `forest` `moss` `plum` | ink |
-| `data-surface` | `warm` `cool` `glass` | paper |
+| `data-accent` | `clay` `cobalt` `ember` `forest` `moss` `plum` | ink |
+| `data-action` | `ink` | accent |
+| `data-surface` | `warm` `cool` `glass` `linen` | paper |
 | `data-radius` | `sharp` `round` | the default ladder |
 | `data-rules` | `quiet` `firm` | hairline |
 | `data-type` | `grotesk` `bookish` | editorial |
 | `data-motion` | `still` `snappy` | calm |
+| `data-voice` | `quiet` | display |
 | `data-density` | `compact` | comfortable |
 
 ```tsx