@skipleague/design 0.4.9 → 0.5.0

package/dist/AppLogo.d.ts

@@ -1,5 +1,5 @@
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
-export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "flow";
+export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "guide" | "flow";
 /**
  * The per-app logo mark — a brand-green rounded tile holding a white monoline
  * glyph. Replaces the single-letter {@link AppBadge}; gives each SkipLeague app a

package/dist/AppLogo.js

@@ -1,27 +1,35 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Exact 24×24 glyph paths (design_handoff_top_bar). `color` only matters for the
-// racquetball ball, which is filled rather than stroked.
+// Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
+// fixed racquetball, trips, and flow and added the guide mark). `color` only
+// matters for filled sub-shapes (e.g. the racquetball ball), which are filled
+// rather than stroked.
 function glyphPaths(app, color) {
     switch (app) {
         case "lists":
+            // Checklist ticks.
             return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3.5 7l1.8 1.8L8.5 5.6" }), _jsx("path", { d: "M12.5 7H20.5" }), _jsx("path", { d: "M3.5 16l1.8 1.8L8.5 14.6" }), _jsx("path", { d: "M12.5 16.5H20.5" })] }));
         case "racquetball":
-            return (_jsxs(_Fragment, { children: [_jsx("ellipse", { cx: "10", cy: "9", rx: "5.4", ry: "6.6", transform: "rotate(-34 10 9)" }), _jsx("path", { d: "M6.6 14.2L3.4 19.4" }), _jsx("circle", { cx: "18", cy: "17.4", r: "2.3", fill: color, stroke: "none" })] }));
+            // Racquet (teardrop head + handle rotated 40°) with a filled ball.
+            return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: "rotate(40 10 9)", children: [_jsx("path", { d: "M10 3C13.2 3 14.8 5.6 14.8 8.4C14.8 11.4 12.6 13.6 10 15.6C7.4 13.6 5.2 11.4 5.2 8.4C5.2 5.6 6.8 3 10 3Z" }), _jsx("path", { d: "M10 15.6L10 21" })] }), _jsx("circle", { cx: "17.8", cy: "17", r: "2.3", fill: color, stroke: "none" })] }));
         case "trips":
-            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 21.5s6.6-5.8 6.6-10.5a6.6 6.6 0 1 0-13.2 0c0 4.7 6.6 10.5 6.6 10.5z" }), _jsx("circle", { cx: "12", cy: "10.8", r: "2.4" })] }));
+            // Hard-shell suitcase: top handle and two clasps on the body.
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3.5", y: "8", width: "17", height: "11.5", rx: "2.2" }), _jsx("path", { d: "M8.5 8V6.2a1.6 1.6 0 0 1 1.6-1.6h3.8a1.6 1.6 0 0 1 1.6 1.6V8" }), _jsx("path", { d: "M9.5 12.4h1.8" }), _jsx("path", { d: "M12.7 12.4h1.8" })] }));
         case "gifts":
-            // Gift box: lid band, body, vertical ribbon, and a two-loop bow.
-            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3.5", y: "8", width: "17", height: "4.5", rx: "1" }), _jsx("path", { d: "M5 12.5V20h14v-7.5" }), _jsx("path", { d: "M12 8v12" }), _jsx("path", { d: "M12 8C11 5.5 9.5 4.2 8.2 4.9 6.9 5.6 8 8 12 8Z" }), _jsx("path", { d: "M12 8c1-2.5 2.5-3.8 3.8-3.1C17.1 5.6 16 8 12 8Z" })] }));
+            // Gift box: body, lid band, vertical ribbon, and a two-loop bow.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 11h16v8.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z" }), _jsx("path", { d: "M3 7.5h18v3.5H3z" }), _jsx("path", { d: "M12 7.5v13" }), _jsx("path", { d: "M12 7.5C11 5.2 7.6 4.6 7.6 6.5C7.6 7.7 9.7 8 12 7.5z" }), _jsx("path", { d: "M12 7.5C13 5.2 16.4 4.6 16.4 6.5C16.4 7.7 14.3 8 12 7.5z" })] }));
         case "reading":
             // Open book: two pages meeting at a center spine.
-            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 6.5C9.8 5.1 6.4 4.6 4 5.3v12.6c2.4-.7 5.8-.2 8 1.2 2.2-1.4 5.6-1.9 8-1.2V5.3C17.6 4.6 14.2 5.1 12 6.5Z" }), _jsx("path", { d: "M12 6.5V19.3" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 6.6C9.8 5.1 6.4 4.8 4 5.4v12.8c2.4-.6 5.8-.3 8 1.2 2.2-1.5 5.6-1.8 8-1.2V5.4c-2.4-.6-5.8-.3-8 1.2z" }), _jsx("path", { d: "M12 6.6v12.8" })] }));
         case "today":
             // Sun = "today" / the day.
-            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3.8" }), _jsx("path", { d: "M12 2.6V5" }), _jsx("path", { d: "M12 19V21.4" }), _jsx("path", { d: "M2.6 12H5" }), _jsx("path", { d: "M19 12H21.4" }), _jsx("path", { d: "M5.2 5.2 6.9 6.9" }), _jsx("path", { d: "M17.1 17.1 18.8 18.8" }), _jsx("path", { d: "M18.8 5.2 17.1 6.9" }), _jsx("path", { d: "M6.9 17.1 5.2 18.8" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2.4v2.2" }), _jsx("path", { d: "M12 19.4v2.2" }), _jsx("path", { d: "M4.6 4.6l1.6 1.6" }), _jsx("path", { d: "M17.8 17.8l1.6 1.6" }), _jsx("path", { d: "M2.4 12h2.2" }), _jsx("path", { d: "M19.4 12h2.2" }), _jsx("path", { d: "M6.2 17.8l-1.6 1.6" }), _jsx("path", { d: "M17.8 6.2l1.6-1.6" })] }));
+        case "guide":
+            // Folded map.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M9 4L3 6.4v13.6L9 17.6l6 2.4 6-2.4V6L15 8.4z" }), _jsx("path", { d: "M9 4v13.6" }), _jsx("path", { d: "M15 8.4V20" })] }));
         case "flow":
-            // Two workflow nodes joined by an elbow connector — orchestration
+            // Two rounded cards linked by an elbow connector — orchestration
             // ("when X happens, do Y").
-            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }), _jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" }), _jsx("path", { d: "M7 11v3.5a2 2 0 0 0 2 2h3.5" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3.5", y: "4.5", width: "7", height: "6", rx: "1.6" }), _jsx("rect", { x: "13.5", y: "13", width: "7", height: "6", rx: "1.6" }), _jsx("path", { d: "M10.5 7.5h2.5a2 2 0 0 1 2 2v3.5" })] }));
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
   "type": "module",
   "repository": {

package/src/AppLogo.tsx

@@ -1,13 +1,24 @@
 import type { CSSProperties, ReactNode } from "react";
 
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
-export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "flow";
+export type AppGlyph =
+  | "lists"
+  | "racquetball"
+  | "trips"
+  | "gifts"
+  | "reading"
+  | "today"
+  | "guide"
+  | "flow";
 
-// Exact 24×24 glyph paths (design_handoff_top_bar). `color` only matters for the
-// racquetball ball, which is filled rather than stroked.
+// Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
+// fixed racquetball, trips, and flow and added the guide mark). `color` only
+// matters for filled sub-shapes (e.g. the racquetball ball), which are filled
+// rather than stroked.
 function glyphPaths(app: AppGlyph, color: string): ReactNode {
   switch (app) {
     case "lists":
+      // Checklist ticks.
       return (
         <>
           <path d="M3.5 7l1.8 1.8L8.5 5.6" />
@@ -17,62 +28,77 @@ function glyphPaths(app: AppGlyph, color: string): ReactNode {
         </>
       );
     case "racquetball":
+      // Racquet (teardrop head + handle rotated 40°) with a filled ball.
       return (
         <>
-          <ellipse cx="10" cy="9" rx="5.4" ry="6.6" transform="rotate(-34 10 9)" />
-          <path d="M6.6 14.2L3.4 19.4" />
-          <circle cx="18" cy="17.4" r="2.3" fill={color} stroke="none" />
+          <g transform="rotate(40 10 9)">
+            <path d="M10 3C13.2 3 14.8 5.6 14.8 8.4C14.8 11.4 12.6 13.6 10 15.6C7.4 13.6 5.2 11.4 5.2 8.4C5.2 5.6 6.8 3 10 3Z" />
+            <path d="M10 15.6L10 21" />
+          </g>
+          <circle cx="17.8" cy="17" r="2.3" fill={color} stroke="none" />
         </>
       );
     case "trips":
+      // Hard-shell suitcase: top handle and two clasps on the body.
       return (
         <>
-          <path d="M12 21.5s6.6-5.8 6.6-10.5a6.6 6.6 0 1 0-13.2 0c0 4.7 6.6 10.5 6.6 10.5z" />
-          <circle cx="12" cy="10.8" r="2.4" />
+          <rect x="3.5" y="8" width="17" height="11.5" rx="2.2" />
+          <path d="M8.5 8V6.2a1.6 1.6 0 0 1 1.6-1.6h3.8a1.6 1.6 0 0 1 1.6 1.6V8" />
+          <path d="M9.5 12.4h1.8" />
+          <path d="M12.7 12.4h1.8" />
         </>
       );
     case "gifts":
-      // Gift box: lid band, body, vertical ribbon, and a two-loop bow.
+      // Gift box: body, lid band, vertical ribbon, and a two-loop bow.
       return (
         <>
-          <rect x="3.5" y="8" width="17" height="4.5" rx="1" />
-          <path d="M5 12.5V20h14v-7.5" />
-          <path d="M12 8v12" />
-          <path d="M12 8C11 5.5 9.5 4.2 8.2 4.9 6.9 5.6 8 8 12 8Z" />
-          <path d="M12 8c1-2.5 2.5-3.8 3.8-3.1C17.1 5.6 16 8 12 8Z" />
+          <path d="M4 11h16v8.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z" />
+          <path d="M3 7.5h18v3.5H3z" />
+          <path d="M12 7.5v13" />
+          <path d="M12 7.5C11 5.2 7.6 4.6 7.6 6.5C7.6 7.7 9.7 8 12 7.5z" />
+          <path d="M12 7.5C13 5.2 16.4 4.6 16.4 6.5C16.4 7.7 14.3 8 12 7.5z" />
         </>
       );
     case "reading":
       // Open book: two pages meeting at a center spine.
       return (
         <>
-          <path d="M12 6.5C9.8 5.1 6.4 4.6 4 5.3v12.6c2.4-.7 5.8-.2 8 1.2 2.2-1.4 5.6-1.9 8-1.2V5.3C17.6 4.6 14.2 5.1 12 6.5Z" />
-          <path d="M12 6.5V19.3" />
+          <path d="M12 6.6C9.8 5.1 6.4 4.8 4 5.4v12.8c2.4-.6 5.8-.3 8 1.2 2.2-1.5 5.6-1.8 8-1.2V5.4c-2.4-.6-5.8-.3-8 1.2z" />
+          <path d="M12 6.6v12.8" />
         </>
       );
     case "today":
       // Sun = "today" / the day.
       return (
         <>
-          <circle cx="12" cy="12" r="3.8" />
-          <path d="M12 2.6V5" />
-          <path d="M12 19V21.4" />
-          <path d="M2.6 12H5" />
-          <path d="M19 12H21.4" />
-          <path d="M5.2 5.2 6.9 6.9" />
-          <path d="M17.1 17.1 18.8 18.8" />
-          <path d="M18.8 5.2 17.1 6.9" />
-          <path d="M6.9 17.1 5.2 18.8" />
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2.4v2.2" />
+          <path d="M12 19.4v2.2" />
+          <path d="M4.6 4.6l1.6 1.6" />
+          <path d="M17.8 17.8l1.6 1.6" />
+          <path d="M2.4 12h2.2" />
+          <path d="M19.4 12h2.2" />
+          <path d="M6.2 17.8l-1.6 1.6" />
+          <path d="M17.8 6.2l1.6-1.6" />
+        </>
+      );
+    case "guide":
+      // Folded map.
+      return (
+        <>
+          <path d="M9 4L3 6.4v13.6L9 17.6l6 2.4 6-2.4V6L15 8.4z" />
+          <path d="M9 4v13.6" />
+          <path d="M15 8.4V20" />
         </>
       );
     case "flow":
-      // Two workflow nodes joined by an elbow connector — orchestration
+      // Two rounded cards linked by an elbow connector — orchestration
       // ("when X happens, do Y").
       return (
         <>
-          <rect x="3" y="3" width="8" height="8" rx="2" />
-          <rect x="13" y="13" width="8" height="8" rx="2" />
-          <path d="M7 11v3.5a2 2 0 0 0 2 2h3.5" />
+          <rect x="3.5" y="4.5" width="7" height="6" rx="1.6" />
+          <rect x="13.5" y="13" width="7" height="6" rx="1.6" />
+          <path d="M10.5 7.5h2.5a2 2 0 0 1 2 2v3.5" />
         </>
       );
   }