refactor: Implement brand colors (#2141)

- Pull colors from hickory tailwind theme
- Minor updates to buttons to match website branded buttons
This commit is contained in:
sua yoo 2024-11-12 08:54:11 -08:00 committed by GitHub
parent d1dbbbe53c
commit 6aaf9c985e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 79 additions and 71 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
frontend/.yarnrc Normal file
View File

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

View File

@ -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

View File

@ -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",

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@ -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>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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) {

View File

@ -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"

View File

@ -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"

View File

@ -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`text-neutral-600 hover:bg-primary-50`,
? tw`bg-primary-100/80 text-primary-800 shadow-sm shadow-primary-900/20`
: tw`text-neutral-700 hover:bg-primary-50`,
]
.filter(Boolean)
.join(" ")}

View File

@ -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"

View File

@ -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>(

View File

@ -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}

View File

@ -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

View File

@ -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"
>

View File

@ -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,

View File

@ -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) {

View File

@ -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),
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)`,

View File

@ -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>

View File

@ -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"