npm - @skipleague/design - Versions diffs - 0.4.8 → 0.5.0 - Mend

@skipleague/design 0.4.8 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/AppLogo.d.ts CHANGED Viewed

@@ -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";
+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 CHANGED Viewed

@@ -1,23 +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 rounded cards linked by an elbow connector — orchestration
+            // ("when X happens, do Y").
+            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/dist/apps.js CHANGED Viewed

@@ -12,6 +12,7 @@ export const SKIPLEAGUE_APPS = [
     { slug: "skipreading", name: "SkipReading", url: "https://reading.skipleague.com" },
     { slug: "skipgifts", name: "SkipGifts", url: "https://gifts.skipleague.com" },
     { slug: "skiptoday", name: "SkipToday", url: "https://today.skipleague.com" },
+    { slug: "skipflow", name: "SkipFlow", url: "https://flow.skipleague.com" },
 ];
 /** Default target for the menu's "Manage account" link (the platform account page). */
 export const SKIPLEAGUE_ACCOUNT_URL = "https://skipleague.com/account";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.4.8",
+  "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 CHANGED Viewed

@@ -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";
+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,52 +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 rounded cards linked by an elbow connector — orchestration
+      // ("when X happens, do Y").
+      return (
+        <>
+          <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" />
         </>
       );
   }

package/src/apps.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export const SKIPLEAGUE_APPS: AppLink[] = [
   { slug: "skipreading", name: "SkipReading", url: "https://reading.skipleague.com" },
   { slug: "skipgifts", name: "SkipGifts", url: "https://gifts.skipleague.com" },
   { slug: "skiptoday", name: "SkipToday", url: "https://today.skipleague.com" },
+  { slug: "skipflow", name: "SkipFlow", url: "https://flow.skipleague.com" },
 ];
 /** Default target for the menu's "Manage account" link (the platform account page). */