@the-portland-company/shell 0.9.0 → 0.10.2

package/dist/index.js

@@ -9,11 +9,11 @@ import { keyframes } from '@emotion/react';
 // 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: {
@@ -30,7 +30,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: {
@@ -1866,7 +1866,7 @@ function NavItem({
             /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
               /* @__PURE__ */ jsx(Box, { children }),
               subLabel ? /* @__PURE__ */ jsx(Text, { mt: 0.5, fontSize: "10px", lineHeight: "1.3", color: "gray.400", children: subLabel }) : null,
-              badge && /* @__PURE__ */ jsx(Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
+              badge && /* @__PURE__ */ jsx(Badge, { colorScheme: "red", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
             ] })
           ]
         }
@@ -2007,7 +2007,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__ */ jsxs(Box, { mx: "4", mb: "3", children: [
@@ -2052,7 +2052,7 @@ function OrgPill() {
                 name: currentOrg?.name,
                 logoUrl: currentOrg?.logoUrl,
                 brandColor: selectedOrgBrandColor,
-                size: "28px"
+                size: "20px"
               }
             ),
             /* @__PURE__ */ jsx(Text, { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: currentOrg?.name || "No organizations" })
@@ -2081,15 +2081,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__ */ jsxs(Flex, { justify: "space-between", align: "center", width: "100%", overflow: "hidden", children: [
@@ -2139,15 +2139,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",
@@ -2565,7 +2565,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__ */ jsx(
@@ -2573,7 +2577,11 @@ function Sidebar({ onClose, id }) {
                   {
                     as: 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
                   }
                 )
@@ -2888,7 +2896,7 @@ ${formatted}` : formatted,
           /* @__PURE__ */ jsx(
             Button,
             {
-              colorScheme: "orange",
+              colorScheme: "red",
               onClick: () => void handleSubmit(),
               isLoading: isSubmitting,
               loadingText: "Sending",