@nadicodeai/design-system 12.1.181 → 12.1.182

package/DESIGN.md

@@ -1215,7 +1215,7 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
 3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. Where the platform crops the picture itself, a profile picture cut to a circle or a square and a phone's home screen, the tile has square corners and the platform draws its shape: the avatar is the brand tile, or the light or dark tile where a profile wants white or black, with the n across 46% of the side, so a circle cut keeps it whole with its clear space. The mark is never a profile picture: it has no field, and its n runs to the edges a crop cuts. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, an app's own dark screen.
 4. **Signature form.** The light tile with its construction guides in `{colors.logo-guide}`: a dotted circle around the arch whose radius is the golden section of the n's width, the two centre axes, and the n's width and height, each measured 1.000. It is drawn from 128 px up, on light grounds: Nadia's desktop icon, a cover or closing slide, a poster, print; on a dark ground the dark tile stands in for it. Below 128 px a guide is a fraction of a pixel, so the icon drops them; drawn on a screen as a logo, such as at the top of an entry scene, it drops them at any size.
 
-Alveare's mark is its own, chosen by the founder: six flat honeycomb cells, pointed at the top, stacked one, two and three into a pyramid, in the identity colours row by row from the top: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six cells of one comb are the hive. It sits on the dark tile everywhere, the app icon included, since Alveare opens onto black, and on a black screen it stands alone without its tile. Alveare Server's mark is a server rack of six bands, each with its light, in the same colours in the same order from the top, drawn a tenth smaller than the cells so the solid rack weighs what the open cells do beside it. Both are drawn in `apps/alveare/brand/icons/`.
+Alveare's mark is its own, chosen by the founder: six flat honeycomb cells, pointed at the top, stacked one, two and three into a pyramid, in the identity colours row by row from the top: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six cells of one comb are the hive. It sits on the dark tile everywhere, the app icon included, since Alveare opens onto black, and on a black screen it stands alone without its tile. Alveare Server's mark is a server rack of six bands, each with its light, in the same colours in the same order from the top, drawn a tenth smaller than the cells so the solid rack weighs what the open cells do beside it. Both are drawn from one geometry source, `@nadicodeai/design-system/assets/alveare-geometry`: Alveare's app icons and marks and `PlatformMark` render it, and nothing copies its paths.
 
 The mark and the wordmark never stand side by side: the wordmark already begins with the n, so together they read "n nadicode". Each place takes one of them.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.181",
+  "version": "12.1.182",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -206,6 +206,11 @@
       "import": "./src/assets/logo-geometry.js",
       "default": "./src/assets/logo-geometry.js"
     },
+    "./assets/alveare-geometry": {
+      "types": "./src/assets/alveare-geometry.d.ts",
+      "import": "./src/assets/alveare-geometry.js",
+      "default": "./src/assets/alveare-geometry.js"
+    },
     "./assets/house-icons": {
       "types": "./src/assets/house-icons.d.ts",
       "import": "./src/assets/house-icons.js",
@@ -223,6 +228,7 @@
     "LICENSES",
     "src/assets/*.d.ts",
     "src/assets/logo-geometry.js",
+    "src/assets/alveare-geometry.js",
     "src/assets/house-icons.js",
     "src/assets/empty",
     "src/tokens",

package/src/assets/alveare-geometry.d.ts

@@ -0,0 +1,22 @@
+export type AlveareToken =
+  | "dark-logo-dot"
+  | "identity-arancio"
+  | "identity-verde"
+  | "identity-rosso"
+  | "identity-giallo"
+  | "identity-azzurro";
+
+export type AlveareGeometry = Readonly<{
+  viewBox: string;
+  nodes: readonly Readonly<{
+    element: "path";
+    attributes: Readonly<Record<string, string>>;
+  }>[];
+}>;
+
+/** The colour a consumer paints the shape that takes `token` with. */
+export type AlvearePaint = (token: AlveareToken) => string;
+
+export declare const ALVEARE_DRAWING: number;
+export declare function alveareMarkGeometry(paint: AlvearePaint): AlveareGeometry;
+export declare function alveareServerMarkGeometry(paint: AlvearePaint): AlveareGeometry;

package/src/assets/alveare-geometry.js

@@ -0,0 +1,127 @@
+/**
+ * Framework-neutral SVG geometry for Alveare's and Alveare Server's marks.
+ *
+ * This module is the only drawing of either mark. Alveare's app icons, the marks
+ * its scenes and the website show, and the shared PlatformMark render these
+ * descriptors instead of copying paths.
+ *
+ * Both marks are drawn in one square of ALVEARE_DRAWING units, centred in it,
+ * so an icon places them alike; each view box crops to its own shapes. A
+ * consumer paints each shape by the design token it takes, which `paint`
+ * turns into a colour: a CSS variable in a page, a hex value in a file. The
+ * six tokens run from the top in the same order on both marks.
+ *
+ * Alveare's mark is six pointy-top cells of one comb, stacked one, two and
+ * three: on a grid of radius 31, each cell is 5 units from its neighbours.
+ * Alveare Server's is a rack 160 units square of six bands 6 apart, its outer
+ * corners of radius 18, each band with a light of radius 4.4 cut out 50 units
+ * right of centre; it is drawn at nine tenths, so the solid rack weighs what
+ * the open cells do beside it.
+ */
+
+const freeze = (geometry) => {
+  geometry.nodes.forEach((node) => {
+    Object.freeze(node.attributes);
+    Object.freeze(node);
+  });
+  Object.freeze(geometry.nodes);
+  return Object.freeze(geometry);
+};
+
+const round2 = (value) => Number(value.toFixed(2)).toString();
+
+export const ALVEARE_DRAWING = 200;
+const CENTRE = ALVEARE_DRAWING / 2;
+
+const TOKENS = [
+  "dark-logo-dot",
+  "identity-arancio",
+  "identity-verde",
+  "identity-rosso",
+  "identity-giallo",
+  "identity-azzurro",
+];
+
+const viewBox = (left, top, right, bottom) =>
+  [left, top, right - left, bottom - top].map(round2).join(" ");
+
+const GRID = 31;
+const CELL_GAP = 5;
+const CELL_RADIUS = GRID - CELL_GAP / Math.sqrt(3);
+/** Each cell's place on the grid, in cells across and rows down from the centre. */
+const CELLS = [
+  [0, -1],
+  [-0.5, 0],
+  [0.5, 0],
+  [-1, 1],
+  [0, 1],
+  [1, 1],
+];
+
+const cellCorners = ([across, down]) => {
+  const x = CENTRE + across * Math.sqrt(3) * GRID;
+  const y = CENTRE + down * 1.5 * GRID;
+  return Array.from({ length: 6 }, (_, corner) => {
+    const angle = ((-90 + 60 * corner) * Math.PI) / 180;
+    return [
+      Number(round2(x + CELL_RADIUS * Math.cos(angle))),
+      Number(round2(y + CELL_RADIUS * Math.sin(angle))),
+    ];
+  });
+};
+
+/** Alveare's mark: the six cells, painted from the top. */
+export const alveareMarkGeometry = (paint) => {
+  const cells = CELLS.map(cellCorners);
+  const xs = cells.flat().map(([x]) => x);
+  const ys = cells.flat().map(([, y]) => y);
+  return freeze({
+    viewBox: viewBox(Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)),
+    nodes: cells.map((corners, index) => ({
+      element: "path",
+      attributes: {
+        fill: paint(TOKENS[index]),
+        d: `M${corners.map(([x, y]) => `${x} ${y}`).join("L")}Z`,
+      },
+    })),
+  });
+};
+
+const RACK_BALANCE = 0.9;
+const RACK_SIDE = 160;
+const BAND_GAP = 6;
+const CORNER = 18;
+const LIGHT = 4.4;
+const LIGHT_RIGHT = 50;
+
+/** Alveare Server's mark: the rack's six bands, painted from the top, each with its light. */
+export const alveareServerMarkGeometry = (paint) => {
+  const at = (unit) => Number(round2(CENTRE + RACK_BALANCE * (unit - CENTRE)));
+  const size = (unit) => round2(RACK_BALANCE * unit);
+  const left = CENTRE - RACK_SIDE / 2;
+  const right = CENTRE + RACK_SIDE / 2;
+  const band = (RACK_SIDE - 5 * BAND_GAP) / 6;
+  const r = size(CORNER);
+  const corner = `A${r} ${r} 0 0 1`;
+  const light = size(LIGHT);
+  const lightX = CENTRE + LIGHT_RIGHT;
+  return freeze({
+    viewBox: viewBox(at(left), at(left), at(right), at(right)),
+    nodes: TOKENS.map((token, index) => {
+      const top = left + index * (band + BAND_GAP);
+      const bottom = top + band;
+      const middle = at(top + band / 2);
+      let body = `M${at(left)} ${at(top)}H${at(right)}V${at(bottom)}H${at(left)}Z`;
+      if (index === 0) {
+        body = `M${at(left)} ${at(bottom)}V${at(top + CORNER)}${corner} ${at(left + CORNER)} ${at(top)}H${at(right - CORNER)}${corner} ${at(right)} ${at(top + CORNER)}V${at(bottom)}Z`;
+      } else if (index === TOKENS.length - 1) {
+        body = `M${at(left)} ${at(top)}H${at(right)}V${at(bottom - CORNER)}${corner} ${at(right - CORNER)} ${at(bottom)}H${at(left + CORNER)}${corner} ${at(left)} ${at(bottom - CORNER)}Z`;
+      }
+      const hole = `M${at(lightX + LIGHT)} ${middle}A${light} ${light} 0 1 0 ${at(lightX - LIGHT)} ${middle}A${light} ${light} 0 1 0 ${at(lightX + LIGHT)} ${middle}Z`;
+      return {
+        element: "path",
+        attributes: { fill: paint(token), "fill-rule": "evenodd", d: `${body} ${hole}` },
+      };
+    }),
+  });
+};