@infonomic/uikit 2.15.0 → 3.1.0

package/src/components/input/radio-group.module.css

@@ -89,98 +89,42 @@
 
   /* Intents */
   .primary {
-    --radio-border: var(--primary-400);
-    /* --ring-color: var(--primary-400); */
-    --radio-indicator-color: var(--primary-400);
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
   }
 
   .secondary {
-    --radio-border: var(--secondary-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--secondary-400);
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
   }
 
   .noeffect {
-    --radio-border: var(--gray-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--gray-400);
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
   .success {
-    --radio-border: var(--green-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--green-400);
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
   }
 
   .info {
-    --radio-border: var(--blue-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--blue-400);
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
   }
 
   .warning {
-    --radio-border: var(--yellow-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--yellow-400);
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
   }
 
   .danger {
-    --radio-border: var(--red-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--red-400);
-  }
-
-  /* 🌙 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
-  */
-  :global(.dark) {
-
-    /* Intents */
-    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--primary-300);
-      /* --ring-color: var(--primary-400); */
-      --radio-indicator-color: var(--primary-300);
-    }
-
-    .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--secondary-500);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--secondary-500);
-    }
-
-    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      ---radio-border: var(--gray-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--gray-400);
-    }
-
-    .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--green-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--green-400);
-    }
-
-    .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--blue-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--blue-400);
-    }
-
-    .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--yellow-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--yellow-400);
-    }
-
-    .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--red-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--red-400);
-    }
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
   }
 
+  /* Dark mode handled by semantic tokens in theme layer */
+
   @keyframes radioIn {
     0% {
       opacity: 0;

package/src/components/input/radio-group.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Components/RadioGroup',
+  title: 'Components/Input',
   component: RadioGroupComponent,
 }
 

package/src/components/input/select.module.css

@@ -8,17 +8,13 @@
   .viewport {
     z-index: 50;
     margin-top: 2px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    background-color: var(--background);
+    background-color: var(--surface-panel-elevated);
     padding: 6px;
   }
 
-  .viewport:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   .group {
     z-index: 50;
   }
@@ -27,22 +23,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text);
-    border: 1px solid var(--border-color);
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    background-color: var(--background);
+    background-color: var(--surface-panel-elevated);
     padding: 2px;
   }
 
-  .scroll-button:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   .select-item {
     position: relative;
     user-select: none;
-    color: var(--text);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
     font-size: 1rem;
     line-height: 1;
     padding-right: 35px;
@@ -54,14 +47,14 @@
   }
 
   .select-item[data-disabled] {
-    color: var(--disabled-text-color, #e0e0e0);
+    color: var(--surface-item-text-disabled);
     pointer-events: none;
   }
 
   .select-item[data-highlighted] {
     outline: none;
-    background-color: var(--highlight-bg-color, #e0e0e0);
-    color: var(--highlight-text-color, #000000);
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
   }
 
   .select-item-indicator {

package/src/components/input/select.stories.tsx

@@ -4,7 +4,7 @@ import type React from 'react'
 import { Select, SelectItem, type SelectValue } from './select.js'
 
 export default {
-  title: 'Components/Select',
+  title: 'Components/Input/Select',
   component: Select,
   argTypes: {},
 }

package/src/components/notifications/alert.module.css

@@ -42,10 +42,6 @@
     margin-top: -2px;
   }
 
-  .close svg {
-    fill: white
-  }
-
   .fade {
     opacity: 0;
     transition: opacity 0.4s ease-in-out;

package/src/components/pager/pagination.module.css

@@ -72,9 +72,9 @@
     justify-content: center;
     height: 32px;
     line-height: 1;
-    border: 1px solid var(--primary-500);
-    background-color: white;
-    color: var(--gray-900);
+    border: 1px solid var(--stroke-primary);
+    background-color: var(--background);
+    color: var(--foreground);
     font-size: var(--font-size-sm);
   }
 
@@ -96,8 +96,8 @@
   .number-button:hover,
   .previous-button:hover,
   .first-button:hover {
-    color: white;
-    background-color: var(--primary-600);
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
   }
 
   .last-button:disabled,
@@ -114,8 +114,8 @@
   }
 
   .number-button.active {
-    background-color: var(--primary-600);
-    color: white;
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
   }
 
 
@@ -137,7 +137,6 @@
   * a root html class accordingly
   */
   :global(.dark) {
-
     .ellipses,
     .number-button,
     .next-button,
@@ -145,21 +144,6 @@
     .previous-button,
     .first-button {
       border-color: var(--canvas-700);
-      background-color: var(--canvas-800);
-      color: var(--gray-200);
-    }
-
-    .number-button:hover,
-    .next-button:hover,
-    .last-button:hover,
-    .previous-button:hover,
-    .first-button:hover {
-      background-color: var(--canvas-700);
-    }
-
-    .number-button.active {
-      background-color: var(--primary-500);
-      color: white;
     }
   }
 }

package/src/components/scroll-area/scroll-area.module.css

@@ -21,11 +21,11 @@
     /* disable browser handling of all panning and zooming gestures on touch devices */
     touch-action: none;
     padding: 2px;
-    background: var(--gray-50);
+    background: var(--surface-panel-scrollbar);
     transition: background 160ms ease-out;
 
     &:hover {
-      background: var(--gray-50);
+      background: var(--surface-panel-scrollbar);
     }
 
     &[data-orientation="vertical"] {
@@ -38,17 +38,9 @@
     }
   }
 
-  .scrollbar:is(:global(.dark) *) {
-    background: var(--canvas-700);
-
-    &:hover {
-      background: var(--canvas-700);
-    }
-  }
-
   .thumb {
     flex: 1;
-    background: var(--primary-100);
+    background: var(--surface-panel-scrollbar-thumb);
     border-radius: var(--border-radius-sm);
     position: relative;
 
@@ -66,15 +58,7 @@
     }
   }
 
-  .thumb:is(:global(.dark) *) {
-    background: var(--primary-400);
-  }
-
   .corner {
-    background: var(--gray-50);
-  }
-
-  .corner:is(:global(.dark) *) {
-    background: var(--canvas-700);
+    background: var(--surface-panel-scrollbar);
   }
 }

package/src/components/tooltip/tooltip.module.css

@@ -4,26 +4,20 @@
   .tooltip {
     font-size: 0.75rem;
     line-height: 1;
-    color: var(--canvas-900);
+    color: var(--surface-item-text);
     user-select: none;
     padding: 0.625rem 1rem;
     border-radius: var(--border-radius-sm);
     border-width: var(--border-width-thin);
     border-style: var(--border-style-solid);
-    background-color: var(--gray-25);
-    border-color: var(--gray-100);
+    background-color: var(--surface-panel-elevated);
+    border-color: var(--surface-panel-border);
     box-shadow: var(--shadow-xs);
     will-change: transform, opacity;
     animation: var(--transition-normal);
   }
 
-  :global(.dark) {
-    .tooltip {
-      color: var(--gray-50);
-      border-color: var(--canvas-700);
-      background-color: var(--canvas-800);
-    }
-  }
+  /* Dark mode handled by semantic tokens in theme layer */
 
   .tooltip[data-state="delayed-open"][data-side="top"] :global {
     animation-name: slideDownAndFade;
@@ -44,12 +38,8 @@
   }
 
   .tooltip-arrow {
-    fill: var(--gray-100)
+    fill: var(--surface-panel-border);
   }
 
-  :global(.dark) {
-    .tooltip-arrow {
-      fill: var(--canvas-700);
-    }
-  }
+  /* Dark mode handled by semantic tokens in theme layer */
 }

package/src/icons/close-icon.tsx

@@ -6,7 +6,7 @@ import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'
 
 export const CloseIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('close-icon', className)} {...rest}>

package/src/icons/copy-icon.tsx

@@ -9,7 +9,7 @@ import type { IconProps } from './types/icon.js'
 import styles from './icons.module.css'
 
 export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-gray'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('copy-icon', className)} {...rest}>
@@ -23,7 +23,6 @@ export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React
       >
         <path
           d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
-          // fill="currentColor"
           fillRule="evenodd"
           clipRule="evenodd"
         />

package/src/icons/icons.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .stroke-none {
     stroke: none;
   }

package/src/react.ts

@@ -39,7 +39,6 @@ export * from './components/section/section.js'
 export * from './components/shimmer/shimmer.js'
 export * from './components/table/table.js'
 export * from './components/tabs/tabs.js'
-export * from './components/timeline/timeline.js'
 export * from './components/tooltip/tooltip.js'
 export * from './icons/activity-icon.js'
 export * from './icons/calendar-icon.js'
@@ -98,4 +97,5 @@ export * from './widgets/drawer/drawer.js'
 export * from './widgets/drawer/drawer-context.js'
 export * from './widgets/modal/modal.js'
 export * from './widgets/search/search.js'
+export * from './widgets/timeline/timeline.js'
 export * from './widgets/datepicker/datepicker.js'

package/src/styles/theme/theme.css

@@ -1,5 +1,6 @@
 @import "./autofill.css";
 @import "./scrollers.css";
+@import "./tokens.css";
 
 @layer infonomic-theme {
   :root {
@@ -38,10 +39,11 @@
     --loader-color: var(--invert-loader-color);
   }
 
-  /* 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 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);