@infonomic/uikit 3.7.0 → 3.9.0

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

@@ -5,7 +5,7 @@ export const Default = (): React.JSX.Element => {
     <>
       <div style={{ marginBottom: '48px' }}>
         <div style={{ maxWidth: '700px', margin: 'auto' }}>
-          <div className="shadow p-3 border rounded">
+          <div className="p-5 shadow border-thin rounded">
             <h2>Heading 2</h2>
             <span className="muted">Muted text here.</span>
             <p>

package/src/styles/typography/prose.css

@@ -125,7 +125,7 @@
   }
 
   /* medium breakpoint */
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 48rem) {
 
     article,
     .dynamic-text {
@@ -395,7 +395,7 @@
     padding-bottom: 0;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
       font-size: 1.7rem;
       line-height: 1.2;