@crewlethq/tokens 0.6.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -230,7 +230,7 @@ No token is renamed; two values moved to the approved design.
230
230
 
231
231
  `@crewlethq/tokens/css/base` is the opt-in document baseline: the box-sizing reset, the document's own type and colour (the body on the frame, the lowest of the [four rungs](#surfaces), in Geist at [13px on the 1.45 leading](#type)), headings, controls that inherit the font, `code` and `kbd` in mono with tabular figures, one `:focus-visible` ring, `::selection`, themed scrollbars and the global reduced-motion collapse. Every value comes from a token, so it follows the palette and the density without a rule of its own.
232
232
 
233
- The focus indicator is an **outline**, never a box-shadow alone. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow disappears for exactly the readers who most need one. `--shadow-focus` is still there for a component that wants a shadow as well, paired with a transparent outline so forced colors substitutes a system colour for it. `--size-focus-ring-inset-offset` is the offset for a focusable row inside a clipping scroller, where an outset ring is clipped by the scroller and painted over by the next row.
233
+ The focus indicator is an **outline**, never a box-shadow alone. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow disappears for exactly the readers who most need one. `--shadow-focus` is still there for a component that wants a shadow as well, paired with a transparent outline so forced colors substitutes a system colour for it. `--size-focus-ring-inset-offset` is the offset for a ring drawn inside its own box: on a focusable row inside a clipping scroller, where an outset ring is clipped by the scroller and painted over by the next row, and on any control that draws a visible boundary of its own, where a ring standing off the border is two edges with a gap between them. At -2px the ring covers a 1px border, so a focused control shows one edge.
234
234
 
235
235
  The body's height and overflow are deliberately not here. A page that can scroll as a whole moves an application's rail off the top of the window, so the rule that stops it belongs to the shell that owns the rail.
236
236
 
@@ -168,7 +168,7 @@
168
168
  --size-measure: 68ch; /** Prose and forms get a measure. Tables and charts deliberately do not: they are the one content that genuinely wants the whole viewport. */
169
169
  --size-measure-narrow: 48ch;
170
170
  --size-content-max: 1600px;
171
- --size-focus-ring-inset-offset: -2px; /** The outline offset for a focusable row INSIDE a clipping scroller: a tree row, a grid row, a card header. An outset ring there is clipped by the scroller on the first and last rows and painted over by the next row, so the indicator has to be drawn inside the row's own box. */
171
+ --size-focus-ring-inset-offset: -2px; /** The outline offset for a ring drawn INSIDE its own box. Two kinds of focusable take it. A row inside a clipping scroller (a tree row, a grid row, a card header), because an outset ring there is clipped by the scroller on the first and last rows and painted over by the next row. And any control that draws a visible boundary of its own (a field, a bordered button, a chip, a card, a panel), because a ring standing off a drawn border is two edges with a gap between them, which reads as a second outline rather than as focus: at -2px the 2px ring covers a 1px border and one pixel inside it, so focus is one edge. */
172
172
  --spacing-0: 0px; /** A 4px base. Every step but this one is emitted as calc(Npx * var(--density, 1)), so a density setting reaches every gap and pad in a product and every value is unchanged at density 1. Zero is left alone: scaling it would spend a calc() on a number that cannot change. */
173
173
  --spacing-1: calc(4px * var(--density, 1));
174
174
  --spacing-2: calc(8px * var(--density, 1));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crewlethq/tokens",
3
- "version": "0.6.3",
3
+ "version": "0.8.0",
4
4
  "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
5
5
  "license": "MIT AND OFL-1.1",
6
6
  "repository": {