@misoto22/folio 0.17.0 → 0.18.0

package/dist/website-recovery.css

@@ -1,3 +1,10 @@
+/* The wait-then-fade every route skeleton shares. The delay is one fast step:
+   a route that answers inside it never shows a skeleton at all, and one that
+   does not fades the bars in instead of cutting to them. The pulse lives on
+   the SkeletonPage inside, so the two animations never fight for a property. */
+.folio-loading-page { animation: folio-loading-in var(--duration-base) var(--ease) var(--duration-fast) both; }
+@keyframes folio-loading-in { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .folio-loading-page { animation: none; } }
 .folio-recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
 .folio-recovery-links { margin-block: clamp(3.5rem, 7vw, 6rem) 3rem; }
 .folio-recovery-links ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4rem; margin: .25rem 0 0; padding: 0; list-style: none; }
@@ -6,12 +13,13 @@
 .folio-loading-intro { display: grid; align-items: end; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.75rem, 5vw, 4.5rem); }
 .folio-loading-records, .folio-loading-gallery, .folio-loading-metrics { padding-block-end: clamp(4rem, 9vw, 8rem); }
 .folio-loading-records__row { display: grid; gap: 1rem 2.25rem; border-block-end: 1px solid var(--rule); padding-block: 2rem; }
-.folio-loading-records__row:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-loading-records__row:first-child { border-block-start: 1px solid var(--rule-divider); }
 .folio-loading-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
 .folio-loading-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .75rem; }
 .folio-loading-media { border-block: 1px solid var(--rule); background: var(--paper-2); }
 .folio-loading-metrics__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
 .folio-loading-metrics__figures > div { padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.625rem); }
+.folio-loading-article { padding-block-start: clamp(4rem, 8vw, 6rem); }
 .folio-loading-identity { display: grid; align-items: center; gap: 3.5rem; padding-block: clamp(7rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem); }
 @media (min-width: 640px) {
   .folio-recovery-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

package/dist/website-search.css

@@ -1,26 +1,40 @@
-  .folio-search-palette__search { position: relative; }
-  .folio-search-palette__search:focus-within { background: var(--paper-2); }
-  .folio-search-palette__search input { padding-inline-end: 3rem; font-size: .875rem; }
+  /* The panel: one surface, a hairline, and the lift a floating layer is
+     allowed. The field is part of the panel rather than a grey band on top of
+     it, and the list below it is single-line rows at the 44px target. */
+  .folio-search-palette { border-color: var(--rule); background: var(--paper); }
+  .folio-search-palette__search { position: relative; display: flex; align-items: center; border-block-end: 1px solid var(--rule); }
+  .folio-search-palette__search [cmdk-input-wrapper], .folio-search-palette__search > div:first-child { flex: 1; min-inline-size: 0; border: 0; }
+  .folio-search-palette__search input { block-size: 3.5rem; padding-inline-end: 3rem; font-size: .9375rem; }
   .folio-search-palette__search input:focus, .folio-search-palette__search input:focus-visible,
   .folio-search-palette__input input:focus, .folio-search-palette__input input:focus-visible { outline: none; box-shadow: none; }
   .folio-search-palette__close { position: absolute; inset-block-start: 50%; inset-inline-end: .5rem; translate: 0 -50%; }
-  .folio-search-palette__input { display: flex; align-items: center; gap: .5rem; padding: .75rem; border-block-end: 1px solid var(--rule); }
+  .folio-search-palette__input { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border-block-end: 1px solid var(--rule); }
   .folio-search-palette__input input { min-inline-size: 0; }
-  .folio-search-palette__detail { max-block-size: calc(80svh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; }
-  .folio-search-palette__result { flex: 1; min-inline-size: 0; display: grid; gap: .125rem; }
-  .folio-search-palette__result > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .folio-search-palette__description { color: var(--ink-3-aa); font-size: .75rem; }
-  .folio-search-palette__heading { font-family: var(--sans); font-size: .75rem; letter-spacing: normal; text-transform: none; }
-  .folio-search-palette__item { margin: .125rem 0; border-radius: var(--radius-sm); font-size: .875rem; }
+  .folio-search-palette__detail { max-block-size: calc(70svh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; }
+  /* The last visible row dissolves into the footer rather than being sliced by
+     it, which is what tells a reader the list goes on. */
+  .folio-search-palette [cmdk-list] { padding: .375rem; mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent); }
+  .folio-search-palette [cmdk-group-heading] { padding: .75rem .625rem .375rem; }
+  .folio-search-palette__heading { color: var(--ink-3-aa); font-family: var(--sans); font-size: .75rem; letter-spacing: normal; text-transform: none; }
+  .folio-search-palette__item { min-block-size: 2.75rem; margin: 0; padding-block: .5rem; border-radius: var(--radius-row); font-size: .875rem; }
   .folio-search-palette__item::before { display: none; }
-  .folio-search-palette__item[data-selected=true] { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
-  .folio-search-palette__meta { font-family: var(--sans); font-size: .6875rem; opacity: 0; }
+  .folio-search-palette__item[data-selected=true] { background: var(--paper-2); }
+  .folio-search-palette__result { flex: 1; min-inline-size: 0; display: flex; align-items: baseline; gap: .625rem; }
+  .folio-search-palette__result > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .folio-search-palette__result > span:first-child { flex: none; max-inline-size: 70%; color: var(--ink); }
+  .folio-search-palette__description { flex: 1; min-inline-size: 0; color: var(--ink-3-aa); font-size: .8125rem; }
+  .folio-search-palette__meta { font-family: var(--sans); font-size: .6875rem; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
   .folio-search-palette__item[data-selected=true] .folio-search-palette__meta { opacity: 1; }
-  .folio-search-palette__highlight { color: var(--ink); background: var(--stone); border-radius: var(--radius-sm); }
-  .folio-search-palette__footer { flex-wrap: wrap; }
+  .folio-search-palette__highlight { color: var(--ink); background: var(--stone); border-radius: var(--radius-xs); }
+  .folio-search-palette__footer { flex-wrap: wrap; border-block-start: 1px solid var(--rule); background: var(--paper); }
   @media (max-width: 40rem) {
     .folio-search-palette__search input { font-size: 1rem; }
     .folio-search-palette__detail { max-block-size: calc(84svh - 4.5rem); }
+    .folio-search-palette__result { display: grid; gap: .125rem; }
+    .folio-search-palette__result > span:first-child { max-inline-size: none; }
     .folio-search-palette__meta { display: none; }
     .folio-search-palette__footer { display: none; }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .folio-search-palette { animation: none !important; }
+  }

package/dist/website-timeline.css

@@ -1,5 +1,5 @@
 .folio-record-section { scroll-margin-block-start: var(--scroll-offset); }
-.folio-record-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-record-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-career-record { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: clamp(2rem, 3.5vw, 3rem); }
 .folio-career-record__dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
 .folio-career-record__dates dl, .folio-career-record__dates dd { margin: 0; }
@@ -9,6 +9,12 @@
 .folio-career-record__description { margin-block: 1.25rem 0; max-inline-size: var(--measure-record); padding-inline-start: 1.25rem; list-style: disc; }
 .folio-career-record__description > li + li { margin-block-start: .5rem; }
 .folio-career-record__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem 0; list-style: none; padding: 0; }
+/* Every chip in the row is the same flex box, marked or not, so a text-only
+   chip shares its neighbours' baseline. A mark takes the label's colour, so a
+   row of brand marks reads as one quiet line rather than a sticker sheet. */
+.folio-career-record__tag { display: inline-flex; align-items: center; gap: .375rem; }
+.folio-career-record__tag-mark { display: inline-flex; flex: none; inline-size: .875rem; block-size: .875rem; color: var(--ink-3-aa); }
+.folio-career-record__tag-mark > :is(svg, img) { inline-size: 100%; block-size: 100%; }
 .folio-career-record__mark { display: none; }
 .folio-career-record__mark img { inline-size: 4rem; block-size: 4rem; object-fit: contain; }
 .folio-profile-section, .folio-profile-narrative { padding-block: clamp(3rem, 6vw, 5rem); }
@@ -18,7 +24,7 @@
 .folio-profile-figure__image { overflow: hidden; border-radius: var(--radius); }
 .folio-profile-figure__image img { display: block; inline-size: 100%; block-size: auto; }
 .folio-profile-skills__group { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: 1.5rem; }
-.folio-profile-skills__group:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-profile-skills__group:first-child { border-block-start: 1px solid var(--rule-divider); }
 .folio-profile-skills__items { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
 .folio-profile-skills__items > li { display: inline-flex; align-items: center; gap: .5rem; }
 .folio-profile-skill__icon { display: inline-flex; }
@@ -29,7 +35,7 @@
 [data-mode='dark'] .folio-profile-skill__icon[data-invert]:not([data-has-dark]) img { filter: invert(1); }
 .folio-profile-interests { display: grid; gap: 2rem; }
 .folio-profile-interests article { border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem; }
-.folio-timeline { border-block-start: 1px solid var(--rule-hard); }
+.folio-timeline { border-block-start: 1px solid var(--rule-divider); }
 .folio-timeline__item { min-inline-size: 0; }
 @media (min-width: 768px) {
   .folio-career-record { grid-template-columns: 11rem minmax(0, 1fr) 4rem; column-gap: clamp(2rem, 4vw, 3.5rem); }

package/package.json

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

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

@@ -71,6 +71,7 @@ not just `:root`. An unset axis is the default.
 | `data-type` | `grotesk` `bookish` | editorial |
 | `data-motion` | `still` `snappy` | calm |
 | `data-voice` | `quiet` | display |
+| `data-controls` | `pill` | the control step (`--radius`) |
 | `data-density` | `compact` | comfortable |
 
 ```tsx