mirror of
https://github.com/bitwarden/browser
synced 2024-12-26 18:04:07 +01:00
d666d66886
* [EC-457] feat: initial version of icon button * [EC-457] feat: modify template and start adding inputs * [EC-457] feat: implement all styles * [EC-457] chore: cleanup * [EC-457] feat: fix hover styles after discussions * [EC-457] feat: add focus ring workaround * [EC-457] chore: refactor stories a bit * [EC-457] fix: button style attr name reserved word collision * [EC-356] feat: match padding with figma * [EC-457] feat: use icon button in banner * [EC-457] chore: cleanup css classes * [EC-457] feat: improve aria * [EC-457] feat: use icon button in dialog * [EC-457] fix: make focus and hover styles independent * [EC-457] fix: remove primary 500 border * [EC-457] chore: cleanup * [EC-457] chore: move css class to common list * [EC-457] fix: use focus-visible * [EC-457] chore: expand on workaround fix * [EC-457] fix: default sizing * [EC-457] fix: align trash icon right * [EC-457] fix: add missing aria labels * [EC-457] fix: add i18n service to banner tests * [EC-457] chore: rename size `default` to `button` * [EC-457] feat: double padding * [EC-457] feat: simplify sizes - update default * [EC-457] fix: revert selector fix - gonna create separate pr * [EC-457] chore: remove superfluous dependencies * [EC-457] fix: remove non-working onClose handler Removing this storybook action because we already test it as part of the dialog service stories. It requries mocking the dialogRef to capture the close function which makes this story more complex but adds very little value as we already test it elsewhere.
91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
/* eslint-disable */
|
|
const colors = require("tailwindcss/colors");
|
|
|
|
function rgba(color) {
|
|
return "rgb(var(" + color + ") / <alpha-value>)";
|
|
}
|
|
|
|
module.exports = {
|
|
prefix: "tw-",
|
|
content: ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"],
|
|
safelist: [],
|
|
corePlugins: { preflight: false },
|
|
theme: {
|
|
colors: {
|
|
transparent: {
|
|
DEFAULT: colors.transparent,
|
|
hover: "var(--color-transparent-hover)",
|
|
},
|
|
current: colors.current,
|
|
black: colors.black,
|
|
primary: {
|
|
300: rgba("--color-primary-300"),
|
|
500: rgba("--color-primary-500"),
|
|
700: rgba("--color-primary-700"),
|
|
},
|
|
secondary: {
|
|
100: rgba("--color-secondary-100"),
|
|
300: rgba("--color-secondary-300"),
|
|
500: rgba("--color-secondary-500"),
|
|
700: rgba("--color-secondary-700"),
|
|
},
|
|
success: {
|
|
500: rgba("--color-success-500"),
|
|
700: rgba("--color-success-700"),
|
|
},
|
|
danger: {
|
|
500: rgba("--color-danger-500"),
|
|
700: rgba("--color-danger-700"),
|
|
},
|
|
warning: {
|
|
500: rgba("--color-warning-500"),
|
|
700: rgba("--color-warning-700"),
|
|
},
|
|
info: {
|
|
500: rgba("--color-info-500"),
|
|
700: rgba("--color-info-700"),
|
|
},
|
|
text: {
|
|
main: rgba("--color-text-main"),
|
|
muted: rgba("--color-text-muted"),
|
|
contrast: rgba("--color-text-contrast"),
|
|
alt2: rgba("--color-text-alt2"),
|
|
},
|
|
background: {
|
|
DEFAULT: rgba("--color-background"),
|
|
alt: rgba("--color-background-alt"),
|
|
alt2: rgba("--color-background-alt2"),
|
|
},
|
|
},
|
|
textColor: {
|
|
main: rgba("--color-text-main"),
|
|
muted: rgba("--color-text-muted"),
|
|
contrast: rgba("--color-text-contrast"),
|
|
alt2: rgba("--color-text-alt2"),
|
|
success: rgba("--color-success-500"),
|
|
danger: rgba("--color-danger-500"),
|
|
warning: rgba("--color-warning-500"),
|
|
info: rgba("--color-info-500"),
|
|
primary: {
|
|
300: rgba("--color-primary-300"),
|
|
500: rgba("--color-primary-500"),
|
|
700: rgba("--color-primary-700"),
|
|
},
|
|
},
|
|
ringOffsetColor: ({ theme }) => ({
|
|
DEFAULT: theme("colors.background"),
|
|
...theme("colors"),
|
|
}),
|
|
extend: {
|
|
width: {
|
|
"50vw": "50vw",
|
|
"75vw": "75vw",
|
|
},
|
|
maxWidth: {
|
|
"90vw": "90vw",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|