TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 01:42:29 +03:00
Code Issues Projects Releases Wiki Activity
978ccc8483
Ghost/apps/admin-x-design-system/tailwind.config.cjs

296 lines
10 KiB
JavaScript
Raw Normal View History

Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
// 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}'],
Renamed admin-x-design to admin-x-design-system for clarity (#18914) refs https://github.com/TryGhost/Product/issues/4105
2023-11-08 18:10:43 +03:00
important: '.admin-x-design-system',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
corePlugins: {
preflight: false // we're providing our own scoped CSS reset
},
darkMode: 'class',
theme: {
screens: {
sm: '480px',
md: '640px',
lg: '1024px',
Admin X demo app content (#19079) refs. https://github.com/TryGhost/Product/issues/4169 - Added demo content for POC AdminX demo app
2023-11-22 15:44:39 +03:00
xl: '1320px',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
tablet: '860px'
},
colors: {
transparent: 'transparent',
current: 'currentColor',
Added styling for accent colours on Tiers and Offers (#20696) fixes https://linear.app/tryghost/issue/DES-81/misleading-hardcoded-tier-preview-title-colors Tiers and Offers in Admin were shown with hardcoded pink titles. This changes that. They are now shown with black titles, and only in the preview will they render with the site's accent colour. --------- Co-authored-by: Princi Vershwal <vershwal.princi@gmail.com>
2024-08-01 12:46:11 +03:00
accent: 'var(--accent-color, #ff0095)',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
white: '#FFF',
black: '#15171A',
grey: {
DEFAULT: '#ABB4BE',
50: '#FAFAFB',
75: '#F9FAFB',
100: '#F4F5F6',
150: '#F1F3F4',
200: '#EBEEF0',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
250: '#E5E9ED',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
300: '#DDE1E5',
400: '#CED4D9',
500: '#AEB7C1',
600: '#95A1AD',
700: '#7C8B9A',
800: '#626D79',
900: '#394047',
925: '#2E3338',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
950: '#222427',
975: '#191B1E'
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
},
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)',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
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)',
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
'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)',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
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%': {
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
transform: 'translateY(100%)'
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
},
'26.52%': {
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
transform: 'translateY(-3.90px)'
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
},
'63.26%': {
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
transform: 'translateY(1.2px)'
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
},
'100.00%': {
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
transform: 'translateY(0px)'
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
}
},
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',
Admin X demo detail page (#19105) refs. https://github.com/TryGhost/Product/issues/4169 - the detail page for the Admin X proto app was empty - the asc/desc selector of the SortMenu component in the design system needed a bit of refinement - page toolbar was not set
2023-11-23 10:18:41 +03:00
22: '9.2rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
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',
Admin X demo app content (#19079) refs. https://github.com/TryGhost/Product/issues/4169 - Added demo content for POC AdminX demo app
2023-11-22 15:44:39 +03:00
'7xl': '132rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
'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',
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
lg: '0.8rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
xl: '1.2rem',
'2xl': '1.6rem',
'3xl': '2.4rem',
full: '9999px'
},
fontSize: {
'2xs': '1.0rem',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
base: '1.4rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
xs: '1.2rem',
Improve messaging and error handling (#20078) 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>
2024-05-14 10:31:19 +03:00
sm: '1.3rem',
Updated email newsletter spacing and font sizes (#20273) REF MOM-146 - These styling changes are a general newsletter template improvement, and are also laying the groundwork for including a subhead in the newsletter header. Both the newsletter template as well as the newsletter preview in settings have been updated.
2024-05-28 17:29:49 +03:00
md: '1.4rem',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
lg: '1.65rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
xl: '2rem',
'2xl': '2.4rem',
Added "No search result" screen to Settings (#19672) refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
2024-02-08 10:32:40 +03:00
'3xl': '3.2rem',
Extracted AdminX design system to a separate package (#18878) refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
2023-11-08 15:33:18 +03:00
'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'
}
}
}
};
Reference in New Issue Copy Permalink