@infonomic/uikit 3.10.0 → 3.11.0

package/dist/styles/typography.css

@@ -1 +1 @@
-@layer infonomic-typography{:root{--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-display:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:"Merriweather",Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.sans{font-family:var(--font-sans)}.serif{font-family:var(--font-serif)}.mono{font-family:var(--font-mono)}.display{font-family:var(--font-display)}:root{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-background:#1f2937;--prose-invert-body:var(--gray-50);--prose-invert-headings:var(--gray-50);--prose-invert-lead:#9ca3af;--prose-invert-links:var(--accent-500);--prose-invert-counters:#9ca3af;--prose-invert-bullets:#4b5563;--prose-invert-hr:#374151;--prose-invert-quotes:var(--accent-400);--prose-invert-quote-borders:var(--accent-400);--prose-invert-captions:#9ca3af;--prose-invert-kbd:#fff;--prose-invert-kbd-shadows:255 255 255;--prose-invert-code:#f1f5f9;--prose-invert-code-background:#222;--prose-invert-code-borders:#333;--prose-invert-pre-code:#d1d5db;--prose-invert-pre-background:#161d27;--prose-invert-th-borders:#4b5563;--prose-invert-td-borders:#374151}.dark{--prose-body:var(--prose-invert-body);--prose-headings:var(--prose-invert-headings);--prose-lead:var(--prose-invert-lead);--prose-links:var(--prose-invert-links);--prose-counters:var(--prose-invert-counters);--prose-bullets:var(--prose-invert-bullets);--prose-hr:var(--prose-invert-hr);--prose-quotes:var(--prose-invert-quotes);--prose-quote-borders:var(--prose-invert-quote-borders);--prose-captions:var(--prose-invert-captions);--prose-kbd:var(--prose-invert-kbd);--prose-kbd-shadows:var(--prose-invert-kbd-shadows);--prose-code:var(--prose-invert-code);--prose-code-background:var(--prose-invert-code-background);--prose-code-borders:var(--prose-invert-code-borders);--prose-pre-code:var(--prose-invert-pre-code);--prose-pre-background:var(--prose-invert-pre-background)}.not-dark{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-background:#1f2937}html{color:var(--prose-body);font-size:1rem}html .not-dark{color:var(--prose-body)}article,.editor-text,.break-long-words{overflow-wrap:anywhere}article,.dynamic-text{font-size:1.25rem;line-height:1.6}@media screen and (width>=48rem){article,.dynamic-text{font-size:1.125rem;line-height:1.64}}.prose{& h1,& h2,& h3,& h4,& h5{color:var(--prose-headings)}}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;font-size:2.5rem;font-weight:600;line-height:1.125}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.5rem;margin-bottom:.75rem;font-size:2rem;font-weight:600;line-height:1.2}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.75rem;font-size:1.75rem;font-weight:600;line-height:1.1}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.65rem;font-size:1.55rem;font-weight:600;line-height:1.1}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.125rem;line-height:1.64}.prose-xl :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.25rem;line-height:1.6}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.4}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-bold);font-weight:500}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-headings);margin-top:1.25em;font-weight:500}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-quotes);quotes:none;border-inline-start-width:.25rem;border-inline-start-color:var(--prose-quote-borders);margin-top:1.6em;margin-bottom:1.6em;margin-right:2rem;padding-inline-start:1rem;font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.2}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-kbd);box-shadow:0 0 0 1px rgb(var(--prose-kbd-shadows)/10%),0 3px 0 rgb(var(--prose-kbd-shadows)/10%);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-code);background-color:var(--prose-code-background);border-color:var(--prose-code-borders);border-width:1px;border-radius:.25rem;padding:.125rem .375rem;font-size:.875em;font-weight:400}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-pre-code);background-color:var(--prose-pre-background);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:initial;font-weight:inherit;color:inherit;font-family:inherit;line-height:inherit;padding:0;border-width:0;border-radius:0;padding:0;font-size:1em!important}@media (width>=48rem){.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.7rem;line-height:1.2}}html,.font-sans{font-family:var(--font-sans)}.font-display{font-family:var(--font-display)}.font-serif{font-family:var(--font-serif)}.font-mono{font-family:var(--font-mono)}}
+@layer infonomic-typography{:root{--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-display:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:"Merriweather",Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.sans{font-family:var(--font-sans)}.serif{font-family:var(--font-serif)}.mono{font-family:var(--font-mono)}.display{font-family:var(--font-display)}:root{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-background:#1f2937;--prose-invert-body:var(--gray-50);--prose-invert-headings:var(--gray-50);--prose-invert-lead:#9ca3af;--prose-invert-links:var(--accent-500);--prose-invert-counters:#9ca3af;--prose-invert-bullets:#4b5563;--prose-invert-hr:#374151;--prose-invert-quotes:var(--accent-400);--prose-invert-quote-borders:var(--accent-400);--prose-invert-captions:#9ca3af;--prose-invert-kbd:#fff;--prose-invert-kbd-shadows:255 255 255;--prose-invert-code:#f1f5f9;--prose-invert-code-background:#222;--prose-invert-code-borders:#333;--prose-invert-pre-code:#d1d5db;--prose-invert-pre-background:#161d27;--prose-invert-th-borders:#4b5563;--prose-invert-td-borders:#374151}.dark{--prose-body:var(--prose-invert-body);--prose-headings:var(--prose-invert-headings);--prose-lead:var(--prose-invert-lead);--prose-links:var(--prose-invert-links);--prose-counters:var(--prose-invert-counters);--prose-bullets:var(--prose-invert-bullets);--prose-hr:var(--prose-invert-hr);--prose-quotes:var(--prose-invert-quotes);--prose-quote-borders:var(--prose-invert-quote-borders);--prose-captions:var(--prose-invert-captions);--prose-kbd:var(--prose-invert-kbd);--prose-kbd-shadows:var(--prose-invert-kbd-shadows);--prose-code:var(--prose-invert-code);--prose-code-background:var(--prose-invert-code-background);--prose-code-borders:var(--prose-invert-code-borders);--prose-pre-code:var(--prose-invert-pre-code);--prose-pre-background:var(--prose-invert-pre-background)}.not-dark{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-background:#1f2937}html{color:var(--prose-body);font-size:1rem}html .not-dark{color:var(--prose-body)}article,.editor-text,.break-long-words{overflow-wrap:anywhere}article,.dynamic-text{font-size:1.25rem;line-height:1.6}@media screen and (width>=48rem){article,.dynamic-text{font-size:1.125rem;line-height:1.64}}.prose{& h1,& h2,& h3,& h4,& h5{color:var(--prose-headings)}}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;font-size:2.5rem;font-weight:600;line-height:1.125}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.5rem;margin-bottom:.75rem;font-size:2rem;font-weight:600;line-height:1.2}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.75rem;font-size:1.75rem;font-weight:600;line-height:1.1}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.65rem;font-size:1.55rem;font-weight:600;line-height:1.1}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.125rem;line-height:1.64}.prose-xl :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.25rem;line-height:1.6}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.4}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-bold);font-weight:500}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-headings);margin-top:1.25em;font-weight:500}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-quotes);quotes:none;border-inline-start-width:.25rem;border-inline-start-color:var(--prose-quote-borders);margin-top:1.3rem;margin-bottom:1.3rem;margin-right:2rem;padding-inline-start:1rem;font-size:1.2em;font-style:normal;font-weight:600;line-height:1.3}@media (width>=48rem){.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2em;line-height:1.3}}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-kbd);box-shadow:0 0 0 1px rgb(var(--prose-kbd-shadows)/10%),0 3px 0 rgb(var(--prose-kbd-shadows)/10%);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-code);background-color:var(--prose-code-background);border-color:var(--prose-code-borders);border-width:1px;border-radius:.25rem;padding:.125rem .375rem;font-size:.875em;font-weight:400}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-pre-code);background-color:var(--prose-pre-background);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:initial;font-weight:inherit;color:inherit;font-family:inherit;line-height:inherit;padding:0;border-width:0;border-radius:0;padding:0;font-size:1em!important}html,.font-sans{font-family:var(--font-sans)}.font-display{font-family:var(--font-display)}.font-serif{font-family:var(--font-serif)}.font-mono{font-family:var(--font-mono)}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/styles/base/colors.stories.tsx

@@ -21,7 +21,7 @@ export const Colors = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem' }}>
+      <div style={{ margin: '2rem 0' }}>
         <table>
           <tbody>
             <tr>

package/src/styles/typography/article.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Article = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <article style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+          <h1>An Article</h1>
+          <p>
+            This is text that that has been placed in an article element. Text in articles 
+            as well as within .dynamic-text class selectors will automatically increase in size on 
+            mobile devices for better readability. This is a paragraph of text that we&apos;ll 
+            use for our typography storybook page. This is a paragraph of text that we&apos;ll 
+            use for our typography storybook page.
+          </p>
+          <blockquote>This is some text inside a blockquote.
+            Note that we've used em to size text in the blockquote, 
+            so that it also changes size in the article.</blockquote>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+        </article>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Article,
+}
+
+export default meta

package/src/styles/typography/code.stories.tsx

@@ -47,7 +47,7 @@ export const Code = (): React.JSX.Element => {
         <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Heading 1</h1>
           <p>
-            This is a <code>inline code here</code> of text that we&apos;ll use for our typography
+            This is an example of <code>inline code here</code> and text that we&apos;ll use for our typography
             and code storybook page. This is a paragraph of text that we&apos;ll use for our
             typography and code storybook page. Here is a code block...
           </p>

package/src/styles/typography/prose.css

@@ -299,20 +299,29 @@
   }
 
   .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-weight: bold;
+    font-weight: 600;
     font-style: normal;
     color: var(--prose-quotes);
     quotes: none;
-    margin-top: 1.6em;
-    margin-bottom: 1.6em;
+    margin-top: 1.3rem;
+    margin-bottom: 1.3rem;
     margin-right: 2rem;
-    font-size: 1.5rem;
-    line-height: 1.2;
+    /* Font size must be em - so that it changes in articles or text that has dynamic font sizes on smaller screens */
+    font-size: 1.2em; 
+    line-height: 1.3;
     padding-inline-start: 1rem;
     border-inline-start-width: 0.25rem;
     border-inline-start-color: var(--prose-quote-borders);
   }
 
+  /* The same as above - for the moment */
+  @media (min-width: 48rem) {
+    .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      font-size: 1.2em;
+      line-height: 1.3;
+    }
+  }
+
   .prose :where(blockquote p:first-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *))::before {
     content: open-quote;
   }
@@ -394,11 +403,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-
-  @media (min-width: 48rem) {
-    .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-      font-size: 1.7rem;
-      line-height: 1.2;
-    }
-  }
 }

package/src/styles/typography/quote.stories.tsx

@@ -12,7 +12,7 @@ export const Quote = (): React.JSX.Element => {
             paragraph of text that we'll use for our typography storybook page. This is a
             paragraph of text that we'll use for our typography storybook page.
           </p>
-          <blockquote>This is some text inside a blockquote.</blockquote>
+          <blockquote>This is some text inside a blockquote. We&apos;ll make this a little longer to see how it looks when it wraps.</blockquote>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This
             is a paragraph of text that we&apos;ll use for our typography storybook page. This is a