@robr0/design-system 0.9.0 → 0.10.0

package/README.md

@@ -84,10 +84,15 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
   ```css
   :root { --font-family-primary: 'Inter', sans-serif; }
   ```
-- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it:
+- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it. The action colour is theme-split by design (light fills run teal-08/09/10, dark inverts to teal-05/04/03), so rebranding it means re-keying those steps:
   ```css
   :root {
-    --primitive-teal-07: #7C3AED;  /* your brand color becomes the action color */
+    --primitive-teal-08: #6D31D3;  /* light fill */
+    --primitive-teal-09: #4C2293;  /* light hover */
+    --primitive-teal-10: #2E1560;  /* light active, dark label */
+    --primitive-teal-05: #A78BFA;  /* dark fill */
+    --primitive-teal-04: #C4B5FD;  /* dark hover */
+    --primitive-teal-03: #DDD6FE;  /* dark active */
     --primitive-radius-full: 12px; /* pill buttons become rounded rectangles */
   }
   ```
@@ -99,9 +104,9 @@ Icons use a bundled Material Symbols Rounded variable font (woff2), with no extr
 Tokens flow in one direction, and primitives are never referenced directly in components:
 
 ```
-tokens-primitives.css      --primitive-teal-07: #118AB2
+tokens-primitives.css      --primitive-teal-08: #0E6E8F
         ↓
-tokens-light/dark.css      --color-action-primary-bg: var(--primitive-teal-07)
+tokens-light/dark.css      --color-action-primary-bg: var(--primitive-teal-08)
         ↓
 Component CSS              background-color: var(--color-action-primary-bg)
 ```

package/components/AppSidebar/AppSidebar.css

@@ -166,12 +166,17 @@
   cursor: pointer;
   overflow: hidden;
   text-align: left;
-  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+  /* The row renders as an <a> when the item carries an href. */
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized), margin var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
+/* Inset via margin + reduced padding (12 + 8 = the 20px the label sat at
+   before), so the pill floats off the rail edges while the icon and label
+   keep their exact x-positions against the category labels above. */
 .ds-app-sidebar--expanded .ds-app-sidebar__btn {
-  width: 100%;
-  padding: var(--padding-sm) var(--padding-lg);
+  margin: 0 var(--padding-sm-md);
+  padding: var(--padding-sm);
   justify-content: space-between;
 }
 
@@ -282,6 +287,9 @@
   align-items: center;
   gap: 8px;
   height: 40px;
+  /* The same edge inset the parent pills get; sub-items only render while
+     the rail is expanded, so this needs no state selector. */
+  margin-right: var(--padding-sm-md);
   padding: var(--padding-sm);
   border-radius: var(--radius-full);
   background: transparent;
@@ -292,6 +300,8 @@
   text-align: left;
   overflow: hidden;
   white-space: nowrap;
+  /* The row renders as an <a> when the sub-item carries an href. */
+  text-decoration: none;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 

package/components/AppSidebar/AppSidebar.d.ts

@@ -4,8 +4,10 @@ export interface AppSidebarSubItem {
     key: string;
     /** Display label */
     label: string;
-    /** Click handler */
+    /** Click handler — also fires on a link sub-item, so a consumer can route client-side */
     onClick?: () => void;
+    /** Renders the sub-item as a real link to this URL instead of a button */
+    href?: string;
 }
 export interface AppSidebarItem {
     /** Unique key for this item */
@@ -14,8 +16,10 @@ export interface AppSidebarItem {
     icon: string;
     /** Display label (shown when expanded) */
     label: string;
-    /** Click handler */
+    /** Click handler — also fires on a link item, so a consumer can route client-side */
     onClick?: () => void;
+    /** Renders the item as a real link to this URL instead of a button. Ignored when the item has children, whose row is the accordion toggle */
+    href?: string;
     /** Sub-items — turns this into an accordion */
     children?: AppSidebarSubItem[];
 }

package/components/AppSidebar/AppSidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
 import "./AppSidebar.css";
 import "../../fonts/material-symbols.css";
@@ -187,14 +187,43 @@ const AppSidebar = ({
           const hasChildren = item.children && item.children.length > 0;
           const isOpen = openKeys.has(item.key);
           const isActive = activeKey === item.key;
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
+          const isLink = Boolean(item.href) && !hasChildren;
+          const itemClasses = [
+            `${baseClass}__btn`,
+            isActive ? `${baseClass}__btn--active` : ""
+          ].filter(Boolean).join(" ");
+          const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
+            ] }),
+            hasChildren && /* @__PURE__ */ jsx(
+              "span",
               {
                 className: [
-                  `${baseClass}__btn`,
-                  isActive ? `${baseClass}__btn--active` : ""
+                  `${baseClass}__btn-chevron material-symbols-rounded`,
+                  isOpen ? `${baseClass}__btn-chevron--open` : ""
                 ].filter(Boolean).join(" "),
+                children: "chevron_right"
+              }
+            )
+          ] });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            isLink ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                className: itemClasses,
+                href: item.href,
+                onClick: () => item.onClick?.(),
+                "aria-current": isActive ? "page" : void 0,
+                title: !isExpanded ? item.label : void 0,
+                children: itemContent
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: itemClasses,
                 onClick: () => {
                   if (hasChildren && isExpanded) {
                     toggleAccordion(item.key);
@@ -202,23 +231,9 @@ const AppSidebar = ({
                   item.onClick?.();
                 },
                 "aria-expanded": hasChildren ? isOpen : void 0,
+                "aria-current": isActive ? "page" : void 0,
                 title: !isExpanded ? item.label : void 0,
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
-                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
-                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
-                  ] }),
-                  hasChildren && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: [
-                        `${baseClass}__btn-chevron material-symbols-rounded`,
-                        isOpen ? `${baseClass}__btn-chevron--open` : ""
-                      ].filter(Boolean).join(" "),
-                      children: "chevron_right"
-                    }
-                  )
-                ]
+                children: itemContent
               }
             ),
             hasChildren && /* @__PURE__ */ jsx(
@@ -228,20 +243,36 @@ const AppSidebar = ({
                   `${baseClass}__sub-items`,
                   isOpen && isExpanded ? `${baseClass}__sub-items--open` : ""
                 ].filter(Boolean).join(" "),
-                children: item.children.map((sub) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
-                  /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      className: [
-                        `${baseClass}__sub-btn`,
-                        activeSubKey === sub.key ? `${baseClass}__sub-btn--active` : ""
-                      ].filter(Boolean).join(" "),
-                      onClick: sub.onClick,
-                      children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label })
-                    }
-                  )
-                ] }, sub.key))
+                children: item.children.map((sub) => {
+                  const subActive = activeSubKey === sub.key;
+                  const subClasses = [
+                    `${baseClass}__sub-btn`,
+                    subActive ? `${baseClass}__sub-btn--active` : ""
+                  ].filter(Boolean).join(" ");
+                  const subLabel = /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label });
+                  return /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
+                    /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
+                    sub.href ? /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        className: subClasses,
+                        href: sub.href,
+                        onClick: sub.onClick,
+                        "aria-current": subActive ? "page" : void 0,
+                        children: subLabel
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: subClasses,
+                        onClick: sub.onClick,
+                        "aria-current": subActive ? "page" : void 0,
+                        children: subLabel
+                      }
+                    )
+                  ] }, sub.key);
+                })
               }
             )
           ] }, item.key);

package/components/Chart/AreaChart.js

@@ -32,7 +32,7 @@ const AreaChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),

package/components/Chart/BarChart.js

@@ -37,7 +37,7 @@ const BarChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#118AB2");
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");

package/components/Chart/LineChart.js

@@ -31,7 +31,7 @@ const LineChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),

package/components/Chart/PieChart.js

@@ -4,11 +4,11 @@ import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend
 import "./Chart.css";
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/Chart/RadarChart.js

@@ -31,7 +31,7 @@ const RadarChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),

package/components/Chart/RadialChart.js

@@ -4,11 +4,11 @@ import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip
 import "./Chart.css";
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/Chart/StackedBarChart.js

@@ -8,11 +8,11 @@ function getCSSVar(name, fallback) {
 }
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/SectionTitle/SectionTitle.css

@@ -11,6 +11,14 @@
   padding-bottom: var(--padding-xl);
 }
 
+/* Divider-less variant: for headings above content that draws its own
+   lines, where a second rule would double up. The generous clearance
+   the divider needed drops to a small breathing gap. */
+.ds-section-title--no-divider {
+  border-bottom: none;
+  padding-bottom: var(--padding-md);
+}
+
 /* ============================================
    HEADING
    ============================================ */

package/components/SectionTitle/SectionTitle.d.ts

@@ -4,7 +4,9 @@ export interface SectionTitleProps {
     title: string;
     /** Optional trailing content (count, badge, metadata) */
     trailing?: React.ReactNode;
+    /** Whether to draw the bottom divider line. Set false above content that draws its own lines (bordered tables, calendars), so the section separates by whitespace alone. */
+    divider?: boolean;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function SectionTitle({ title, trailing, className, }: SectionTitleProps): React.JSX.Element;
+export declare function SectionTitle({ title, trailing, divider, className, }: SectionTitleProps): React.JSX.Element;

package/components/SectionTitle/SectionTitle.js

@@ -4,9 +4,14 @@ import "./SectionTitle.css";
 function SectionTitle({
   title,
   trailing,
+  divider = true,
   className
 }) {
-  const classes = ["ds-section-title", className].filter(Boolean).join(" ");
+  const classes = [
+    "ds-section-title",
+    !divider && "ds-section-title--no-divider",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("h2", { className: "ds-section-title__heading", children: title }),
     trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ds-section-title__trailing", children: trailing })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "license": "MIT",
   "repository": {

package/tokens/tokens-dark.css

@@ -48,21 +48,25 @@
   --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.55);
   --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);
 
-  /* Action - Primary */
-  --color-action-primary-bg: var(--primitive-teal-07);
-  --color-action-primary-bg-hover: var(--primitive-teal-08);
-  --color-action-primary-bg-active: var(--primitive-teal-09);
-  --color-action-primary-text: var(--primitive-teal-02);
-  --color-action-primary-text-active: var(--primitive-neutral-01);
+  /* Action - Primary. Inverted from light: the fill is the light half of
+     the teal ramp under a dark label, because a dark fill cannot clear 3:1
+     against the near-black page. Hover and active brighten rather than
+     deepen, so the fill walks toward the page's opposite, not into it. */
+  --color-action-primary-bg: var(--primitive-teal-05);
+  --color-action-primary-bg-hover: var(--primitive-teal-04);
+  --color-action-primary-bg-active: var(--primitive-teal-03);
+  --color-action-primary-text: var(--primitive-teal-10);
+  --color-action-primary-text-active: var(--primitive-teal-10);
   --color-action-primary-text-secondary: var(--primitive-teal-10);
-  --color-action-primary-text-tertiary: var(--primitive-teal-07);
-  --color-action-primary-border: var(--primitive-teal-09);
+  --color-action-primary-text-tertiary: var(--primitive-teal-04);
+  --color-action-primary-border: var(--primitive-teal-05);
   --color-action-primary-border-secondary: var(--primitive-teal-06);
   --color-action-primary-border-tertiary: var(--primitive-teal-04);
 
-  /* Action - Icon */
+  /* Action - Icon. The active icon sits on the hover/active fills, which
+     are the light half of the ramp here — so it inverts with the label. */
   --color-action-icon-default: var(--primitive-neutral-01);
-  --color-action-icon-active: var(--primitive-neutral-01);
+  --color-action-icon-active: var(--primitive-teal-10);
 
   /* Action - Passive (Secondary button) */
   --color-action-passive-text: var(--primitive-neutral-01);
@@ -99,7 +103,7 @@
      stays luminous on dark surfaces. */
   --color-ai-gradient-start: var(--primitive-red-05);
   --color-ai-gradient-mid: var(--primitive-blue-05);
-  --color-ai-gradient-end: var(--primitive-teal-05);
+  --color-ai-gradient-end: var(--primitive-teal-07);
 
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--primitive-neutral-08);
@@ -114,14 +118,14 @@
   --color-input-text-disabled: var(--primitive-neutral-07);
   --color-input-text-inverse: var(--primitive-neutral-07);
   --color-input-border-primary: var(--primitive-neutral-08);
-  --color-input-border-hover: var(--primitive-teal-09);
+  --color-input-border-hover: var(--primitive-teal-07);
   --color-input-border-selected: var(--primitive-teal-06);
   --color-input-border-disabled: var(--primitive-neutral-08);
   --color-input-bg-primary: var(--primitive-neutral-10);
   --color-input-bg-disabled: var(--primitive-neutral-09);
 
   /* Core colours */
-  --color-core-ui-primary: var(--primitive-teal-07);
+  --color-core-ui-primary: var(--primitive-teal-05);
   --color-core-ui-secondary: var(--primitive-teal-09);
   --color-core-accent-coral: var(--primitive-red-07);
   --color-core-accent-violet: var(--primitive-purple-07);

package/tokens/tokens-light.css

@@ -51,17 +51,20 @@
   --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);
   --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
 
-  /* Action - Primary */
-  --color-action-primary-bg: var(--primitive-teal-07);
-  --color-action-primary-bg-hover: var(--primitive-teal-08);
-  --color-action-primary-bg-active: var(--primitive-teal-09);
+  /* Action - Primary. The action colour is theme-dependent: one teal step
+     cannot clear 3:1 against both a white page and a near-black one while
+     also carrying a 4.5:1 label, so light takes a deep fill under a light
+     label and the dark theme inverts it (see tokens-dark.css). */
+  --color-action-primary-bg: var(--primitive-teal-08);
+  --color-action-primary-bg-hover: var(--primitive-teal-09);
+  --color-action-primary-bg-active: var(--primitive-teal-10);
   --color-action-primary-text: var(--primitive-teal-02);
   --color-action-primary-text-active: var(--primitive-neutral-01);
   --color-action-primary-text-secondary: var(--primitive-teal-10);
-  --color-action-primary-text-tertiary: var(--primitive-teal-07);
-  --color-action-primary-border: var(--primitive-teal-09);
-  --color-action-primary-border-secondary: var(--primitive-teal-06);
-  --color-action-primary-border-tertiary: var(--primitive-teal-04);
+  --color-action-primary-text-tertiary: var(--primitive-teal-09);
+  --color-action-primary-border: var(--primitive-teal-10);
+  --color-action-primary-border-secondary: var(--primitive-teal-08);
+  --color-action-primary-border-tertiary: var(--primitive-teal-08);
 
   /* Action - Icon */
   --color-action-icon-default: var(--primitive-neutral-10);
@@ -74,7 +77,7 @@
   --color-action-passive-bg-active: var(--primitive-neutral-03-semi);
 
   /* Core colours */
-  --color-core-ui-primary: var(--primitive-teal-07);
+  --color-core-ui-primary: var(--primitive-teal-08);
   --color-core-ui-secondary: var(--primitive-teal-10);
   --color-core-accent-coral: var(--primitive-red-07);
   --color-core-accent-violet: var(--primitive-purple-07);
@@ -114,7 +117,7 @@
      (AiButton's ring and glow), never as fills for ordinary chrome. */
   --color-ai-gradient-start: var(--primitive-red-06);
   --color-ai-gradient-mid: var(--primitive-blue-06);
-  --color-ai-gradient-end: var(--primitive-teal-06);
+  --color-ai-gradient-end: var(--primitive-teal-08);
 
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--color-bg-container-primary);
@@ -129,8 +132,8 @@
   --color-input-text-disabled: var(--primitive-neutral-04);
   --color-input-text-inverse: var(--primitive-neutral-04);
   --color-input-border-primary: var(--primitive-neutral-02);
-  --color-input-border-hover: var(--primitive-teal-04);
-  --color-input-border-selected: var(--primitive-teal-06);
+  --color-input-border-hover: var(--primitive-teal-06);
+  --color-input-border-selected: var(--primitive-teal-08);
   --color-input-border-disabled: var(--primitive-neutral-03);
   --color-input-bg-primary: var(--primitive-neutral-00);
   --color-input-bg-disabled: var(--primitive-neutral-02);