@brunosouzas/design-system 0.3.0 → 0.3.1

package/README.md

@@ -143,7 +143,8 @@ Thirteen pieces draw a metro map and its page diagrams, for [stackledger](https:
 - `surface: "light" | "dark"` picks the background they sit on (`surface.*` tokens); every map and diagram piece takes it except `pipe`; `ledgerMark` takes only `surface`. On dark the hard shadow takes `surface.dark.shadow` and the outline gets a light rim ([ADR 0003](docs/adr/0003-visual-language-and-colour-meaning.md), amendment of AB#157).
 - `inkScale` (0.25 to 8) thickens the outline, rim and shadow without changing the geometry, on `lineBadge`, `stationMarker`, `countBadge` and the three nodes; the map uses 1, the page diagrams 1.6. A shape's height (a marker's diameter) must be at least four outlines; a placeholder node, which draws no ink, is exempt.
 - A line's colour comes from the map's data, so `pipe.fill`, `lineBadge.fill` and `zone.fill` also accept `#RRGGBB`. Every other colour is a token path, and a cover spec rejects any hex.
-- The `map.*` tokens hold the measures (outline 3, shadow 3.5, line 12, casing 6, badge 20, node 46, ring 3, halo 1.5, licence 10, zone padding 32…), `surface.*.zoneOpacity` the zone's opacity (0.12, dark 0.22), and `site.*` the page palette, fonts and type scale of brunosouzas.com in light and dark.
+- `map.bendRadius` (32) is the radius of a bundle's centre line at a 45° or 90° bend; no piece reads it, the map engine draws the arcs (`pipe.d` takes `A`).
+- The `map.*` tokens hold the measures (outline 3, shadow 3.5, line 12, casing 6, badge 20, node 46, ring 3, halo 1.5, licence 10, zone padding 32, bend radius 32…), `surface.*.zoneOpacity` the zone's opacity (0.12, dark 0.22), and `site.*` the page palette, fonts and type scale of brunosouzas.com in light and dark.
 
 ```ts
 import { lineBadge, pipe, stationMarker, toSvg } from "@brunosouzas/design-system";
@@ -191,7 +192,7 @@ Add it to `src/pieces/library.ts` (or `src/pieces/metro.ts` for a map or diagram
 
 ### UI and link icons
 
-- `uiIcon({ name, x, y, size, colour })` draws one of seven glyphs of the sites' chrome in a 24-unit box and one token colour: `sun`, `moon`, `zoomIn`, `zoomOut`, `reset`, `calendar`, `download` (data in `UI_ICONS`).
+- `uiIcon({ name, x, y, size, colour })` draws one of seven glyphs of the sites' chrome in a 24-unit box and one token colour: `sun`, `moon`, `zoomIn`, `zoomOut`, `reset`, `calendar`, `download` (data in `UI_ICONS`). `colour: "currentColor"` makes the icon follow its element's text colour (a button that inverts on hover, say); it only works when the SVG is inline in the page, since an `<img>` does not inherit the page's colour, and a cover spec refuses it.
 - `linkIcon({ icon, x, y, size, surface })` draws a link sticker as brunosouzas.com draws its social icons (46-unit box, light or dark frame): `github`, `linkedin`, `email`, `website` (data in `LINK_ICONS`). The GitHub mark is from [Font Awesome](https://fontawesome.com/), licensed [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
 - Neither holds a link, a style, a script or a URL, so a consumer can write one with `toSvg` inside its own `<svg xmlns=…>` and ship it as a static file.
 

package/dist/src/pieces/cover.js

@@ -10,7 +10,7 @@
 import { tokens } from "../../tokens/generated/tokens.js";
 import { PIECE_NAMES, PIECES, rings } from "./library.js";
 import { el, g } from "./node.js";
-import { COLOUR_TOKENS, checkParams, isColourLiteral, MAX_SIZE, PATH_DATA } from "./params.js";
+import { COLOUR_TOKENS, CURRENT_COLOUR, checkParams, isColourLiteral, MAX_SIZE, PATH_DATA } from "./params.js";
 export const SAFE_ID = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 const TOP_LEVEL = ["id", "title", "description", "format", "background", "rings", "pieces", "custom"];
 /** Cover (800x420, the default) or banner (1200x420, rounded corners): spec cover-cli, "Banner output". */
@@ -191,6 +191,12 @@ export const validateCoverSpec = (spec) => {
                 return void out.push({ path: `${at}.piece`, message: "rings belong to the cover's rings field" });
             const definition = PIECES[piece];
             const own = checkParams(definition.schema, params, at);
+            // A cover is a standalone image: currentColor (accepted by uiIcon for inline page icons) is refused.
+            for (const [name, spec] of Object.entries(definition.schema)) {
+                if (spec.kind === "color" && spec.currentColor && params[name] === CURRENT_COLOUR) {
+                    own.push({ path: `${at}.${name}`, message: "currentColor is for icons inline in a page; a cover uses a token path" });
+                }
+            }
             out.push(...own);
             // Limits between parameters are reported with the schema's problems, except on a parameter
             // already reported; a relation that cannot read a broken parameter reports nothing.

package/dist/src/pieces/params.d.ts

@@ -5,9 +5,12 @@ export type ParamSpec = {
     exclusiveMin?: boolean;
     max?: number;
     integer?: boolean;
-} | {
+}
+/** A token path; with `currentColor`, also that exact keyword (uiIcon.colour only, card 170). */
+ | {
     kind: "color";
     required?: boolean;
+    currentColor?: boolean;
 }
 /** A token path, or a colour from the consumer's data (#RRGGBB): pipe and lineBadge fills only. */
  | {
@@ -72,6 +75,10 @@ export declare const size: (required?: boolean, min?: number) => ParamSpec;
 /** A position: any finite number, because a map position has no maximum. */
 export declare const pos: () => ParamSpec;
 export declare const col: () => ParamSpec;
+/** The paint keyword that follows the text colour of an inline SVG's element. */
+export declare const CURRENT_COLOUR = "currentColor";
+/** A token path or `currentColor`: for icons written inline in a page. */
+export declare const colOrCurrent: () => ParamSpec;
 /** SVG path data: commands, digits, signs, dots, commas and spaces only. */
 export declare const PATH_DATA: RegExp;
 export declare const label: (required?: boolean) => ParamSpec;

package/dist/src/pieces/params.js

@@ -55,6 +55,8 @@ const checkValue = (spec, value, path, out) => {
             return;
         }
         case "color":
+            if (spec.currentColor && value === CURRENT_COLOUR)
+                return;
             if (typeof value !== "string")
                 return report(`expected a colour token path, found ${describe(value)}`);
             if (isColourLiteral(value))
@@ -144,6 +146,10 @@ export const size = (required = false, min) => min === undefined ? { kind: "numb
 /** A position: any finite number, because a map position has no maximum. */
 export const pos = () => ({ kind: "number", required: true });
 export const col = () => ({ kind: "color" });
+/** The paint keyword that follows the text colour of an inline SVG's element. */
+export const CURRENT_COLOUR = "currentColor";
+/** A token path or `currentColor`: for icons written inline in a page. */
+export const colOrCurrent = () => ({ kind: "color", currentColor: true });
 /** SVG path data: commands, digits, signs, dots, commas and spaces only. */
 export const PATH_DATA = /^[MmLlHhVvCcSsQqTtAaZz0-9eE.,+\-\s]+$/;
 export const label = (required = true) => ({ kind: "string", nonEmpty: true, required });

package/dist/src/pieces/ui-icons.d.ts

@@ -16,5 +16,6 @@ export type UiIconParams = {
     size?: number;
     colour?: string;
 };
-/** One UI icon at (x, y), `size` wide (24 by default), in one token colour (`color.ink` by default). */
+/** One UI icon at (x, y), `size` wide (24 by default), in one token colour (`color.ink` by default)
+ * or `currentColor`, so an icon inline in a page follows its element's text colour. */
 export declare const uiIcon: import("./piece.ts").Piece<UiIconParams>;

package/dist/src/pieces/ui-icons.js

@@ -1,5 +1,5 @@
 import { el, g, drawn, r2 } from "./node.js";
-import { col, pos, size } from "./params.js";
+import { CURRENT_COLOUR, colOrCurrent, pos, size } from "./params.js";
 import { definePiece } from "./piece.js";
 import { colour } from "./params.js";
 /** Every UI icon draws in a 24x24 box. */
@@ -26,9 +26,10 @@ export const UI_ICONS = [
     { name: "download", title: "Download", description: "An arrow down into a tray.", nodes: [stroked("M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5M4.5 16.5v3h15v-3")] },
 ];
 export const UI_ICON_NAMES = UI_ICONS.map((icon) => icon.name);
-/** One UI icon at (x, y), `size` wide (24 by default), in one token colour (`color.ink` by default). */
-export const uiIcon = definePiece("uiIcon", { name: { kind: "enum", required: true, values: UI_ICON_NAMES }, x: pos(), y: pos(), size: size(), colour: col() }, ({ name, x, y, size: side = UI_ICON_SIZE, colour: path = "color.ink" }) => {
+/** One UI icon at (x, y), `size` wide (24 by default), in one token colour (`color.ink` by default)
+ * or `currentColor`, so an icon inline in a page follows its element's text colour. */
+export const uiIcon = definePiece("uiIcon", { name: { kind: "enum", required: true, values: UI_ICON_NAMES }, x: pos(), y: pos(), size: size(), colour: colOrCurrent() }, ({ name, x, y, size: side = UI_ICON_SIZE, colour: path = "color.ink" }) => {
     const icon = UI_ICONS.find((candidate) => candidate.name === name);
-    const paint = colour(path, "colour");
+    const paint = path === CURRENT_COLOUR ? CURRENT_COLOUR : colour(path, "colour");
     return drawn([g({ transform: `translate(${r2(x)} ${r2(y)}) scale(${side / UI_ICON_SIZE})`, fill: paint, stroke: paint }, ...icon.nodes)]);
 });

package/dist/tokens/generated/tokens.d.ts

@@ -132,6 +132,7 @@ export declare const tokens: {
     readonly map: {
         readonly badgeHeight: 20;
         readonly badgeTextSize: 12;
+        readonly bendRadius: 32;
         readonly casing: 6;
         readonly countHeight: 16;
         readonly countTextSize: 11;

package/dist/tokens/generated/tokens.js

@@ -133,6 +133,7 @@ export const tokens = {
     "map": {
         "badgeHeight": 20,
         "badgeTextSize": 12,
+        "bendRadius": 32,
         "casing": 6,
         "countHeight": 16,
         "countTextSize": 11,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Design tokens and illustration pieces of brunosouzas.com: tokens as CSS, JSON and TypeScript, pieces that draw SVG (and React), and a cover command.",
   "license": "Apache-2.0",
   "repository": {

package/tokens/generated/tokens.css

@@ -78,6 +78,7 @@
   --ds-illustration-transitional-shade: #E8B830;
   --ds-map-badge-height: 20px;
   --ds-map-badge-text-size: 12px;
+  --ds-map-bend-radius: 32px;
   --ds-map-casing: 6px;
   --ds-map-count-height: 16px;
   --ds-map-count-text-size: 11px;

package/tokens/generated/tokens.json

@@ -132,6 +132,7 @@
   "map": {
     "badgeHeight": 20,
     "badgeTextSize": 12,
+    "bendRadius": 32,
     "casing": 6,
     "countHeight": 16,
     "countTextSize": 11,

package/tokens/generated/tokens.ts

@@ -134,6 +134,7 @@ export const tokens = {
   "map": {
     "badgeHeight": 20,
     "badgeTextSize": 12,
+    "bendRadius": 32,
     "casing": 6,
     "countHeight": 16,
     "countTextSize": 11,