diff --git a/assets/browsertrix-lockup-color-dynamic.svg b/assets/browsertrix-lockup-color-dynamic.svg
index 18720c1f..0498422a 100644
--- a/assets/browsertrix-lockup-color-dynamic.svg
+++ b/assets/browsertrix-lockup-color-dynamic.svg
@@ -1 +1 @@
-
+
diff --git a/frontend/.yarnrc b/frontend/.yarnrc
new file mode 100644
index 00000000..123ac74a
--- /dev/null
+++ b/frontend/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 1322dd9e..6b115f32 100644
--- a/frontend/Dockerfile
+++ b/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
diff --git a/frontend/package.json b/frontend/package.json
index 0e4985ce..89e68efd 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/assets/brand/browsertrix-lockup-color.svg b/frontend/src/assets/brand/browsertrix-lockup-color.svg
index 4ab0eb83..e6fd7245 100644
--- a/frontend/src/assets/brand/browsertrix-lockup-color.svg
+++ b/frontend/src/assets/brand/browsertrix-lockup-color.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/frontend/src/assets/favicons/favicon.svg b/frontend/src/assets/favicons/favicon.svg
index ddcbae18..cb8363ff 100644
--- a/frontend/src/assets/favicons/favicon.svg
+++ b/frontend/src/assets/favicons/favicon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/frontend/src/components/beta-badges.stylesheet.css b/frontend/src/components/beta-badges.stylesheet.css
index 556bbae0..dc44d575 100644
--- a/frontend/src/components/beta-badges.stylesheet.css
+++ b/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) {
diff --git a/frontend/src/components/beta-badges.ts b/frontend/src/components/beta-badges.ts
index 33c23549..40c8b17b 100644
--- a/frontend/src/components/beta-badges.ts
+++ b/frontend/src/components/beta-badges.ts
@@ -18,7 +18,7 @@ export class BetaIcon extends TailwindElement {
`;
}
@@ -40,7 +40,7 @@ export class BetaBadge extends TailwindElement {
"Parts might change or be broken. Please share your thoughts with us!",
)}
-
+
{
const select = (e.target as HTMLElement).closest(
diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts
index 1f49fe40..51f7338d 100644
--- a/frontend/src/pages/account-settings.ts
+++ b/frontend/src/pages/account-settings.ts
@@ -63,7 +63,7 @@ export class RequestVerify extends TailwindElement {
return html`
+
,
${formatNumber(+this.item.stats.done)}
@@ -932,7 +932,7 @@ ${this.item?.description}
({ id, name }) =>
html`
${name}
diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts
index d213a4f8..9be1ad38 100644
--- a/frontend/src/pages/org/dashboard.ts
+++ b/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,
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index c4da17b1..d6a3543e 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/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) {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2a2c5f82..6db45d9b 100644
--- a/frontend/tailwind.config.js
+++ b/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}
*/
- const makeColorPalette = (color) =>
+ const shoelaceColorPalette = (color) =>
colorGrades.reduce(
/**
* @param {Record} acc
@@ -66,21 +37,35 @@ function makeTheme() {
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
colors: {
current: "currentColor",
- ...colors.map(makeColorPalette),
- primary,
- theme: { blue: primary, green: "#4d7c0f" },
- success: { ...makeColorPalette("success"), DEFAULT: `var(--success)` },
- warning: { ...makeColorPalette("warning"), DEFAULT: `var(--warning)` },
- danger: { ...makeColorPalette("danger"), DEFAULT: `var(--danger)` },
+ ...theme.colors,
+ primary: {
+ ...theme.colors.cyan,
+ DEFAULT: theme.colors.cyan[500],
+ },
+ 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)`,
diff --git a/frontend/xliff/es.xlf b/frontend/xliff/es.xlf
index 4fb2494e..19226595 100644
--- a/frontend/xliff/es.xlf
+++ b/frontend/xliff/es.xlf
@@ -3768,13 +3768,6 @@
Using proxy:
-
-
- It is highly recommended to create dedicated accounts to use when
- crawling. For details, refer to
- .
-
-
Refer to our user guide on
org settings
@@ -3792,6 +3785,13 @@
Your language preference has been updated.
+
+
+ It is highly recommended to create dedicated accounts to use when
+ crawling. For details, refer to
+ .
+
+
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 77a1af28..dbf273d9 100644
--- a/frontend/yarn.lock
+++ b/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"