GitHub-Bitwarden
/
clients
mirror of https://github.com/bitwarden/clients.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Bitwarden client applications (web, browser extension, desktop, and cli)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19910 Commits
1220 Branches
572 Tags
1.1 GiB
 
 
 
 
 
Tag: web-v2025.11.5
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'web-v2025.11.5'
${ noResults }
clients/libs/components/tailwind.config.base.js

225 lines
6.5 KiB
Raw Permalink Blame History

/* 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}",
"../../libs/assets/src/**/*.{html,ts}",
"../../libs/components/src/**/*.{html,ts}",
"../../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"),
},
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"),
},
},
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"),
},
},
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"),
],
};