73e20269ef
## General changes - Added `postcss-lit`, which allows us to use tailwind in lit elements with shadow DOMs - Added `// postcss-lit-disable-next-line` comments to most `` css`...` `` tagged templates so as not to change existing CSS in components - Added `TailwindElement`, which uses a single shared `CSSStyleSheet` across all instances to be able to access Tailwind without requiring a full copy of (compiled) Tailwind for every instance of a component that extends it - Added a new `<btrix-copy-field>` element, replacing the existing copy elements ## Org settings page - Stopped content from overflowing at medium widths - Made spacing consistent at both smaller and wider widths - Used readonly/monospace styling for copyable org id field - Updated tab shadows to be slightly blue, consistent with the tab background (also did this in other places tabs show up) Before | After -|-  |   |  ## Misc fixes - Used consistent single-line readonly/monospace styling for copyable url field Before | After -|-  |  - Removed inconsistent angled bottom borders from crawl workflow list header Before | After -|-  |  - Changes _all_ list page primary action buttons to use `variant="primary"` <img width="190" alt="Screenshot 2023-12-08 at 11 23 49 AM" src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/2b007f5e-e675-40b2-86a7-f0bf8ef83b81"> <img width="240" alt="Screenshot 2023-12-08 at 11 23 43 AM" src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/621b340e-2051-4ab0-8f42-8f0a51d8d3a5"> --------- Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics> Co-authored-by: sua yoo <sua@webrecorder.org> Co-authored-by: sua yoo <sua@suayoo.com>
140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
const { tailwindTransform } = require("postcss-lit");
|
|
const Color = require("color");
|
|
|
|
const PRIMARY_COLOR = "#4876ff";
|
|
const primaryColor = Color(PRIMARY_COLOR);
|
|
|
|
const primary = {
|
|
DEFAULT: PRIMARY_COLOR,
|
|
50: primaryColor.lighten(0.54).hex(),
|
|
100: primaryColor.lighten(0.5).hex(),
|
|
200: primaryColor.lighten(0.4).hex(),
|
|
300: primaryColor.lighten(0.3).hex(),
|
|
400: primaryColor.lighten(0.2).hex(),
|
|
500: primaryColor.lighten(0.1).hex(),
|
|
600: PRIMARY_COLOR,
|
|
700: primaryColor.darken(0.1).hex(),
|
|
800: primaryColor.darken(0.2).hex(),
|
|
900: primaryColor.darken(0.3).hex(),
|
|
950: primaryColor.darken(0.4).hex(),
|
|
};
|
|
|
|
/**
|
|
* Use Shoelace CSS variables in Tailwind theme for consistency
|
|
*
|
|
* 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",
|
|
];
|
|
// Map color grading:
|
|
const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
|
|
const makeColorPalette = (color) =>
|
|
colorGrades.reduce((acc, v) => ({
|
|
...acc,
|
|
[v]: `var(--sl-color-${color}-${v})`,
|
|
}));
|
|
|
|
return {
|
|
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
|
|
colors: {
|
|
current: "currentColor",
|
|
...colors.map(makeColorPalette),
|
|
primary,
|
|
success: `var(--success)`,
|
|
warning: `var(--warning)`,
|
|
danger: `var(--danger)`,
|
|
neutral: {
|
|
...makeColorPalette("neutral"),
|
|
// Shoelace supports additional neutral variables:
|
|
0: `var(--sl-color-neutral-0)`,
|
|
950: `var(--sl-color-neutral-950)`,
|
|
1000: `var(--sl-color-neutral-1000)`,
|
|
},
|
|
},
|
|
|
|
fontFamily: {
|
|
sans: `var(--sl-font-sans)`,
|
|
serif: `var(--sl-font-serif)`,
|
|
mono: `var(--sl-font-mono)`,
|
|
},
|
|
fontSize: {
|
|
xs: ["var(--sl-font-size-x-small)", { lineHeight: "1.33" }],
|
|
sm: ["var(--sl-font-size-small)", { lineHeight: "1.25rem" }],
|
|
// base: ["var(--sl-font-size-medium)", { lineHeight: "1.5" }],
|
|
lg: ["var(--sl-font-size-large)", { lineHeight: "1.6" }],
|
|
xl: ["var(--sl-font-size-x-large)", { lineHeight: "1.5" }],
|
|
"2xl": ["var(--sl-font-size-2x-large)", { lineHeight: "1.5" }],
|
|
"3xl": ["var(--sl-font-size-3x-large)", { lineHeight: "1" }],
|
|
"4xl": ["var(--sl-font-size-4x-large)", { lineHeight: "1" }],
|
|
},
|
|
fontWeight: {
|
|
light: "var(--sl-font-weight-light)",
|
|
normal: "var(--sl-font-weight-normal)",
|
|
medium: "var(--sl-font-weight-medium)",
|
|
semibold: "var(--sl-font-weight-semibold)",
|
|
bold: "var(--sl-font-weight-bold)",
|
|
},
|
|
borderRadius: {
|
|
sm: `var(--sl-border-radius-small)`,
|
|
DEFAULT: `var(--sl-border-radius-medium)`,
|
|
md: `var(--sl-border-radius-medium)`,
|
|
lg: `var(--sl-border-radius-large)`,
|
|
xl: `var(--sl-border-radius-x-large)`,
|
|
},
|
|
// TODO see if there's a way to use Shoelace's box shadows with customizable colors
|
|
// boxShadow: {
|
|
// sm: `var(--sl-shadow-small)`,
|
|
// DEFAULT: `var(--sl-shadow-medium)`,
|
|
// md: `var(--sl-shadow-medium)`,
|
|
// lg: `var(--sl-shadow-large)`,
|
|
// xl: `var(--sl-shadow-x-large)`,
|
|
// },
|
|
aspectRatio: {
|
|
"4/3": "4 / 3", // For Browsertrix watch/replay
|
|
},
|
|
screens: {
|
|
lg: "1124px",
|
|
// Override default of:
|
|
// => @media (min-width: 1024px) { ... }
|
|
},
|
|
transitionDuration: {
|
|
"x-slow": "var(--sl-transition-x-slow)",
|
|
slow: "var(--sl-transition-slow)",
|
|
medium: "var(--sl-transition-medium)",
|
|
fast: "var(--sl-transition-fast)",
|
|
"x-fast": "var(--sl-transition-x-fast)",
|
|
},
|
|
};
|
|
}
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
theme: {
|
|
extend: makeTheme(),
|
|
},
|
|
|
|
content: {
|
|
files: ["./src/**/*.html", "./src/**/*.{ts,js,ejs}"],
|
|
transform: {
|
|
ts: tailwindTransform,
|
|
},
|
|
},
|
|
|
|
extract: {
|
|
include: ["./src/**/*.{ts,js}"],
|
|
},
|
|
};
|