Restyle blockquotes and convert callouts to Note (#985)

* Restyle blockquotes and convert callouts to Note

* Fixed SSO prompt grammar

typography.js

@@ -165,26 +165,13 @@ module.exports = ({ theme }) => ({
 
       // Quotes
       blockquote: {
-        fontWeight: '500',
         fontStyle: 'italic',
         color: 'var(--tw-prose-quotes)',
-        borderLeftWidth: '0.375rem',
-        borderLeftColor: theme('colors.orange.500'),
-        backgroundColor: theme('colors.orange.50 / 0.3'),
-        quotes: '"\\201C""\\201D""\\2018""\\2019"',
-        marginTop: theme('spacing.8'),
-        marginBottom: theme('spacing.8'),
-        paddingTop: theme('spacing.4'),
-        paddingRight: theme('spacing.4'),
-        paddingBottom: theme('spacing.4'),
+        borderLeftWidth: '2px',
+        borderLeftColor: 'var(--tw-prose-quote-borders)',
         paddingLeft: theme('spacing.5'),
-        borderRadius: theme('borderRadius.md'),
-      },
-      'blockquote p:first-of-type::before': {
-        content: 'open-quote',
-      },
-      'blockquote p:last-of-type::after': {
-        content: 'close-quote',
+        marginTop: theme('spacing.6'),
+        marginBottom: theme('spacing.6'),
       },
 
       // Headings
@@ -408,10 +395,6 @@ module.exports = ({ theme }) => ({
       '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
       '--tw-prose-th-bg': 'var(--tw-prose-invert-th-bg)',
       '--tw-prose-td-bg': 'var(--tw-prose-invert-td-bg)',
-      blockquote: {
-        borderLeftColor: theme('colors.orange.400'),
-        backgroundColor: theme('colors.orange.900 / 0.2'),
-      },
     },
   },
 })