@infonomic/uikit 1.5.0 → 2.1.0

package/src/styles/typography/prose.css

@@ -0,0 +1,404 @@
+/* 
+ * Adapted from Tailwind typography plugin
+ * Portions copyright (c) Tailwind Labs, Inc.
+ *
+ * A simple typography style sheet that can be used in a project
+ * without Tailwind, although the typography styles are quite basic.
+ *
+ * Note: You should only load one typography style sheet or plugin.
+ * If Tailwind is being used in the frontend, and you're using 
+ * the Tailwind typography plugin, then this style sheet should NOT
+ * be loaded (although it will cause little harm as it's 
+ * behind a cascade layer).
+ *
+*/
+@layer infonomic-typography {
+  :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: #cccccc;
+    --prose-pre-code: #e5e7eb;
+    --prose-pre-bg: #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: #222222;
+    --prose-invert-code-borders: #333333;
+    --prose-invert-pre-code: #d1d5db;
+    --prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --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-bg: var(--prose-invert-pre-bg);
+  }
+
+  /* Brute force our not-dark class for now until we figure out
+   * a better way to do this. Note - the following does NOT work:
+   .dark:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+   */
+  .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: #cccccc;
+    --prose-pre-code: #e5e7eb;
+    --prose-pre-bg: #1f2937;
+  }
+
+  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   * Typography defaults
+   * We will gradually refactor prose to sensible defaults 
+   */
+
+  html {
+    font-size: 1rem;
+    color: var(--prose-body);
+  }
+
+  /* Redeclared here to change the specificity and scope of --prose-body */
+  html .not-dark {
+    color: var(--prose-body);
+  }
+
+  /* Overflow wrap for long non-dictionary words or urls */
+  article,
+  .editor-text,
+  .break-long-words {
+    overflow-wrap: anywhere;
+  }
+
+  article,
+  .dynamic-text {
+    font-size: 1.25rem;
+    line-height: 1.6;
+  }
+
+  /* medium breakpoint */
+  @media screen and (min-width: 768px) {
+
+    article,
+    .dynamic-text {
+      font-size: 1.125rem;
+      line-height: 1.64;
+    }
+
+  }
+
+  /* Default headings - will be overridden by prose sections below */
+  .prose {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      color: var(--prose-headings);
+    }
+  }
+
+
+  .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 2.5rem;
+    font-weight: 600;
+    line-height: 1.125;
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 2rem;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.1;
+    margin-top: 1.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 1.55rem;
+    font-weight: 600;
+    line-height: 1.1;
+    margin-top: 1.25rem;
+    margin-bottom: 0.65rem;
+  }
+
+  .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"] *)) {
+    font-size: 1.125rem;
+    line-height: 1.64;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .prose-xl :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--prose-lead);
+    font-size: 1.25em;
+    line-height: 1.4;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+  .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--prose-links);
+    text-decoration: underline;
+    font-weight: 500;
+  }
+
+  .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"] *)) {
+    color: inherit;
+  }
+
+  .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"] *)) {
+    list-style-type: decimal;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .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"] *)) {
+    list-style-type: disc;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+    font-weight: 400;
+    color: var(--prose-counters);
+  }
+
+  .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);
+    font-weight: 500;
+    margin-top: 1.25em;
+  }
+
+  .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"] *)) {
+    font-weight: bold;
+    font-style: normal;
+    color: var(--prose-quotes);
+    quotes: none;
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    margin-right: 2rem;
+    font-size: 1.5rem;
+    line-height: 1.2;
+    padding-inline-start: 1rem;
+    border-inline-start-width: 0.25rem;
+    border-inline-start-color: var(--prose-quote-borders);
+  }
+
+  .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"] *)) {
+    display: block;
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .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"] *)) {
+    font-weight: 500;
+    font-family: inherit;
+    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%);
+    font-size: 0.875em;
+    border-radius: 0.3125rem;
+    padding-top: 0.1875em;
+    padding-inline-end: 0.375em;
+    padding-bottom: 0.1875em;
+    padding-inline-start: 0.375em;
+  }
+
+  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--prose-code);
+    font-weight: 400;
+    font-size: 0.875em;
+    background-color: var(--prose-code-background);
+    border-color: var(--prose-code-borders);
+    border-radius: 0.25rem;
+    border-width: 1px;
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+
+  .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--prose-pre-code);
+    background-color: var(--prose-pre-bg);
+    overflow-x: auto;
+    font-weight: 400;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: 0.375rem;
+    padding-top: 0.8571429em;
+    padding-inline-end: 1.1428571em;
+    padding-bottom: 0.8571429em;
+    padding-inline-start: 1.1428571em;
+  }
+
+  .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    background-color: initial;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    font-weight: inherit;
+    color: inherit;
+    font-size: 1em !important;
+    font-family: inherit;
+    line-height: inherit;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media (min-width: 768px) {
+    .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

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Quote = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+          <h1>Heading 1</h1>
+          <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>
+          <blockquote>This is some text inside a blockquote.</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>
+        </div>
+      </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: Quote,
+}
+
+export default meta

package/src/styles/typography.css

@@ -0,0 +1,24 @@
+@import "./typography/fonts.css";
+@import "./typography/prose.css";
+
+@layer infonomic-typography {
+  html {
+    font-family: var(--font-sans);
+  }
+
+  .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/src/styles/utils/scroll-layout-shift.css

@@ -0,0 +1,9 @@
+@layer infonomic-utilities {
+  .fix-scroll-layout-shift-right {
+    padding-right: var(--removed-body-scroll-bar-size);
+  }
+
+  .fix-scroll-layout-shift-left {
+    padding-left: var(--removed-body-scroll-bar-size);
+  }
+}