Adjust theme to enable light mode

.changeset/light-games-win.md

@@ -0,0 +1,9 @@
+---
+"@guardian/cql": major
+---
+
+Nest theme properties to match UI, and add enough to enable light mode.
+
+Previously, theme properties were sometimes nested, and sometimes flattened into the root theme. Now, they're nested as the UI is nested, so chipWrapper contains the overrides for chipHandle and chipContent.
+
+It should be straightforward to port existing styling — just map your existing overrides to the new structure.

lib/cql/src/cqlInput/CqlInput.ts

@@ -187,15 +187,16 @@ export const createCqlInput = (
 
     public createTemplate(partialTheme: DeepPartial<CqlTheme>) {
       const {
-        input,
+        color: baseColor,
+        input: {
+          layout: inputLayout,
+          chipWrapper: { color: chipWrapperColor, chipContent, chipHandle },
+          placeholder,
+        },
         tokens,
-        chipWrapper,
         baseBorderRadius,
         baseFontSize,
-        chipContent,
-        chipHandle,
         typeahead,
-        placeholder
       } = applyPartialTheme(partialTheme);
       const template = document.createElement("template");
       template.innerHTML = `
@@ -212,6 +213,7 @@ export const createCqlInput = (
             /* Hide scrollbars to emulate input scroll */
             -ms-overflow-style: none;  /* Internet Explorer 10+ */
             scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
+            color: ${baseColor.text};
           }
 
           .container::-webkit-scrollbar {
@@ -230,7 +232,7 @@ export const createCqlInput = (
           chip-wrapper {
             display: inline-flex;
             flex-shrink: 0;
-            background-color: ${chipWrapper.color.background};
+            background-color: ${chipWrapperColor.background};
             margin: 0 5px;
             border-radius: ${baseBorderRadius};
           }
@@ -262,7 +264,7 @@ export const createCqlInput = (
 
           .Cql__ContentEditable {
             width: 100%;
-            padding: ${input.layout.padding};
+            padding: ${inputLayout.padding};
             border-radius: ${baseBorderRadius};
           }
 
@@ -394,6 +396,7 @@ export const createCqlInput = (
           }
 
           .Cql__TypeaheadPopoverContainer, .Cql__ErrorPopover {
+            color: ${baseColor.text};
             position: absolute;
             min-width: ${typeahead.layout.minWidth};
             margin: 0;
@@ -410,7 +413,6 @@ export const createCqlInput = (
             padding: ${typeahead.layout.padding};
             font-size: ${baseFontSize};
             border-radius: ${typeahead.layout.borderRadius};
-            color: #eee;
             background-color: ${typeahead.color.background};
             border: 1px solid grey;
             overflow: hidden;
@@ -477,7 +479,7 @@ export const createCqlInput = (
             width: 100%;
             left: 0;
             top: 0;
-            padding: calc(${input.layout.padding} + ${chipContent.layout.padding});
+            padding: calc(${inputLayout.padding} + ${chipContent.layout.padding});
             white-space: nowrap;
             overflow-x: hidden;
             text-overflow: ellipsis;

lib/cql/src/cqlInput/theme.ts

@@ -4,33 +4,36 @@ import { mergeDeep } from "../utils/merge";
 export type CqlTheme = {
   baseFontSize: string;
   baseBorderRadius: string;
-  input: {
-    layout: {
-      padding: string;
-    };
+  color: {
+    text: string;
   };
-  placeholder: {
-    color: {
-      text: string;
-    };
-  };
-  chipWrapper: {
-    color: {
-      background: string;
-    };
-  };
-  chipContent: {
+  input: {
     layout: {
       padding: string;
     };
-    color: {
-      readonly: string;
+    chipWrapper: {
+      color: {
+        background: string;
+      };
+      chipContent: {
+        layout: {
+          padding: string;
+        };
+        color: {
+          readonly: string;
+        };
+      };
+      chipHandle: {
+        color: {
+          background: string;
+          border: string;
+        };
+      };
     };
-  };
-  chipHandle: {
-    color: {
-      background: string;
-      border: string;
+    placeholder: {
+      color: {
+        text: string;
+      };
     };
   };
   typeahead: {
@@ -68,33 +71,36 @@ export type CqlTheme = {
 const defaultTheme: CqlTheme = {
   baseFontSize: "28px",
   baseBorderRadius: "5px",
-  input: {
-    layout: {
-      padding: "5px",
-    },
-  },
-  placeholder: {
-    color: {
-      text: "#9d9d9d",
-    },
-  },
-  chipWrapper: {
-    color: {
-      background: "rgba(255,255,255,0.2)",
-    },
+  color: {
+    text: "#eee",
   },
-  chipContent: {
+  input: {
     layout: {
       padding: "5px",
     },
-    color: {
-      readonly: "#bbb",
+    placeholder: {
+      color: {
+        text: "#9d9d9d",
+      },
     },
-  },
-  chipHandle: {
-    color: {
-      background: "#3737378f",
-      border: "none",
+    chipWrapper: {
+      color: {
+        background: "rgba(255,255,255,0.2)",
+      },
+      chipContent: {
+        layout: {
+          padding: "5px",
+        },
+        color: {
+          readonly: "#bbb",
+        },
+      },
+      chipHandle: {
+        color: {
+          background: "#3737378f",
+          border: "none",
+        },
+      },
     },
   },
   typeahead: {

lib/cql/src/lib.ts

@@ -13,3 +13,4 @@ export {
   CqlStr,
   CqlField,
 } from "./lang/ast.ts";
+export type { CqlTheme } from './cqlInput/theme.ts';