@stnd/styles 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.10.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.9.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -113,6 +113,7 @@ In your main SCSS stylesheet or Astro entry point:
 
 ### Style Files Anatomy
 - `standard.scss`: Framework index.
+- `app.scss`: Opt-in tokens for an application window (fixed type scale, chrome-paced motion, radius, and the window-chrome set `--window-radius` / `--window-inset` / `--pane-radius`). Import after the theme.
 - `_standard-01-token.scss`: Variable dictionary.
 - `_standard-02-color.scss`: Color space equations.
 - `_standard-03-typography.scss`: Typography stacks.

package/_standard-06-prose.scss

@@ -175,6 +175,51 @@
     }
   }
 
+  /* Screen break & section transitions (T54) */
+  .stnd-screen-break {
+    grid-column: 1 / -1;
+    border: none;
+    height: 1px;
+    background: var(--color-border-subtle, rgba(125, 125, 125, 0.2));
+    margin-block: var(--gap-section, 6rem);
+    margin-inline: auto;
+    width: min(100%, 18rem);
+    position: relative;
+    scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+
+    &.screen-full {
+      width: 100%;
+      min-height: 80vh;
+      background: transparent;
+      margin-block: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        content: "✦";
+        color: var(--color-muted, #888);
+        opacity: 0.5;
+        font-size: 1.25rem;
+      }
+    }
+  }
+
+  .stnd-screen-section {
+    grid-column: 1 / -1;
+    width: 100%;
+    margin-block: var(--gap-section, 4rem);
+    scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+
+    &.screen-full {
+      min-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-block: 0;
+    }
+  }
+
   /* Image gallery layout */
   &:not(.no-grid) {
     p:has(img),

package/_standard-50-utilities.scss

@@ -387,6 +387,47 @@
   margin-inline: auto !important;
 }
 
+.stnd-screen-break {
+  border: none;
+  height: 1px;
+  background: var(--color-border-subtle, rgba(125, 125, 125, 0.2));
+  margin-block: var(--gap-section, 6rem);
+  margin-inline: auto;
+  width: min(100%, 18rem);
+  scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+
+  &.screen-full {
+    width: 100%;
+    min-height: 80vh;
+    background: transparent;
+    margin-block: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "✦";
+      color: var(--color-muted, #888);
+      opacity: 0.5;
+      font-size: 1.25rem;
+    }
+  }
+}
+
+.stnd-screen-section {
+  width: 100%;
+  margin-block: var(--gap-section, 4rem);
+  scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+
+  &.screen-full {
+    min-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-block: 0;
+  }
+}
+
 /* ============================================================ */
 /*  TYPOGRAPHY — Size                                           */
 /* ============================================================ */

package/app.scss

@@ -0,0 +1,81 @@
+/**
+ * @component App Tokens
+ * @category Foundation
+ * @description Re-grounds the framework's tokens for an APPLICATION window
+ * instead of a document read in a browser. Opt-in: import it after
+ * standard.scss and after the theme.
+ *
+ * standard.scss is a note framework. It assumes fluid type that grows with
+ * the viewport, a mobile breakpoint that bumps text up on narrow screens, a
+ * reading measure, durations paced for reading. An app window is none of
+ * that: density is fixed, chrome is chrome, and a narrow window is just a
+ * small window.
+ *
+ * Unconditional `:root`, not `[data-theme]`: these are facts about the
+ * window, true whichever theme supplies the colour and font seeds.
+ *
+ * @property --window-radius The OS window's own corner radius.
+ * @property --window-inset Gap between the window edge and a floating pane.
+ * @property --pane-radius Corner of a pane floating inside the window.
+ */
+:root {
+  /* ---- Type ------------------------------------------------------------
+     Fixed UI scale (native macOS text runs ~13px). Wins over the fluid
+     clamp() in _standard-03-typography.scss by specificity. */
+  --font-text-size: 13px;
+  --font-size: var(--font-text-size);
+
+  /* The <768px breakpoint re-sets --font-size / --gap* from these mobile
+     tokens with !important. On the web that is comfort on a phone; in an
+     app it means text GROWS when the window shrinks. Point the mobile
+     tokens at the desktop values so the breakpoint becomes a no-op.
+     (Gap formulas are duplicated rather than var(--gap)-referenced —
+     referencing the token they feed would create a custom-property cycle.) */
+  --font-size-mobile: var(--font-text-size);
+  --gap-mobile: calc(var(--space) * var(--optical-ratio));
+  --gap-body-mobile: var(--space-2);
+  --gap-header-mobile: var(--space-8);
+
+  /* Tighter modular scale than the silver default — in an app, headings
+     are labels and section chrome, not display type. */
+  --font-ratio: 1.333;
+
+  /* ---- Motion ----------------------------------------------------------
+     The framework's durations (350 / 500 / 1000ms) are paced for a page
+     settling under your eyes. Chrome has to feel immediate under the
+     cursor. Same names, so components stay themeable from one place. */
+  --duration-instant: 120ms;
+  --duration-fast: 150ms;
+  --duration-standard: 180ms;
+  --duration-slow: 300ms;
+
+  /* ---- Radius ----------------------------------------------------------
+     The framework derives --radius from --leading, a TYPOGRAPHIC rhythm
+     value (~2.6px at 13px / 1.2), not a chrome corner. --corner is the
+     framework's own escape hatch for exactly this.
+     --radius-sm is set explicitly: the framework's min(8px, --radius)
+     would collapse onto --radius and stop being a distinct step.
+     --radius-lg has no framework equivalent; declared here so it is real. */
+  --corner: 6px; /* feeds --radius */
+  --radius-sm: 4px;
+  --radius-lg: 12px;
+
+  /* ---- Window chrome ---------------------------------------------------
+     A pane floating inside the window (a sidebar, an inspector) sits
+     --window-inset from the edge, and its corner is CONCENTRIC with the
+     window's: same centre, so radius = window radius − inset. That is the
+     rule macOS follows for its own inset sidebars; a pane radius picked
+     on its own never lines up with the window corner around it.
+
+     --window-radius is the one number that has to match the OS, and Apple
+     does not publish it: the HIG gives the concentric RULE (WWDC25, "Build
+     an AppKit app with the new design"), and native code gets it for free
+     (SwiftUI ConcentricRectangle / containerShape), but a web view has to
+     be told. MEASURED 2026-09-23 on Darwin 27 (the macOS after Tahoe), from Reveal's own window
+     (screencapture -o, circle fit on the corner's alpha edge): 17pt. That
+     is the titlebar-only radius. A window with an NSToolbar gets a larger
+     one; an app that has one should override this token, not the panes. */
+  --window-radius: 17px;
+  --window-inset: 8px;
+  --pane-radius: calc(var(--window-radius) - var(--window-inset));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/styles",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "author": "Francis Fontaine",
   "license": "MIT",
@@ -9,6 +9,7 @@
   "exports": {
     ".": "./index.js",
     "./standard.scss": "./standard.scss",
+    "./app.scss": "./app.scss",
     "./reset": "./_standard-00-reset.scss",
     "./variables": "./_standard-00-variables.scss",
     "./tokens": "./_standard-01-token.scss",