@brunosouzas/design-system 0.0.0-stage → 0.1.1

package/dist/src/pieces/render.js

@@ -0,0 +1,21 @@
+const escape = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const attributes = (node) => Object.entries(node.attrs)
+    .map(([name, value]) => ` ${name}="${escape(String(value))}"`)
+    .join("");
+export const toSvg = (node, depth = 0) => {
+    if (typeof node === "string")
+        return escape(node);
+    const pad = "  ".repeat(depth);
+    const open = `${pad}<${node.tag}${attributes(node)}`;
+    if (node.children.length === 0)
+        return `${open}/>`;
+    // Text content, alone or mixed with elements, is written inline: added whitespace would change it.
+    if (node.children.some((child) => typeof child === "string")) {
+        return `${open}>${node.children.map((child) => toSvg(child)).join("")}</${node.tag}>`;
+    }
+    if (node.children.every((child) => typeof child === "string")) {
+        return `${open}>${node.children.map((child) => toSvg(child)).join("")}</${node.tag}>`;
+    }
+    const inner = node.children.map((child) => (typeof child === "string" ? `${pad}  ${escape(child)}` : toSvg(child, depth + 1)));
+    return `${open}>\n${inner.join("\n")}\n${pad}</${node.tag}>`;
+};

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

@@ -0,0 +1,244 @@
+export declare const tokens: {
+    readonly color: {
+        readonly backend: "#FF6B6B";
+        readonly blocked: "#FF8A3D";
+        readonly caller: "#8FB2FF";
+        readonly failFast: "#E0661F";
+        readonly failure: "#E04848";
+        readonly healthy: "#3DDC84";
+        readonly ink: "#0A1033";
+        readonly panel: "#EEF2FF";
+        readonly ring: "#E0E7FB";
+        readonly transitional: "#FFD25A";
+        readonly white: "#FFFFFF";
+    };
+    readonly cover: {
+        readonly height: 420;
+        readonly labelSize: 19;
+        readonly labelWeight: 800;
+        readonly pillHeight: 36;
+        readonly ringRadius: 90;
+        readonly ringStep: 28;
+        readonly ringWidth: 2;
+        readonly width: 800;
+    };
+    readonly coverBackground: {
+        readonly blush: {
+            readonly fill: "#F6CFE0";
+            readonly ring: "#ECBAD0";
+        };
+        readonly cobalt: {
+            readonly fill: "#1E4FA0";
+            readonly ring: "#2758AE";
+        };
+        readonly cream: {
+            readonly fill: "#FFF1C9";
+            readonly ring: "#F4E2AE";
+        };
+        readonly deepTeal: {
+            readonly fill: "#0F6E6E";
+            readonly ring: "#167A79";
+        };
+        readonly emerald: {
+            readonly fill: "#2F9E6E";
+            readonly ring: "#38AB79";
+        };
+        readonly forest: {
+            readonly fill: "#24604F";
+            readonly ring: "#2B6E5B";
+        };
+        readonly lavender: {
+            readonly fill: "#B8A6F0";
+            readonly ring: "#AC98EA";
+        };
+        readonly lime: {
+            readonly fill: "#D4EC9C";
+            readonly ring: "#C4E086";
+        };
+        readonly mint: {
+            readonly fill: "#CDE5D3";
+            readonly ring: "#BCDAC4";
+        };
+        readonly mustard: {
+            readonly fill: "#F2C14E";
+            readonly ring: "#E6B33E";
+        };
+        readonly navy: {
+            readonly fill: "#14215A";
+            readonly ring: "#1C2D74";
+        };
+        readonly olive: {
+            readonly fill: "#8A9A3B";
+            readonly ring: "#7E8E33";
+        };
+        readonly peach: {
+            readonly fill: "#F4D8BC";
+            readonly ring: "#EAC7A3";
+        };
+        readonly plum: {
+            readonly fill: "#3D2B66";
+            readonly ring: "#483577";
+        };
+        readonly raspberry: {
+            readonly fill: "#C94F7C";
+            readonly ring: "#BE4572";
+        };
+        readonly salmon: {
+            readonly fill: "#FF9E7A";
+            readonly ring: "#F48D68";
+        };
+        readonly sky: {
+            readonly fill: "#BFE3F7";
+            readonly ring: "#AAD5EC";
+        };
+        readonly slate: {
+            readonly fill: "#2E3A59";
+            readonly ring: "#38466A";
+        };
+        readonly teal: {
+            readonly fill: "#1F8A8A";
+            readonly ring: "#2A9A99";
+        };
+        readonly violet: {
+            readonly fill: "#5B3CC4";
+            readonly ring: "#6748CF";
+        };
+        readonly wine: {
+            readonly fill: "#6B2340";
+            readonly ring: "#7A2D4C";
+        };
+    };
+    readonly font: {
+        readonly mono: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace";
+        readonly sans: "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+        readonly weightBold: 700;
+        readonly weightHeavy: 900;
+    };
+    readonly illustration: {
+        readonly accent: "#1E6FEB";
+        readonly codePanel: "#14215A";
+        readonly healthyShade: "#2BB673";
+        readonly iconLine: "#B9C3E0";
+        readonly road: "#5B6478";
+        readonly tape: "#FFE2C8";
+        readonly textBar: "#C9D6F5";
+        readonly transitionalShade: "#E8B830";
+    };
+    readonly map: {
+        readonly badgeHeight: 20;
+        readonly badgeTextSize: 12;
+        readonly casing: 6;
+        readonly countHeight: 16;
+        readonly countTextSize: 11;
+        readonly edgeWidth: 2.5;
+        readonly interchangeExtra: 2;
+        readonly labelSize: 13;
+        readonly lineWidth: 12;
+        readonly nodeHeight: 46;
+        readonly nodeRadius: 10;
+        readonly outline: 3;
+        readonly shadow: 3.5;
+        readonly stopRadius: 12;
+    };
+    readonly motion: {
+        readonly dimOpacity: 0.42;
+        readonly drawArrow: 20;
+        readonly fade: 10;
+        readonly focus: {
+            readonly damping: 200;
+            readonly mass: 1;
+            readonly stiffness: 120;
+        };
+        readonly focusScale: 1.06;
+        readonly fps: 30;
+        readonly pop: {
+            readonly damping: 13;
+            readonly mass: 0.7;
+            readonly stiffness: 140;
+        };
+        readonly readingHold: 90;
+        readonly travel: 22;
+    };
+    readonly outline: {
+        readonly arrow: 4;
+        readonly block: 4;
+        readonly small: 3;
+    };
+    readonly radius: {
+        readonly block: 18;
+        readonly pill: 22;
+        readonly small: 6;
+    };
+    readonly shadow: {
+        readonly block: 10;
+        readonly pill: 6;
+        readonly small: 4;
+    };
+    readonly site: {
+        readonly dark: {
+            readonly body: "#1C1C1C";
+            readonly border: "#3E3E3E";
+            readonly dark: "#FFFFFF";
+            readonly light: "#222222";
+            readonly primary: "#FFFFFF";
+            readonly text: "#B4AFB6";
+            readonly textDark: "#FFFFFF";
+            readonly textLight: "#B4AFB6";
+        };
+        readonly font: {
+            readonly primary: "Heebo, sans-serif";
+            readonly secondary: "Signika, sans-serif";
+        };
+        readonly fontSize: {
+            readonly base: 16;
+            readonly baseSmall: 12.8;
+        };
+        readonly heading: {
+            readonly h1: 2.985984;
+            readonly h1Small: 2.6873856;
+            readonly h2: 2.48832;
+            readonly h2Small: 2.239488;
+            readonly h3: 2.0736;
+            readonly h3Small: 1.86624;
+            readonly h4: 1.728;
+            readonly h4Small: 1.5552;
+            readonly h5: 1.44;
+            readonly h5Small: 1.296;
+            readonly h6: 1.2;
+            readonly h6Small: 1.08;
+        };
+        readonly light: {
+            readonly body: "#FFFFFF";
+            readonly border: "#EAEAEA";
+            readonly dark: "#040404";
+            readonly light: "#F6F6F6";
+            readonly primary: "#121212";
+            readonly text: "#444444";
+            readonly textDark: "#040404";
+            readonly textLight: "#717171";
+        };
+    };
+    readonly surface: {
+        readonly dark: {
+            readonly background: "#14215A";
+            readonly grid: "#1C2D74";
+            readonly muted: "#8F9BD0";
+            readonly panel: "#1C2D74";
+            readonly rim: "#EEF2FF";
+            readonly rimWidth: 1;
+            readonly shadow: "#4C5CB8";
+            readonly text: "#EEF2FF";
+        };
+        readonly light: {
+            readonly background: "#EEF2FF";
+            readonly grid: "#E0E7FB";
+            readonly muted: "#5B6694";
+            readonly panel: "#FFFFFF";
+            readonly rim: "#EEF2FF";
+            readonly rimWidth: 0;
+            readonly shadow: "#0A1033";
+            readonly text: "#0A1033";
+        };
+    };
+};
+export type Tokens = typeof tokens;

package/dist/tokens/generated/tokens.js

@@ -0,0 +1,244 @@
+// Generated from tokens/source.json by scripts/tokens.ts (npm run tokens). Do not edit by hand.
+export const tokens = {
+    "color": {
+        "backend": "#FF6B6B",
+        "blocked": "#FF8A3D",
+        "caller": "#8FB2FF",
+        "failFast": "#E0661F",
+        "failure": "#E04848",
+        "healthy": "#3DDC84",
+        "ink": "#0A1033",
+        "panel": "#EEF2FF",
+        "ring": "#E0E7FB",
+        "transitional": "#FFD25A",
+        "white": "#FFFFFF"
+    },
+    "cover": {
+        "height": 420,
+        "labelSize": 19,
+        "labelWeight": 800,
+        "pillHeight": 36,
+        "ringRadius": 90,
+        "ringStep": 28,
+        "ringWidth": 2,
+        "width": 800
+    },
+    "coverBackground": {
+        "blush": {
+            "fill": "#F6CFE0",
+            "ring": "#ECBAD0"
+        },
+        "cobalt": {
+            "fill": "#1E4FA0",
+            "ring": "#2758AE"
+        },
+        "cream": {
+            "fill": "#FFF1C9",
+            "ring": "#F4E2AE"
+        },
+        "deepTeal": {
+            "fill": "#0F6E6E",
+            "ring": "#167A79"
+        },
+        "emerald": {
+            "fill": "#2F9E6E",
+            "ring": "#38AB79"
+        },
+        "forest": {
+            "fill": "#24604F",
+            "ring": "#2B6E5B"
+        },
+        "lavender": {
+            "fill": "#B8A6F0",
+            "ring": "#AC98EA"
+        },
+        "lime": {
+            "fill": "#D4EC9C",
+            "ring": "#C4E086"
+        },
+        "mint": {
+            "fill": "#CDE5D3",
+            "ring": "#BCDAC4"
+        },
+        "mustard": {
+            "fill": "#F2C14E",
+            "ring": "#E6B33E"
+        },
+        "navy": {
+            "fill": "#14215A",
+            "ring": "#1C2D74"
+        },
+        "olive": {
+            "fill": "#8A9A3B",
+            "ring": "#7E8E33"
+        },
+        "peach": {
+            "fill": "#F4D8BC",
+            "ring": "#EAC7A3"
+        },
+        "plum": {
+            "fill": "#3D2B66",
+            "ring": "#483577"
+        },
+        "raspberry": {
+            "fill": "#C94F7C",
+            "ring": "#BE4572"
+        },
+        "salmon": {
+            "fill": "#FF9E7A",
+            "ring": "#F48D68"
+        },
+        "sky": {
+            "fill": "#BFE3F7",
+            "ring": "#AAD5EC"
+        },
+        "slate": {
+            "fill": "#2E3A59",
+            "ring": "#38466A"
+        },
+        "teal": {
+            "fill": "#1F8A8A",
+            "ring": "#2A9A99"
+        },
+        "violet": {
+            "fill": "#5B3CC4",
+            "ring": "#6748CF"
+        },
+        "wine": {
+            "fill": "#6B2340",
+            "ring": "#7A2D4C"
+        }
+    },
+    "font": {
+        "mono": "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+        "sans": "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+        "weightBold": 700,
+        "weightHeavy": 900
+    },
+    "illustration": {
+        "accent": "#1E6FEB",
+        "codePanel": "#14215A",
+        "healthyShade": "#2BB673",
+        "iconLine": "#B9C3E0",
+        "road": "#5B6478",
+        "tape": "#FFE2C8",
+        "textBar": "#C9D6F5",
+        "transitionalShade": "#E8B830"
+    },
+    "map": {
+        "badgeHeight": 20,
+        "badgeTextSize": 12,
+        "casing": 6,
+        "countHeight": 16,
+        "countTextSize": 11,
+        "edgeWidth": 2.5,
+        "interchangeExtra": 2,
+        "labelSize": 13,
+        "lineWidth": 12,
+        "nodeHeight": 46,
+        "nodeRadius": 10,
+        "outline": 3,
+        "shadow": 3.5,
+        "stopRadius": 12
+    },
+    "motion": {
+        "dimOpacity": 0.42,
+        "drawArrow": 20,
+        "fade": 10,
+        "focus": {
+            "damping": 200,
+            "mass": 1,
+            "stiffness": 120
+        },
+        "focusScale": 1.06,
+        "fps": 30,
+        "pop": {
+            "damping": 13,
+            "mass": 0.7,
+            "stiffness": 140
+        },
+        "readingHold": 90,
+        "travel": 22
+    },
+    "outline": {
+        "arrow": 4,
+        "block": 4,
+        "small": 3
+    },
+    "radius": {
+        "block": 18,
+        "pill": 22,
+        "small": 6
+    },
+    "shadow": {
+        "block": 10,
+        "pill": 6,
+        "small": 4
+    },
+    "site": {
+        "dark": {
+            "body": "#1C1C1C",
+            "border": "#3E3E3E",
+            "dark": "#FFFFFF",
+            "light": "#222222",
+            "primary": "#FFFFFF",
+            "text": "#B4AFB6",
+            "textDark": "#FFFFFF",
+            "textLight": "#B4AFB6"
+        },
+        "font": {
+            "primary": "Heebo, sans-serif",
+            "secondary": "Signika, sans-serif"
+        },
+        "fontSize": {
+            "base": 16,
+            "baseSmall": 12.8
+        },
+        "heading": {
+            "h1": 2.985984,
+            "h1Small": 2.6873856,
+            "h2": 2.48832,
+            "h2Small": 2.239488,
+            "h3": 2.0736,
+            "h3Small": 1.86624,
+            "h4": 1.728,
+            "h4Small": 1.5552,
+            "h5": 1.44,
+            "h5Small": 1.296,
+            "h6": 1.2,
+            "h6Small": 1.08
+        },
+        "light": {
+            "body": "#FFFFFF",
+            "border": "#EAEAEA",
+            "dark": "#040404",
+            "light": "#F6F6F6",
+            "primary": "#121212",
+            "text": "#444444",
+            "textDark": "#040404",
+            "textLight": "#717171"
+        }
+    },
+    "surface": {
+        "dark": {
+            "background": "#14215A",
+            "grid": "#1C2D74",
+            "muted": "#8F9BD0",
+            "panel": "#1C2D74",
+            "rim": "#EEF2FF",
+            "rimWidth": 1,
+            "shadow": "#4C5CB8",
+            "text": "#EEF2FF"
+        },
+        "light": {
+            "background": "#EEF2FF",
+            "grid": "#E0E7FB",
+            "muted": "#5B6694",
+            "panel": "#FFFFFF",
+            "rim": "#EEF2FF",
+            "rimWidth": 0,
+            "shadow": "#0A1033",
+            "text": "#0A1033"
+        }
+    }
+};

package/package.json

@@ -1,6 +1,80 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.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": {
+    "type": "git",
+    "url": "git+https://github.com/brunosouzas/brunosouzas-design-system.git"
+  },
+  "homepage": "https://github.com/brunosouzas/brunosouzas-design-system#readme",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/src/pieces/index.d.ts",
+      "import": "./dist/src/pieces/index.js"
+    },
+    "./react": {
+      "types": "./dist/src/pieces/react.d.ts",
+      "import": "./dist/src/pieces/react.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/generated/tokens.d.ts",
+      "import": "./dist/tokens/generated/tokens.js"
+    },
+    "./tokens.css": "./tokens/generated/tokens.css",
+    "./tokens.json": "./tokens/generated/tokens.json",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "brunosouzas-cover": "dist/scripts/cover.js"
+  },
+  "files": [
+    "dist/",
+    "tokens/generated/",
+    "!dist/**/*.test.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "tokens": "tsx scripts/tokens.ts",
+    "tokens:check": "tsx scripts/tokens.ts --check",
+    "stills": "tsx scripts/stills.ts",
+    "render": "tsx scripts/render.ts",
+    "cover": "tsx scripts/cover.ts",
+    "pieces:sheet": "tsx scripts/pieces-sheet.ts",
+    "studio": "remotion studio src/index.ts",
+    "test": "vitest run",
+    "typecheck": "tsc -p .",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "prepack": "npm run build"
+  },
+  "devDependencies": {
+    "@remotion/cli": "4.0.538",
+    "@remotion/google-fonts": "4.0.538",
+    "@remotion/paths": "4.0.538",
+    "@types/node": "22.20.5",
+    "@types/react": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "remotion": "4.0.538",
+    "tsx": "4.23.15",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}