@infonomic/uikit 3.0.0 → 3.2.0

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

@@ -13,7 +13,7 @@ export const SettingsSlidersIcon = ({
   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-sliders-icon', className)} {...rest}>

package/src/icons/sign-out-icon.tsx

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

package/src/icons/stopwatch-icon.tsx

@@ -13,7 +13,7 @@ export const StopwatchIcon = ({
   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('stopwatch-icon', className)} {...rest}>

package/src/icons/user-icon.tsx

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

package/src/icons/users-icon.tsx

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

package/src/icons/wallet-icon.tsx

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

package/src/react.ts

@@ -13,23 +13,23 @@ export * from './components/button/button-group.js'
 export * from './components/button/control-buttons.js'
 export * from './components/button/copy-button.js'
 export * from './components/button/icon-button.js'
-export * from './components/calendar/calendar.js'
 export * from './components/card/card.js'
 export * from './components/container/container.js'
 export * from './components/dropdown/dropdown.js'
 export * from './components/hamburger/hamburger.js'
-export * from './components/input/checkbox.js'
-export * from './components/input/checkbox-group.js'
-export * from './components/input/error-text.js'
-export * from './components/input/errors.js'
-export * from './components/input/help-text.js'
-export * from './components/input/input.js'
-export * from './components/input/input-adornment.js'
-export * from './components/input/label.js'
-export * from './components/input/radio-group.js'
-export * from './components/input/select.js'
-export * from './components/input/text-area.js'
-export * from './components/input/utils.js'
+export * from './components/forms/calendar.js'
+export * from './components/forms/checkbox.js'
+export * from './components/forms/checkbox-group.js'
+export * from './components/forms/error-text.js'
+export * from './components/forms/errors.js'
+export * from './components/forms/help-text.js'
+export * from './components/forms/input.js'
+export * from './components/forms/input-adornment.js'
+export * from './components/forms/label.js'
+export * from './components/forms/radio-group.js'
+export * from './components/forms/select.js'
+export * from './components/forms/text-area.js'
+export * from './components/forms/utils.js'
 export * from './components/notifications/alert.js'
 export * from './components/notifications/toast.js'
 export * from './components/pager/pagination.js'

package/src/styles/theme/tokens.css

@@ -208,6 +208,30 @@
     --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);
+
+    /* 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);
+    
   }
 
   /* ===================================================================
@@ -397,6 +421,29 @@
     --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);
+
+    /* 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);
   }
 
   /* ===================================================================
@@ -596,5 +643,28 @@
     --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);
+
+    /* 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);
+    --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/widgets/datepicker/datepicker.module.css

@@ -109,11 +109,11 @@
     right: 5px;
 
     &:hover {
-      background-color: var(--violet-4);
+      background-color: var(--primary-400);
     }
 
     &:focus {
-      box-shadow: 0 0 0 2px var(--violet-7);
+      box-shadow: 0 0 0 2px var(--primary-600);
     }
   }
 

package/src/widgets/datepicker/datepicker.tsx

@@ -13,9 +13,10 @@ import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { Button } from '../../components/button/button.js'
 import { IconButton } from '../../components/button/icon-button.js'
-import { Calendar } from '../../components/calendar/calendar.js'
-import { Input, InputAdornment } from '../../components/input'
-import type { Intent, Size, Variant } from '../../components/input/@types/input.js'
+import { Calendar } from '../../components/forms/calendar.js'
+import { Input } from '../../components/forms/input.js'
+import { InputAdornment } from '../../components/forms/input-adornment.js'
+import type { Intent, Size, Variant } from '../../components/forms/@types/input.js'
 import { ScrollArea } from '../../components/scroll-area/scroll-area.js'
 import { CalendarIcon } from '../../icons/calendar-icon.js'
 import { CloseIcon } from '../../icons/close-icon.js'

package/src/widgets/drawer/drawer.module.css

@@ -19,7 +19,7 @@
     position: absolute;
     right: 0;
     height: 100%;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel);
     box-shadow: var(--shadow-md);
     z-index: inherit;
   }
@@ -28,10 +28,6 @@
     animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
-  .drawer-container:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   .drawer-depth-0.drawer-medium .drawer-container,
   .drawer-depth-0.drawer-wide .drawer-container {
     width: 90%;

package/src/widgets/modal/modal.module.css

@@ -26,16 +26,12 @@
     max-height: 88vh;
     width: 100%;
     bottom: 0;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
     margin-left: var(--spacing-2);
     margin-right: var(--spacing-2);
   }
 
-  .modal-container:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   @media screen and (min-width: 640px) {
     .modal-container {
       max-height: calc(100vh - 24px);

package/src/widgets/search/search.tsx

@@ -4,8 +4,9 @@ import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 
 import { IconButton } from '../../components/button/index.js'
-import { Input, InputAdornment } from '../../components/input'
-import type { ClassName, Intent, Size, Variant } from '../../components/input/@types/input.js'
+import { Input } from '../../components/forms/input.js'
+import { InputAdornment } from '../../components/forms/input-adornment.js'
+import type { ClassName, Intent, Size, Variant } from '../../components/forms/@types/input.js'
 import { CloseIcon, SearchIcon } from '../../icons'
 
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/dist/components/calendar/calendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAOzB,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAsB,EACtB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,KAAK,EACT,EAAE,aAAa,qBAmHf;yBA3He,QAAQ"}

package/dist/components/calendar/calendar.module.js

@@ -1,45 +0,0 @@
-import "./calendar_module.css";
-const calendar_module = {
-    "day-picker": "day-picker-HxQ06v",
-    dayPicker: "day-picker-HxQ06v",
-    months: "months-J7TsUl",
-    "months-caption": "months-caption-PiBupQ",
-    monthsCaption: "months-caption-PiBupQ",
-    dropdowns: "dropdowns-VSCOqg",
-    "select-trigger": "select-trigger-WeVDcK",
-    selectTrigger: "select-trigger-WeVDcK",
-    "select-content": "select-content-aP7E2D",
-    selectContent: "select-content-aP7E2D",
-    "select-item": "select-item-cZh04s",
-    selectItem: "select-item-cZh04s",
-    "select-chevrons": "select-chevrons-dzIT2u",
-    selectChevrons: "select-chevrons-dzIT2u",
-    "scroll-area": "scroll-area-RHBUqm",
-    scrollArea: "scroll-area-RHBUqm",
-    disabled: "disabled-LuShHt",
-    hidden: "hidden-MqCEoh",
-    outside: "outside-xAO7ei",
-    footer: "footer-svWbOa",
-    weekdays: "weekdays-P7Wn2B",
-    weekday: "weekday-sPtrWT",
-    "caption-label": "caption-label-inrEqz",
-    captionLabel: "caption-label-inrEqz",
-    "month-grid": "month-grid-BQtPCl",
-    monthGrid: "month-grid-BQtPCl",
-    week: "week-y9eP5X",
-    day: "day-r6Pemd",
-    today: "today-sC2iTu",
-    "day-selected": "day-selected-tJv7Z9",
-    daySelected: "day-selected-tJv7Z9",
-    "day-button": "day-button-UTNEY0",
-    dayButton: "day-button-UTNEY0",
-    "button-range": "button-range-m7XSpc",
-    buttonRange: "button-range-m7XSpc",
-    "range-start": "range-start-LrEVeH",
-    rangeStart: "range-start-LrEVeH",
-    "range-end": "range-end-sbDF9w",
-    rangeEnd: "range-end-sbDF9w",
-    "range-middle": "range-middle-Ptrd1e",
-    rangeMiddle: "range-middle-Ptrd1e"
-};
-export { calendar_module as default };

package/dist/components/input/checkbox.module.js

@@ -1,25 +0,0 @@
-import "./checkbox_module.css";
-const checkbox_module = {
-    container: "container-Vffpk2",
-    reverse: "reverse-zpoUi8",
-    checkbox: "checkbox-pyuf1w",
-    indicator: "indicator-Q101gw",
-    icon: "icon-P5QloZ",
-    checkBoxIn: "checkBoxIn-yYID5l",
-    checkBoxOut: "checkBoxOut-bVuKzb",
-    label: "label-WUOrjh",
-    errorText: "errorText-bMyiOA",
-    sm: "sm-gLkW6x",
-    md: "md-o__rzc",
-    lg: "lg-WOB1US",
-    outlined: "outlined-XUVtqj",
-    filled: "filled-xQyvip",
-    primary: "primary-mNSmqc",
-    secondary: "secondary-B96Jra",
-    noeffect: "noeffect-J5I4Dv",
-    success: "success-LoZ4k7",
-    info: "info-NNf4yN",
-    warning: "warning-eEgBnF",
-    danger: "danger-FZ5wZH"
-};
-export { checkbox_module as default };

package/dist/components/input/help-text_module.css

@@ -1,13 +0,0 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
-
-@layer infonomic-components {
-  .text-cLsIw6 {
-    color: var(--gray-800);
-    font-size: .875rem;
-  }
-
-  .dark .text-cLsIw6:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: var(--gray-300);
-  }
-}
-

package/dist/components/input/index.d.ts

@@ -1,9 +0,0 @@
-export * from './input.js';
-export * from './input-adornment.js';
-export * from './label.js';
-export * from './help-text.js';
-export * from './select.js';
-export * from './text-area.js';
-export * from './checkbox.js';
-export * from './utils.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}

package/dist/components/input/input.module.js

@@ -1,27 +0,0 @@
-import "./input_module.css";
-const input_module = {
-    inputWrapper: "inputWrapper-mAHVD5",
-    inputContainer: "inputContainer-rwVhce",
-    input: "input-ZoQqR8",
-    label: "label-XCzmEc",
-    sm: "sm-gXd6Lj",
-    md: "md-FLpZg6",
-    lg: "lg-Gx_VXF",
-    startAdornment: "startAdornment-m5OhH9",
-    endAdornment: "endAdornment-I8D_Kn",
-    helpText: "helpText-mMTduV",
-    outlined: "outlined-A4FTMB",
-    underlined: "underlined-UMONwU",
-    filled: "filled-IQq2M9",
-    error: "error-bZhwHt",
-    startAdornmentPadding: "startAdornmentPadding-dcRUiO",
-    endAdornmentPadding: "endAdornmentPadding-jiTlQb",
-    primary: "primary-FIrC7m",
-    secondary: "secondary-LmtH1h",
-    noeffect: "noeffect-Kb93bb",
-    success: "success-fNk168",
-    info: "info-_CXlQd",
-    warning: "warning-abMXZC",
-    danger: "danger-Q_LJPS"
-};
-export { input_module as default };

package/dist/components/input/radio-group.module.js

@@ -1,20 +0,0 @@
-import "./radio-group_module.css";
-const radio_group_module = {
-    column: "column-LQ2EAh",
-    row: "row-M59fte",
-    "item-container": "item-container-EbfM2u",
-    itemContainer: "item-container-EbfM2u",
-    item: "item-G_Mwa0",
-    indicator: "indicator-TInuBM",
-    radioIn: "radioIn-L_nBcr",
-    radioOut: "radioOut-XH65vc",
-    label: "label-YpJiLs",
-    primary: "primary-W2P_QT",
-    secondary: "secondary-PWYoVU",
-    noeffect: "noeffect-In5gxi",
-    success: "success-R2Jb22",
-    info: "info-A_p4DP",
-    warning: "warning-MWFrsJ",
-    danger: "danger-Lk8pek"
-};
-export { radio_group_module as default };

package/dist/components/input/select.module.js

@@ -1,13 +0,0 @@
-import "./select_module.css";
-const select_module = {
-    content: "content-Xi_QTu",
-    viewport: "viewport-EJrpcl",
-    group: "group-gZB9XW",
-    "scroll-button": "scroll-button-ugUv7N",
-    scrollButton: "scroll-button-ugUv7N",
-    "select-item": "select-item-PN2sc4",
-    selectItem: "select-item-PN2sc4",
-    "select-item-indicator": "select-item-indicator-k_g4AD",
-    selectItemIndicator: "select-item-indicator-k_g4AD"
-};
-export { select_module as default };

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

@@ -1,19 +0,0 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
-
-@layer infonomic-components {
-  .text {
-    font-size: 0.875rem;
-    color: var(--gray-800)
-  }
-
-  /* 🌙 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) {
-    .text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: var(--gray-300);
-    }
-  }
-}