@the-portland-company/shell 0.9.0 → 0.10.2

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.10.2 — 2026-07-13
+
+### Security (XSS) + UI
+
+- **Sanitize host-supplied hrefs** in native NavLink / footer / action links
+  (`safeHref` blocks `javascript:`/`data:` URL schemes) — merged from the
+  skills-scan security review. `npm audit` added to prepublish.
+- **Smaller OrgPill badge** (`28px` → `20px`) — carried forward from 0.10.1.
+
+  This is a single publish combining the XSS fix (was on `main` @ 0.10.0) and the
+  OrgPill change (was on `feat/orgpill-smaller-badge` @ 0.10.1).
+
+## 0.10.1 — 2026-07-13
+
+### Changed (OrgPill)
+
+- **Sidebar org switcher badge is smaller** (`28px` → `20px`) so the initials/logo
+  circle no longer nearly fills the `sm` MenuButton — gives visible top/bottom
+  breathing room. Only the icon size changed; the pill's colors/background and the
+  dropdown are untouched (light/dark styling unchanged).
+
+## 0.10.0 — 2026-07-12
+
+### Fixed (Specs brand colors)
+
+- **Brand ramp is Specs race-red (`#E63946`)**, not legacy burnt-orange (`#E86A3A`).
+  `gen:tokens` now emits `--app-color-brand-*` and Chakra `brand` from `colors.raceRed`.
+- Mode defaults, focus ring, and field focus use relationship primary / race-red.
+- Sidebar footer Privacy/Terms/Subscriptions links use race-red (not theme orange).
+- OrgPill fallbacks, nav badges, support button: race-red / `red` scheme.
+
+
 # Changelog
 
 ## 0.9.0 — 2026-07-12

package/dist/chrome.css

@@ -112,8 +112,8 @@
   --surface-2: #ECEEEF;
   --surface-3: #FFFFFF;
 
-  /* Focus ring */
-  --focus-ring-color: #E86A3A;
+  /* Focus ring — Specs race-red (ignore stale orange focus.ringColor) */
+  --focus-ring-color: #E63946;
   --focus-ring-width: 3px;
   --focus-ring-offset: 0px;
 
@@ -172,17 +172,17 @@
   --topbar-icon-button-size: 32px;
   --topbar-icon-size: 20px;
 
-  /* Shell chrome: brand color ramps */
-  --app-color-brand-50: #FFF5F0;
-  --app-color-brand-100: #FFE8DC;
-  --app-color-brand-200: #FFD0B8;
-  --app-color-brand-300: #FFB088;
-  --app-color-brand-400: #FF8C5A;
-  --app-color-brand-500: #E86A3A;
-  --app-color-brand-600: #CC5429;
-  --app-color-brand-700: #A6421F;
-  --app-color-brand-800: #803317;
-  --app-color-brand-900: #5C2410;
+  /* Shell chrome: brand color ramps (= Specs race-red) */
+  --app-color-brand-50: #FDECEE;
+  --app-color-brand-100: #FCE0E3;
+  --app-color-brand-200: #F8B6BD;
+  --app-color-brand-300: #EF6671;
+  --app-color-brand-400: #EA4751;
+  --app-color-brand-500: #E63946;
+  --app-color-brand-600: #C42E3A;
+  --app-color-brand-700: #9F252E;
+  --app-color-brand-800: #660F17;
+  --app-color-brand-900: #39080D;
 
   /* Shell chrome: gray ramps */
   --app-color-gray-50: #F7FAFC;
@@ -200,7 +200,7 @@
   --app-field-bg: #FFFFFF;
   --app-field-border: #E2E8F0;
   --app-field-border-hover: #A0AEC0;
-  --app-field-focus: #E86A3A;
+  --app-field-focus: #E63946;
   --app-field-radius: 10px;
   --form-placeholder-font-size: 14px;
   --form-select-icon: #64748B;
@@ -215,8 +215,8 @@
   --app-btn-size: 44px;
   --app-btn-radius: 10px;
   --app-btn-font-size: 14px;
-  --app-btn-primary-bg: #E86A3A;
-  --app-btn-primary-bg-hover: #D95F30;
+  --app-btn-primary-bg: #E63946;
+  --app-btn-primary-bg-hover: #C42E3A;
   --app-btn-primary-fg: #FFFFFF;
   --app-btn-secondary-bg: #FFFFFF;
   --app-btn-secondary-bg-hover: #F8FAFC;
@@ -236,10 +236,10 @@
   --app-tab-radius: 12px;
 
   /* Mode-active colors (overwritten by app at mode-switch time) */
-  --mode-primary-color: #E86A3A;
-  --mode-input-border-color: #E86A3A;
-  --mode-input-hover-border-color: #CC5429;
-  --mode-input-focus-shadow-color: #E86A3A;
+  --mode-primary-color: #E63946;
+  --mode-input-border-color: #E63946;
+  --mode-input-hover-border-color: #C42E3A;
+  --mode-input-focus-shadow-color: #E63946;
 }
 .dark {
   --background: 222.2 84% 4.9%;

package/dist/index.cjs

@@ -15,11 +15,11 @@ var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 // src/theme/index.ts
 
 // src/theme/tokens.generated.ts
-var brandRamp = { 50: "#FFF5F0", 100: "#FFE8DC", 200: "#FFD0B8", 300: "#FFB088", 400: "#FF8C5A", 500: "#E86A3A", 600: "#CC5429", 700: "#A6421F", 800: "#803317", 900: "#5C2410" };
+var brandRamp = { 50: "#FDECEE", 100: "#FCE0E3", 200: "#F8B6BD", 300: "#EF6671", 400: "#EA4751", 500: "#E63946", 600: "#C42E3A", 700: "#9F252E", 800: "#660F17", 900: "#39080D" };
 
 // src/theme/colors.ts
 var colors = {
-  // Primary brand color - Politogy burnt-orange (Energy & Action). From Specs.
+  // Primary brand = Specs race-red (#E63946 ramp). Generated via gen:tokens.
   brand: { ...brandRamp },
   // Politogy Brand Colors
   politogy: {
@@ -36,7 +36,7 @@ var colors = {
       800: "#2a4365",
       900: "#1a365d"
     },
-    // Primary Red/Orange - Energy & Action (main brand color). From Specs.
+    // Race-red (Specs primary brand). Same ramp as `brand`.
     red: { ...brandRamp },
     // Navy - Professional & Authoritative
     navy: {
@@ -1872,7 +1872,7 @@ function NavItem({
             /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { flex: "1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children }),
               subLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { mt: 0.5, fontSize: "10px", lineHeight: "1.3", color: "gray.400", children: subLabel }) : null,
-              badge && /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
+              badge && /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { colorScheme: "red", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
             ] })
           ]
         }
@@ -2013,7 +2013,7 @@ function OrgPill() {
     () => currentOrg ? getOrganizationBrandColor(currentOrg) : null,
     [currentOrg]
   );
-  const selectedOrgColor = selectedOrgBrandColor || "var(--mode-primary-color, #ea6a3a)";
+  const selectedOrgColor = selectedOrgBrandColor || "var(--mode-primary-color, var(--color-race-red-500, #E63946))";
   const selectedOrgMenuBg = selectedOrgBrandColor && lightenHexColor(selectedOrgBrandColor, 0.12) || "#4a4a4a";
   if (!org) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { mx: "4", mb: "3", children: [
@@ -2058,7 +2058,7 @@ function OrgPill() {
                 name: currentOrg?.name,
                 logoUrl: currentOrg?.logoUrl,
                 brandColor: selectedOrgBrandColor,
-                size: "28px"
+                size: "20px"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(react.Text, { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: currentOrg?.name || "No organizations" })
@@ -2087,15 +2087,15 @@ function OrgPill() {
                   bg: "transparent",
                   color: currentOrg?.id ? "white" : "inherit",
                   _hover: {
-                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
                     color: currentOrg?.id ? "white" : "gray.900"
                   },
                   _focus: {
-                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
                     color: currentOrg?.id ? "white" : "gray.900"
                   },
                   _active: {
-                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.24) || "#5d5d5d" : "gray.200",
                     color: currentOrg?.id ? "white" : "gray.900"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "center", width: "100%", overflow: "hidden", children: [
@@ -2145,15 +2145,15 @@ function OrgPill() {
                 color: currentOrg?.id ? "white" : "inherit",
                 my: 0,
                 _hover: {
-                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
                   color: currentOrg?.id ? "white" : "gray.900"
                 },
                 _focus: {
-                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.2) || "#555555" : "gray.100",
                   color: currentOrg?.id ? "white" : "gray.900"
                 },
                 _active: {
-                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#E63946", 0.24) || "#5d5d5d" : "gray.200",
                   color: currentOrg?.id ? "white" : "gray.900"
                 },
                 fontSize: "sm",
@@ -2571,7 +2571,11 @@ function Sidebar({ onClose, id }) {
                   {
                     href: l.href,
                     isExternal: true,
-                    _hover: { textDecoration: "underline", opacity: 1 },
+                    color: "var(--color-race-red-500, #E63946)",
+                    _hover: {
+                      color: "var(--color-race-red-600, #C42E3A)",
+                      textDecoration: "underline"
+                    },
                     children: l.label
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2579,7 +2583,11 @@ function Sidebar({ onClose, id }) {
                   {
                     as: reactRouterDom.NavLink,
                     to: l.href,
-                    _hover: { textDecoration: "underline", opacity: 1 },
+                    color: "var(--color-race-red-500, #E63946)",
+                    _hover: {
+                      color: "var(--color-race-red-600, #C42E3A)",
+                      textDecoration: "underline"
+                    },
                     children: l.label
                   }
                 )
@@ -2894,7 +2902,7 @@ ${formatted}` : formatted,
           /* @__PURE__ */ jsxRuntime.jsx(
             react.Button,
             {
-              colorScheme: "orange",
+              colorScheme: "red",
               onClick: () => void handleSubmit(),
               isLoading: isSubmitting,
               loadingText: "Sending",