@infonomic/uikit 6.5.1 → 6.7.0

package/src/components/inputs/checkbox-group.module.css

@@ -1,16 +1,15 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   :global(.infonomic-checkbox-group),
   .checkbox-group {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-8);
   }
-}
+}

package/src/components/inputs/checkbox-group.stories.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react'
 
 import { CheckboxGroup } from './checkbox-group.js'
 
-
 export default {
   title: 'Components/Inputs/CheckboxGroup',
   component: CheckboxGroup,
@@ -14,7 +13,7 @@ export default {
 export const Default = (): React.JSX.Element => {
   const [checked, setChecked] = useState(false)
 
-  const handleOnClick = (): void => {
+  const _handleOnClick = (): void => {
     console.log('clicked')
     setChecked(!checked)
   }
@@ -34,14 +33,12 @@ export const Default = (): React.JSX.Element => {
               { id: 'editor', label: 'Editor' },
               { id: 'viewer', label: 'Viewer' },
             ]}
-          // onChange={(selected) => {
-          //   handleOnClick(selected)
-          // }}
+            // onChange={(selected) => {
+            //   handleOnClick(selected)
+            // }}
           />
         </div>
       </div>
     </div>
   )
 }
-
-

package/src/components/inputs/checkbox.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .container,
   :global(.infonomic-checkbox-container) {
     width: 100%;
@@ -93,8 +92,8 @@ infonomic-components;
     color: var(--label-color);
   }
 
-  .checkbox[data-disabled]~.label,
-  :global(.infonomic-checkbox)[data-disabled]~ :global(.infonomic-checkbox-label) {
+  .checkbox[data-disabled] ~ .label,
+  :global(.infonomic-checkbox)[data-disabled] ~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -118,8 +117,8 @@ infonomic-components;
     height: 16px;
   }
 
-  .sm~.label,
-  :global(.infonomic-checkbox-sm)~ :global(.infonomic-checkbox-label) {
+  .sm ~ .label,
+  :global(.infonomic-checkbox-sm) ~ :global(.infonomic-checkbox-label) {
     font-size: 0.85rem;
   }
 
@@ -135,8 +134,8 @@ infonomic-components;
     height: 18px;
   }
 
-  .md~.label,
-  :global(.infonomic-checkbox-md)~ :global(.infonomic-checkbox-label) {
+  .md ~ .label,
+  :global(.infonomic-checkbox-md) ~ :global(.infonomic-checkbox-label) {
     font-size: 0.875rem;
   }
 
@@ -152,8 +151,8 @@ infonomic-components;
     height: 22px;
   }
 
-  .lg~.label,
-  :global(.infonomic-checkbox-lg)~ :global(.infonomic-checkbox-label) {
+  .lg ~ .label,
+  :global(.infonomic-checkbox-lg) ~ :global(.infonomic-checkbox-label) {
     font-size: 1rem;
   }
 
@@ -209,7 +208,7 @@ infonomic-components;
     --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
     --checkbox-variant-outline-ring-color: var(--ring-noeffect);
     --checkbox-variant-filled: var(--fill-noeffect-strong);
-    --checkbox-icon-color: var(--text-on-noeffect);
+    --checkbox-icon-color: var(--text-on-noeffect-strong);
   }
 
   .success,
@@ -239,7 +238,7 @@ infonomic-components;
     --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
     --checkbox-variant-outline-ring-color: var(--ring-warning);
     --checkbox-variant-filled: var(--fill-warning-strong);
-    --checkbox-icon-color: var(--text-on-warning);
+    --checkbox-icon-color: var(--text-on-warning-strong);
   }
 
   .danger,
@@ -276,5 +275,4 @@ infonomic-components;
       /* Settle */
     }
   }
-
-}
+}

package/src/components/inputs/error-text.module.css

@@ -9,7 +9,7 @@
   .text,
   :global(.infonomic-error-text) {
     font-size: 0.875rem;
-    color: var(--error);
+    color: var(--text-danger);
   }
 
   .sm,

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .input-wrapper,
   :global(.infonomic-input-wrapper) {
     display: flex;
@@ -172,23 +171,23 @@ infonomic-components;
     background-color: var(--input-variant-filled);
   }
 
-  /* Error classes last, so that they override all 
+  /* Error classes last, so that they override all
     of the above */
   .error,
   :global(.infonomic-input-error) {
-    border: 1px solid var(--red-400);
+    border: 1px solid var(--field-border-invalid);
   }
 
   .error:hover,
   :global(.infonomic-input-error):hover {
-    border: 1px solid var(--red-400);
+    border: 1px solid var(--field-border-invalid);
   }
 
   .error:focus,
   .error:active,
   :global(.infonomic-input-error):focus,
   :global(.infonomic-input-error):active {
-    --ring-color: var(--red-300);
+    --ring-color: var(--field-ring-invalid);
   }
 
   .underlined.start-adornment-padding,
@@ -287,4 +286,4 @@ infonomic-components;
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/src/components/inputs/label.module.css

@@ -15,6 +15,6 @@
 
   .required,
   :global(.infonomic-label-required) {
-    color: var(--error);
+    color: var(--text-danger);
   }
 }

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

@@ -1,13 +1,12 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
-
   .column,
   :global(.infonomic-radio-group-column) {
     display: flex;
@@ -173,4 +172,4 @@ infonomic-components;
       transform: scale(0.8);
     }
   }
-}
+}

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .positioner,
   :global(.infonomic-select-positioner) {
     z-index: 50;
@@ -150,4 +149,4 @@ infonomic-components;
   .popup-xl .select-item-indicator {
     width: 28px;
   }
-}
+}

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

@@ -21,7 +21,12 @@ export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <Select items={values} size="xl" placeholder="Select one..." helpText="Extra Large select." />
+        <Select
+          items={values}
+          size="xl"
+          placeholder="Select one..."
+          helpText="Extra Large select."
+        />
       </div>
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <Select items={values} size="lg" placeholder="Select one..." helpText="Large select." />
@@ -33,7 +38,12 @@ export const Default = (): React.JSX.Element => {
         <Select items={values} size="sm" placeholder="Select one..." helpText="Small select." />
       </div>
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <Select items={values} size="xs" placeholder="Select one..." helpText="Extra small select." />
+        <Select
+          items={values}
+          size="xs"
+          placeholder="Select one..."
+          helpText="Extra small select."
+        />
       </div>
     </>
   )
@@ -42,10 +52,17 @@ export const Default = (): React.JSX.Element => {
 export const CustomChildren = (): React.JSX.Element => {
   return (
     <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-      <Select items={values} size="md" placeholder="Select one..." helpText="Custom children rendering.">
+      <Select
+        items={values}
+        size="md"
+        placeholder="Select one..."
+        helpText="Custom children rendering."
+      >
         {values.map((value) => (
           <SelectItem key={value.value} value={value.value} label={value.label}>
-            {value.prefix}{value.label}{value.suffix}
+            {value.prefix}
+            {value.label}
+            {value.suffix}
           </SelectItem>
         ))}
       </Select>

package/src/components/inputs/select.tsx

@@ -84,13 +84,16 @@ export function Select<Value extends string | number = string>({
             <SelectPrimitive.ScrollUpArrow className={styles['scroll-arrow']}>
               <ChevronUpIcon />
             </SelectPrimitive.ScrollUpArrow>
-            <SelectPrimitive.Popup className={cx(styles.popup, size != null && styles[`popup-${size}`])}>
+            <SelectPrimitive.Popup
+              className={cx(styles.popup, size != null && styles[`popup-${size}`])}
+            >
               <SelectPrimitive.List className={styles.list}>
-                {children ?? items?.map((item) => (
-                  <SelectItem key={item.value} value={item.value} label={item.label}>
-                    {item.label}
-                  </SelectItem>
-                ))}
+                {children ??
+                  items?.map((item) => (
+                    <SelectItem key={item.value} value={item.value} label={item.label}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
               </SelectPrimitive.List>
             </SelectPrimitive.Popup>
             <SelectPrimitive.ScrollDownArrow className={styles['scroll-arrow']}>
@@ -98,7 +101,6 @@ export function Select<Value extends string | number = string>({
             </SelectPrimitive.ScrollDownArrow>
           </SelectPrimitive.Positioner>
         </SelectPrimitive.Portal>
-
       </SelectPrimitive.Root>
       {helpText != null && helpText?.length > 0 && <HelpText text={helpText} />}
     </div>

package/src/components/inputs/text-area.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .text-area,
   :global(.infonomic-text-area) {
     font-size: 1rem;
@@ -27,7 +26,9 @@ infonomic-components;
     outline: none;
   }
 
-  .outlined {}
+  .outlined {
+  }
 
-  .filled {}
-}
+  .filled {
+  }
+}

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

@@ -1,9 +1,9 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   /* ============================================
@@ -53,7 +53,6 @@ infonomic-components;
   }
 
   @media (min-width: 48rem) {
-
     .bottom-right,
     :global(.infonomic-toast-bottom-right) {
       bottom: var(--viewport-padding);
@@ -104,27 +103,19 @@ infonomic-components;
     gap: var(--gap-1);
     padding-top: 12px;
     padding-bottom: 16px;
-    background: var(--gray-25);
+    background: var(--surface-panel-elevated);
     border-width: var(--border-width-thin);
     border-color: var(--border-color);
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-sm);
-    transform: translateX(var(--toast-swipe-movement-x, 0)) translateY(var(--toast-swipe-movement-y, 0));
+    transform: translateX(var(--toast-swipe-movement-x, 0))
+      translateY(var(--toast-swipe-movement-y, 0));
     transition:
       transform 200ms ease-out,
       opacity 150ms ease-in;
   }
 
-  :global(.dark),
-  :global([data-theme="dark"]) {
-
-    .root,
-    :global(.infonomic-toast-root) {
-      background: var(--canvas-800);
-    }
-  }
-
   /* Entry animation */
   .root[data-starting-style],
   :global(.infonomic-toast-root[data-starting-style]) {
@@ -133,7 +124,6 @@ infonomic-components;
   }
 
   @media (min-width: 48rem) {
-
     .viewport.top-right .root[data-starting-style],
     .viewport.bottom-right .root[data-starting-style],
     :global(.infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style]),
@@ -241,4 +231,4 @@ infonomic-components;
     justify-content: end;
     padding: 0 12px 0 12px;
   }
-}
+}

package/src/components/notifications/toast.tsx

@@ -65,17 +65,8 @@ export function ToastViewport({ position = 'bottom-right', className }: ToastVie
   )
 }
 
-function ToastItem({
-  toast,
-}: {
-  toast: ToastPrimitive.Root.ToastObject<ToastData>
-}) {
-  const {
-    intent = 'success',
-    iconType = 'success',
-    icon = true,
-    close = true,
-  } = toast.data ?? {}
+function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData> }) {
+  const { intent = 'success', iconType = 'success', icon = true, close = true } = toast.data ?? {}
   const eventDateRef = React.useRef(new Date())
   const Icon = toastIcons[iconType as keyof typeof toastIcons]
 

package/src/components/pager/first-button.tsx

@@ -39,7 +39,11 @@ export const FirstButton = ({
   return (
     <li className={styles['mobile-toggle']}>
       {render ? (
-        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
       ) : (
         <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
           {children ?? <ChevronLeftDoubleIcon width="18px" height="18px" />}

package/src/components/pager/last-button.tsx

@@ -44,7 +44,11 @@ export const LastButton = ({
   return (
     <li className={styles['mobile-toggle']}>
       {render ? (
-        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
       ) : (
         <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
           {children ?? <ChevronRightDoubleIcon width="18px" height="18px" />}

package/src/components/pager/next-button.tsx

@@ -44,7 +44,11 @@ export const NextButton = ({
   return (
     <li className={styles['mobile-toggle']}>
       {render ? (
-        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
       ) : (
         <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
           {children ?? <ChevronRightIcon width="18px" height="18px" />}

package/src/components/pager/number-button.tsx

@@ -51,8 +51,7 @@ export const NumberButton = ({
       },
       {
         [styles['rounded-right']]:
-          page === count &&
-          ((!(showLastButton ?? false) && (hideNextButton ?? false)) || mobile),
+          page === count && ((!(showLastButton ?? false) && (hideNextButton ?? false)) || mobile),
       },
       'pagination-number',
       className
@@ -71,7 +70,11 @@ export const NumberButton = ({
   return (
     <li className="flex">
       {render ? (
-        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
       ) : (
         <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
           {children ?? page}

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

@@ -133,11 +133,6 @@
     }
   }
 
-  /* 🌙 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),
   :global([data-theme="dark"]) {
     .ellipses,
@@ -146,7 +141,7 @@
     .last-button,
     .previous-button,
     .first-button {
-      border-color: var(--canvas-700);
+      border-color: var(--border-color);
     }
   }
 }

package/src/components/pager/previous-button.tsx

@@ -39,7 +39,11 @@ export const PreviousButton = ({
   return (
     <li className={styles['mobile-toggle']}>
       {render ? (
-        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
       ) : (
         <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
           {children ?? <ChevronLeftIcon width="18px" height="18px" />}

package/src/components/scroll-area/scroll-area.tsx

@@ -5,7 +5,7 @@ import cx from 'classnames'
 
 import styles from './scroll-area.module.css'
 
-interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> { }
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {}
 
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
   <ScrollAreaPrimitive.Root

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -23,7 +23,7 @@
     justify-content: center;
     bottom: 45px;
     right: 30px;
-    color: var(--text-on-primary);
+    color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong);
     transition-property: all, color;
     transition-duration: 0.3s, 1ms;
@@ -41,14 +41,14 @@
   .scroll-to-top span svg path,
   :global(.infonomic-scroll-to-top span svg path) {
     stroke: none;
-    fill: var(--text-on-primary);
+    fill: var(--text-on-primary-strong);
   }
 
   .scroll-to-top:hover,
   .scroll-to-top:focus,
   :global(.infonomic-scroll-to-top:hover),
   :global(.infonomic-scroll-to-top:focus) {
-    color: var(--text-on-primary);
+    color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }

package/src/components/tabs/tabs.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .tabs-root,
   :global(.infonomic-tabs-root) {
     display: flex;
@@ -62,4 +61,4 @@ infonomic-components;
       outline: none;
     }
   }
-}
+}

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .tooltip,
   :global(.infonomic-tooltip) {
     font-size: 0.75rem;
@@ -46,22 +45,22 @@ infonomic-components;
   :global(.infonomic-tooltip-arrow) {
     display: flex;
 
-    &[data-side='top'] {
+    &[data-side="top"] {
       bottom: -6px;
       rotate: 180deg;
     }
 
-    &[data-side='bottom'] {
+    &[data-side="bottom"] {
       top: -6px;
       rotate: 0deg;
     }
 
-    &[data-side='left'] {
+    &[data-side="left"] {
       right: -10px;
       rotate: 90deg;
     }
 
-    &[data-side='right'] {
+    &[data-side="right"] {
       left: -10px;
       rotate: -90deg;
     }
@@ -78,4 +77,4 @@ infonomic-components;
   .arrow-inner-stroke {
     fill: var(--surface-panel-elevated);
   }
-}
+}