@brunosouzas/design-system 0.5.2 → 0.5.3

package/README.md

@@ -146,7 +146,7 @@ Thirteen pieces draw a metro map and its page diagrams, for [stackledger](https:
 - `countBadge` takes `textSize` (6 to 48, default 11): without `height`, the height, width and baseline grow with it.
 - 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.
 - `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.
+- 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), `surface.*.backdropWater`, `backdropWaterEdge`, `backdropPark` and `backdropCredit` the colours of a city backdrop behind a map and its OpenStreetMap credit (no piece draws it; stackledger does), 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";

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

@@ -15,6 +15,10 @@ export declare const limits: (...checks: (Problem | false)[]) => Problem[];
 /** The surface's colours and the ink measures at a scale. */
 export declare const inkOf: ({ surface, inkScale }: Ink) => {
     s: {
+        readonly backdropCredit: "#9AA6D6";
+        readonly backdropPark: "#183F52";
+        readonly backdropWater: "#1E3175";
+        readonly backdropWaterEdge: "#2A3F8A";
         readonly background: "#14215A";
         readonly grid: "#1C2D74";
         readonly muted: "#8F9BD0";
@@ -25,6 +29,10 @@ export declare const inkOf: ({ surface, inkScale }: Ink) => {
         readonly text: "#EEF2FF";
         readonly zoneOpacity: 0.22;
     } | {
+        readonly backdropCredit: "#5A6385";
+        readonly backdropPark: "#D4F2DF";
+        readonly backdropWater: "#C9D8FF";
+        readonly backdropWaterEdge: "#B5C7F5";
         readonly background: "#EEF2FF";
         readonly grid: "#E0E7FB";
         readonly muted: "#5B6694";

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

@@ -275,6 +275,10 @@ export declare const tokens: {
     };
     readonly surface: {
         readonly dark: {
+            readonly backdropCredit: "#9AA6D6";
+            readonly backdropPark: "#183F52";
+            readonly backdropWater: "#1E3175";
+            readonly backdropWaterEdge: "#2A3F8A";
             readonly background: "#14215A";
             readonly grid: "#1C2D74";
             readonly muted: "#8F9BD0";
@@ -286,6 +290,10 @@ export declare const tokens: {
             readonly zoneOpacity: 0.22;
         };
         readonly light: {
+            readonly backdropCredit: "#5A6385";
+            readonly backdropPark: "#D4F2DF";
+            readonly backdropWater: "#C9D8FF";
+            readonly backdropWaterEdge: "#B5C7F5";
             readonly background: "#EEF2FF";
             readonly grid: "#E0E7FB";
             readonly muted: "#5B6694";

package/dist/tokens/generated/tokens.js

@@ -276,6 +276,10 @@ export const tokens = {
     },
     "surface": {
         "dark": {
+            "backdropCredit": "#9AA6D6",
+            "backdropPark": "#183F52",
+            "backdropWater": "#1E3175",
+            "backdropWaterEdge": "#2A3F8A",
             "background": "#14215A",
             "grid": "#1C2D74",
             "muted": "#8F9BD0",
@@ -287,6 +291,10 @@ export const tokens = {
             "zoneOpacity": 0.22
         },
         "light": {
+            "backdropCredit": "#5A6385",
+            "backdropPark": "#D4F2DF",
+            "backdropWater": "#C9D8FF",
+            "backdropWaterEdge": "#B5C7F5",
             "background": "#EEF2FF",
             "grid": "#E0E7FB",
             "muted": "#5B6694",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "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

@@ -176,6 +176,10 @@
   --ds-site-light-text: #444444;
   --ds-site-light-text-dark: #040404;
   --ds-site-light-text-light: #717171;
+  --ds-surface-dark-backdrop-credit: #9AA6D6;
+  --ds-surface-dark-backdrop-park: #183F52;
+  --ds-surface-dark-backdrop-water: #1E3175;
+  --ds-surface-dark-backdrop-water-edge: #2A3F8A;
   --ds-surface-dark-background: #14215A;
   --ds-surface-dark-grid: #1C2D74;
   --ds-surface-dark-muted: #8F9BD0;
@@ -185,6 +189,10 @@
   --ds-surface-dark-shadow: #4C5CB8;
   --ds-surface-dark-text: #EEF2FF;
   --ds-surface-dark-zone-opacity: 0.22;
+  --ds-surface-light-backdrop-credit: #5A6385;
+  --ds-surface-light-backdrop-park: #D4F2DF;
+  --ds-surface-light-backdrop-water: #C9D8FF;
+  --ds-surface-light-backdrop-water-edge: #B5C7F5;
   --ds-surface-light-background: #EEF2FF;
   --ds-surface-light-grid: #E0E7FB;
   --ds-surface-light-muted: #5B6694;

package/tokens/generated/tokens.json

@@ -275,6 +275,10 @@
   },
   "surface": {
     "dark": {
+      "backdropCredit": "#9AA6D6",
+      "backdropPark": "#183F52",
+      "backdropWater": "#1E3175",
+      "backdropWaterEdge": "#2A3F8A",
       "background": "#14215A",
       "grid": "#1C2D74",
       "muted": "#8F9BD0",
@@ -286,6 +290,10 @@
       "zoneOpacity": 0.22
     },
     "light": {
+      "backdropCredit": "#5A6385",
+      "backdropPark": "#D4F2DF",
+      "backdropWater": "#C9D8FF",
+      "backdropWaterEdge": "#B5C7F5",
       "background": "#EEF2FF",
       "grid": "#E0E7FB",
       "muted": "#5B6694",

package/tokens/generated/tokens.ts

@@ -277,6 +277,10 @@ export const tokens = {
   },
   "surface": {
     "dark": {
+      "backdropCredit": "#9AA6D6",
+      "backdropPark": "#183F52",
+      "backdropWater": "#1E3175",
+      "backdropWaterEdge": "#2A3F8A",
       "background": "#14215A",
       "grid": "#1C2D74",
       "muted": "#8F9BD0",
@@ -288,6 +292,10 @@ export const tokens = {
       "zoneOpacity": 0.22
     },
     "light": {
+      "backdropCredit": "#5A6385",
+      "backdropPark": "#D4F2DF",
+      "backdropWater": "#C9D8FF",
+      "backdropWaterEdge": "#B5C7F5",
       "background": "#EEF2FF",
       "grid": "#E0E7FB",
       "muted": "#5B6694",