feat: adds ability for theming via static.json file

Author: jbottigliero

src/components/ResultListing.tsx

@@ -127,7 +127,6 @@ export default function ResultListing({ gmeta }: { gmeta: GMetaResult }) {
   }>();
   getAttributeFrom<string>(gmeta, "components.ResultListing.heading").then(
     (result) => {
-      console.log(result);
       setHeading(result);
     },
   );

src/theme.ts

@@ -1,28 +1,98 @@
-import { extendTheme } from "@chakra-ui/react";
+import { STATIC } from "../static";
+
+import { extendTheme, withDefaultColorScheme } from "@chakra-ui/react";
 
 import "@fontsource/ibm-plex-mono";
 import "@fontsource/ibm-plex-sans";
 
-const theme = extendTheme({
-  fonts: {
-    heading: `'IBM Plex Sans', sans-serif`,
-    body: `'IBM Plex Sans', sans-serif`,
-    mono: `'IBM Plex Mono', monospace`,
-  },
-  colors: {
-    brand: {
-      "50": "#E5F2FF",
-      "100": "#B8DBFF",
-      "200": "#8AC4FF",
-      "300": "#5CADFF",
-      "400": "#2E96FF",
-      "500": "#007FFF",
-      "600": "#0066CC",
-      "700": "#004C99",
-      "800": "#00264c",
-      "900": "#001933",
+export type ColorDefinition =
+  | {
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    }
+  | string;
+
+export type ThemeSettings = {
+  /**
+   * Apply a default color scheme to all components.
+   * This supports all Chakra UI color schemes and is not provided by default.
+   * @see https://v2.chakra-ui.com/docs/styled-system/theme#colors for available color schemes.
+   */
+  colorScheme?: string;
+  /**
+   * Specific color definitions to use in the theme.
+   * The most common use case is to define a `brand` color.
+   * @example
+   * ```json
+   * {
+   *   "colors": {
+   *     "brand": {
+   *      "50": "#E5F2FF",
+   *      "100": "#B8DBFF",
+   *      "200": "#8AC4FF",
+   *      "300": "#5CADFF",
+   *      "400": "#2E96FF",
+   *      "500": "#007FFF",
+   *      "600": "#0066CC",
+   *      "700": "#004C99",
+   *      "800": "#00264c",
+   *      "900": "#001933"
+   *   }
+   *  }
+   * }
+   * ```
+   * @see https://v2.chakra-ui.com/docs/styled-system/theme#colors
+   */
+  colors?: Record<string, ColorDefinition>;
+  /**
+   * Extend the Chakra UI theme.
+   * @see https://v2.chakra-ui.com/docs/styled-system/customize-theme#using-theme-extensions
+   */
+  extendTheme?: Parameters<typeof extendTheme>[0];
+};
+
+const brand: ColorDefinition = {
+  "50": "#E5F2FF",
+  "100": "#B8DBFF",
+  "200": "#8AC4FF",
+  "300": "#5CADFF",
+  "400": "#2E96FF",
+  "500": "#007FFF",
+  "600": "#0066CC",
+  "700": "#004C99",
+  "800": "#00264c",
+  "900": "#001933",
+};
+
+let colorScheme = {};
+if (STATIC.data.attributes.theme?.colorScheme) {
+  colorScheme = withDefaultColorScheme({
+    colorScheme: STATIC.data.attributes.theme?.colorScheme,
+  });
+}
+
+const theme = extendTheme(
+  {
+    fonts: {
+      heading: `'IBM Plex Sans', sans-serif`,
+      body: `'IBM Plex Sans', sans-serif`,
+      mono: `'IBM Plex Mono', monospace`,
+    },
+    colors: {
+      brand,
+      ...(STATIC.data.attributes.theme?.colors || {}),
     },
   },
-});
+  colorScheme,
+  STATIC.data.attributes.theme?.extendTheme || {},
+);
 
 export default theme;

static.json

@@ -11,6 +11,22 @@
         "title": "Search | Globus",
         "description": "This is an example of a basis Globus Search interface generated from a static.json file."
       },
+      "theme": {
+        "colors": {
+          "brand": {
+            "50": "#e8f3ff",
+            "100": "#cfd8e3",
+            "200": "#b5bdcc",
+            "300": "#97a3b4",
+            "400": "#7b899d",
+            "500": "#626f84",
+            "600": "#4b5768",
+            "700": "#343e4b",
+            "800": "#1e2530",
+            "900": "#070c18"
+          }
+        }
+      },
       "content": {
         "logo": {
           "src": "https://www.usgs.gov/themes/custom/usgs_tantalum/usgs_logo.png",

static.ts

@@ -2,6 +2,7 @@ import _STATIC from "./static.json";
 import { defaultsDeep, get } from "lodash";
 import type { ResultComponentOptions } from "@/components/Result";
 import { ResultListingComponentOptions } from "@/components/ResultListing";
+import { ThemeSettings } from "@/theme";
 
 /**
  * The base type for a `static.json` file.
@@ -44,13 +45,25 @@ export type Data = {
    */
   version: string;
   attributes: {
-    metadata: {
-      title: string;
-      description: string;
+
+    features?: {
+      /**
+       * Enable JSONata support for processing the `static.json` file.
+       * @see https://jsonata.org/
+       */
+      jsonnata?: boolean;
+      authentication?: boolean;
+    };
+
+    theme?: ThemeSettings;
+
+    metadata?: {
+      title?: string;
+      description?: string;
     };
 
-    content: {
-      headline: string;
+    content?: {
+      headline?: string;
       logo?: {
         src: string;
         alt?: string;
@@ -62,15 +75,6 @@ export type Data = {
       ResultListing?: ResultListingComponentOptions;
     };
 
-    features?: {
-      /**
-       * Enable JSONata support for processing the `static.json` file.
-       * @see https://jsonata.org/
-       */
-      jsonnata?: boolean;
-      authentication?: boolean;
-    };
-
     globus: {
       /**
        * The Globus platform environment.