@the-portland-company/shell 0.38.0 → 0.39.1

package/dist/index.cjs

@@ -72,109 +72,115 @@ var colors = {
     700: "#2d3748",
     800: "#1a202c",
     900: "#171923"
+  },
+  // The neutral-black dark ramp from Reference/Global-Rules → Dark Mode. Every
+  // value is hue-free (R = G = B); layering is expressed by lightness only.
+  //
+  // The `gray` ramp above is Chakra's, which is BLUE-TINTED (#2d3748, #1a202c,
+  // #171923). Every dark value in the theme used to point into it, so dark mode
+  // rendered navy against the black chrome — the single most common way dark
+  // mode drifts off-brand, and explicitly called out in the spec. Dark values
+  // resolve here instead.
+  neutral: {
+    page: "#0A0A0A",
+    surface: "#161616",
+    raised: "#1F1F1F",
+    raised2: "#212121",
+    hover: "#2B2B2B",
+    border: "#333333",
+    borderStrong: "#404040",
+    textMuted: "#A3A3A3",
+    textDim: "#8A8A8A",
+    text: "#E8E8E8",
+    textStrong: "#F5F5F5"
   }
 };
 var semanticTokens = {
   colors: {
+    // Every _dark value resolves to the NEUTRAL ramp (colors.neutral), never to
+    // Chakra's blue-tinted `gray` scale. See the note on `neutral` above.
     // Text colors
-    "text.primary": {
-      default: "gray.900",
-      _dark: "gray.50"
-    },
-    "text.secondary": {
-      default: "gray.600",
-      _dark: "gray.400"
-    },
-    "text.muted": {
-      default: "gray.500",
-      _dark: "gray.500"
-    },
+    "text.primary": { default: "gray.900", _dark: "neutral.text" },
+    "text.secondary": { default: "gray.600", _dark: "neutral.textMuted" },
+    "text.muted": { default: "gray.500", _dark: "neutral.textDim" },
     // Background colors
-    "bg.primary": {
-      default: "white",
-      _dark: "gray.800"
-    },
-    "bg.secondary": {
-      default: "gray.50",
-      _dark: "gray.900"
-    },
-    "bg.surface": {
-      default: "white",
-      _dark: "gray.700"
-    },
-    "bg.hover": {
-      default: "gray.50",
-      _dark: "gray.600"
-    },
+    "bg.primary": { default: "white", _dark: "neutral.surface" },
+    "bg.secondary": { default: "gray.50", _dark: "neutral.page" },
+    "bg.surface": { default: "white", _dark: "neutral.raised" },
+    "bg.hover": { default: "gray.50", _dark: "neutral.hover" },
     // Border colors
-    "border.default": {
-      default: "gray.200",
-      _dark: "gray.600"
-    },
-    "border.muted": {
-      default: "gray.100",
-      _dark: "gray.700"
-    },
+    "border.default": { default: "gray.200", _dark: "neutral.border" },
+    "border.muted": { default: "gray.100", _dark: "neutral.border" },
     // Component specific
-    "card.bg": {
-      default: "white",
-      _dark: "gray.700"
-    },
-    "card.border": {
-      default: "gray.200",
-      _dark: "gray.600"
-    },
-    "input.bg": {
-      default: "white",
-      _dark: "gray.700"
-    },
-    "input.border": {
-      default: "gray.200",
-      _dark: "gray.600"
-    },
-    "input.hover": {
-      default: "gray.400",
-      _dark: "gray.500"
-    },
+    "heading.fg": { default: "politogy.navy.800", _dark: "neutral.textStrong" },
+    "card.bg": { default: "white", _dark: "neutral.surface" },
+    "card.border": { default: "gray.200", _dark: "neutral.border" },
+    "input.bg": { default: "white", _dark: "neutral.raised" },
+    "input.border": { default: "gray.200", _dark: "neutral.border" },
+    "input.hover": { default: "gray.400", _dark: "neutral.borderStrong" },
     // Navigation
-    "nav.bg": {
-      default: "white",
-      _dark: "gray.800"
-    },
-    "nav.border": {
-      default: "gray.200",
-      _dark: "gray.700"
-    },
+    "nav.bg": { default: "white", _dark: "neutral.surface" },
+    "nav.border": { default: "gray.200", _dark: "neutral.border" },
     // Sidebar
-    "sidebar.bg": {
-      default: "gray.50",
-      _dark: "gray.900"
-    },
-    "sidebar.hover": {
-      default: "gray.100",
-      _dark: "gray.800"
-    },
-    "sidebar.active": {
-      default: "brand.50",
-      _dark: "brand.900"
-    },
-    // Status colors
-    "success.bg": {
-      default: "green.50",
-      _dark: "green.900"
-    },
-    "error.bg": {
-      default: "red.50",
-      _dark: "red.900"
-    },
-    "warning.bg": {
-      default: "yellow.50",
-      _dark: "yellow.900"
-    },
-    "info.bg": {
-      default: "blue.50",
-      _dark: "blue.900"
-    }
+    "sidebar.bg": { default: "gray.50", _dark: "neutral.surface" },
+    "sidebar.hover": { default: "gray.100", _dark: "neutral.hover" },
+    "sidebar.active": { default: "brand.50", _dark: "brand.900" },
+    // Status surfaces. In dark mode these become neutral raised surfaces — the
+    // meaning is carried by the icon/text accent, not by a pale tint that would
+    // glare against black (and would break the hue-free surface rule).
+    "success.bg": { default: "green.50", _dark: "neutral.raised" },
+    "error.bg": { default: "red.50", _dark: "neutral.raised" },
+    "warning.bg": { default: "yellow.50", _dark: "neutral.raised" },
+    "info.bg": { default: "blue.50", _dark: "neutral.raised" },
+    // ---------------------------------------------------------------------
+    // Raw palette remap — the high-leverage half of the dark-mode fix.
+    //
+    // The app carries ~650 hardcoded Chakra literals (`bg="gray.50"`,
+    // `borderColor="gray.200"`, `color="gray.600"`, ...) that no semantic token
+    // can reach. Making the SCALE ITSELF color-mode-aware fixes them all at
+    // once, centrally, with no app edits.
+    //
+    // The mapping INVERTS: in dark mode a low number (used as a pale surface)
+    // becomes a dark surface, and a high number (used as dark text) becomes
+    // light text. That is what makes one remap correct for both background and
+    // foreground usage.
+    "gray.50": { default: "#f7fafc", _dark: "neutral.raised" },
+    "gray.100": { default: "#edf2f7", _dark: "neutral.raised2" },
+    "gray.200": { default: "#e2e8f0", _dark: "neutral.border" },
+    "gray.300": { default: "#cbd5e0", _dark: "neutral.borderStrong" },
+    "gray.400": { default: "#a0aec0", _dark: "#6B6B6B" },
+    "gray.500": { default: "#718096", _dark: "neutral.textDim" },
+    "gray.600": { default: "#4a5568", _dark: "neutral.textMuted" },
+    "gray.700": { default: "#2d3748", _dark: "#C6C6C6" },
+    "gray.800": { default: "#1a202c", _dark: "neutral.text" },
+    "gray.900": { default: "#171923", _dark: "neutral.textStrong" },
+    // Pale status tints used directly as card/callout surfaces. Same reasoning
+    // as the *.bg tokens above.
+    "blue.50": { default: "#ebf8ff", _dark: "neutral.raised" },
+    "green.50": { default: "#f0fff4", _dark: "neutral.raised" },
+    "red.50": { default: "#fff5f5", _dark: "neutral.raised" },
+    "yellow.50": { default: "#fffff0", _dark: "neutral.raised" },
+    "orange.50": { default: "#fffaf0", _dark: "neutral.raised" },
+    // Dark status TEXT. The deep shades are picked for contrast against a pale
+    // tint; against a #1F1F1F surface they are unreadable — measured on the live
+    // info alert, whose description rendered #2c5282 (blue.700) on near-black.
+    // In dark mode they lighten to the 200/300 band so the hue still reads as
+    // informational/success/error without losing legibility.
+    "blue.600": { default: "#2b6cb0", _dark: "#7CC0F5" },
+    "blue.700": { default: "#2c5282", _dark: "#9AD1F8" },
+    "blue.800": { default: "#2a4365", _dark: "#BFE3FB" },
+    "green.600": { default: "#38a169", _dark: "#68D391" },
+    "green.700": { default: "#2f855a", _dark: "#8EE0AE" },
+    "green.800": { default: "#276749", _dark: "#B6ECCB" },
+    "red.600": { default: "#e53e3e", _dark: "#FC8181" },
+    "red.700": { default: "#c53030", _dark: "#FEA8A8" },
+    "red.800": { default: "#9b2c2c", _dark: "#FECACA" },
+    "orange.600": { default: "#dd6b20", _dark: "#F6AD55" },
+    "orange.700": { default: "#c05621", _dark: "#FBC98A" },
+    "orange.800": { default: "#9c4221", _dark: "#FDDCB4" },
+    "yellow.600": { default: "#d69e2e", _dark: "#ECC94B" },
+    "yellow.700": { default: "#b7791f", _dark: "#F3DC85" },
+    "yellow.800": { default: "#975a16", _dark: "#F8EAB4" }
   }
 };
 
@@ -204,7 +210,10 @@ var components = {
       secondary: {
         borderWidth: "1px",
         borderColor: "gray.300",
-        bg: "white",
+        // `card.bg`, not a raw `white` — a literal white here rendered a light
+        // pill on the black page in dark mode. (`gray.*` is color-mode-aware via
+        // the semanticTokens remap, so those are already safe.)
+        bg: "card.bg",
         color: "gray.700",
         _hover: {
           bg: "gray.50"
@@ -271,7 +280,10 @@ var components = {
   },
   Heading: {
     baseStyle: {
-      color: "politogy.navy.800",
+      // Was a hard `politogy.navy.800` (#1a2e47) — near-invisible against the
+      // black page in dark mode, and off-brand navy besides. Every heading in
+      // every app went through this one style.
+      color: "heading.fg",
       fontWeight: "semibold"
     }
   },
@@ -655,7 +667,7 @@ var components = {
         borderBottom: "none",
         borderColor: "transparent",
         _odd: {
-          bg: "white"
+          bg: "card.bg"
         },
         _even: {
           bg: "gray.50"
@@ -667,7 +679,7 @@ var components = {
       tbody: {
         tr: {
           _odd: {
-            bg: "white"
+            bg: "card.bg"
           },
           _even: {
             bg: "gray.50"