From 6aaf9c985e86a62d1a06f2093df9d0f3b9ff303e Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 12 Nov 2024 08:54:11 -0800 Subject: [PATCH] refactor: Implement brand colors (#2141) - Pull colors from hickory tailwind theme - Minor updates to buttons to match website branded buttons --- assets/browsertrix-lockup-color-dynamic.svg | 2 +- frontend/.yarnrc | 1 + frontend/Dockerfile | 2 +- frontend/package.json | 1 + .../assets/brand/browsertrix-lockup-color.svg | 2 +- frontend/src/assets/favicons/favicon.svg | 2 +- .../src/components/beta-badges.stylesheet.css | 2 +- frontend/src/components/beta-badges.ts | 4 +- frontend/src/components/ui/config-details.ts | 2 +- .../ui/navigation/navigation-button.ts | 4 +- .../features/archived-items/crawl-status.ts | 12 ++-- .../select-browser-profile.ts | 2 +- frontend/src/pages/account-settings.ts | 2 +- .../archived-item-detail.ts | 6 +- .../src/pages/org/browser-profiles-new.ts | 2 +- frontend/src/pages/org/dashboard.ts | 2 +- frontend/src/theme.stylesheet.css | 11 +++- frontend/tailwind.config.js | 65 +++++++------------ frontend/xliff/es.xlf | 14 ++-- frontend/yarn.lock | 12 ++++ 20 files changed, 79 insertions(+), 71 deletions(-) create mode 100644 frontend/.yarnrc 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"