diff --git a/packages/fxa-react/configs/tailwind.js b/packages/fxa-react/configs/tailwind.js index 803a11de71..7a2e005736 100644 --- a/packages/fxa-react/configs/tailwind.js +++ b/packages/fxa-react/configs/tailwind.js @@ -96,6 +96,10 @@ module.exports = { listStyleType: { circle: 'circle', }, + transitionDelay: { + 1200: '1200ms', + 1500: '1500ms', + }, }, screens: { mobileLandscape: '480px', @@ -272,6 +276,22 @@ module.exports = { }, }, plugins: [ + // this gives us the same classes as delay-* (for transition), + // but for animation-delay-* instead + plugin(({ matchUtilities, theme }) => { + matchUtilities( + { + 'animation-delay': (value) => { + return { + 'animation-delay': value, + }; + }, + }, + { + values: theme('transitionDelay'), + } + ); + }), plugin(function ({ addUtilities }) { const customUtilities = { '.clip-auto': { diff --git a/packages/fxa-settings/README.md b/packages/fxa-settings/README.md index dc416fb9f5..28049f4e63 100644 --- a/packages/fxa-settings/README.md +++ b/packages/fxa-settings/README.md @@ -491,6 +491,30 @@ background-image: url('/path-to-image.svg'); To use a background-image with Tailwind, you'll need to add a class to the `backgroundImage` object in the Tailwind config file. Check config files for examples. +#### Animated SVGs + +Since SVGs are just XML, we can add styles and classes to them to animate them with CSS. This has been shown to increase user engagement and our animated SVGs respect `prefers-reduced-motion` if users don't wish to see animations. + +UX should give a brief description of what they're visualizing. When possible and agreeable with UX, for best a11y practices, try to keep animations at 5 seconds and under, try to only use "infinite" animations on small movements, and consider pushing back against very large movement animations. + +##### Developing + +**Note that our CSP prevents global `