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:
parent
d1dbbbe53c
commit
6aaf9c985e
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
1
frontend/.yarnrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
ignore-engines true
|
@ -2,7 +2,7 @@
|
|||||||
FROM --platform=$BUILDPLATFORM docker.io/library/node:18 as build_deps
|
FROM --platform=$BUILDPLATFORM docker.io/library/node:18 as build_deps
|
||||||
|
|
||||||
WORKDIR /app
|
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
|
# 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
|
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn --production --frozen-lockfile --ignore-optional --network-timeout 1000000
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
"@types/sinon": "^10.0.6",
|
"@types/sinon": "^10.0.6",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||||
"@typescript-eslint/parser": "^6.20.0",
|
"@typescript-eslint/parser": "^6.20.0",
|
||||||
|
"@webrecorder/hickory": "^0.0.10",
|
||||||
"@xstate/fsm": "^1.6.2",
|
"@xstate/fsm": "^1.6.2",
|
||||||
"@zxcvbn-ts/core": "^3.0.4",
|
"@zxcvbn-ts/core": "^3.0.4",
|
||||||
"@zxcvbn-ts/language-common": "^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 |
@ -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 |
@ -11,7 +11,7 @@
|
|||||||
}
|
}
|
||||||
sl-tooltip::part(body),
|
sl-tooltip::part(body),
|
||||||
sl-tooltip::part(base__arrow) {
|
sl-tooltip::part(base__arrow) {
|
||||||
@apply bg-theme-green;
|
@apply bg-brand-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
sl-tooltip::part(body) {
|
sl-tooltip::part(body) {
|
||||||
|
@ -18,7 +18,7 @@ export class BetaIcon extends TailwindElement {
|
|||||||
<sl-icon
|
<sl-icon
|
||||||
name="stars"
|
name="stars"
|
||||||
label="Beta"
|
label="Beta"
|
||||||
class="size-4 text-theme-green"
|
class="size-4 text-brand-green"
|
||||||
></sl-icon>
|
></sl-icon>
|
||||||
</sl-tooltip>`;
|
</sl-tooltip>`;
|
||||||
}
|
}
|
||||||
@ -40,7 +40,7 @@ export class BetaBadge extends TailwindElement {
|
|||||||
"Parts might change or be broken. Please share your thoughts with us!",
|
"Parts might change or be broken. Please share your thoughts with us!",
|
||||||
)}
|
)}
|
||||||
</div>
|
</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
|
<sl-icon
|
||||||
name="stars"
|
name="stars"
|
||||||
label="Beta feature"
|
label="Beta feature"
|
||||||
|
@ -428,7 +428,7 @@ export class ConfigDetails extends LiteElement {
|
|||||||
const seedUrl = typeof seed === "string" ? seed : seed.url;
|
const seedUrl = typeof seed === "string" ? seed : seed.url;
|
||||||
return html`<li>
|
return html`<li>
|
||||||
<a
|
<a
|
||||||
class="text-primary hover:text-indigo-400"
|
class="text-primary hover:text-primary-400"
|
||||||
href="${seedUrl}"
|
href="${seedUrl}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
|
@ -90,8 +90,8 @@ export class NavigationButton extends TailwindElement {
|
|||||||
right: "justify-end",
|
right: "justify-end",
|
||||||
}[this.align],
|
}[this.align],
|
||||||
this.active
|
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)
|
.filter(Boolean)
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
|
@ -68,7 +68,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
|
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case "starting":
|
case "starting":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="dot"
|
name="dot"
|
||||||
library="app"
|
library="app"
|
||||||
@ -81,7 +81,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
|
|
||||||
case "waiting_capacity":
|
case "waiting_capacity":
|
||||||
case "waiting_org_limit":
|
case "waiting_org_limit":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="hourglass-split"
|
name="hourglass-split"
|
||||||
class="animatePulse"
|
class="animatePulse"
|
||||||
@ -107,7 +107,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case "stopping":
|
case "stopping":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="dot"
|
name="dot"
|
||||||
library="app"
|
library="app"
|
||||||
@ -119,7 +119,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case "pending-wait":
|
case "pending-wait":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="dot"
|
name="dot"
|
||||||
library="app"
|
library="app"
|
||||||
@ -131,7 +131,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case "generate-wacz":
|
case "generate-wacz":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="dot"
|
name="dot"
|
||||||
library="app"
|
library="app"
|
||||||
@ -143,7 +143,7 @@ export class CrawlStatus extends TailwindElement {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case "uploading-wacz":
|
case "uploading-wacz":
|
||||||
color = "var(--sl-color-purple-600)";
|
color = "var(--sl-color-violet-600)";
|
||||||
icon = html`<sl-icon
|
icon = html`<sl-icon
|
||||||
name="dot"
|
name="dot"
|
||||||
library="app"
|
library="app"
|
||||||
|
@ -172,7 +172,7 @@ export class SelectBrowserProfile extends LiteElement {
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href=${`${this.orgBasePath}/browser-profiles?new`}
|
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"
|
target="_blank"
|
||||||
@click=${(e: Event) => {
|
@click=${(e: Event) => {
|
||||||
const select = (e.target as HTMLElement).closest<SlSelect>(
|
const select = (e.target as HTMLElement).closest<SlSelect>(
|
||||||
|
@ -63,7 +63,7 @@ export class RequestVerify extends TailwindElement {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<span
|
<span
|
||||||
class="text-sm text-primary hover:text-indigo-400"
|
class="text-sm text-primary hover:text-primary-400"
|
||||||
role="button"
|
role="button"
|
||||||
?disabled=${this.isRequesting}
|
?disabled=${this.isRequesting}
|
||||||
@click=${this.requestVerification}
|
@click=${this.requestVerification}
|
||||||
|
@ -797,7 +797,7 @@ export class ArchivedItemDetail extends BtrixElement {
|
|||||||
new Date(this.item!.started).valueOf(),
|
new Date(this.item!.started).valueOf(),
|
||||||
)}`
|
)}`
|
||||||
: html`
|
: html`
|
||||||
<span class="text-purple-600">
|
<span class="text-violet-600">
|
||||||
<btrix-relative-duration
|
<btrix-relative-duration
|
||||||
value=${this.item!.started}
|
value=${this.item!.started}
|
||||||
unitCount="3"
|
unitCount="3"
|
||||||
@ -840,7 +840,7 @@ export class ArchivedItemDetail extends BtrixElement {
|
|||||||
? html`<span>,</span
|
? html`<span>,</span
|
||||||
><span
|
><span
|
||||||
class="tracking-tighter${this.isActive
|
class="tracking-tighter${this.isActive
|
||||||
? " text-purple-600"
|
? " text-violet-600"
|
||||||
: ""} font-mono"
|
: ""} font-mono"
|
||||||
>
|
>
|
||||||
${formatNumber(+this.item.stats.done)}
|
${formatNumber(+this.item.stats.done)}
|
||||||
@ -932,7 +932,7 @@ ${this.item?.description}
|
|||||||
({ id, name }) =>
|
({ id, name }) =>
|
||||||
html`<li class="mt-1">
|
html`<li class="mt-1">
|
||||||
<a
|
<a
|
||||||
class="text-primary hover:text-indigo-400"
|
class="text-primary hover:text-primary-400"
|
||||||
href=${`${this.navigate.orgBasePath}/collections/view/${id}`}
|
href=${`${this.navigate.orgBasePath}/collections/view/${id}`}
|
||||||
@click=${this.navigate.link}
|
@click=${this.navigate.link}
|
||||||
>${name}</a
|
>${name}</a
|
||||||
|
@ -75,7 +75,7 @@ export class BrowserProfilesNew extends BtrixElement {
|
|||||||
It is highly recommended to create dedicated accounts to use when
|
It is highly recommended to create dedicated accounts to use when
|
||||||
crawling. For details, refer to
|
crawling. For details, refer to
|
||||||
<a
|
<a
|
||||||
class="text-primary hover:text-indigo-400"
|
class="text-primary hover:text-primary-400"
|
||||||
href="/docs/user-guide/browser-profiles/"
|
href="/docs/user-guide/browser-profiles/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
|
@ -219,7 +219,7 @@ export class Dashboard extends LiteElement {
|
|||||||
value: metrics.workflowsQueuedCount,
|
value: metrics.workflowsQueuedCount,
|
||||||
singleLabel: msg("Crawl Workflow Waiting"),
|
singleLabel: msg("Crawl Workflow Waiting"),
|
||||||
pluralLabel: msg("Crawl Workflows Waiting"),
|
pluralLabel: msg("Crawl Workflows Waiting"),
|
||||||
iconProps: { name: "hourglass-split", color: "purple" },
|
iconProps: { name: "hourglass-split", color: "violet" },
|
||||||
})}
|
})}
|
||||||
${this.renderStat({
|
${this.renderStat({
|
||||||
value: metrics.pageCount,
|
value: metrics.pageCount,
|
||||||
|
@ -40,7 +40,7 @@
|
|||||||
--sl-color-primary-700: theme(colors.primary.700);
|
--sl-color-primary-700: theme(colors.primary.700);
|
||||||
--sl-color-primary-800: theme(colors.primary.800);
|
--sl-color-primary-800: theme(colors.primary.800);
|
||||||
--sl-color-primary-900: theme(colors.primary.900);
|
--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
|
* Typography
|
||||||
@ -138,6 +138,15 @@
|
|||||||
font-size: var(--sl-input-help-text-font-size-medium);
|
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 */
|
/* Elevate select and buttons */
|
||||||
sl-select::part(combobox),
|
sl-select::part(combobox),
|
||||||
sl-button:not([variant="text"])::part(base) {
|
sl-button:not([variant="text"])::part(base) {
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
const theme = require("@webrecorder/hickory/tokens/tailwind");
|
||||||
const { tailwindTransform } = require("postcss-lit");
|
const { tailwindTransform } = require("postcss-lit");
|
||||||
|
|
||||||
const attributes = require("./config/tailwind/plugins/attributes");
|
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 contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
|
||||||
const cssPartsPlugin = require("./config/tailwind/plugins/parts");
|
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']}
|
* @returns {import('tailwindcss').Config['theme']}
|
||||||
*/
|
*/
|
||||||
function makeTheme() {
|
function makeTheme() {
|
||||||
// Map color palettes:
|
|
||||||
const colors = [
|
|
||||||
"gray",
|
|
||||||
"red",
|
|
||||||
"yellow",
|
|
||||||
"green",
|
|
||||||
"blue",
|
|
||||||
"indigo",
|
|
||||||
"purple",
|
|
||||||
"pink",
|
|
||||||
"orange",
|
|
||||||
];
|
|
||||||
// Map color grading:
|
// Map color grading:
|
||||||
const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||||
|
|
||||||
@ -48,7 +19,7 @@ function makeTheme() {
|
|||||||
* @param {string} color
|
* @param {string} color
|
||||||
* @returns {Record<string, string>}
|
* @returns {Record<string, string>}
|
||||||
*/
|
*/
|
||||||
const makeColorPalette = (color) =>
|
const shoelaceColorPalette = (color) =>
|
||||||
colorGrades.reduce(
|
colorGrades.reduce(
|
||||||
/**
|
/**
|
||||||
* @param {Record<string, string>} acc
|
* @param {Record<string, string>} acc
|
||||||
@ -66,21 +37,35 @@ function makeTheme() {
|
|||||||
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
|
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
|
||||||
colors: {
|
colors: {
|
||||||
current: "currentColor",
|
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: {
|
neutral: {
|
||||||
...makeColorPalette("neutral"),
|
...shoelaceColorPalette("neutral"),
|
||||||
// Shoelace supports additional neutral variables:
|
// Shoelace supports additional neutral variables:
|
||||||
0: `var(--sl-color-neutral-0)`,
|
0: `var(--sl-color-neutral-0)`,
|
||||||
950: `var(--sl-color-neutral-950)`,
|
950: `var(--sl-color-neutral-950)`,
|
||||||
1000: `var(--sl-color-neutral-1000)`,
|
1000: `var(--sl-color-neutral-1000)`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
borderColor: {
|
||||||
|
DEFAULT: `var(--sl-panel-border-color)`,
|
||||||
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: `var(--sl-font-sans)`,
|
sans: `var(--sl-font-sans)`,
|
||||||
serif: `var(--sl-font-serif)`,
|
serif: `var(--sl-font-serif)`,
|
||||||
|
@ -3768,13 +3768,6 @@
|
|||||||
<trans-unit id="sadfb54de733655c9">
|
<trans-unit id="sadfb54de733655c9">
|
||||||
<source>Using proxy: </source>
|
<source>Using proxy: </source>
|
||||||
</trans-unit>
|
</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="<a class="text-primary hover:text-indigo-400" href="/docs/user-guide/browser-profiles/" target="_blank"> ${msg("browser profile best practices")}</a>" id="0"/>.
|
|
||||||
</source>
|
|
||||||
</trans-unit>
|
|
||||||
<trans-unit id="hda7aa624404fc0ed">
|
<trans-unit id="hda7aa624404fc0ed">
|
||||||
<source>Refer to our user guide on
|
<source>Refer to our user guide on
|
||||||
<x equiv-text="<a class="text-neutral-500 underline hover:text-primary" href="/docs/user-guide/org-settings/" target="_blank" rel="noopener">" id="0"/>org settings<x equiv-text="</a>" id="1"/>
|
<x equiv-text="<a class="text-neutral-500 underline hover:text-primary" href="/docs/user-guide/org-settings/" target="_blank" rel="noopener">" id="0"/>org settings<x equiv-text="</a>" id="1"/>
|
||||||
@ -3792,6 +3785,13 @@
|
|||||||
<trans-unit id="sfa66f095b5a35ccc">
|
<trans-unit id="sfa66f095b5a35ccc">
|
||||||
<source>Your language preference has been updated.</source>
|
<source>Your language preference has been updated.</source>
|
||||||
</trans-unit>
|
</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="<a class="text-primary hover:text-primary-400" href="/docs/user-guide/browser-profiles/" target="_blank"> ${msg("browser profile best practices")}</a>" id="0"/>.
|
||||||
|
</source>
|
||||||
|
</trans-unit>
|
||||||
</body>
|
</body>
|
||||||
</file>
|
</file>
|
||||||
</xliff>
|
</xliff>
|
||||||
|
@ -823,6 +823,11 @@
|
|||||||
"@babel/types" "^7.24.0"
|
"@babel/types" "^7.24.0"
|
||||||
semver "^7.5.2"
|
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":
|
"@import-maps/resolve@^1.0.1":
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.npmjs.org/@import-maps/resolve/-/resolve-1.0.1.tgz"
|
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"
|
resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1"
|
||||||
integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==
|
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":
|
"@xml-tools/parser@^1.0.11":
|
||||||
version "1.0.11"
|
version "1.0.11"
|
||||||
resolved "https://registry.yarnpkg.com/@xml-tools/parser/-/parser-1.0.11.tgz#a118a14099ea5c3c537e4781fad2fc195b57f8ff"
|
resolved "https://registry.yarnpkg.com/@xml-tools/parser/-/parser-1.0.11.tgz#a118a14099ea5c3c537e4781fad2fc195b57f8ff"
|
||||||
|
Loading…
Reference in New Issue
Block a user