@infonomic/uikit 3.0.0 → 3.2.0

package/src/components/{calendar → forms}/calendar.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof CalendarComponent> = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Components/Input/Calendar',
+  title: 'Components/Forms/Calendar',
   component: CalendarComponent,
 }
 

package/src/components/{input → forms}/checkbox.stories.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react'
 import { Checkbox } from './checkbox.js'
 
 export default {
-  title: 'Components/Input/Checkbox',
+  title: 'Components/Forms/Checkbox',
   component: Checkbox,
   argTypes: {},
 }

package/src/components/forms/help-text.module.css

@@ -0,0 +1,8 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .text {
+    font-size: 0.875rem;
+    color: var(--muted)
+  }
+}

package/src/components/{input → forms}/input.stories.tsx

@@ -9,7 +9,7 @@ import { size, variant } from './@types/input.js'
 import { Input, InputAdornment } from './index.js'
 
 export default {
-  title: 'Components/Input/Text',
+  title: 'Components/Forms/Text',
   component: Input,
   argTypes: {},
 }

package/src/components/{input → forms}/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/Input',
+  title: 'Components/Forms/RadioGroup',
   component: RadioGroupComponent,
 }
 
@@ -32,7 +32,7 @@ const values3: RadioGroupValue[] = [
   { id: 'rg9', label: 'Three', value: '3' },
 ]
 
-export const RadioGroup = (): React.JSX.Element => {
+export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>

package/src/components/{input → forms}/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 → forms}/select.stories.tsx

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

package/src/components/{input → forms}/text-area.stories.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react'
 import { TextArea } from './index.js'
 
 export default {
-  title: 'Components/Input/TextArea',
+  title: 'Components/Forms/TextArea',
   component: TextArea,
   argTypes: {},
 }

package/src/components/{input → forms}/utils.ts

@@ -1,6 +1,6 @@
-import type { ZodType, z } from 'zod'
+import type { z } from 'zod'
 
-type FormattedErrors = z.inferFormattedError<ZodType<any, any, any>>
+type FormattedErrors = z.ZodFormattedError<any>
 
 export function hasErrors(name: string, clientErrors: any, serverErrors: any): boolean {
   return Boolean(serverErrors?.[name as keyof typeof serverErrors] ?? clientErrors[name])

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/activity-icon.tsx

@@ -10,7 +10,7 @@ export const ActivityIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('activity-icon', className)} {...rest}>

package/src/icons/calendar-icon.tsx

@@ -13,7 +13,7 @@ export const CalendarIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('calendar-icon', className)} {...rest}>

package/src/icons/check-icon.tsx

@@ -9,7 +9,7 @@ import type { IconProps } from './types/icon.js'
 import styles from './icons.module.css'
 
 export const CheckIcon = ({ 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('check-icon', className)} {...rest}>

package/src/icons/chevron-down-icon.tsx

@@ -13,7 +13,7 @@ export const ChevronDownIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevron-down-icon', className)} {...rest}>

package/src/icons/chevron-left-double-icon.tsx

@@ -31,7 +31,7 @@ export const ChevronLeftDoubleIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevron-left-double-icon', className)} {...rest}>

package/src/icons/chevron-left-icon.tsx

@@ -31,7 +31,7 @@ export const ChevronLeftIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevron-left-icon', className)} {...rest}>

package/src/icons/chevron-right-double-icon.tsx

@@ -31,7 +31,7 @@ export const ChevronRightDoubleIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevron-right-double-icon', className)} {...rest}>

package/src/icons/chevron-right-icon.tsx

@@ -31,7 +31,7 @@ export const ChevronRightIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevron-right-icon', className)} {...rest}>

package/src/icons/chevrons-up-down.tsx

@@ -10,7 +10,7 @@ export const ChevronsUpDown = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('chevrons-up-down', className)} {...rest}>

package/src/icons/close-icon.astro

@@ -25,7 +25,7 @@ const { class: className, width, height, svgClass: svgClassName, menuItem, ...re
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 15 15"
-    class:list={[styles['fill-contrast'], svgClassName]}
+    class:list={[styles['fill-current'], svgClassName]}
     focusable="false"
     aria-hidden="true"
     {...rest}

package/src/icons/dashboard-icon.tsx

@@ -13,7 +13,7 @@ export const DashboardIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('dashboard-icon', className)} {...rest}>

package/src/icons/document-icon.tsx

@@ -13,7 +13,7 @@ export const DocumentIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('document-icon', className)} {...rest}>

package/src/icons/download-icon.tsx

@@ -13,7 +13,7 @@ export const DownloadIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('download-icon', className)} {...rest}>

package/src/icons/edit-icon.tsx

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

package/src/icons/ellipsis-icon.tsx

@@ -13,7 +13,7 @@ export const EllipsisIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('ellipsis-icon', className)} {...rest}>

package/src/icons/email-icon.tsx

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

package/src/icons/github-icon.tsx

@@ -6,7 +6,7 @@ import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'
 
 export const GithubIcon = ({ 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('github-icon', className)} {...rest}>

package/src/icons/globe-icon.tsx

@@ -9,7 +9,7 @@ import type { IconProps } from './types/icon.js'
 import styles from './icons.module.css'
 
 export const GlobeIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], styles['stroke-none'], svgClassName)
+  const applied = cx(styles['fill-current'], styles['stroke-none'], svgClassName)
 
   return (
     <IconElement className={cx('globe-icon flex items-center justify-center', className)} {...rest}>

package/src/icons/gripper-vertical-icon.tsx

@@ -13,7 +13,7 @@ export const GripperVerticalIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('gripper-vertical-icon', className)} {...rest}>

package/src/icons/history-icon.tsx

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

package/src/icons/home-icon.tsx

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

package/src/icons/light-icon.astro

@@ -25,7 +25,7 @@ const { class: className, width, height, svgClass: svgClassName, menuItem, ...re
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    class:list={[styles['fill-contrast'], styles['stroke-none'], svgClassName]}
+    class:list={[styles['fill-current'], styles['stroke-none'], svgClassName]}
     focusable="false"
     aria-hidden="true"
   >

package/src/icons/light-icon.tsx

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

package/src/icons/moon-icon.astro

@@ -25,7 +25,7 @@ const { class: className, width, height, svgClass: svgClassName, menuItem, ...re
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    class:list={[styles['fill-none'], styles['stroke-contrast'], svgClassName]}
+    class:list={[styles['fill-none'], styles['stroke-current'], svgClassName]}
     focusable="false"
     aria-hidden="true"
     stroke-linecap="round"

package/src/icons/moon-icon.tsx

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

package/src/icons/plus-icon.tsx

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

package/src/icons/refresh-icon.tsx

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

package/src/icons/return-icon.tsx

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

package/src/icons/roles-icon.tsx

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

package/src/icons/search-icon.astro

@@ -25,7 +25,7 @@ const { class: className, width, height, svgClass: svgClassName, menuItem, ...re
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    class:list={[styles['fill-contrast'], styles['stroke-none'], svgClassName]}
+    class:list={[styles['fill-current'], styles['stroke-none'], svgClassName]}
     focusable="false"
     aria-hidden="true"
     stroke-linecap="round"

package/src/icons/search-icon.tsx

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

package/src/icons/settings-gear-icon.tsx

@@ -13,7 +13,7 @@ export const SettingsGearIcon = ({
   svgClassName,
   ...rest
 }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('settings-gear-icon', className)} {...rest}>