mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 03:31:04 +01:00
db5f4106db
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com> - Animations – The close animation for sub-menus doesn't seem to play when the menu is expanded - Made it so sub menu's stay open when the menu is expanded and collapsed - Animations – The account menu seems to have a different tween animation to the rest of the menu. Causing it to do a weird thing when you collapse the menu while the account menu is open - Animations – The avatar suddenly jumps to the right when you collapse the menu - Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour. - Accessibility – Focus order is incorrect on the mobile version (it should be possible to move to the sidebar after having toggled it) - Try and fit more letters in to the sidebar menu items by reduce the padding / margin on the right side of the arrow, and reduce the gap between the icon and the text a tiny bit - Make it so when you have a menu open (e.g. Bakery misc) and you click the slim sidebar icon, the menu stays open as the menu gets slim. - Add a label to the sidebar’s `<aside>`
122 lines
3.1 KiB
JavaScript
122 lines
3.1 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
||
const vanillaRTL = require('tailwindcss-vanilla-rtl');
|
||
/**
|
||
* Design Tokens
|
||
*/
|
||
const colors = require('./src/tokens/colors');
|
||
const {
|
||
fontFamily,
|
||
fontSize,
|
||
fontWeight,
|
||
letterSpacing,
|
||
lineHeight,
|
||
typeScale,
|
||
} = require('./src/tokens/typography');
|
||
const { breakpoints } = require('./src/tokens/breakpoints');
|
||
const {
|
||
borderRadius,
|
||
borderWidth,
|
||
boxShadow,
|
||
} = require('./src/tokens/objectStyles');
|
||
const { spacing } = require('./src/tokens/spacing');
|
||
|
||
/**
|
||
* Plugins
|
||
*/
|
||
const scrollbarThin = require('./src/plugins/scrollbarThin');
|
||
|
||
/**
|
||
* Functions
|
||
* themeColors: For converting our design tokens into a format that tailwind accepts
|
||
*/
|
||
const themeColors = Object.fromEntries(
|
||
Object.entries(colors).map(([key, hues]) => {
|
||
const shades = Object.fromEntries(
|
||
Object.entries(hues).map(([k, shade]) => [k, shade.hex]),
|
||
);
|
||
return [key, shades];
|
||
}),
|
||
);
|
||
|
||
/**
|
||
* Root Tailwind config, reusable for other projects.
|
||
*/
|
||
module.exports = {
|
||
prefix: 'w-',
|
||
theme: {
|
||
screens: {
|
||
...breakpoints,
|
||
},
|
||
colors: {
|
||
...themeColors,
|
||
inherit: 'inherit',
|
||
current: 'currentColor',
|
||
transparent: 'transparent',
|
||
/* allow system colours https://www.w3.org/TR/css-color-4/#css-system-colors */
|
||
LinkText: 'LinkText',
|
||
ButtonText: 'ButtonText',
|
||
},
|
||
fontFamily,
|
||
fontSize,
|
||
fontWeight,
|
||
lineHeight,
|
||
letterSpacing,
|
||
borderRadius,
|
||
borderWidth,
|
||
boxShadow: {
|
||
...boxShadow,
|
||
none: 'none',
|
||
},
|
||
spacing,
|
||
extend: {
|
||
opacity: {
|
||
15: '0.15',
|
||
85: '0.85',
|
||
},
|
||
outlineOffset: {
|
||
inside: '-3px',
|
||
},
|
||
transitionProperty: {
|
||
sidebar:
|
||
'left, inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
typeScale,
|
||
vanillaRTL,
|
||
scrollbarThin,
|
||
/**
|
||
* forced-colors media query for Windows High-Contrast mode support
|
||
* See:
|
||
* - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
|
||
* - https://github.com/tailwindlabs/tailwindcss/blob/v3.0.23/src/corePlugins.js#L168-L171
|
||
*/
|
||
plugin(({ addVariant }) => {
|
||
addVariant('forced-colors', '@media (forced-colors: active)');
|
||
}),
|
||
/**
|
||
* TypeScale plugin.
|
||
* This plugin generates component classes using tailwind's theme values for each object inside of the typeScale configuration.
|
||
* We have the `w-` prefix added in the configuration for documentation purposes, it needs to be removed here before Tailwind adds it back.
|
||
*/
|
||
plugin(({ addComponents, theme }) => {
|
||
const scale = {};
|
||
Object.entries(typeScale).forEach(([name, styles]) => {
|
||
scale[`.${name.replace('w-', '')}`] = Object.fromEntries(
|
||
Object.entries(styles).map(([key, value]) => [key, theme(value)]),
|
||
);
|
||
});
|
||
addComponents(scale);
|
||
}),
|
||
],
|
||
corePlugins: {
|
||
...vanillaRTL.disabledCorePlugins,
|
||
// Disable float and clear which have poor RTL support.
|
||
float: false,
|
||
clear: false,
|
||
// Disable text-transform so we don’t rely on uppercasing text.
|
||
textTransform: false,
|
||
},
|
||
};
|