@brunosouzas/design-system 0.3.2 → 0.5.0

package/dist/src/pieces/index.js

@@ -10,5 +10,6 @@ export { COLOUR_TOKENS, DATA_COLOUR, MAX_ITEMS, paint, MAX_SIZE, checkParams, co
 export { definePiece } from "./piece.js";
 export * from "./library.js";
 export { EIP_ICONS, EIP_ICON_NAMES, EIP_ICON_HEIGHT, EIP_ICON_WIDTH } from "./eip-icons.js";
-export { FORMATS, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, validateCoverSpec } from "./cover.js";
+export { FORMATS, LANGUAGE, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, diagramRings, validateCoverSpec } from "./cover.js";
 export { tokens } from "../../tokens/generated/tokens.js";
+export { EMOTE_KINDS, MASCOTS, MASCOT_ACTIONS, MASCOT_FACES } from "./cast.js";

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

@@ -1,3 +1,5 @@
+import { emote, mascot } from "./cast.ts";
+export { emote, mascot };
 export * from "./metro.ts";
 export * from "./diagram.ts";
 export * from "./ui-icons.ts";
@@ -325,6 +327,9 @@ export declare const PIECES: {
     readonly eipIcon: import("./piece.ts").Piece<EipIconParams>;
     readonly uiIcon: import("./piece.ts").Piece<import("./ui-icons.ts").UiIconParams>;
     readonly linkIcon: import("./piece.ts").Piece<import("./link-icons.ts").LinkIconParams>;
+    readonly stateStart: import("./piece.ts").Piece<import("./diagram.ts").StateStartParams>;
+    readonly mascot: import("./piece.ts").Piece<import("./cast.ts").MascotParams>;
+    readonly emote: import("./piece.ts").Piece<import("./cast.ts").EmoteParams>;
 };
 export type PieceName = keyof typeof PIECES;
 export declare const PIECE_NAMES: PieceName[];

package/dist/src/pieces/library.js

@@ -12,9 +12,11 @@ import { drawn, el, g, r2, shadowed } from "./node.js";
 import { col, colour, count, label, MAX_SIZE, PATH_DATA, pos, size } from "./params.js";
 import { definePiece } from "./piece.js";
 import { METRO_PIECES } from "./metro.js";
-import { DIAGRAM_PIECES } from "./diagram.js";
+import { DIAGRAM_PIECES, stateStart } from "./diagram.js";
 import { uiIcon } from "./ui-icons.js";
 import { linkIcon } from "./link-icons.js";
+import { emote, mascot } from "./cast.js";
+export { emote, mascot };
 export * from "./metro.js";
 export * from "./diagram.js";
 export * from "./ui-icons.js";
@@ -384,5 +386,8 @@ export const PIECES = {
     uiIcon,
     linkIcon,
     ...DIAGRAM_PIECES,
+    stateStart,
+    mascot,
+    emote,
 };
 export const PIECE_NAMES = Object.keys(PIECES);

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

@@ -4,6 +4,50 @@ export declare const tokens: {
         readonly radius: 20;
         readonly width: 1200;
     };
+    readonly bodyDiagram: {
+        readonly layoutWidth: 560;
+        readonly radius: 14;
+        readonly ringRadius: 70;
+        readonly startRadius: 11;
+        readonly width: 800;
+    };
+    readonly cast: {
+        readonly agent: {
+            readonly neck: "#E3E8F5";
+            readonly shine: "#E6ECFF";
+        };
+        readonly architect: {
+            readonly fill: "#22B5A4";
+            readonly shine: "#9CF0E4";
+        };
+        readonly data: {
+            readonly fill: "#8C6CF0";
+            readonly lens: "#EAF1FF";
+            readonly lid: "#C2B1FF";
+            readonly shine: "#B39CFF";
+        };
+        readonly dev: {
+            readonly chin: "#8FA6FF";
+            readonly fill: "#5B7CFA";
+            readonly screen: "#DCE6FF";
+        };
+        readonly devops: {
+            readonly fill: "#D76AA5";
+            readonly shine: "#F3B8D6";
+        };
+        readonly emotePop: {
+            readonly damping: 9;
+            readonly mass: 0.7;
+            readonly stiffness: 170;
+        };
+        readonly glow: "#7FD1FF";
+        readonly ground: "#D3DBF5";
+        readonly metal: "#C9D2E8";
+        readonly mouth: "#B94A3E";
+        readonly request: {
+            readonly shine: "#D6E2FF";
+        };
+    };
     readonly color: {
         readonly backend: "#FF6B6B";
         readonly blocked: "#FF8A3D";

package/dist/tokens/generated/tokens.js

@@ -5,6 +5,50 @@ export const tokens = {
         "radius": 20,
         "width": 1200
     },
+    "bodyDiagram": {
+        "layoutWidth": 560,
+        "radius": 14,
+        "ringRadius": 70,
+        "startRadius": 11,
+        "width": 800
+    },
+    "cast": {
+        "agent": {
+            "neck": "#E3E8F5",
+            "shine": "#E6ECFF"
+        },
+        "architect": {
+            "fill": "#22B5A4",
+            "shine": "#9CF0E4"
+        },
+        "data": {
+            "fill": "#8C6CF0",
+            "lens": "#EAF1FF",
+            "lid": "#C2B1FF",
+            "shine": "#B39CFF"
+        },
+        "dev": {
+            "chin": "#8FA6FF",
+            "fill": "#5B7CFA",
+            "screen": "#DCE6FF"
+        },
+        "devops": {
+            "fill": "#D76AA5",
+            "shine": "#F3B8D6"
+        },
+        "emotePop": {
+            "damping": 9,
+            "mass": 0.7,
+            "stiffness": 170
+        },
+        "glow": "#7FD1FF",
+        "ground": "#D3DBF5",
+        "metal": "#C9D2E8",
+        "mouth": "#B94A3E",
+        "request": {
+            "shine": "#D6E2FF"
+        }
+    },
     "color": {
         "backend": "#FF6B6B",
         "blocked": "#FF8A3D",

package/package.json

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

@@ -3,6 +3,32 @@
   --ds-banner-height: 420px;
   --ds-banner-radius: 20px;
   --ds-banner-width: 1200px;
+  --ds-body-diagram-layout-width: 560px;
+  --ds-body-diagram-radius: 14px;
+  --ds-body-diagram-ring-radius: 70px;
+  --ds-body-diagram-start-radius: 11px;
+  --ds-body-diagram-width: 800px;
+  --ds-cast-agent-neck: #E3E8F5;
+  --ds-cast-agent-shine: #E6ECFF;
+  --ds-cast-architect-fill: #22B5A4;
+  --ds-cast-architect-shine: #9CF0E4;
+  --ds-cast-data-fill: #8C6CF0;
+  --ds-cast-data-lens: #EAF1FF;
+  --ds-cast-data-lid: #C2B1FF;
+  --ds-cast-data-shine: #B39CFF;
+  --ds-cast-dev-chin: #8FA6FF;
+  --ds-cast-dev-fill: #5B7CFA;
+  --ds-cast-dev-screen: #DCE6FF;
+  --ds-cast-devops-fill: #D76AA5;
+  --ds-cast-devops-shine: #F3B8D6;
+  --ds-cast-emote-pop-damping: 9;
+  --ds-cast-emote-pop-mass: 0.7;
+  --ds-cast-emote-pop-stiffness: 170;
+  --ds-cast-glow: #7FD1FF;
+  --ds-cast-ground: #D3DBF5;
+  --ds-cast-metal: #C9D2E8;
+  --ds-cast-mouth: #B94A3E;
+  --ds-cast-request-shine: #D6E2FF;
   --ds-color-backend: #FF6B6B;
   --ds-color-blocked: #FF8A3D;
   --ds-color-caller: #8FB2FF;

package/tokens/generated/tokens.json

@@ -4,6 +4,50 @@
     "radius": 20,
     "width": 1200
   },
+  "bodyDiagram": {
+    "layoutWidth": 560,
+    "radius": 14,
+    "ringRadius": 70,
+    "startRadius": 11,
+    "width": 800
+  },
+  "cast": {
+    "agent": {
+      "neck": "#E3E8F5",
+      "shine": "#E6ECFF"
+    },
+    "architect": {
+      "fill": "#22B5A4",
+      "shine": "#9CF0E4"
+    },
+    "data": {
+      "fill": "#8C6CF0",
+      "lens": "#EAF1FF",
+      "lid": "#C2B1FF",
+      "shine": "#B39CFF"
+    },
+    "dev": {
+      "chin": "#8FA6FF",
+      "fill": "#5B7CFA",
+      "screen": "#DCE6FF"
+    },
+    "devops": {
+      "fill": "#D76AA5",
+      "shine": "#F3B8D6"
+    },
+    "emotePop": {
+      "damping": 9,
+      "mass": 0.7,
+      "stiffness": 170
+    },
+    "glow": "#7FD1FF",
+    "ground": "#D3DBF5",
+    "metal": "#C9D2E8",
+    "mouth": "#B94A3E",
+    "request": {
+      "shine": "#D6E2FF"
+    }
+  },
   "color": {
     "backend": "#FF6B6B",
     "blocked": "#FF8A3D",

package/tokens/generated/tokens.ts

@@ -6,6 +6,50 @@ export const tokens = {
     "radius": 20,
     "width": 1200
   },
+  "bodyDiagram": {
+    "layoutWidth": 560,
+    "radius": 14,
+    "ringRadius": 70,
+    "startRadius": 11,
+    "width": 800
+  },
+  "cast": {
+    "agent": {
+      "neck": "#E3E8F5",
+      "shine": "#E6ECFF"
+    },
+    "architect": {
+      "fill": "#22B5A4",
+      "shine": "#9CF0E4"
+    },
+    "data": {
+      "fill": "#8C6CF0",
+      "lens": "#EAF1FF",
+      "lid": "#C2B1FF",
+      "shine": "#B39CFF"
+    },
+    "dev": {
+      "chin": "#8FA6FF",
+      "fill": "#5B7CFA",
+      "screen": "#DCE6FF"
+    },
+    "devops": {
+      "fill": "#D76AA5",
+      "shine": "#F3B8D6"
+    },
+    "emotePop": {
+      "damping": 9,
+      "mass": 0.7,
+      "stiffness": 170
+    },
+    "glow": "#7FD1FF",
+    "ground": "#D3DBF5",
+    "metal": "#C9D2E8",
+    "mouth": "#B94A3E",
+    "request": {
+      "shine": "#D6E2FF"
+    }
+  },
   "color": {
     "backend": "#FF6B6B",
     "blocked": "#FF8A3D",