refactor: Implement brand colors (#2141)

- Pull colors from hickory tailwind theme
- Minor updates to buttons to match website branded buttons

frontend/.yarnrc

@@ -0,0 +1 @@
+ignore-engines true

frontend/Dockerfile

@@ -2,7 +2,7 @@
 FROM --platform=$BUILDPLATFORM docker.io/library/node:18 as build_deps
 
 WORKDIR /app
-COPY yarn.lock package.json ./
+COPY .yarnrc yarn.lock package.json ./
 # Uses a cache mount for the Yarn cache so that it's not included in subsequent steps
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn --production --frozen-lockfile --ignore-optional --network-timeout 1000000
 

frontend/package.json

@@ -19,6 +19,7 @@
     "@types/sinon": "^10.0.6",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
+    "@webrecorder/hickory": "^0.0.10",
     "@xstate/fsm": "^1.6.2",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",

frontend/src/assets/favicons/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>.b{fill:#0891b2}.g{fill:#4d7c0f}@media (prefers-color-scheme:dark){.b{fill:#0aaed7}.g{fill:#65a414}}</style><path d="M28.47 17.03a.33.33 0 0 0 0 .6 3.67 3.67 0 0 1 0 6.73.33.33 0 0 0 0 .61 3.67 3.67 0 1 1-4.83 4.83.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1-4.84-4.83.33.33 0 0 0 0-.6 3.67 3.67 0 0 1 0-6.73.33.33 0 0 0 0-.61 3.67 3.67 0 1 1 4.83-4.83.33.33 0 0 0 .61 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 4.84 4.83m-19.5-1.9a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m14.67 7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm0-7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm-7.34 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9m-7.33 7.34a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m7.33 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9" class="g"/><path d="M23.64 5.13a.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1 0-2.93.33.33 0 0 0 .6 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 0 2.93Z" class="b"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>.b{fill:#088eaf}.g{fill:#4d7c0f}@media (prefers-color-scheme:dark){.b{fill:#0aaed7}.g{fill:#65a414}}</style><path d="M28.47 17.03a.33.33 0 0 0 0 .6 3.67 3.67 0 0 1 0 6.73.33.33 0 0 0 0 .61 3.67 3.67 0 1 1-4.83 4.83.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1-4.84-4.83.33.33 0 0 0 0-.6 3.67 3.67 0 0 1 0-6.73.33.33 0 0 0 0-.61 3.67 3.67 0 1 1 4.83-4.83.33.33 0 0 0 .61 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 4.84 4.83m-19.5-1.9a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m14.67 7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm0-7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm-7.34 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9m-7.33 7.34a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m7.33 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9" class="g"/><path d="M23.64 5.13a.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1 0-2.93.33.33 0 0 0 .6 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 0 2.93Z" class="b"/></svg>

frontend/src/components/beta-badges.stylesheet.css

@@ -11,7 +11,7 @@
   }
   sl-tooltip::part(body),
   sl-tooltip::part(base__arrow) {
-    @apply bg-theme-green;
+    @apply bg-brand-green;
   }
 
   sl-tooltip::part(body) {

frontend/src/components/beta-badges.ts

@@ -18,7 +18,7 @@ export class BetaIcon extends TailwindElement {
       <sl-icon
         name="stars"
         label="Beta"
-        class="size-4 text-theme-green"
+        class="size-4 text-brand-green"
       ></sl-icon>
     </sl-tooltip>`;
   }
@@ -40,7 +40,7 @@ export class BetaBadge extends TailwindElement {
           "Parts might change or be broken. Please share your thoughts with us!",
         )}
       </div>
-      <span class="inline-block align-middle text-xs text-theme-green">
+      <span class="inline-block align-middle text-xs text-brand-green">
         <sl-icon
           name="stars"
           label="Beta feature"

frontend/src/components/ui/config-details.ts

@@ -428,7 +428,7 @@ export class ConfigDetails extends LiteElement {
                   const seedUrl = typeof seed === "string" ? seed : seed.url;
                   return html`<li>
                     <a
-                      class="text-primary hover:text-indigo-400"
+                      class="text-primary hover:text-primary-400"
                       href="${seedUrl}"
                       target="_blank"
                       rel="noreferrer"

frontend/src/components/ui/navigation/navigation-button.ts

@@ -90,8 +90,8 @@ export class NavigationButton extends TailwindElement {
           right: "justify-end",
         }[this.align],
         this.active
-          ? tw`bg-primary-100 text-primary-800 shadow-sm shadow-primary-900/20 hover:bg-primary-100`
+          ? tw`bg-primary-100/80 text-primary-800 shadow-sm shadow-primary-900/20`
-          : tw`text-neutral-600 hover:bg-primary-50`,
+          : tw`text-neutral-700 hover:bg-primary-50`,
       ]
         .filter(Boolean)
         .join(" ")}

frontend/src/features/archived-items/crawl-status.ts

@@ -68,7 +68,7 @@ export class CrawlStatus extends TailwindElement {
 
     switch (state) {
       case "starting":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="dot"
           library="app"
@@ -81,7 +81,7 @@ export class CrawlStatus extends TailwindElement {
 
       case "waiting_capacity":
       case "waiting_org_limit":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="hourglass-split"
           class="animatePulse"
@@ -107,7 +107,7 @@ export class CrawlStatus extends TailwindElement {
         break;
 
       case "stopping":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="dot"
           library="app"
@@ -119,7 +119,7 @@ export class CrawlStatus extends TailwindElement {
         break;
 
       case "pending-wait":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="dot"
           library="app"
@@ -131,7 +131,7 @@ export class CrawlStatus extends TailwindElement {
         break;
 
       case "generate-wacz":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="dot"
           library="app"
@@ -143,7 +143,7 @@ export class CrawlStatus extends TailwindElement {
         break;
 
       case "uploading-wacz":
-        color = "var(--sl-color-purple-600)";
+        color = "var(--sl-color-violet-600)";
         icon = html`<sl-icon
           name="dot"
           library="app"

frontend/src/features/browser-profiles/select-browser-profile.ts

@@ -172,7 +172,7 @@ export class SelectBrowserProfile extends LiteElement {
         >
         <a
           href=${`${this.orgBasePath}/browser-profiles?new`}
-          class="font-medium text-primary hover:text-indigo-500"
+          class="font-medium text-primary hover:text-primary-500"
           target="_blank"
           @click=${(e: Event) => {
             const select = (e.target as HTMLElement).closest<SlSelect>(

frontend/src/pages/account-settings.ts

@@ -63,7 +63,7 @@ export class RequestVerify extends TailwindElement {
 
     return html`
       <span
-        class="text-sm text-primary hover:text-indigo-400"
+        class="text-sm text-primary hover:text-primary-400"
         role="button"
         ?disabled=${this.isRequesting}
         @click=${this.requestVerification}

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -797,7 +797,7 @@ export class ArchivedItemDetail extends BtrixElement {
                           new Date(this.item!.started).valueOf(),
                       )}`
                     : html`
-                        <span class="text-purple-600">
+                        <span class="text-violet-600">
                           <btrix-relative-duration
                             value=${this.item!.started}
                             unitCount="3"
@@ -840,7 +840,7 @@ export class ArchivedItemDetail extends BtrixElement {
                       ? html`<span>,</span
                           ><span
                             class="tracking-tighter${this.isActive
-                              ? " text-purple-600"
+                              ? " text-violet-600"
                               : ""} font-mono"
                           >
                             ${formatNumber(+this.item.stats.done)}
@@ -932,7 +932,7 @@ ${this.item?.description}
                       ({ id, name }) =>
                         html`<li class="mt-1">
                           <a
-                            class="text-primary hover:text-indigo-400"
+                            class="text-primary hover:text-primary-400"
                             href=${`${this.navigate.orgBasePath}/collections/view/${id}`}
                             @click=${this.navigate.link}
                             >${name}</a

frontend/src/pages/org/browser-profiles-new.ts

@@ -75,7 +75,7 @@ export class BrowserProfilesNew extends BtrixElement {
           It is highly recommended to create dedicated accounts to use when
           crawling. For details, refer to
           <a
-            class="text-primary hover:text-indigo-400"
+            class="text-primary hover:text-primary-400"
             href="/docs/user-guide/browser-profiles/"
             target="_blank"
           >

frontend/src/pages/org/dashboard.ts

@@ -219,7 +219,7 @@ export class Dashboard extends LiteElement {
                   value: metrics.workflowsQueuedCount,
                   singleLabel: msg("Crawl Workflow Waiting"),
                   pluralLabel: msg("Crawl Workflows Waiting"),
-                  iconProps: { name: "hourglass-split", color: "purple" },
+                  iconProps: { name: "hourglass-split", color: "violet" },
                 })}
                 ${this.renderStat({
                   value: metrics.pageCount,

frontend/src/theme.stylesheet.css

@@ -40,7 +40,7 @@
     --sl-color-primary-700: theme(colors.primary.700);
     --sl-color-primary-800: theme(colors.primary.800);
     --sl-color-primary-900: theme(colors.primary.900);
-    --sl-color-primary-950: theme(colors.primary.950);
+    --sl-color-primary-950: theme(colors.primary.900);
 
     /*
      * Typography
@@ -138,6 +138,15 @@
     font-size: var(--sl-input-help-text-font-size-medium);
   }
 
+  /* Update button colors */
+  sl-button[variant="primary"]::part(base) {
+    background-color: theme(colors.primary.400);
+  }
+
+  sl-button[variant="primary"]::part(base):hover {
+    background-color: theme(colors.primary.500);
+  }
+
   /* Elevate select and buttons */
   sl-select::part(combobox),
   sl-button:not([variant="text"])::part(base) {

frontend/tailwind.config.js

@@ -1,3 +1,4 @@
+const theme = require("@webrecorder/hickory/tokens/tailwind");
 const { tailwindTransform } = require("postcss-lit");
 
 const attributes = require("./config/tailwind/plugins/attributes");
@@ -5,42 +6,12 @@ const containPlugin = require("./config/tailwind/plugins/contain");
 const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
 const cssPartsPlugin = require("./config/tailwind/plugins/parts");
 
-const PRIMARY_COLOR = "#0891B2";
-
-const primary = {
-  DEFAULT: PRIMARY_COLOR,
-  50: "#EBFAFE",
-  100: "#D8F6FD",
-  200: "#ACEBFB",
-  300: "#74DBF5",
-  400: "#3FC6E8",
-  500: "#0AAED7",
-  600: PRIMARY_COLOR,
-  700: "#0782A1",
-  800: "#066B84",
-  900: "#044B5D",
-  950: "#033744",
-};
-
 /**
- * Use Shoelace CSS variables in Tailwind theme for consistency
+ * Merge Shoelace and hickory themes
  *
- * Customize Shoelace variables in `theme.ts`
  * @returns {import('tailwindcss').Config['theme']}
  */
 function makeTheme() {
-  // Map color palettes:
-  const colors = [
-    "gray",
-    "red",
-    "yellow",
-    "green",
-    "blue",
-    "indigo",
-    "purple",
-    "pink",
-    "orange",
-  ];
   // Map color grading:
   const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 
@@ -48,7 +19,7 @@ function makeTheme() {
    * @param {string} color
    * @returns {Record<string, string>}
    */
-  const makeColorPalette = (color) =>
+  const shoelaceColorPalette = (color) =>
     colorGrades.reduce(
       /**
        * @param {Record<string, string>} acc
@@ -66,21 +37,35 @@ function makeTheme() {
     // https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
     colors: {
       current: "currentColor",
-      ...colors.map(makeColorPalette),
+      ...theme.colors,
-      primary,
+      primary: {
-      theme: { blue: primary, green: "#4d7c0f" },
+        ...theme.colors.cyan,
-      success: { ...makeColorPalette("success"), DEFAULT: `var(--success)` },
+        DEFAULT: theme.colors.cyan[500],
-      warning: { ...makeColorPalette("warning"), DEFAULT: `var(--warning)` },
+      },
-      danger: { ...makeColorPalette("danger"), DEFAULT: `var(--danger)` },
+      brand: theme.colors.brand,
+      success: {
+        ...shoelaceColorPalette("success"),
+        DEFAULT: `var(--success)`,
+      },
+      warning: {
+        ...shoelaceColorPalette("warning"),
+        DEFAULT: `var(--warning)`,
+      },
+      danger: {
+        ...shoelaceColorPalette("danger"),
+        DEFAULT: `var(--danger)`,
+      },
       neutral: {
-        ...makeColorPalette("neutral"),
+        ...shoelaceColorPalette("neutral"),
         // Shoelace supports additional neutral variables:
         0: `var(--sl-color-neutral-0)`,
         950: `var(--sl-color-neutral-950)`,
         1000: `var(--sl-color-neutral-1000)`,
       },
     },
-
+    borderColor: {
+      DEFAULT: `var(--sl-panel-border-color)`,
+    },
     fontFamily: {
       sans: `var(--sl-font-sans)`,
       serif: `var(--sl-font-serif)`,

frontend/xliff/es.xlf

@@ -3768,13 +3768,6 @@
       <trans-unit id="sadfb54de733655c9">
         <source>Using proxy: </source>
       </trans-unit>
-      <trans-unit id="habe03840abb41da5">
-        <source>
-          It is highly recommended to create dedicated accounts to use when
-          crawling. For details, refer to
-          <x equiv-text="&lt;a class=&quot;text-primary hover:text-indigo-400&quot; href=&quot;/docs/user-guide/browser-profiles/&quot; target=&quot;_blank&quot;&gt;&#10;            ${msg(&quot;browser profile best practices&quot;)}&lt;/a&gt;" id="0"/>.
-        </source>
-      </trans-unit>
       <trans-unit id="hda7aa624404fc0ed">
         <source>Refer to our user guide on
                 <x equiv-text="&lt;a class=&quot;text-neutral-500 underline hover:text-primary&quot; href=&quot;/docs/user-guide/org-settings/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;" id="0"/>org settings<x equiv-text="&lt;/a&gt;" id="1"/>
@@ -3792,6 +3785,13 @@
       <trans-unit id="sfa66f095b5a35ccc">
         <source>Your language preference has been updated.</source>
       </trans-unit>
+      <trans-unit id="h594aac845e847983">
+        <source>
+          It is highly recommended to create dedicated accounts to use when
+          crawling. For details, refer to
+          <x equiv-text="&lt;a class=&quot;text-primary hover:text-primary-400&quot; href=&quot;/docs/user-guide/browser-profiles/&quot; target=&quot;_blank&quot;&gt;&#10;            ${msg(&quot;browser profile best practices&quot;)}&lt;/a&gt;" id="0"/>.
+        </source>
+      </trans-unit>
     </body>
   </file>
 </xliff>

frontend/yarn.lock

@@ -823,6 +823,11 @@
     "@babel/types" "^7.24.0"
     semver "^7.5.2"
 
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@import-maps/resolve@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@import-maps/resolve/-/resolve-1.0.1.tgz"
@@ -2721,6 +2726,13 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1"
   integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==
 
+"@webrecorder/hickory@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@webrecorder/hickory/-/hickory-0.0.10.tgz#fba036b981d6797196501d54bf8474758159e108"
+  integrity sha512-fubRDiQwDFBIHUUz8iRWu0/NotM9OKMwQ3MjNOZVjabicAdZT17ngRhmvQ3EW4SX78OzRJptPjOL485iE33Ruw==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 "@xml-tools/parser@^1.0.11":
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/@xml-tools/parser/-/parser-1.0.11.tgz#a118a14099ea5c3c537e4781fad2fc195b57f8ff"