770f657ae9
ref DES-228 This PR updates messaging and error handling in order to make Ghost calmer and friendlier. High level summary of the changes: - Removed all onBlur validation in Settings -> now it’s possible to just click around without being warned to fill mandatory fields - Removed lot of technical errors like `ValidationError: Validation (isEmpty) failed for locale` - Completely removed the red background toast notifications, it was aggressive and raw esp. on the top - Removed some unnecessary notifications (e.g. when removing a webhook, the removal already communicates the result) - Now we show field errors on submitting forms, and in case of an error we show a “Retry” button in Settings too. This allowed to remove a lot of unnecessary error messages, like the big error message on the top, plus it’s consistent with the patterns outside Settings. - Notification style is white now with filled color icons which makes everything much calmer and more refined. - Removes redundant copy (e.g. "successful(ly)") from notifications --------- Co-authored-by: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
295 lines
10 KiB
JavaScript
295 lines
10 KiB
JavaScript
// Used for eslint and storybook. Styles should not be compiled directly with this, they should be compiled by calling the function in tailwind.cjs
|
|
module.exports = {
|
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
important: '.admin-x-design-system',
|
|
|
|
corePlugins: {
|
|
preflight: false // we're providing our own scoped CSS reset
|
|
},
|
|
darkMode: 'class',
|
|
theme: {
|
|
screens: {
|
|
sm: '480px',
|
|
md: '640px',
|
|
lg: '1024px',
|
|
xl: '1320px',
|
|
tablet: '860px'
|
|
},
|
|
colors: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
white: '#FFF',
|
|
black: '#15171A',
|
|
grey: {
|
|
DEFAULT: '#ABB4BE',
|
|
50: '#FAFAFB',
|
|
75: '#F9FAFB',
|
|
100: '#F4F5F6',
|
|
150: '#F1F3F4',
|
|
200: '#EBEEF0',
|
|
250: '#E5E9ED',
|
|
300: '#DDE1E5',
|
|
400: '#CED4D9',
|
|
500: '#AEB7C1',
|
|
600: '#95A1AD',
|
|
700: '#7C8B9A',
|
|
800: '#626D79',
|
|
900: '#394047',
|
|
925: '#2E3338',
|
|
950: '#222427',
|
|
975: '#191B1E'
|
|
},
|
|
green: {
|
|
DEFAULT: '#30CF43',
|
|
100: '#E1F9E4',
|
|
400: '#58DA67',
|
|
500: '#30CF43',
|
|
600: '#2AB23A'
|
|
},
|
|
blue: {
|
|
DEFAULT: '#14B8FF',
|
|
100: '#DBF4FF',
|
|
400: '#42C6FF',
|
|
500: '#14B8FF',
|
|
600: '#00A4EB'
|
|
},
|
|
purple: {
|
|
DEFAULT: '#8E42FF',
|
|
100: '#EDE0FF',
|
|
400: '#A366FF',
|
|
500: '#8E42FF',
|
|
600: '7B1FFF'
|
|
},
|
|
pink: {
|
|
DEFAULT: '#FB2D8D',
|
|
100: '#FFDFEE',
|
|
400: '#FF5CA8',
|
|
500: '#FB2D8D',
|
|
600: '#F70878'
|
|
},
|
|
red: {
|
|
DEFAULT: '#F50B23',
|
|
100: '#FFE0E0',
|
|
400: '#F9394C',
|
|
500: '#F50B23',
|
|
600: '#DC091E'
|
|
},
|
|
yellow: {
|
|
DEFAULT: '#FFB41F',
|
|
100: '#FFF1D6',
|
|
400: '#FFC247',
|
|
500: '#FFB41F',
|
|
600: '#F0A000'
|
|
},
|
|
lime: {
|
|
DEFAULT: '#B5FF18'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
inter: 'Inter',
|
|
sans: 'Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif',
|
|
serif: 'Georgia, serif',
|
|
mono: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
|
|
inherit: 'inherit'
|
|
},
|
|
boxShadow: {
|
|
DEFAULT: '0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08)',
|
|
xs: '0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 10px -12px rgba(0,0,0,.1)',
|
|
sm: '0 0 1px rgba(0,0,0,.12), 0 1px 6px rgba(0,0,0,0.03), 0 8px 10px -8px rgba(0,0,0,.1)',
|
|
md: '0 0 1px rgba(0,0,0,0.12), 0 1px 6px rgba(0,0,0,0.03), 0 8px 10px -8px rgba(0,0,0,0.05), 0px 24px 37px -21px rgba(0, 0, 0, 0.05)',
|
|
'md-heavy': '0 0 1px rgba(0,0,0,0.22), 0 1px 6px rgba(0,0,0,0.15), 0 8px 10px -8px rgba(0,0,0,0.16), 0px 24px 37px -21px rgba(0, 0, 0, 0.46)',
|
|
lg: '0 0 7px rgba(0, 0, 0, 0.08), 0 2.1px 2.2px -5px rgba(0, 0, 0, 0.011), 0 5.1px 5.3px -5px rgba(0, 0, 0, 0.016), 0 9.5px 10px -5px rgba(0, 0, 0, 0.02), 0 17px 17.9px -5px rgba(0, 0, 0, 0.024), 0 31.8px 33.4px -5px rgba(0, 0, 0, 0.029), 0 76px 80px -5px rgba(0, 0, 0, 0.04)',
|
|
xl: '0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07)',
|
|
inner: 'inset 0 0 4px 0 rgb(0 0 0 / 0.08)',
|
|
none: '0 0 #0000'
|
|
},
|
|
extend: {
|
|
keyframes: {
|
|
toasterIn: {
|
|
'0.00%': {
|
|
transform: 'translateY(100%)'
|
|
},
|
|
'26.52%': {
|
|
transform: 'translateY(-3.90px)'
|
|
},
|
|
'63.26%': {
|
|
transform: 'translateY(1.2px)'
|
|
},
|
|
'100.00%': {
|
|
transform: 'translateY(0px)'
|
|
}
|
|
},
|
|
toasterTopIn: {
|
|
'0.00%': {
|
|
transform: 'translateY(-82px)'
|
|
},
|
|
'26.52%': {
|
|
transform: 'translateY(5.90px)'
|
|
},
|
|
'63.26%': {
|
|
transform: 'translateY(-1.77px)'
|
|
},
|
|
'100.00%': {
|
|
transform: 'translateY(0px)'
|
|
}
|
|
},
|
|
toasterOut: {
|
|
'0%': {
|
|
opacity: '1'
|
|
},
|
|
'100%': {
|
|
opacity: '0'
|
|
}
|
|
},
|
|
fadeIn: {
|
|
'0%': {
|
|
opacity: '0'
|
|
},
|
|
'100%': {
|
|
opacity: '1'
|
|
}
|
|
},
|
|
fadeOut: {
|
|
'0%': {
|
|
opacity: '1'
|
|
},
|
|
'100%': {
|
|
opacity: '0'
|
|
}
|
|
},
|
|
modalIn: {
|
|
'0%': {
|
|
transform: 'translateY(32px)'
|
|
},
|
|
'100%': {
|
|
transform: 'translateY(0px)'
|
|
}
|
|
},
|
|
modalInReverse: {
|
|
'0%': {
|
|
transform: 'translateY(-32px)'
|
|
},
|
|
'100%': {
|
|
transform: 'translateY(0px)'
|
|
}
|
|
},
|
|
spin: {
|
|
'0%': {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(360deg)'
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
'toaster-in': 'toasterIn 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950)',
|
|
'toaster-out': 'toasterOut 0.4s 0s 1 ease forwards',
|
|
'toaster-top-in': 'toasterTopIn 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950)',
|
|
'fade-in': 'fadeIn 0.15s ease forwards',
|
|
'fade-out': 'fadeOut 0.15s ease forwards',
|
|
'setting-highlight-fade-out': 'fadeOut 0.2s 1.4s ease forwards',
|
|
'modal-backdrop-in': 'fadeIn 0.15s ease forwards',
|
|
'modal-in': 'modalIn 0.25s ease forwards',
|
|
'modal-in-reverse': 'modalInReverse 0.25s ease forwards',
|
|
spin: 'spin 1s linear infinite'
|
|
},
|
|
spacing: {
|
|
px: '1px',
|
|
0: '0px',
|
|
0.5: '0.2rem',
|
|
1: '0.4rem',
|
|
1.5: '0.6rem',
|
|
2: '0.8rem',
|
|
2.5: '1rem',
|
|
3: '1.2rem',
|
|
3.5: '1.4rem',
|
|
4: '1.6rem',
|
|
5: '2rem',
|
|
6: '2.4rem',
|
|
7: '2.8rem',
|
|
8: '3.2rem',
|
|
9: '3.6rem',
|
|
10: '4rem',
|
|
11: '4.4rem',
|
|
12: '4.8rem',
|
|
14: '5.6rem',
|
|
16: '6.4rem',
|
|
18: '7.2rem',
|
|
20: '8rem',
|
|
22: '9.2rem',
|
|
24: '9.6rem',
|
|
28: '11.2rem',
|
|
32: '12.8rem',
|
|
36: '14.4rem',
|
|
40: '16rem',
|
|
44: '17.6rem',
|
|
48: '19.2rem',
|
|
52: '20.8rem',
|
|
56: '22.4rem',
|
|
60: '24rem',
|
|
64: '25.6rem',
|
|
72: '28.8rem',
|
|
80: '32rem',
|
|
96: '38.4rem'
|
|
},
|
|
maxWidth: {
|
|
none: 'none',
|
|
0: '0rem',
|
|
xs: '32rem',
|
|
sm: '38.4rem',
|
|
md: '44.8rem',
|
|
lg: '51.2rem',
|
|
xl: '57.6rem',
|
|
'2xl': '67.2rem',
|
|
'3xl': '76.8rem',
|
|
'4xl': '89.6rem',
|
|
'5xl': '102.4rem',
|
|
'6xl': '115.2rem',
|
|
'7xl': '132rem',
|
|
'8xl': '140rem',
|
|
'9xl': '156rem',
|
|
full: '100%',
|
|
min: 'min-content',
|
|
max: 'max-content',
|
|
fit: 'fit-content',
|
|
prose: '65ch'
|
|
},
|
|
borderRadius: {
|
|
sm: '0.3rem',
|
|
DEFAULT: '0.4rem',
|
|
md: '0.6rem',
|
|
lg: '0.8rem',
|
|
xl: '1.2rem',
|
|
'2xl': '1.6rem',
|
|
'3xl': '2.4rem',
|
|
full: '9999px'
|
|
},
|
|
fontSize: {
|
|
'2xs': '1.0rem',
|
|
base: '1.4rem',
|
|
xs: '1.2rem',
|
|
sm: '1.3rem',
|
|
md: '1.40rem',
|
|
lg: '1.65rem',
|
|
xl: '2rem',
|
|
'2xl': '2.4rem',
|
|
'3xl': '3.2rem',
|
|
'4xl': '3.6rem',
|
|
'5xl': ['4.2rem', '1.15'],
|
|
'6xl': ['6rem', '1'],
|
|
'7xl': ['7.2rem', '1'],
|
|
'8xl': ['9.6rem', '1'],
|
|
'9xl': ['12.8rem', '1'],
|
|
inherit: 'inherit'
|
|
},
|
|
lineHeight: {
|
|
base: '1.5em',
|
|
tight: '1.35em',
|
|
tighter: '1.25em',
|
|
supertight: '1.1em'
|
|
}
|
|
}
|
|
}
|
|
};
|