@misoto22/folio 0.17.0 → 0.17.1

package/dist/tokens.js

@@ -137,6 +137,13 @@ export const TOKENS = {
     "light": "var(--ink)",
     "dark": "var(--ink)"
   },
+  "rule-divider": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--rule-hard)",
+    "comment": "The hard rule as a section DIVIDER — under a band heading, above a form, between groups. Its own name so the rules axis can take dividers away without touching the hard edges controls draw (a slider track, a table head, a quotation bar).",
+    "dark": "var(--rule-hard)"
+  },
   "red": {
     "layer": "tokens",
     "category": "colour",
@@ -319,6 +326,12 @@ export const TOKENS = {
     "category": "other",
     "light": "1"
   },
+  "body-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300",
+    "comment": "Running text: the White Reset sets it light; a quiet voice sets it at a regular weight to match its regular-weight headings."
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
@@ -777,7 +790,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "other",
     "light": "var(--accent)",
-    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+    "comment": "The SOLID fill of a primary action or a chosen option — the primary button, the sliding pill of a segmented control, the active filter chip, the current page. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links can hand these large fills back to ink, while small marks (a checked box, a switch, a slider's range) keep the accent."
   },
   "action-foreground": {
     "layer": "semantic",

package/dist/tokens.json

@@ -136,6 +136,13 @@
     "light": "var(--ink)",
     "dark": "var(--ink)"
   },
+  "rule-divider": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--rule-hard)",
+    "comment": "The hard rule as a section DIVIDER — under a band heading, above a form, between groups. Its own name so the rules axis can take dividers away without touching the hard edges controls draw (a slider track, a table head, a quotation bar).",
+    "dark": "var(--rule-hard)"
+  },
   "red": {
     "layer": "tokens",
     "category": "colour",
@@ -318,6 +325,12 @@
     "category": "other",
     "light": "1"
   },
+  "body-weight": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "300",
+    "comment": "Running text: the White Reset sets it light; a quiet voice sets it at a regular weight to match its regular-weight headings."
+  },
   "fs-title": {
     "layer": "tokens",
     "category": "type",
@@ -776,7 +789,7 @@
     "layer": "semantic",
     "category": "other",
     "light": "var(--accent)",
-    "comment": "The fill of the one primary action on a screen. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links and the current state can hand the primary button back to ink, without a checked box or the current page losing the accent."
+    "comment": "The SOLID fill of a primary action or a chosen option — the primary button, the sliding pill of a segmented control, the active filter chip, the current page. It follows the accent unless `data-action` says otherwise: a preset that keeps its accent for links can hand these large fills back to ink, while small marks (a checked box, a switch, a slider's range) keep the accent."
   },
   "action-foreground": {
     "layer": "semantic",

package/dist/website-collection.css

@@ -19,7 +19,7 @@
 .folio-collection-metadata dd{margin:.5rem 0 0;color:var(--ink)}
 .folio-collection-group{padding-block-start:clamp(3rem,7vw,6rem)}
 .folio-collection-group[data-compact]{padding-block-start:1.5rem}
-.folio-collection-group-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-hard);padding-block-end:1rem;margin-block-end:1rem}
+.folio-collection-group-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-divider);padding-block-end:1rem;margin-block-end:1rem}
 .folio-collection-group-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-lead);line-height:1.1;letter-spacing:-.028em}
 .folio-collection-group-heading>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
 .folio-collection-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border-block:1px solid var(--rule);padding-block:1rem}
@@ -65,7 +65,7 @@
 .folio-collection-footer{padding-block-start:clamp(2rem,5vw,4rem)}
 .folio-collection-footer>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem}
 .folio-taxonomy-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.5rem}
-.folio-reference-rows{margin:0;border-block-start:1px solid var(--rule-hard)}
+.folio-reference-rows{margin:0;border-block-start:1px solid var(--rule-divider)}
 .folio-reference-rows>div{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(0,3fr);gap:1.5rem;padding-block:1.5rem;border-block-end:1px solid var(--rule)}
 .folio-reference-rows dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.75rem;color:var(--ink-3-aa)}
 .folio-reference-rows dt p{font-family:var(--sans);font-size:.8125rem;line-height:1.6;margin-block:.5rem 0}

package/dist/website-contact.css

@@ -2,15 +2,21 @@
   display: grid;
   align-items: start;
   gap: 3rem;
-  border-block-start: 1px solid var(--rule-hard);
+  border-block-start: 1px solid var(--rule-divider);
   padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
 }
 .folio-contact-form, .folio-contact-facts { min-inline-size: 0; }
-.folio-contact-form__fields { display: grid; gap: 2rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: 2rem; }
+.folio-contact-form__fields { display: grid; gap: 2rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: 2rem; }
 .folio-contact-form__identity { display: grid; gap: 2rem; }
 .folio-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
 .folio-contact-facts__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-block-start: 1rem; }
-.folio-question-list__items { border-block-start: 1px solid var(--rule-hard); }
+/* A fact's link sits on the same left edge as its label: a ghost button's
+   inline padding read as an indent where an icon had gone missing. The 44px
+   block size the host gives the link is kept. */
+.folio-contact-facts dd > a:first-child,
+.folio-contact-facts__links > a { padding-inline: 0; }
+.folio-contact-facts__links { column-gap: 1.5rem; }
+.folio-question-list__items { border-block-start: 1px solid var(--rule-divider); }
 .folio-question-list__item { display: grid; gap: 1rem; padding-block: 1.5rem; border-block-end: 1px solid var(--rule); }
 .folio-location-figure { margin: 0; }
 .folio-location-figure__map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }

package/dist/website-conversation.css

@@ -3,7 +3,7 @@
 .folio-conversation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; border-block: 1px solid var(--rule); padding-block: 1.25rem; }
 .folio-conversation-facts dd > span { display: inline-flex; align-items: center; gap: .5rem; }
 .folio-conversation-thread { min-inline-size: 0; }
-.folio-conversation-thread__intro { border-block-start: 1px solid var(--rule-hard); padding-block-start: 2rem; }
+.folio-conversation-thread__intro { border-block-start: 1px solid var(--rule-divider); padding-block-start: 2rem; }
 .folio-conversation-thread__intro > h2 { max-inline-size: 22ch; text-wrap: balance; }
 .folio-conversation-thread__intro > p { max-inline-size: 56ch; }
 .folio-conversation-suggestions { margin-block-start: 2rem; }
@@ -11,12 +11,12 @@
 .folio-conversation-suggestions > ul > li, .folio-conversation-sources > ul > li { border-block-end: 1px solid var(--rule); }
 .folio-conversation-suggestions__action { inline-size: 100%; justify-content: space-between; text-align: start; gap: 1.5rem; padding-inline: 0; }
 .folio-conversation-suggestions__action > svg { flex-shrink: 0; }
-.folio-conversation-thread__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: .75rem; }
+.folio-conversation-thread__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: .75rem; }
 .folio-conversation-thread__controls > div { display: flex; flex-wrap: wrap; gap: .25rem; }
 .folio-conversation-log { display: flex; flex-direction: column; }
 .folio-conversation-log[data-compact] { gap: 2rem; }
 .folio-conversation-thread__composer { margin-block-start: 3rem; }
-.folio-conversation-thread__composer[data-sticky] { position: sticky; inset-block-end: 0; z-index: 10; margin-block-start: 2rem; padding-block: 1rem .75rem; border-block-start: 1px solid var(--rule-hard); background: var(--paper); }
+.folio-conversation-thread__composer[data-sticky] { position: sticky; inset-block-end: 0; z-index: 10; margin-block-start: 2rem; padding-block: 1rem .75rem; border-block-start: 1px solid var(--rule-divider); background: var(--paper); }
 .folio-conversation-thread__proposal { margin-block-end: 1.25rem; }
 .folio-question-composer__row { display: flex; align-items: end; gap: 1rem; }
 .folio-question-composer__field { flex: 1; min-inline-size: 0; }
@@ -43,13 +43,13 @@
 .folio-conversation-prose p.folio-conversation-prose__heading[data-lead] { margin-block-start: 0; }
 .folio-conversation-prose sup { font-size: .75em; }
 .folio-conversation-caret { display: inline-block; inline-size: .375rem; block-size: 1em; margin-inline-start: .2rem; vertical-align: -.1em; background: var(--ink); }
-.folio-conversation-sources { margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-hard); padding-block-start: .75rem; }
+.folio-conversation-sources { margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-divider); padding-block-start: .75rem; }
 .folio-conversation-sources__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
 .folio-conversation-sources__link { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; inline-size: 100%; align-items: baseline; text-align: start; gap: .75rem; padding-inline: 0; }
 .folio-conversation-sources__link[data-highlighted] { background: var(--accent-muted); }
 .folio-conversation-sources__link > span:nth-child(2) { min-inline-size: 0; }
 .folio-conversation-sources__link > span:nth-child(2) > span { display: block; }
-.folio-action-proposal__actions { margin-block-start: .375rem; border-block-start: 1px solid var(--rule-hard); }
+.folio-action-proposal__actions { margin-block-start: .375rem; border-block-start: 1px solid var(--rule-divider); }
 .folio-action-proposal__action { display: flex; inline-size: 100%; justify-content: space-between; gap: 1rem; text-align: start; border-block-end: 1px solid var(--rule); padding-inline: 0; }
 .folio-action-proposal__action > span { min-inline-size: 0; }
 .folio-action-proposal__action > span:last-child { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

package/dist/website-evidence.css

@@ -7,7 +7,7 @@
 .folio-activity-trace li > span { overflow-wrap: anywhere; }
 .folio-activity-trace__summary { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .folio-evidence-panel { min-inline-size: 0; }
-.folio-evidence-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-evidence-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-evidence-panel > header h2 { margin-block-start: .375rem; }
 .folio-evidence-panel > header > .folio-evidence-status { flex-shrink: 0; margin-block-start: .25rem; }
 .folio-evidence-panel > .folio-activity-trace { border-block-end: 1px solid var(--rule); padding-block: .75rem; }

package/dist/website-media.css

@@ -34,7 +34,7 @@
 .folio-media-gallery-caption { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.625rem; padding-block-start: 0.875rem; }
 .folio-media-gallery-index,
 .folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.1em * var(--label-tracking-scale)); text-overflow: ellipsis; white-space: nowrap; }
-.folio-media-gallery-location { grid-column: 2; letter-spacing: 0.14em; }
+.folio-media-gallery-location { grid-column: 2; letter-spacing: calc(0.14em * var(--label-tracking-scale)); }
 .folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: var(--display-weight); line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .folio-media-gallery-mount { block-size: auto; aspect-ratio: 1; }
 

package/dist/website-metrics.css

@@ -1,6 +1,6 @@
 .folio-metrics-range { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; border-block: 1px solid var(--rule); padding-block: 1rem; margin-block-start: 2rem; }
 .folio-metrics-section { padding-block: clamp(3rem, 6vw, 5rem); }
-.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-metrics-panel { min-inline-size: 0; }
 .folio-metrics-panel > header { margin-block-end: 1.25rem; }
 .folio-metrics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }

package/dist/website-music.css

@@ -20,7 +20,7 @@
 .folio-media-collection__copy h3 a { font: inherit; white-space: normal; text-align: start; }
 .folio-media-collection__metadata { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
 .folio-music-section { min-inline-size: 0; }
-.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-music-section__collections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
 @media (min-width: 640px) { .folio-media-row { gap: 1rem; }.folio-media-collection { grid-template-columns: 9rem minmax(0, 1fr); }.folio-media-collection__copy { padding-inline: 1.5rem; } }
 @media (min-width: 768px) { .folio-media-feature { grid-template-columns: minmax(15rem, 5fr) minmax(0, 7fr); }.folio-music-section__collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

package/dist/website-reading.css

@@ -19,7 +19,7 @@
 .folio-reading-body{min-width:0}
 .folio-reading-section{padding-block-start:clamp(3rem,7vw,5.5rem);scroll-margin-block-start:var(--scroll-offset,6rem)}
 .folio-reading-section[data-compact]{padding-block-start:2rem}
-.folio-reading-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-hard);padding-block-end:1rem;margin-block-end:1.75rem}
+.folio-reading-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-divider);padding-block-end:1rem;margin-block-end:1.75rem}
 .folio-reading-section[data-seamless] .folio-reading-heading{margin-block-end:0}
 .folio-reading-heading:has(+ .folio-reference-rows, + .folio-feature-pairs){margin-block-end:0}
 .folio-reading-heading + :is(.folio-reference-rows,.folio-feature-pairs){border-block-start:0}
@@ -67,12 +67,12 @@
 .folio-media-playback{position:relative;width:100%;height:100%}
 .folio-media-playback video{display:block;width:100%;height:100%;object-fit:cover}
 .folio-media-playback button{position:absolute;inset-inline-end:.75rem;inset-block-end:.75rem;background:var(--paper)}
-.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-hard);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
+.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-divider);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
 .folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;letter-spacing:calc(.1em * var(--label-tracking-scale));color:var(--ink-3-aa)}
 .folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.15;margin:0;text-wrap:balance}
 .folio-action-band p{max-width:46ch;color:var(--ink-3-aa);line-height:1.7;margin:1rem 0 0}
 .folio-action-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
-.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-hard)}
+.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-divider)}
 .folio-reading-section[data-seamless] .folio-feature-pairs{border-block-start:0}
 .folio-feature-pairs>div{padding-block:clamp(1.5rem,3vw,2rem);border-block-end:1px solid var(--rule)}
 .folio-feature-pairs span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}

package/dist/website-recovery.css

@@ -6,7 +6,7 @@
 .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); }

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; }
@@ -18,7 +18,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 +29,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.17.1",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",