@infonomic/uikit 5.16.0 → 5.17.0

package/src/styles/base/z-index.css

@@ -9,4 +9,4 @@
     --z-index-modal: 1050;
     --z-index-toast: 1100;
   }
-}
+}

package/src/styles/components/components.css

@@ -1,4 +1,4 @@
 /* @import "./scroll-to-top.css"; */
 @import "./hamburger.css";
 @import "./loaders.css";
-@import "./fade-in-lift.css";
+@import "./fade-in-lift.css";

package/src/styles/components/fade-in-lift.css

@@ -2,7 +2,9 @@
   opacity: 0;
   visibility: hidden;
   transform: matrix(1, 0, 0, 1, 0, 18);
-  transition: opacity 0.5s ease-out, transform 0.7s ease-out;
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.7s ease-out;
   will-change: opacity, visibility;
 }
 

package/src/styles/components/hamburger.css

@@ -1,4 +1,9 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .component--hamburger {
@@ -29,7 +34,7 @@
 
   .component--hamburger:active,
   .component--hamburger:focus {
-    outline: none !important;
+    outline: none;
     border-color: white;
     border-width: 0.5px;
     border-style: dashed;
@@ -79,12 +84,16 @@
 
   .component--hamburger .inner::before {
     top: -8px;
-    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
   }
 
   .component--hamburger .inner::after {
     bottom: -8px;
-    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   .component--hamburger.is_active .inner {
@@ -96,12 +105,16 @@
   .component--hamburger.is_active .inner::before {
     top: 0;
     opacity: 0;
-    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
   }
 
   .component--hamburger.is_active .inner::after {
     bottom: 0;
     transform: rotate(-90deg);
-    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
-}
+}

package/src/styles/functional/borders.css

@@ -1,6 +1,6 @@
 /**
  * BORDER FUNCTIONAL TOKENS
- * 
+ *
  * Semantic tokens for borders, including colors and potentially
  * widths, styles, and radii in the future.
  */

package/src/styles/functional/colors.css

@@ -2,23 +2,22 @@
  * SEMANTIC / FUNCTIONAL TOKEN LAYER FOR COLORS
  *
  * TODO: Refactor into separate file per token category (e.g., buttons, alerts)
- * 
+ *
  * This layer provides intent-based semantic tokens that automatically switch
  * between light and dark modes. By defining tokens here (in infonomic-theme layer),
  * component CSS can reference them without needing :not(:where([class~="not-dark"]...))
  * selectors, as the theme layer handles all mode switching.
- * 
+ *
  * Token Naming Convention: element-intent-emphasis-state
  * - element: fill (backgrounds), text (foreground), stroke (borders), ring (focus)
  * - intent: primary, secondary, noeffect, success, info, warning, danger
  * - emphasis: strong, weak, weaker (optional)
  * - state: hover, press, focus, disabled (optional)
- * 
+ *
  * Example: --fill-primary-strong-hover
  */
 
 @layer infonomic-functional {
-
   /* ===================================================================
      LIGHT MODE (default)
      =================================================================== */
@@ -62,10 +61,15 @@
        ----------------------------------------------------------------- */
     --fill-secondary-strong: var(--secondary-500);
     --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
-    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
+    --fill-secondary-strong-disabled: oklch(
+      from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
+    );
     --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.7);
     --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
-    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
+    --fill-secondary-weak-disabled: oklch(
+      from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
+      0.7
+    );
 
     --text-on-secondary: black;
     --text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
@@ -118,7 +122,10 @@
     --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
     --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.7);
     --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
-    --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
+    --fill-success-weak-disabled: oklch(
+      from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
+      0.7
+    );
 
     --text-on-success: white;
     --text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
@@ -214,10 +221,8 @@
     --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);
-
   }
 
-
   /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
    * We rely on the consuming application to detect a user's 
    * preferred color scheme - either by header or cookie, and to set 
@@ -263,10 +268,18 @@
        ----------------------------------------------------------------- */
     --fill-secondary-strong: var(--secondary-500);
     --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
-    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 0.85) calc(c * 0.85) h);
+    --fill-secondary-strong-disabled: oklch(
+      from var(--secondary-500) calc(l * 0.85) calc(c * 0.85) h
+    );
     --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.5) calc(c * 0.5) h / 0.5);
-    --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h / 0.5);
-    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h / 0.5);
+    --fill-secondary-weak-hover: oklch(
+      from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h /
+      0.5
+    );
+    --fill-secondary-weak-disabled: oklch(
+      from var(--secondary-500) calc(l * 0.4) calc(c * 0.5) h /
+      0.5
+    );
 
     --text-on-secondary: black;
     --text-on-secondary-disabled: oklch(from black calc(l * 0.85) calc(c * 0.85) h);
@@ -415,7 +428,6 @@
     --gradient-danger-end: var(--red-700);
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 0.85) calc(c * 0.85) h);
-
   }
 
   /* ===================================================================
@@ -462,10 +474,15 @@
        ----------------------------------------------------------------- */
     --fill-secondary-strong: var(--secondary-500);
     --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
-    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
+    --fill-secondary-strong-disabled: oklch(
+      from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
+    );
     --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.7);
     --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
-    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
+    --fill-secondary-weak-disabled: oklch(
+      from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
+      0.7
+    );
 
     --text-on-secondary: black;
     --text-on-secondary-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
@@ -518,7 +535,10 @@
     --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * 0.85) h);
     --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.7);
     --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
-    --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
+    --fill-success-weak-disabled: oklch(
+      from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
+      0.7
+    );
 
     --text-on-success: white;
     --text-on-success-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
@@ -615,4 +635,4 @@
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
   }
-}
+}

package/src/styles/functional/functional.css

@@ -2,4 +2,4 @@
 @import "./surfaces.css";
 @import "./typography.css";
 @import "./borders.css";
-@import "./grid-flex.css";
+@import "./grid-flex.css";

package/src/styles/functional/grid-flex.css

@@ -49,4 +49,4 @@
     --flex-nowrap: nowrap;
     --flex-center: center;
   }
-}
+}

package/src/styles/functional/surfaces.css

@@ -1,6 +1,6 @@
 /**
  * SURFACE FUNCTIONAL TOKENS
- * 
+ *
  * Semantic tokens for surfaces, backgrounds, shadows, and depth.
  * These tokens define the canvas on which content sits.
  */
@@ -14,17 +14,17 @@
 
     /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
        ----------------------------------------------------------------- */
-    
+
     /* Panel/container backgrounds */
     --surface-panel: var(--canvas-25);
     --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
     --surface-panel-border: var(--border-color);
-    
+
     /* Item backgrounds (default transparent, inherits panel) */
     --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);
@@ -45,8 +45,7 @@
    */
   .dark,
   [data-theme="dark"],
-  [data-theme="dark"] ::backdrop 
-  {
+  [data-theme="dark"] ::backdrop {
     --background: var(--canvas-900);
     --foreground: var(--gray-50);
     --shadow: var(--shadow-lg);
@@ -54,17 +53,17 @@
 
     /* SURFACE TOKENS (Dark Mode)
        ----------------------------------------------------------------- */
-    
+
     /* Panel/container backgrounds - slightly elevated from canvas-900 base */
     --surface-panel: var(--canvas-800);
     --surface-panel-elevated: var(--canvas-800);
     --surface-panel-border: var(--border-color);
-    
+
     /* Item backgrounds - lighter than panel for hover/active */
     --surface-item: transparent;
     --surface-item-hover: var(--canvas-700);
     --surface-item-active: var(--canvas-600);
-    
+
     /* Item text colors */
     --surface-item-text: var(--text);
     --surface-item-text-hover: var(--text);
@@ -91,17 +90,17 @@
 
     /* 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);

package/src/styles/functional/typography.css

@@ -1,6 +1,6 @@
 /**
  * TYPOGRAPHY FUNCTIONAL TOKENS
- * 
+ *
  * Semantic tokens for text colors and typography-related variables.
  * Separate from typography.css in the typography/ directory which defines
  * actual typographic styles and scales.
@@ -23,8 +23,7 @@
    */
   .dark,
   [data-theme="dark"],
-  [data-theme="dark"] ::backdrop 
-  {
+  [data-theme="dark"] ::backdrop {
     --text: var(--gray-50);
     --headings: var(--gray-50);
     --muted: oklch(from var(--foreground) calc(l * 0.75) c h);

package/src/styles/local-fonts.css

@@ -5,7 +5,7 @@
   use its own method to load them.
  */
 
- @font-face {
+@font-face {
   font-family: "Inter";
   src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
   font-weight: 300 900;

package/src/styles/styles.css

@@ -1,7 +1,12 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @import "./base/base.css";
 @import "./functional/functional.css";
 @import "./utils/utils.css";
 @import "./theme/theme.css";
-@import "./components/components.css";
+@import "./components/components.css";

package/src/styles/theme/autofill.css

@@ -23,13 +23,13 @@ select:-webkit-autofill:focus, select:autofill:focus {
   select:autofill,
   select:autofill:hover,
   select:autofill:focus {
-    border: 1px solid #d89d3d !important;
-    -webkit-text-fill-color: black !important;
-    -webkit-box-shadow: 0 0 0px 1000px #fff2dc inset !important;
-    box-shadow: 0 0 0px 1000px #fff2dc inset !important;
-    transition: background-color 5000s ease-in-out 0s !important;
-    color: black !important;
-    background-color: rgb(250, 217, 167) !important;
+    border: 1px solid #d89d3d;
+    -webkit-text-fill-color: black;
+    -webkit-box-shadow: 0 0 0px 1000px #fff2dc inset;
+    box-shadow: 0 0 0px 1000px #fff2dc inset;
+    transition: background-color 5000s ease-in-out 0s;
+    color: black;
+    background-color: rgb(250, 217, 167);
   }
 
   /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
@@ -56,12 +56,12 @@ select:-webkit-autofill:focus, select:autofill:focus {
   [data-theme="dark"] select:autofill,
   [data-theme="dark"] select:autofill:hover,
   [data-theme="dark"] select:autofill:focus {
-    border: 1px solid var(--theme-600) !important;
-    -webkit-text-fill-color: white !important;
-    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset !important;
-    box-shadow: 0 0 0px 1000px var(--theme-600) inset !important;
-    transition: background-color 5000s ease-in-out 0s !important;
-    color: white !important;
-    background-color: rgba(100, 100, 100, 0.5) !important;
+    border: 1px solid var(--theme-600);
+    -webkit-text-fill-color: white;
+    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+    box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+    transition: background-color 5000s ease-in-out 0s;
+    color: white;
+    background-color: rgba(100, 100, 100, 0.5);
   }
-}
+}

package/src/styles/theme/defaults.css

@@ -1,6 +1,6 @@
 /**
  * HTML ELEMENT DEFAULTS
- * 
+ *
  * Opinionated starter styles for HTML elements to provide sensible defaults
  * for new installations. These live in the infonomic-theme layer and are
  * easily overridden by consuming applications.

package/src/styles/theme/scrollers.css

@@ -51,4 +51,4 @@
     scrollbar-width: thin;
     scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
   }
-}
+}

package/src/styles/theme/theme.css

@@ -1,10 +1,10 @@
 /**
  * THEME
- * 
+ *
  * This file now primarily serves as a convenient import aggregator for
  * theme-related concerns: autofill behavior, scrollbar styling, and
  * HTML element defaults.
- * 
+ *
  * CSS variable definitions have been moved to functional token files:
  * - functional/surfaces.css (backgrounds, shadows, loader)
  * - functional/typography-tokens.css (text, headings, muted)
@@ -14,4 +14,4 @@
 
 @import "./autofill.css";
 @import "./scrollers.css";
-@import "./defaults.css";
+@import "./defaults.css";

package/src/styles/theme/theme.stories.tsx

@@ -2,23 +2,22 @@ import type { Meta } from '@storybook/react-vite'
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
-          <div className="p-5 shadow border-thin rounded">
-            <h2>Heading 2</h2>
-            <span className="muted">Muted text here.</span>
-            <p>
-              This is a paragraph of text that we&apos;ll use for our theme Storybook page. This is
-              a paragraph of text that has been styled with our default or starter HTML element settings
-              from our styles/theme/theme.css source CSS file, and does NOT have &apos;prose&apos; applied. 
-              Prose is part of our separately installed typography system via styles/typography/typography.css
-               - examples of which are available under the Typography category in Storybook.
-            </p>
-          </div>
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
+        <div className="p-5 shadow border-thin rounded">
+          <h2>Heading 2</h2>
+          <span className="muted">Muted text here.</span>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our theme Storybook page. This is a
+            paragraph of text that has been styled with our default or starter HTML element settings
+            from our styles/theme/theme.css source CSS file, and does NOT have &apos;prose&apos;
+            applied. Prose is part of our separately installed typography system via
+            styles/typography/typography.css - examples of which are available under the Typography
+            category in Storybook.
+          </p>
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

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

@@ -2,29 +2,28 @@ 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>
-    </>
+    <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>
   )
 }
 

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

@@ -1,5 +1,4 @@
 import type { Meta } from '@storybook/react-vite'
-
 import { Highlight, themes } from 'prism-react-renderer'
 
 const code = `const x = 'foo';
@@ -42,25 +41,23 @@ function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.E
 
 export const Code = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ margin: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
-          <h1>Heading 1</h1>
-          <p>
-            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>
-          <CodeDemo code={code} />
-          <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 style={{ margin: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1</h1>
+        <p>
+          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>
+        <CodeDemo code={code} />
+        <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>
   )
 }