@infonomic/uikit 3.10.0 → 4.0.0

package/src/styles/functional/colors.css

@@ -602,28 +602,5 @@
     --gradient-danger-end: var(--red-700);
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
-
-    /* SURFACE TOKENS (Force Light Mode)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds - identical to :root */
-    --surface-panel: var(--canvas-25);
-    --surface-panel-elevated: white;
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-50);
-    --surface-item-active: var(--canvas-100);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-400);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--gray-50);
-    --surface-panel-scrollbar-thumb: var(--primary-100);
   }
 }

package/src/styles/functional/surfaces.css

@@ -89,15 +89,15 @@
     --shadow: var(--shadow-md);
     --loader-color: var(--fill-primary-strong);
 
-    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
+    /* SURFACE TOKENS (Force Light Mode)
        ----------------------------------------------------------------- */
     
-    /* Panel/container backgrounds */
+    /* Panel/container backgrounds - identical to :root */
     --surface-panel: var(--canvas-25);
-    --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
+    --surface-panel-elevated: white;
     --surface-panel-border: var(--border-color);
     
-    /* Item backgrounds (default transparent, inherits panel) */
+    /* Item backgrounds */
     --surface-item: transparent;
     --surface-item-hover: var(--canvas-50);
     --surface-item-active: var(--canvas-100);

package/src/styles/functional/typography.css

@@ -11,6 +11,7 @@
     --text: var(--gray-900);
     --headings: var(--primary-700);
     --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --error: var(--red-500);
   }
 
   /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
@@ -27,6 +28,7 @@
     --text: var(--gray-50);
     --headings: var(--gray-50);
     --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
+    --error: var(--red-400);
   }
 
   /* ===================================================================
@@ -40,5 +42,6 @@
     --text: var(--gray-900);
     --headings: var(--primary-800);
     --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --error: var(--red-500);
   }
 }

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