mirror of
https://github.com/bitwarden/browser
synced 2026-01-22 04:13:49 +00:00
2da44bb300
* add new color palette to theme and tailwind config * updated docs color names * remove safelist changes * add missing accent colors to docs * updated color mappings * combined docs in colors.mdx and reference in Claude.md * add variables for white and black * updated docs * updated list rendering style * more specific docs instructions * revert to simpler colors docs reference * remove changes to claude.md * use rgb color variables to compose semantic
375 lines
14 KiB
JavaScript
375 lines
14 KiB
JavaScript
/* eslint-disable */
|
|
const colors = require("tailwindcss/colors");
|
|
const plugin = require("tailwindcss/plugin");
|
|
|
|
function rgba(color) {
|
|
return "rgb(var(" + color + ") / <alpha-value>)";
|
|
}
|
|
|
|
module.exports = {
|
|
prefix: "tw-",
|
|
content: [
|
|
"./src/**/*.{html,ts,mdx}",
|
|
"../../libs/assets/src/**/*.{html,ts}",
|
|
"../../libs/components/src/**/*.{html,ts,mdx}",
|
|
"../../libs/key-management-ui/src/**/*.{html,ts}",
|
|
"../../libs/auth/src/**/*.{html,ts}",
|
|
],
|
|
safelist: [],
|
|
corePlugins: { preflight: false },
|
|
theme: {
|
|
colors: {
|
|
transparent: {
|
|
DEFAULT: colors.transparent,
|
|
hover: "var(--color-transparent-hover)",
|
|
},
|
|
current: colors.current,
|
|
black: colors.black,
|
|
shadow: rgba("--color-shadow"),
|
|
primary: {
|
|
100: rgba("--color-primary-100"),
|
|
300: rgba("--color-primary-300"),
|
|
500: rgba("--color-primary-500"),
|
|
600: rgba("--color-primary-600"),
|
|
700: rgba("--color-primary-700"),
|
|
},
|
|
secondary: {
|
|
100: rgba("--color-secondary-100"),
|
|
300: rgba("--color-secondary-300"),
|
|
500: rgba("--color-secondary-500"),
|
|
600: rgba("--color-secondary-600"),
|
|
700: rgba("--color-secondary-700"),
|
|
},
|
|
success: {
|
|
100: rgba("--color-success-100"),
|
|
600: rgba("--color-success-600"),
|
|
700: rgba("--color-success-700"),
|
|
},
|
|
danger: {
|
|
100: rgba("--color-danger-100"),
|
|
600: rgba("--color-danger-600"),
|
|
700: rgba("--color-danger-700"),
|
|
},
|
|
warning: {
|
|
100: rgba("--color-warning-100"),
|
|
600: rgba("--color-warning-600"),
|
|
700: rgba("--color-warning-700"),
|
|
},
|
|
info: {
|
|
100: rgba("--color-info-100"),
|
|
600: rgba("--color-info-600"),
|
|
700: rgba("--color-info-700"),
|
|
},
|
|
notification: {
|
|
100: rgba("--color-notification-100"),
|
|
600: rgba("--color-notification-600"),
|
|
},
|
|
text: {
|
|
main: rgba("--color-text-main"),
|
|
muted: rgba("--color-text-muted"),
|
|
contrast: rgba("--color-text-contrast"),
|
|
alt2: rgba("--color-text-alt2"),
|
|
code: rgba("--color-text-code"),
|
|
},
|
|
background: {
|
|
DEFAULT: rgba("--color-background"),
|
|
alt: rgba("--color-background-alt"),
|
|
alt2: rgba("--color-background-alt2"),
|
|
alt3: rgba("--color-background-alt3"),
|
|
alt4: rgba("--color-background-alt4"),
|
|
},
|
|
bg: {
|
|
white: "var(--color-bg-white)",
|
|
dark: "var(--color-bg-dark)",
|
|
contrast: "var(--color-bg-contrast)",
|
|
"contrast-strong": "var(--color-bg-contrast-strong)",
|
|
primary: "var(--color-bg-primary)",
|
|
secondary: "var(--color-bg-secondary)",
|
|
tertiary: "var(--color-bg-tertiary)",
|
|
quaternary: "var(--color-bg-quaternary)",
|
|
gray: "var(--color-bg-gray)",
|
|
disabled: "var(--color-bg-disabled)",
|
|
"brand-softer": "var(--color-bg-brand-softer)",
|
|
"brand-soft": "var(--color-bg-brand-soft)",
|
|
"brand-medium": "var(--color-bg-brand-medium)",
|
|
brand: "var(--color-bg-brand)",
|
|
"brand-strong": "var(--color-bg-brand-strong)",
|
|
"success-soft": "var(--color-bg-success-soft)",
|
|
"success-medium": "var(--color-bg-success-medium)",
|
|
success: "var(--color-bg-success)",
|
|
"success-strong": "var(--color-bg-success-strong)",
|
|
"danger-soft": "var(--color-bg-danger-soft)",
|
|
"danger-medium": "var(--color-bg-danger-medium)",
|
|
danger: "var(--color-bg-danger)",
|
|
"danger-strong": "var(--color-bg-danger-strong)",
|
|
"warning-soft": "var(--color-bg-warning-soft)",
|
|
"warning-medium": "var(--color-bg-warning-medium)",
|
|
warning: "var(--color-bg-warning)",
|
|
"warning-strong": "var(--color-bg-warning-strong)",
|
|
"accent-primary-soft": "var(--color-bg-accent-primary-soft)",
|
|
"accent-primary-medium": "var(--color-bg-accent-primary-medium)",
|
|
"accent-primary": "var(--color-bg-accent-primary)",
|
|
"accent-secondary-soft": "var(--color-bg-accent-secondary-soft)",
|
|
"accent-secondary-medium": "var(--color-bg-accent-secondary-medium)",
|
|
"accent-secondary": "var(--color-bg-accent-secondary)",
|
|
"accent-tertiary-soft": "var(--color-bg-accent-tertiary-soft)",
|
|
"accent-tertiary-medium": "var(--color-bg-accent-tertiary-medium)",
|
|
"accent-tertiary": "var(--color-bg-accent-tertiary)",
|
|
hover: "var(--color-bg-hover)",
|
|
overlay: "var(--color-bg-overlay)",
|
|
},
|
|
hover: {
|
|
default: "var(--color-hover-default)",
|
|
contrast: "var(--color-hover-contrast)",
|
|
},
|
|
"marketing-logo": rgba("--color-marketing-logo"),
|
|
"bw-blue": rgba("--color-bw-blue"),
|
|
illustration: {
|
|
outline: rgba("--color-illustration-outline"),
|
|
"bg-primary": rgba("--color-illustration-bg-primary"),
|
|
"bg-secondary": rgba("--color-illustration-bg-secondary"),
|
|
"bg-tertiary": rgba("--color-illustration-bg-tertiary"),
|
|
tertiary: rgba("--color-illustration-tertiary"),
|
|
logo: rgba("--color-illustration-logo"),
|
|
},
|
|
fg: {
|
|
white: "var(--color-fg-white)",
|
|
dark: "var(--color-fg-dark)",
|
|
contrast: "var(--color-fg-contrast)",
|
|
heading: "var(--color-fg-heading)",
|
|
body: "var(--color-fg-body)",
|
|
"body-subtle": "var(--color-fg-body-subtle)",
|
|
disabled: "var(--color-fg-disabled)",
|
|
"brand-soft": "var(--color-fg-brand-soft)",
|
|
brand: "var(--color-fg-brand)",
|
|
"brand-strong": "var(--color-fg-brand-strong)",
|
|
success: "var(--color-fg-success)",
|
|
"success-strong": "var(--color-fg-success-strong)",
|
|
danger: "var(--color-fg-danger)",
|
|
"danger-strong": "var(--color-fg-danger-strong)",
|
|
warning: "var(--color-fg-warning)",
|
|
"warning-strong": "var(--color-fg-warning-strong)",
|
|
sensitive: "var(--color-fg-sensitive)",
|
|
"accent-primary-soft": "var(--color-fg-accent-primary-soft)",
|
|
"accent-primary": "var(--color-fg-accent-primary)",
|
|
"accent-primary-strong": "var(--color-fg-accent-primary-strong)",
|
|
"accent-secondary-soft": "var(--color-fg-accent-secondary-soft)",
|
|
"accent-secondary": "var(--color-fg-accent-secondary)",
|
|
"accent-secondary-strong": "var(--color-fg-accent-secondary-strong)",
|
|
"accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)",
|
|
"accent-tertiary": "var(--color-fg-accent-tertiary)",
|
|
"accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)",
|
|
},
|
|
border: {
|
|
muted: "var(--color-border-muted)",
|
|
light: "var(--color-border-light)",
|
|
base: "var(--color-border-base)",
|
|
strong: "var(--color-border-strong)",
|
|
buffer: "var(--color-border-buffer)",
|
|
"brand-soft": "var(--color-border-brand-soft)",
|
|
brand: "var(--color-border-brand)",
|
|
"brand-strong": "var(--color-border-brand-strong)",
|
|
"success-soft": "var(--color-border-success-soft)",
|
|
success: "var(--color-border-success)",
|
|
"success-strong": "var(--color-border-success-strong)",
|
|
"danger-soft": "var(--color-border-danger-soft)",
|
|
danger: "var(--color-border-danger)",
|
|
"danger-strong": "var(--color-border-danger-strong)",
|
|
"warning-soft": "var(--color-border-warning-soft)",
|
|
warning: "var(--color-border-warning)",
|
|
"warning-strong": "var(--color-border-warning-strong)",
|
|
"accent-primary-soft": "var(--color-border-accent-primary-soft)",
|
|
"accent-primary": "var(--color-border-accent-primary)",
|
|
"accent-secondary-soft": "var(--color-border-accent-secondary-soft)",
|
|
"accent-secondary": "var(--color-border-accent-secondary)",
|
|
"accent-tertiary-soft": "var(--color-border-accent-tertiary-soft)",
|
|
"accent-tertiary": "var(--color-border-accent-tertiary)",
|
|
focus: "var(--color-border-focus)",
|
|
},
|
|
},
|
|
textColor: () => ({
|
|
main: rgba("--color-text-main"),
|
|
muted: rgba("--color-text-muted"),
|
|
contrast: rgba("--color-text-contrast"),
|
|
alt2: rgba("--color-text-alt2"),
|
|
code: rgba("--color-text-code"),
|
|
black: colors.black,
|
|
success: {
|
|
DEFAULT: rgba("--color-success-600"),
|
|
600: rgba("--color-success-600"),
|
|
700: rgba("--color-success-700"),
|
|
},
|
|
danger: {
|
|
DEFAULT: rgba("--color-danger-600"),
|
|
600: rgba("--color-danger-600"),
|
|
700: rgba("--color-danger-700"),
|
|
},
|
|
warning: {
|
|
DEFAULT: rgba("--color-warning-600"),
|
|
600: rgba("--color-warning-600"),
|
|
700: rgba("--color-warning-700"),
|
|
},
|
|
info: {
|
|
DEFAULT: rgba("--color-info-600"),
|
|
600: rgba("--color-info-600"),
|
|
700: rgba("--color-info-700"),
|
|
},
|
|
primary: {
|
|
300: rgba("--color-primary-300"),
|
|
600: rgba("--color-primary-600"),
|
|
700: rgba("--color-primary-700"),
|
|
},
|
|
secondary: {
|
|
300: rgba("--color-secondary-300"),
|
|
700: rgba("--color-secondary-700"),
|
|
},
|
|
notification: {
|
|
600: rgba("--color-notification-600"),
|
|
},
|
|
// New semantic fg tokens - manually flattened to generate tw-text-fg-* utilities
|
|
"fg-white": "var(--color-fg-white)",
|
|
"fg-dark": "var(--color-fg-dark)",
|
|
"fg-contrast": "var(--color-fg-contrast)",
|
|
"fg-heading": "var(--color-fg-heading)",
|
|
"fg-body": "var(--color-fg-body)",
|
|
"fg-body-subtle": "var(--color-fg-body-subtle)",
|
|
"fg-disabled": "var(--color-fg-disabled)",
|
|
"fg-brand-soft": "var(--color-fg-brand-soft)",
|
|
"fg-brand": "var(--color-fg-brand)",
|
|
"fg-brand-strong": "var(--color-fg-brand-strong)",
|
|
"fg-success": "var(--color-fg-success)",
|
|
"fg-success-strong": "var(--color-fg-success-strong)",
|
|
"fg-danger": "var(--color-fg-danger)",
|
|
"fg-danger-strong": "var(--color-fg-danger-strong)",
|
|
"fg-warning": "var(--color-fg-warning)",
|
|
"fg-warning-strong": "var(--color-fg-warning-strong)",
|
|
"fg-sensitive": "var(--color-fg-sensitive)",
|
|
"fg-accent-primary-soft": "var(--color-fg-accent-primary-soft)",
|
|
"fg-accent-primary": "var(--color-fg-accent-primary)",
|
|
"fg-accent-primary-strong": "var(--color-fg-accent-primary-strong)",
|
|
"fg-accent-secondary-soft": "var(--color-fg-accent-secondary-soft)",
|
|
"fg-accent-secondary": "var(--color-fg-accent-secondary)",
|
|
"fg-accent-secondary-strong": "var(--color-fg-accent-secondary-strong)",
|
|
"fg-accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)",
|
|
"fg-accent-tertiary": "var(--color-fg-accent-tertiary)",
|
|
"fg-accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)",
|
|
}),
|
|
borderColor: ({ theme }) => ({
|
|
...theme("colors"),
|
|
// New semantic border tokens - manually flattened to generate tw-border-border-* utilities
|
|
"border-muted": "var(--color-border-muted)",
|
|
"border-light": "var(--color-border-light)",
|
|
"border-base": "var(--color-border-base)",
|
|
"border-strong": "var(--color-border-strong)",
|
|
"border-buffer": "var(--color-border-buffer)",
|
|
"border-brand-soft": "var(--color-border-brand-soft)",
|
|
"border-brand": "var(--color-border-brand)",
|
|
"border-brand-strong": "var(--color-border-brand-strong)",
|
|
"border-success-soft": "var(--color-border-success-soft)",
|
|
"border-success": "var(--color-border-success)",
|
|
"border-success-strong": "var(--color-border-success-strong)",
|
|
"border-danger-soft": "var(--color-border-danger-soft)",
|
|
"border-danger": "var(--color-border-danger)",
|
|
"border-danger-strong": "var(--color-border-danger-strong)",
|
|
"border-warning-soft": "var(--color-border-warning-soft)",
|
|
"border-warning": "var(--color-border-warning)",
|
|
"border-warning-strong": "var(--color-border-warning-strong)",
|
|
"border-accent-primary-soft": "var(--color-border-accent-primary-soft)",
|
|
"border-accent-primary": "var(--color-border-accent-primary)",
|
|
"border-accent-secondary-soft": "var(--color-border-accent-secondary-soft)",
|
|
"border-accent-secondary": "var(--color-border-accent-secondary)",
|
|
"border-accent-tertiary-soft": "var(--color-border-accent-tertiary-soft)",
|
|
"border-accent-tertiary": "var(--color-border-accent-tertiary)",
|
|
"border-focus": "var(--color-border-focus)",
|
|
}),
|
|
fontFamily: {
|
|
sans: "var(--font-sans)",
|
|
serif: "var(--font-serif)",
|
|
mono: "var(--font-mono)",
|
|
},
|
|
ringOffsetColor: ({ theme }) => ({
|
|
DEFAULT: theme("colors.background"),
|
|
...theme("colors"),
|
|
}),
|
|
extend: {
|
|
width: {
|
|
"50vw": "50vw",
|
|
"75vw": "75vw",
|
|
},
|
|
minWidth: {
|
|
52: "13rem",
|
|
},
|
|
maxWidth: ({ theme }) => ({
|
|
...theme("width"),
|
|
"90vw": "90vw",
|
|
}),
|
|
fontSize: {
|
|
"3xl": ["1.875rem", "150%"],
|
|
"2xl": ["1.5rem", "150%"],
|
|
xl: ["1.25rem", "150%"],
|
|
lg: ["1.125rem", "150%"],
|
|
md: ["1rem", "150%"],
|
|
base: ["1rem", "150%"],
|
|
sm: ["0.875rem", "150%"],
|
|
xs: [".75rem", "150%"],
|
|
},
|
|
container: {
|
|
"@5xl": "1100px",
|
|
},
|
|
keyframes: {
|
|
slideUp: {
|
|
"0%": { opacity: "0", transform: "translateY(50px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
slideDown: {
|
|
"0%": { opacity: "0", transform: "translateY(-50px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
},
|
|
animation: {
|
|
"slide-up": "slideUp 0.3s ease-out",
|
|
"slide-down": "slideDown 0.3s ease-out",
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
|
|
matchUtilities(
|
|
{
|
|
"mask-image": (value) => ({
|
|
"-webkit-mask-image": value,
|
|
"mask-image": value,
|
|
}),
|
|
"mask-position": (value) => ({
|
|
"-webkit-mask-position": value,
|
|
"mask-position": value,
|
|
}),
|
|
"mask-repeat": (value) => ({
|
|
"-webkit-mask-repeat": value,
|
|
"mask-repeat": value,
|
|
}),
|
|
},
|
|
{},
|
|
);
|
|
}),
|
|
plugin(function ({ addVariant }) {
|
|
for (const state of [
|
|
"active",
|
|
"hover",
|
|
"focus",
|
|
"focus-within",
|
|
"focus-visible",
|
|
"target",
|
|
"visited",
|
|
]) {
|
|
addVariant(state, [`&:${state}`, `&.test-${state}`]);
|
|
}
|
|
}),
|
|
/** Plugin for compact mode */
|
|
plugin(function ({ addVariant }) {
|
|
addVariant("bit-compact", ".bit-compact &");
|
|
}),
|
|
require("@tailwindcss/container-queries"),
|
|
],
|
|
};
|