@infonomic/uikit 3.8.0 → 3.10.0

package/src/styles/functional/surfaces.css

@@ -0,0 +1,115 @@
+/**
+ * SURFACE FUNCTIONAL TOKENS
+ * 
+ * Semantic tokens for surfaces, backgrounds, shadows, and depth.
+ * These tokens define the canvas on which content sits.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--fill-primary-strong);
+
+    /* 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);
+    --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);
+  }
+
+  /* 🌙 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 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop 
+  {
+    --background: var(--canvas-900);
+    --foreground: var(--gray-50);
+    --shadow: var(--shadow-lg);
+    --loader-color: var(--fill-primary-strong);
+
+    /* 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);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-500);
+
+    /* Panel scrollers */
+    --surface-panel-scrollbar: var(--canvas-700);
+    --surface-panel-scrollbar-thumb: var(--primary-400);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--fill-primary-strong);
+
+    /* 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);
+    --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/typography.css

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --text: var(--gray-900);
+    --headings: var(--primary-700);
+    --muted: oklch(from var(--foreground) calc(l * 2) c 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 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop 
+  {
+    --text: var(--gray-50);
+    --headings: var(--gray-50);
+    --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
+  }
+
+  /* ===================================================================
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+  */
+  .not-dark {
+    --text: var(--gray-900);
+    --headings: var(--primary-800);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+  }
+}

package/src/styles/local-fonts.css

@@ -0,0 +1,72 @@
+/* 
+  NOTE: Not included in the the distribution bundle.
+  Used to load the fonts below in Storybook.
+  A consumer of the UI kit should self-host these fonts and 
+  use its own method to load them.
+ */
+
+ @font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-Italic-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}

package/src/styles/theme/autofill.css

@@ -32,10 +32,10 @@ select:-webkit-autofill:focus, select:autofill:focus {
     background-color: rgb(250, 217, 167) !important;
   }
 
-  /* 🌙 Dark via `.dark` class. We rely on the 
-   * consuming application to detect a user's preferred
-   * color scheme - either by header or cookie. and set
-   * a root html class accordingly
+  /* 🌙 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 set a root html
+   * class or data attribute accordingly.
    */
 
   .dark input:autofill,
@@ -46,7 +46,16 @@ select:-webkit-autofill:focus, select:autofill:focus {
   .dark textarea:autofill:focus,
   .dark select:autofill,
   .dark select:autofill:hover,
-  .dark select:autofill:focus {
+  .dark select:autofill:focus,
+  [data-theme="dark"] input:autofill,
+  [data-theme="dark"] input:autofill:hover,
+  [data-theme="dark"] input:autofill:focus,
+  [data-theme="dark"] textarea:autofill,
+  [data-theme="dark"] textarea:autofill:hover,
+  [data-theme="dark"] textarea: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;

package/src/styles/theme/defaults.css

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+@layer infonomic-theme {
+  html {
+    font-size: 1rem;
+    color: var(--text);
+  }
+
+  /* Redeclared here to change the specificity and scope of --prose-body */
+  html .not-dark {
+    color: var(--text);
+  }
+
+  /* Default (light mode) */
+  ::selection {
+    background-color: var(--theme-600);
+    color: white;
+  }
+
+  /* Dark mode */
+  .dark ::selection,
+  [data-theme="dark"] ::selection {
+    background-color: var(--theme-200);
+    color: var(--gray-900);
+  }
+
+  /* Headings */
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  /* External link indicator */
+  .external-link::after {
+    content: "";
+    display: inline-block;
+    background-image: url("/external-link-light.svg");
+    background-repeat: no-repeat;
+    background-position: 20% 50%;
+    background-size: 65% auto;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+  }
+
+  .dark .external-link::after,
+  [data-theme="dark"] .external-link::after {
+    background-image: url("/external-link-dark.svg");
+  }
+}

package/src/styles/theme/scrollers.css

@@ -5,7 +5,8 @@
   }
 
   /* rgb(44, 47, 86) = theme secondary 900  */
-  :root.dark {
+  :root.dark,
+  :root[data-theme="dark"] {
     --scroll-bar-thumb: var(--canvas-700);
     --scroll-bar-track: var(--canvas-900);
   }
@@ -39,7 +40,8 @@
     --scroll-bar-track: var(--scroll-bar-track);
   }
 
-  .dark .component--scroller {
+  .dark .component--scroller,
+  [data-theme="dark"] .component--scroller {
     --scroll-bar-thumb: var(--scroll-bar-thumb);
     --scroll-bar-track: var(--scroll-bar-track);
   }

package/src/styles/theme/theme.css

@@ -1,132 +1,17 @@
+/**
+ * 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)
+ * - functional/borders.css (border colors)
+ * - functional/colors.css (intent-based color tokens)
+ */
+
 @import "./autofill.css";
 @import "./scrollers.css";
-@import "./typography.css";
-
-@layer infonomic-theme {
-  :root {
-    --background: var(--canvas-25);
-    --foreground: var(--gray-900);
-    --text: var(--gray-900);
-    --headings: var(--primary-700);
-    --muted: oklch(from var(--foreground) calc(l * 2) c h);
-    --border-color: var(--gray-100);
-    --shadow: var(--shadow-md);
-    --loader-color: var(--primary-500);
-
-    --invert-background: var(--canvas-900);
-    --invert-foreground: var(--gray-50);
-    --invert-text: var(--gray-50);
-    --invert-headings: var(--gray-50);
-    --invert-muted: oklch(from var(--foreground) calc(l * 0.75) c h);
-    --invert-border-color: var(--canvas-700);
-    --invert-shadow: var(--shadow-lg);
-    --invert-loader-color: var(--gray-50);
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the consuming 
-   * application to detect a user's preferred color scheme 
-   * - either by header or cookie, and to set a root html 
-   * class accordingly
-   */
-  .dark {
-    --background: var(--invert-background);
-    --foreground: var(--invert-foreground);
-    --text: var(--invert-text);
-    --headings: var(--invert-headings);
-    --border-color: var(--invert-border-color);
-    --shadow: var(--invert-shadow);
-    --muted: var(--invert-muted);
-    --loader-color: var(--invert-loader-color);
-  }
-
-  /* .not-dark override: Forces light mode tokens by re-declaring :root values.
-  * This duplication is intentional - it ensures .not-dark always wins over .dark
-  * regardless of DOM order, without needing complex :not() selectors.
-  * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
-  */
-  .not-dark {
-    --background: var(--canvas-25);
-    --foreground: var(--gray-900);
-    --text: var(--gray-900);
-    --headings: var(--primary-800);
-    --muted: oklch(from var(--foreground) calc(l * 2) c h);
-    --border-color: var(--gray-100);
-    --shadow: var(--shadow-md);
-    --loader-color: var(--primary-500);
-  }
-
-  html {
-    font-size: 1rem;
-    color: var(--text);
-  }
-
-  /* Redeclared here to change the specificity and scope of --prose-body */
-  html .not-dark {
-    color: var(--text);
-  }
-
-  /* Default (light mode) */
-  ::selection {
-    background-color: var(--theme-600);
-    color: white;
-  }
-
-  /* Dark mode */
-  .dark ::selection {
-    background-color: var(--theme-200);
-    color: var(--gray-900);
-  }
-
-  .background {
-    background-color: var(--background);
-  }
-
-  .foreground {
-    color: var(--foreground);
-  }
-
-  .text {
-    color: var(--text);
-  }
-
-  .headings {
-    color: var(--headings);
-  }
-
-  .muted {
-    font-size: 0.925rem;
-    color: var(--muted);
-  }
-
-  .shadow {
-    box-shadow: var(--shadow);
-  }
-
-  .border-color {
-    border-color: var(--border-color);
-  }
-
-  .border {
-    border-color: var(--border-color);
-    border-width: var(--border-width-thin);
-    border-style: var(--border-style-solid);
-    border-radius: var(--border-radius-sm);
-  }
-
-  /* External link */
-  .external-link::after {
-    content: "";
-    display: inline-block;
-    background-image: url("/external-link-light.svg");
-    background-repeat: no-repeat;
-    background-position: 20% 50%;
-    background-size: 65% auto;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: -5px;
-  }
-
-  .dark .external-link::after {
-    background-image: url("/external-link-dark.svg");
-  }
-}
+@import "./defaults.css";

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

@@ -4,15 +4,16 @@ export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }}>
-          <div className="shadow p-3 border rounded">
+        <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 we&apos;ll use for our theme storybook page. This is a
-              paragraph of text that we&apos;ll use for our theme storybook page. This is a
-              paragraph of text that we&apos;ll use for our theme storybook page.
+              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>

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

@@ -20,7 +20,7 @@ function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.E
   return (
     <Highlight theme={themes.nightOwl} code={code} language={language}>
       {({ tokens, getLineProps, getTokenProps }) => (
-        <pre style={{ backgroundColor: 'var(--canvas-800)' }} className={className}>
+        <pre className={className}>
           {tokens.map((line, i) => {
             const lineProps = getLineProps({ line, key: i })
             return (
@@ -43,8 +43,8 @@ function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.E
 export const Code = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+      <div style={{ margin: '48px' }}>
+        <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

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

@@ -4,7 +4,7 @@ export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This

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

@@ -4,7 +4,7 @@ export const Lists = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Lists</h1>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This

package/src/styles/typography/prose.css

@@ -30,7 +30,7 @@
     --prose-code-background: #efefef;
     --prose-code-borders: #cccccc;
     --prose-pre-code: #e5e7eb;
-    --prose-pre-bg: #1f2937;
+    --prose-pre-background: #1f2937;
     --prose-invert-body: var(--gray-50);
     --prose-invert-headings: var(--gray-50);
     --prose-invert-lead: #9ca3af;
@@ -47,7 +47,7 @@
     --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-pre-background: #161d27;
     --prose-invert-th-borders: #4b5563;
     --prose-invert-td-borders: #374151;
   }
@@ -69,7 +69,7 @@
     --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);
+    --prose-pre-background: var(--prose-invert-pre-background);
   }
 
   /* Brute force our not-dark class for now until we figure out
@@ -93,7 +93,7 @@
     --prose-code-background: #efefef;
     --prose-code-borders: #cccccc;
     --prose-pre-code: #e5e7eb;
-    --prose-pre-bg: #1f2937;
+    --prose-pre-background: #1f2937;
   }
 
   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -124,20 +124,20 @@
     line-height: 1.6;
   }
 
-  /* medium breakpoint */
+  /* 
+    NOTE: Increase font size for smaller screens to improve readability 
+    at medium breakpoint (consider large breakpoint as well?) 
+  */
   @media screen and (min-width: 48rem) {
-
     article,
     .dynamic-text {
       font-size: 1.125rem;
       line-height: 1.64;
     }
-
   }
 
   /* Default headings - will be overridden by prose sections below */
   .prose {
-
     h1,
     h2,
     h3,
@@ -366,7 +366,7 @@
 
   .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--prose-pre-code);
-    background-color: var(--prose-pre-bg);
+    background-color: var(--prose-pre-background);
     overflow-x: auto;
     font-weight: 400;
     line-height: 1.7142857;

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

@@ -4,7 +4,7 @@ export const Quote = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem 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