35d0787211
* feat(ViewportActionBar): OHIF issue #3123 (#3186) * feat(ViewportActionBar): OHIF issue #3123 - Renamed previous viewport action bar to be LegacyViewportActionBar - Components LegacyViewportActionBar depends on also renamed: LegacyCinePlayer and LegacyPatientInfo - New Viewport coded to specs in issue - added React hook useResizeObserver - added some tailwind classes * Updated tailwind to 3.2.7. Put external imports like React at the top of the import list. * feat(CinePlayer and ViewportActionBar) (#3198) * feat(CinePlayer and ViewportActionBar) - OHIF issue 3123 - new look cine control implemented - new custom blue color in tailwind config for various hover backgrounds in the cine control - new icons added for cine - Tooltip component now can be placed top (center) on hover - Tooltip component border colour now consistent with specs - fixed NPE in ViewportActionBar - upgraded tailwind to 3.2.7 in platform/ui - fixed issues in various button components brought by tailwind 3.2.7 where classes now need important flag - fixed issue with InputRange component so that the tracked value property can change externally - InputRange component can now optionally show its label - added new measurement tracking state service to hydrate SR without prompting - segmentation can also now be hydrated without prompting * PR feedback: - cine centralized to OHIFCornerstoneViewport - introduced a type for the CinePlayer properties * Addressed PR comments and concerns... The DOM ref for the root component of the ViewportActionBar is now added to state so that the various callbacks and ResizeObserver are updated with it. The CinePlayer FPS slider tooltip was moved up so that its arrow does not intersect the FPS text. The hover area for the CinePlayer slider tooltip is now the FPS < > buttons and text. The tracked measurements are now filtered to only include those of the active viewport series when the tracked measurement navigation arrows are used. * Addressed PR comments... The update to tailwind 3.2.7 caused several look-and-feel, UI regressions, so we are rolling back to 3.2.4.
840 lines
19 KiB
JavaScript
840 lines
19 KiB
JavaScript
module.exports = {
|
|
prefix: '',
|
|
separator: ':',
|
|
content: [
|
|
'./docs/**/*.jsx',
|
|
'./docs/**/*.mdx',
|
|
'./node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
|
|
'../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
|
|
],
|
|
theme: {
|
|
screens: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
},
|
|
colors: {
|
|
overlay: 'rgba(0, 0, 0, 0.8)',
|
|
transparent: 'transparent',
|
|
black: '#000',
|
|
white: '#fff',
|
|
initial: 'initial',
|
|
inherit: 'inherit',
|
|
|
|
indigo: {
|
|
dark: '#0b1a42',
|
|
},
|
|
aqua: {
|
|
pale: '#7bb2ce',
|
|
},
|
|
|
|
primary: {
|
|
light: '#5acce6',
|
|
main: '#0944b3',
|
|
dark: '#090c29',
|
|
active: '#348cfd',
|
|
},
|
|
|
|
secondary: {
|
|
light: '#3a3f99',
|
|
main: '#2b166b',
|
|
dark: '#041c4a',
|
|
active: '#1f1f27',
|
|
},
|
|
|
|
common: {
|
|
bright: '#e1e1e1',
|
|
light: '#a19fad',
|
|
main: '#fff',
|
|
dark: '#726f7e',
|
|
active: '#2c3074',
|
|
},
|
|
|
|
customgreen: {
|
|
100: '#05D97C',
|
|
200: '#0FD97C',
|
|
},
|
|
|
|
customblue: {
|
|
100: '#c4fdff',
|
|
200: '#38daff',
|
|
300: '#1D204D',
|
|
},
|
|
|
|
customgray: {
|
|
100: '#262943',
|
|
},
|
|
|
|
gray: {
|
|
100: '#f7fafc',
|
|
200: '#edf2f7',
|
|
300: '#e2e8f0',
|
|
400: '#cbd5e0',
|
|
500: '#a0aec0',
|
|
600: '#718096',
|
|
700: '#4a5568',
|
|
800: '#2d3748',
|
|
900: '#1a202c',
|
|
},
|
|
red: {
|
|
100: '#fff5f5',
|
|
200: '#fed7d7',
|
|
300: '#feb2b2',
|
|
400: '#fc8181',
|
|
500: '#f56565',
|
|
600: '#e53e3e',
|
|
700: '#c53030',
|
|
800: '#9b2c2c',
|
|
900: '#742a2a',
|
|
},
|
|
orange: {
|
|
100: '#fffaf0',
|
|
200: '#feebc8',
|
|
300: '#fbd38d',
|
|
400: '#f6ad55',
|
|
500: '#ed8936',
|
|
600: '#dd6b20',
|
|
700: '#c05621',
|
|
800: '#9c4221',
|
|
900: '#7b341e',
|
|
},
|
|
yellow: {
|
|
100: '#fffff0',
|
|
200: '#fefcbf',
|
|
300: '#faf089',
|
|
400: '#f6e05e',
|
|
500: '#ecc94b',
|
|
600: '#d69e2e',
|
|
700: '#b7791f',
|
|
800: '#975a16',
|
|
900: '#744210',
|
|
},
|
|
green: {
|
|
100: '#f0fff4',
|
|
200: '#c6f6d5',
|
|
300: '#9ae6b4',
|
|
400: '#68d391',
|
|
500: '#48bb78',
|
|
600: '#38a169',
|
|
700: '#2f855a',
|
|
800: '#276749',
|
|
900: '#22543d',
|
|
},
|
|
teal: {
|
|
100: '#e6fffa',
|
|
200: '#b2f5ea',
|
|
300: '#81e6d9',
|
|
400: '#4fd1c5',
|
|
500: '#38b2ac',
|
|
600: '#319795',
|
|
700: '#2c7a7b',
|
|
800: '#285e61',
|
|
900: '#234e52',
|
|
},
|
|
blue: {
|
|
100: '#ebf8ff',
|
|
200: '#bee3f8',
|
|
300: '#90cdf4',
|
|
400: '#63b3ed',
|
|
500: '#4299e1',
|
|
600: '#3182ce',
|
|
700: '#2b6cb0',
|
|
800: '#2c5282',
|
|
900: '#2a4365',
|
|
},
|
|
indigo: {
|
|
100: '#ebf4ff',
|
|
200: '#c3dafe',
|
|
300: '#a3bffa',
|
|
400: '#7f9cf5',
|
|
500: '#667eea',
|
|
600: '#5a67d8',
|
|
700: '#4c51bf',
|
|
800: '#434190',
|
|
900: '#3c366b',
|
|
},
|
|
purple: {
|
|
100: '#faf5ff',
|
|
200: '#e9d8fd',
|
|
300: '#d6bcfa',
|
|
400: '#b794f4',
|
|
500: '#9f7aea',
|
|
600: '#805ad5',
|
|
700: '#6b46c1',
|
|
800: '#553c9a',
|
|
900: '#44337a',
|
|
},
|
|
pink: {
|
|
100: '#fff5f7',
|
|
200: '#fed7e2',
|
|
300: '#fbb6ce',
|
|
400: '#f687b3',
|
|
500: '#ed64a6',
|
|
600: '#d53f8c',
|
|
700: '#b83280',
|
|
800: '#97266d',
|
|
900: '#702459',
|
|
},
|
|
},
|
|
spacing: {
|
|
px: '1px',
|
|
'0': '0',
|
|
'1': '0.15rem',
|
|
'2': '0.5rem',
|
|
'3': '0.75rem',
|
|
'4': '1rem',
|
|
'5': '1.25rem',
|
|
'6': '1.5rem',
|
|
'8': '2rem',
|
|
'10': '2.5rem',
|
|
'12': '3rem',
|
|
'14': '3.5rem',
|
|
'16': '4rem',
|
|
'18': '4.5rem',
|
|
'20': '5rem',
|
|
'24': '6rem',
|
|
'32': '8rem',
|
|
'40': '10rem',
|
|
'48': '12rem',
|
|
'56': '14rem',
|
|
'64': '16rem',
|
|
'72': '18rem',
|
|
'80': '20rem',
|
|
'88': '22rem',
|
|
'96': '24rem',
|
|
'104': '26rem',
|
|
'112': '28rem',
|
|
'250px': '250px',
|
|
},
|
|
backgroundColor: theme => theme('colors'),
|
|
backgroundPosition: {
|
|
bottom: 'bottom',
|
|
center: 'center',
|
|
left: 'left',
|
|
'left-bottom': 'left bottom',
|
|
'left-top': 'left top',
|
|
right: 'right',
|
|
'right-bottom': 'right bottom',
|
|
'right-top': 'right top',
|
|
top: 'top',
|
|
},
|
|
backgroundSize: {
|
|
auto: 'auto',
|
|
cover: 'cover',
|
|
contain: 'contain',
|
|
},
|
|
borderColor: theme => ({
|
|
...theme('colors'),
|
|
DEFAULT: theme('colors.gray.300', 'currentColor'),
|
|
}),
|
|
borderRadius: {
|
|
none: '0',
|
|
sm: '0.125rem',
|
|
DEFAULT: '0.25rem',
|
|
md: '0.375rem',
|
|
lg: '0.5rem',
|
|
full: '9999px',
|
|
},
|
|
borderWidth: {
|
|
DEFAULT: '1px',
|
|
'0': '0',
|
|
'2': '2px',
|
|
'4': '4px',
|
|
'8': '8px',
|
|
},
|
|
boxShadow: {
|
|
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
DEFAULT:
|
|
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
md:
|
|
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
lg:
|
|
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
xl:
|
|
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
|
|
none: 'none',
|
|
},
|
|
container: {},
|
|
cursor: {
|
|
auto: 'auto',
|
|
default: 'default',
|
|
pointer: 'pointer',
|
|
wait: 'wait',
|
|
text: 'text',
|
|
move: 'move',
|
|
'not-allowed': 'not-allowed',
|
|
},
|
|
fill: {
|
|
current: 'currentColor',
|
|
},
|
|
flex: {
|
|
'1': '1 1 0%',
|
|
'0.3': '0.3 0.3 0%',
|
|
'0.5': '0.5 0.5 0%',
|
|
auto: '1 1 auto',
|
|
initial: '0 1 auto',
|
|
none: 'none',
|
|
},
|
|
flexGrow: {
|
|
'0': '0',
|
|
DEFAULT: '1',
|
|
},
|
|
flexShrink: {
|
|
'0': '0',
|
|
DEFAULT: '1',
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'"Noto Sans"',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
'"Noto Color Emoji"',
|
|
],
|
|
serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
|
|
mono: [
|
|
'Menlo',
|
|
'Monaco',
|
|
'Consolas',
|
|
'"Liberation Mono"',
|
|
'"Courier New"',
|
|
'monospace',
|
|
],
|
|
},
|
|
fontSize: {
|
|
xs: '0.65rem',
|
|
sm: '0.75rem',
|
|
base: '0.875rem',
|
|
lg: '1rem',
|
|
xl: '1.25rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '1.875rem',
|
|
'4xl': '2.25rem',
|
|
'5xl': '3rem',
|
|
'6xl': '4rem',
|
|
},
|
|
fontWeight: {
|
|
hairline: '100',
|
|
thin: '200',
|
|
light: '300',
|
|
normal: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
extrabold: '800',
|
|
black: '900',
|
|
},
|
|
height: theme => ({
|
|
auto: 'auto',
|
|
...theme('spacing'),
|
|
full: '100%',
|
|
screen: '100vh',
|
|
}),
|
|
inset: theme => ({
|
|
...theme('spacing'),
|
|
'0': '0',
|
|
auto: 'auto',
|
|
full: '100%',
|
|
viewport: '0.5rem',
|
|
'1/2': '50%',
|
|
'viewport-scrollbar': '1.3rem',
|
|
}),
|
|
letterSpacing: {
|
|
tighter: '-0.05em',
|
|
tight: '-0.025em',
|
|
normal: '0',
|
|
wide: '0.025em',
|
|
wider: '0.05em',
|
|
widest: '0.1em',
|
|
},
|
|
lineHeight: {
|
|
none: '1',
|
|
tight: '1.25',
|
|
snug: '1.375',
|
|
normal: '1.5',
|
|
relaxed: '1.625',
|
|
loose: '2',
|
|
'3': '.75rem',
|
|
'4': '1rem',
|
|
'5': '1.25rem',
|
|
'6': '1.5rem',
|
|
'7': '1.75rem',
|
|
'8': '2rem',
|
|
'9': '2.25rem',
|
|
'10': '2.5rem',
|
|
},
|
|
listStyleType: {
|
|
none: 'none',
|
|
disc: 'disc',
|
|
decimal: 'decimal',
|
|
},
|
|
margin: (theme, { negative }) => ({
|
|
auto: 'auto',
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
}),
|
|
maxHeight: theme => ({
|
|
full: '100%',
|
|
screen: '100vh',
|
|
...theme('spacing'),
|
|
}),
|
|
maxWidth: (theme, { breakpoints }) => ({
|
|
none: 'none',
|
|
xs: '20rem',
|
|
sm: '24rem',
|
|
md: '28rem',
|
|
lg: '32rem',
|
|
xl: '36rem',
|
|
'2xl': '42rem',
|
|
'3xl': '48rem',
|
|
'4xl': '56rem',
|
|
'5xl': '64rem',
|
|
'6xl': '72rem',
|
|
full: '100%',
|
|
...breakpoints(theme('screens')),
|
|
...theme('spacing'),
|
|
}),
|
|
minHeight: theme => ({
|
|
...theme('spacing'),
|
|
'0': '0',
|
|
full: '100%',
|
|
screen: '100vh',
|
|
}),
|
|
minWidth: theme => ({
|
|
...theme('spacing'),
|
|
'0': '0',
|
|
xs: '2rem',
|
|
sm: '4rem',
|
|
md: '6rem',
|
|
lg: '8rem',
|
|
xl: '10rem',
|
|
full: '100%',
|
|
}),
|
|
objectPosition: {
|
|
bottom: 'bottom',
|
|
center: 'center',
|
|
left: 'left',
|
|
'left-bottom': 'left bottom',
|
|
'left-top': 'left top',
|
|
right: 'right',
|
|
'right-bottom': 'right bottom',
|
|
'right-top': 'right top',
|
|
top: 'top',
|
|
},
|
|
opacity: {
|
|
'0': '0',
|
|
'5': '.5',
|
|
'10': '.10',
|
|
'15': '.15',
|
|
'20': '.20',
|
|
'25': '.25',
|
|
'30': '.30',
|
|
'35': '.35',
|
|
'40': '.40',
|
|
'45': '.45',
|
|
'50': '.50',
|
|
'55': '.55',
|
|
'60': '.60',
|
|
'65': '.65',
|
|
'70': '.70',
|
|
'75': '.75',
|
|
'80': '.80',
|
|
'85': '.85',
|
|
'90': '.90',
|
|
'95': '.95',
|
|
'100': '1',
|
|
},
|
|
order: {
|
|
first: '-9999',
|
|
last: '9999',
|
|
none: '0',
|
|
'1': '1',
|
|
'2': '2',
|
|
'3': '3',
|
|
'4': '4',
|
|
'5': '5',
|
|
'6': '6',
|
|
'7': '7',
|
|
'8': '8',
|
|
'9': '9',
|
|
'10': '10',
|
|
'11': '11',
|
|
'12': '12',
|
|
},
|
|
padding: theme => theme('spacing'),
|
|
placeholderColor: theme => theme('colors'),
|
|
stroke: theme => ({
|
|
...theme('colors'),
|
|
current: 'currentColor',
|
|
}),
|
|
strokeWidth: {
|
|
'0': '0',
|
|
'1': '1',
|
|
'2': '2',
|
|
},
|
|
textColor: theme => theme('colors'),
|
|
width: theme => ({
|
|
auto: 'auto',
|
|
...theme('spacing'),
|
|
'1/2': '50%',
|
|
'1/3': '33.333333%',
|
|
'2/3': '66.666667%',
|
|
'1/4': '25%',
|
|
'2/4': '50%',
|
|
'3/4': '75%',
|
|
'1/5': '20%',
|
|
'2/5': '40%',
|
|
'3/5': '60%',
|
|
'4/5': '80%',
|
|
'1/6': '16.666667%',
|
|
'2/6': '33.333333%',
|
|
'3/6': '50%',
|
|
'4/6': '66.666667%',
|
|
'5/6': '83.333333%',
|
|
'1/12': '8.333333%',
|
|
'2/12': '16.666667%',
|
|
'3/12': '25%',
|
|
'4/12': '33.333333%',
|
|
'5/12': '41.666667%',
|
|
'6/12': '50%',
|
|
'7/12': '58.333333%',
|
|
'8/12': '66.666667%',
|
|
'9/12': '75%',
|
|
'10/12': '83.333333%',
|
|
'11/12': '91.666667%',
|
|
'1/24': '4.166666667%',
|
|
'2/24': '8.333333333%',
|
|
'3/24': '12.5%',
|
|
'4/24': '16.66666667%',
|
|
'5/24': '20.83333333%',
|
|
'6/24': '25%',
|
|
'7/24': '29.16666667%',
|
|
'8/24': '33.33333333%',
|
|
'9/24': '37.5%',
|
|
'10/24': '41.66666667%',
|
|
'11/24': '45.83333333%',
|
|
'12/24': '50%',
|
|
'13/24': '54.16666667%',
|
|
'14/24': '58.33333333%',
|
|
'15/24': '62.5%',
|
|
'16/24': '66.66666667%',
|
|
'17/24': '70.83333333%',
|
|
'18/24': '75%',
|
|
'19/24': '79.16666667%',
|
|
'20/24': '83.33333333%',
|
|
'21/24': '87.5%',
|
|
'22/24': '91.66666667%',
|
|
'23/24': '95.83333333%',
|
|
full: '100%',
|
|
screen: '100vw',
|
|
'max-content': 'max-content',
|
|
}),
|
|
zIndex: {
|
|
auto: 'auto',
|
|
'0': '0',
|
|
'10': '10',
|
|
'20': '20',
|
|
'30': '30',
|
|
'40': '40',
|
|
'50': '50',
|
|
},
|
|
gap: theme => theme('spacing'),
|
|
gridTemplateColumns: {
|
|
none: 'none',
|
|
'1': 'repeat(1, minmax(0, 1fr))',
|
|
'2': 'repeat(2, minmax(0, 1fr))',
|
|
'3': 'repeat(3, minmax(0, 1fr))',
|
|
'4': 'repeat(4, minmax(0, 1fr))',
|
|
'5': 'repeat(5, minmax(0, 1fr))',
|
|
'6': 'repeat(6, minmax(0, 1fr))',
|
|
'7': 'repeat(7, minmax(0, 1fr))',
|
|
'8': 'repeat(8, minmax(0, 1fr))',
|
|
'9': 'repeat(9, minmax(0, 1fr))',
|
|
'10': 'repeat(10, minmax(0, 1fr))',
|
|
'11': 'repeat(11, minmax(0, 1fr))',
|
|
'12': 'repeat(12, minmax(0, 1fr))',
|
|
},
|
|
gridColumn: {
|
|
auto: 'auto',
|
|
'span-1': 'span 1 / span 1',
|
|
'span-2': 'span 2 / span 2',
|
|
'span-3': 'span 3 / span 3',
|
|
'span-4': 'span 4 / span 4',
|
|
'span-5': 'span 5 / span 5',
|
|
'span-6': 'span 6 / span 6',
|
|
'span-7': 'span 7 / span 7',
|
|
'span-8': 'span 8 / span 8',
|
|
'span-9': 'span 9 / span 9',
|
|
'span-10': 'span 10 / span 10',
|
|
'span-11': 'span 11 / span 11',
|
|
'span-12': 'span 12 / span 12',
|
|
},
|
|
gridColumnStart: {
|
|
auto: 'auto',
|
|
'1': '1',
|
|
'2': '2',
|
|
'3': '3',
|
|
'4': '4',
|
|
'5': '5',
|
|
'6': '6',
|
|
'7': '7',
|
|
'8': '8',
|
|
'9': '9',
|
|
'10': '10',
|
|
'11': '11',
|
|
'12': '12',
|
|
'13': '13',
|
|
},
|
|
gridColumnEnd: {
|
|
auto: 'auto',
|
|
'1': '1',
|
|
'2': '2',
|
|
'3': '3',
|
|
'4': '4',
|
|
'5': '5',
|
|
'6': '6',
|
|
'7': '7',
|
|
'8': '8',
|
|
'9': '9',
|
|
'10': '10',
|
|
'11': '11',
|
|
'12': '12',
|
|
'13': '13',
|
|
},
|
|
gridTemplateRows: {
|
|
none: 'none',
|
|
'1': 'repeat(1, minmax(0, 1fr))',
|
|
'2': 'repeat(2, minmax(0, 1fr))',
|
|
'3': 'repeat(3, minmax(0, 1fr))',
|
|
'4': 'repeat(4, minmax(0, 1fr))',
|
|
'5': 'repeat(5, minmax(0, 1fr))',
|
|
'6': 'repeat(6, minmax(0, 1fr))',
|
|
},
|
|
gridRow: {
|
|
auto: 'auto',
|
|
'span-1': 'span 1 / span 1',
|
|
'span-2': 'span 2 / span 2',
|
|
'span-3': 'span 3 / span 3',
|
|
'span-4': 'span 4 / span 4',
|
|
'span-5': 'span 5 / span 5',
|
|
'span-6': 'span 6 / span 6',
|
|
},
|
|
gridRowStart: {
|
|
auto: 'auto',
|
|
'1': '1',
|
|
'2': '2',
|
|
'3': '3',
|
|
'4': '4',
|
|
'5': '5',
|
|
'6': '6',
|
|
'7': '7',
|
|
},
|
|
gridRowEnd: {
|
|
auto: 'auto',
|
|
'1': '1',
|
|
'2': '2',
|
|
'3': '3',
|
|
'4': '4',
|
|
'5': '5',
|
|
'6': '6',
|
|
'7': '7',
|
|
},
|
|
transformOrigin: {
|
|
center: 'center',
|
|
top: 'top',
|
|
'top-right': 'top right',
|
|
right: 'right',
|
|
'bottom-right': 'bottom right',
|
|
bottom: 'bottom',
|
|
'bottom-left': 'bottom left',
|
|
left: 'left',
|
|
'top-left': 'top left',
|
|
},
|
|
scale: {
|
|
'0': '0',
|
|
'50': '.5',
|
|
'75': '.75',
|
|
'90': '.9',
|
|
'95': '.95',
|
|
'100': '1',
|
|
'105': '1.05',
|
|
'110': '1.1',
|
|
'125': '1.25',
|
|
'150': '1.5',
|
|
},
|
|
rotate: {
|
|
'-180': '-180deg',
|
|
'-90': '-90deg',
|
|
'-45': '-45deg',
|
|
'0': '0',
|
|
'45': '45deg',
|
|
'90': '90deg',
|
|
'180': '180deg',
|
|
},
|
|
translate: (theme, { negative }) => ({
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
'-full': '-100%',
|
|
'-1/2': '-50%',
|
|
'1/2': '50%',
|
|
full: '100%',
|
|
}),
|
|
skew: {
|
|
'-12': '-12deg',
|
|
'-6': '-6deg',
|
|
'-3': '-3deg',
|
|
'0': '0',
|
|
'3': '3deg',
|
|
'6': '6deg',
|
|
'12': '12deg',
|
|
},
|
|
transitionProperty: {
|
|
none: 'none',
|
|
all: 'all',
|
|
height: 'height',
|
|
DEFAULT:
|
|
'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
|
|
colors: 'background-color, border-color, color, fill, stroke',
|
|
opacity: 'opacity',
|
|
shadow: 'box-shadow',
|
|
transform: 'transform',
|
|
},
|
|
transitionTimingFunction: {
|
|
linear: 'linear',
|
|
in: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
out: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
transitionDuration: {
|
|
'75': '75ms',
|
|
'100': '100ms',
|
|
'150': '150ms',
|
|
'200': '200ms',
|
|
'300': '300ms',
|
|
'500': '500ms',
|
|
'700': '700ms',
|
|
'1000': '1000ms',
|
|
},
|
|
},
|
|
variants: {
|
|
accessibility: ['responsive', 'focus'],
|
|
alignContent: ['responsive'],
|
|
alignItems: ['responsive'],
|
|
alignSelf: ['responsive'],
|
|
appearance: ['responsive'],
|
|
backgroundAttachment: ['responsive'],
|
|
backgroundColor: [
|
|
'responsive',
|
|
'hover',
|
|
'focus',
|
|
'active',
|
|
'group-focus',
|
|
'group-hover',
|
|
],
|
|
backgroundPosition: ['responsive'],
|
|
backgroundRepeat: ['responsive'],
|
|
backgroundSize: ['responsive'],
|
|
borderCollapse: ['responsive'],
|
|
borderColor: [
|
|
'responsive',
|
|
'hover',
|
|
'focus',
|
|
'active',
|
|
'group-focus',
|
|
'group-hover',
|
|
],
|
|
borderRadius: ['responsive', 'focus', 'first', 'last'],
|
|
borderStyle: ['responsive', 'focus'],
|
|
borderWidth: ['responsive', 'focus', 'first', 'last'],
|
|
boxShadow: ['responsive', 'hover', 'focus'],
|
|
boxSizing: ['responsive'],
|
|
cursor: ['responsive'],
|
|
display: ['responsive'],
|
|
fill: ['responsive'],
|
|
flex: ['responsive'],
|
|
flexDirection: ['responsive'],
|
|
flexGrow: ['responsive'],
|
|
flexShrink: ['responsive'],
|
|
flexWrap: ['responsive'],
|
|
float: ['responsive'],
|
|
clear: ['responsive'],
|
|
fontFamily: ['responsive'],
|
|
fontSize: ['responsive'],
|
|
fontSmoothing: ['responsive'],
|
|
fontStyle: ['responsive'],
|
|
fontWeight: ['responsive', 'hover', 'focus'],
|
|
height: ['responsive'],
|
|
inset: ['responsive'],
|
|
justifyContent: ['responsive'],
|
|
letterSpacing: ['responsive'],
|
|
lineHeight: ['responsive'],
|
|
listStylePosition: ['responsive'],
|
|
listStyleType: ['responsive'],
|
|
margin: ['responsive'],
|
|
maxHeight: ['responsive'],
|
|
maxWidth: ['responsive'],
|
|
minHeight: ['responsive'],
|
|
minWidth: ['responsive'],
|
|
objectFit: ['responsive'],
|
|
objectPosition: ['responsive'],
|
|
opacity: ['responsive', 'hover', 'focus', 'active'],
|
|
order: ['responsive'],
|
|
outline: ['responsive', 'focus'],
|
|
overflow: ['responsive'],
|
|
padding: ['responsive', 'first'],
|
|
placeholderColor: ['responsive', 'focus'],
|
|
pointerEvents: ['responsive'],
|
|
position: ['responsive'],
|
|
resize: ['responsive'],
|
|
stroke: ['responsive'],
|
|
strokeWidth: ['responsive'],
|
|
tableLayout: ['responsive'],
|
|
textAlign: ['responsive'],
|
|
textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
|
|
textDecoration: ['responsive', 'hover', 'focus'],
|
|
textTransform: ['responsive'],
|
|
userSelect: ['responsive'],
|
|
verticalAlign: ['responsive'],
|
|
visibility: ['responsive'],
|
|
whitespace: ['responsive'],
|
|
width: ['responsive'],
|
|
wordBreak: ['responsive'],
|
|
zIndex: ['responsive'],
|
|
gap: ['responsive'],
|
|
gridAutoFlow: ['responsive'],
|
|
gridTemplateColumns: ['responsive'],
|
|
gridColumn: ['responsive'],
|
|
gridColumnStart: ['responsive'],
|
|
gridColumnEnd: ['responsive'],
|
|
gridTemplateRows: ['responsive'],
|
|
gridRow: ['responsive'],
|
|
gridRowStart: ['responsive'],
|
|
gridRowEnd: ['responsive'],
|
|
transform: ['responsive'],
|
|
transformOrigin: ['responsive'],
|
|
scale: ['responsive', 'hover', 'focus'],
|
|
rotate: ['responsive', 'hover', 'focus'],
|
|
translate: ['responsive', 'hover', 'focus'],
|
|
skew: ['responsive', 'hover', 'focus'],
|
|
transitionProperty: ['responsive'],
|
|
transitionTimingFunction: ['responsive'],
|
|
transitionDuration: ['responsive'],
|
|
},
|
|
corePlugins: {},
|
|
plugins: [],
|
|
};
|