@mindlogic-ai/logician-ui 3.1.0-alpha.5 → 3.1.0-alpha.7

package/src/components/Table/Tbody.tsx

@@ -1,27 +1,9 @@
 import { forwardRef } from 'react';
 import { Table } from '@chakra-ui/react';
 
-import { mergeCss } from '@/utils/mergeCss';
-
 export const Tbody = forwardRef<HTMLTableSectionElement, Table.BodyProps>(
-  ({ css, ...props }, ref) => {
-    return (
-      <Table.Body
-        ref={ref}
-        color="fg.default"
-        fontWeight="medium"
-        {...props}
-        css={mergeCss(
-          {
-            // Remove bottom border from last row to prevent overlap with container border
-            '& > tr:last-of-type > td': {
-              borderBottom: 'none',
-            },
-          },
-          css
-        )}
-      />
-    );
+  (props, ref) => {
+    return <Table.Body ref={ref} {...props} />;
   }
 );
 

package/src/components/Table/Th.tsx

@@ -125,7 +125,8 @@ export const Th = forwardRef<
       stickyDirection,
       scrollState,
       stickyOffset,
-      isLastSticky
+      isLastSticky,
+      'bg.subtle'
     );
 
     return (

package/src/components/Table/Thead.tsx

@@ -1,5 +1,7 @@
 import { Table } from '@chakra-ui/react';
 
-export const Thead = ({ ...rest }: Table.HeaderProps) => {
-  return <Table.Header color="fg.muted" fontWeight="medium" {...rest} />;
+import { TableHeaderProps } from './Table.types';
+
+export const Thead = ({ sticky, ...rest }: TableHeaderProps) => {
+  return <Table.Header data-sticky={sticky ? '' : undefined} {...rest} />;
 };

package/src/components/Table/Tr.tsx

@@ -1,5 +1,33 @@
+import { forwardRef } from 'react';
 import { Table } from '@chakra-ui/react';
 
-export const Tr = ({ ...rest }: Table.RowProps) => {
-  return <Table.Row h={12} {...rest} />;
-};
+import { TableRowProps } from './Table.types';
+
+/**
+ * Table row.
+ *
+ * Sets `data-interactive` automatically when the row is clickable (onClick,
+ * role="button", or tabIndex), which keys the hover/cursor/focus styling in
+ * the table recipe — static rows never highlight. The ref is forwarded so
+ * drag-and-drop rows (e.g. dnd-kit) can attach directly.
+ */
+export const Tr = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ state, ...rest }, ref) => {
+    const isInteractive =
+      rest.onClick != null || rest.role === 'button' || rest.tabIndex != null;
+
+    return (
+      <Table.Row
+        ref={ref}
+        h={12}
+        data-interactive={isInteractive ? '' : undefined}
+        data-selected={state === 'selected' ? '' : undefined}
+        data-invalid={state === 'invalid' ? '' : undefined}
+        data-highlighted={state === 'highlighted' ? '' : undefined}
+        {...rest}
+      />
+    );
+  }
+);
+
+Tr.displayName = 'Tr';

package/src/components/Textarea/Textarea.stories.tsx

@@ -65,7 +65,7 @@ export const Invalid: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <span style={{ color: '#D01721', fontSize: '14px' }}>
+        <span style={{ color: '#C1232C', fontSize: '14px' }}>
           This field contains an error. Please fix it.
         </span>
       </div>

package/src/theme/Palette.stories.tsx

@@ -475,7 +475,7 @@ export const ContrastReference: Story = {
         bg: 'danger.main',
         text: 'white',
         label: 'danger.main + white',
-        ratio: '5.2:1',
+        ratio: '5.9:1',
         badge: 'AA',
       },
       {

package/src/theme/SemanticTokens.mdx

@@ -67,6 +67,9 @@ between a light and a dark value.
 | `bg.subtle` | `gray.50` | `gray.1300` | Subtle fill, hover background, secondary surface |
 | `bg.muted` | `gray.100` | `gray.1200` | Muted fill, tertiary surface, neutral chips |
 | `bg.inverse` | `gray.1300` | `gray.50` | High-contrast/inverse surface (flips with mode) |
+| `bg.selected` | `blue.25` | `blue.900` | Selected rows/items (mirrors `primary.lightest`) |
+| `bg.invalid.subtle` | `rose.25` | `rose.900` | Validation-error rows/fields (mirrors `danger.lightest`) |
+| `bg.highlighted` | `gold.25` | `gold.900` | Transient highlights, scroll-to emphasis (mirrors `warning.lightest`) |
 
 ### Border — `border.*` (borders & dividers)
 

package/src/theme/claude.md

@@ -54,8 +54,8 @@ Error and destructive action states.
 | `rose.100` | `#F3B9BD` | Light error fills |
 | `rose.200` | `#E87D84` | Error borders, icons |
 | `rose.300` | `#DC4A53` | Error accents |
-| `rose.500` | `#D01721` | **Danger main** - error states |
-| `rose.600` | `#A6121A` | Hover on main |
+| `rose.500` | `#C1232C` | **Danger main** - error states |
+| `rose.600` | `#9C1C23` | Hover on main |
 | `rose.700` | `#7D0D14` | Error text |
 | `rose.800` | `#53090D` | Dark emphasis |
 | `rose.900` | `#2A0407` | Darkest, high contrast |
@@ -161,7 +161,7 @@ semanticTokens: {
       extralight: 'rose.50',   // #FBE8E9 - Extra-light backgrounds
       lighter: 'rose.100',     // #F3B9BD - Light error fills
       light: 'rose.200',       // #E87D84 - Error borders
-      main: 'rose.500',        // #D01721 - Error states
+      main: 'rose.500',        // #C1232C - Error states
       dark: 'rose.700',        // #7D0D14 - Error text on light bg
       darker: 'rose.900',      // #2A0407 - High contrast error text
     },
@@ -249,7 +249,7 @@ All semantic color combinations meet WCAG 2.1 accessibility standards:
 | `primary.lightest` + `primary.dark` | 7.2:1 | AAA |
 | `primary.main` + white | 5.9:1 | AA |
 | `danger.lightest` + `danger.dark` | 7.4:1 | AAA |
-| `danger.main` + white | 5.2:1 | AA |
+| `danger.main` + white | 5.9:1 | AA |
 | `success.lightest` + `success.dark` | 6.1:1 | AA |
 | `warning.lightest` + `warning.dark` | 5.8:1 | AA |
 | `gray.0` + `gray.1300` | 11.2:1 | AAA |

package/src/theme/colors.ts

@@ -140,7 +140,7 @@ export const semanticTokens = {
      * Use for: Error states, destructive actions, validation errors
      *
      * Light contrast ratios (on white):
-     * - main (#D01721): 5.2:1 ✓ AA
+     * - main (#C1232C): 5.9:1 ✓ AA
      * - dark (#7D0D14): 9.6:1 ✓ AAA
      */
     danger: {
@@ -268,6 +268,27 @@ export const semanticTokens = {
       panel: {
         value: { base: '{colors.white}', _dark: '{colors.gray.1400}' },
       },
+      /**
+       * Row/selection state tints. Use these for selected rows,
+       * validation-error rows, and transient highlights instead of
+       * hand-picking `primary.*`/`danger.*` tints at the call site.
+       *
+       * Values mirror `primary.lightest` / `danger.lightest` /
+       * `warning.lightest` (this Chakra version doesn't resolve
+       * semantic→semantic token references, so the primitive pairs are
+       * repeated here — keep them in sync with the brand ramps above).
+       */
+      selected: {
+        value: { base: '{colors.blue.25}', _dark: '{colors.blue.900}' },
+      },
+      invalid: {
+        subtle: {
+          value: { base: '{colors.rose.25}', _dark: '{colors.rose.900}' },
+        },
+      },
+      highlighted: {
+        value: { base: '{colors.gold.25}', _dark: '{colors.gold.900}' },
+      },
     },
 
     /**
@@ -336,7 +357,15 @@ export const semanticTokens = {
  * contract. App code should use `bg.surface`/`bg.canvas`.
  */
 export type SemanticColorToken =
-  | `bg.${'canvas' | 'surface' | 'subtle' | 'muted' | 'inverse'}`
+  | `bg.${
+      | 'canvas'
+      | 'surface'
+      | 'subtle'
+      | 'muted'
+      | 'inverse'
+      | 'selected'
+      | 'highlighted'}`
+  | 'bg.invalid.subtle'
   | `fg.${'default' | 'muted' | 'subtle' | 'inverse'}`
   | `border.${'default' | 'subtle' | 'strong'}`
   | `${'primary' | 'secondary' | 'danger' | 'success' | 'warning'}.${
@@ -409,8 +438,8 @@ export const colors = {
     100: { value: '#F3B9BD' }, // Lighter - subtle error fills
     200: { value: '#E87D84' }, // Light - error borders
     300: { value: '#DC4A53' }, // Medium - error accents
-    500: { value: '#D01721' }, // Base - danger.main
-    600: { value: '#A6121A' }, // Dark - hover on main
+    500: { value: '#C1232C' }, // Base - danger.main (desaturated ~1 notch from #D01721)
+    600: { value: '#9C1C23' }, // Dark - hover on main (desaturated to match .500)
     700: { value: '#7D0D14' }, // Darker - error text
     800: { value: '#53090D' }, // Very dark - emphasis
     900: { value: '#2A0407' }, // Darkest - high contrast
@@ -523,8 +552,8 @@ export const colors = {
     100: { value: '#F3B9BD' },
     200: { value: '#E87D84' },
     300: { value: '#DC4A53' },
-    500: { value: '#D01721' },
-    600: { value: '#A6121A' },
+    500: { value: '#C1232C' }, // kept in sync with rose.500 (deprecated alias)
+    600: { value: '#9C1C23' }, // kept in sync with rose.600 (deprecated alias)
     700: { value: '#7D0D14' },
     800: { value: '#53090D' },
     900: { value: '#2A0407' },

package/src/theme/index.ts

@@ -7,6 +7,7 @@ import {
 
 import { colors, semanticTokens } from './colors';
 import { globalCss } from './global';
+import { tableSlotRecipe } from './recipes/table';
 
 /**
  * Shared textStyle value objects for DRY principle
@@ -243,6 +244,9 @@ const config = defineConfig({
       colors: semanticTokens.colors,
     },
     textStyles,
+    slotRecipes: {
+      table: tableSlotRecipe,
+    },
   },
 });
 

package/src/theme/recipes/table.ts

@@ -0,0 +1,91 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+/**
+ * Logician overrides for Chakra's `table` slot recipe.
+ *
+ * Merged on top of Chakra's default table recipe by `createSystem`, so only
+ * the deltas live here. Everything uses semantic (mode-aware) tokens so a
+ * no-prop <Table> renders the correct header/border/text/hover in both light
+ * and dark mode — consumers should only override for genuine per-row state
+ * or layout.
+ */
+export const tableSlotRecipe = defineSlotRecipe({
+  slots: ['root', 'header', 'body', 'row', 'columnHeader', 'cell'],
+  base: {
+    root: {
+      color: 'fg.default',
+    },
+    header: {
+      color: 'fg.muted',
+      fontWeight: 'medium',
+      // Opt-in sticky header affordance: <Thead sticky>
+      '&[data-sticky]': {
+        position: 'sticky',
+        top: 0,
+        // Above sticky-column cells (zIndex 2 in Table.styles.ts)
+        zIndex: 'docked',
+        bg: 'bg.surface',
+        // border-collapse leaves cell borders behind when the header sticks;
+        // the shadow keeps the bottom hairline visible while scrolled
+        boxShadow: '0 1px 0 0 {colors.border.subtle}',
+      },
+    },
+    body: {
+      fontWeight: 'medium',
+      // Remove the last row's bottom border so it doesn't double up with
+      // TableContainer's border. Both rules are needed under border-collapse:
+      // the row border comes from base.row, the cell border from Chakra's
+      // line variant.
+      '& > tr:last-of-type': {
+        borderBottom: 'none',
+      },
+      '& > tr:last-of-type > td': {
+        borderBottom: 'none',
+      },
+    },
+    row: {
+      borderBottomWidth: '1px',
+      borderBottomColor: 'border.subtle',
+      // Interactive styling is keyed off data-interactive, which <Tr> sets
+      // automatically when it receives onClick / role="button" / tabIndex —
+      // static tables never pick up hover/cursor styling.
+      '&[data-interactive]': {
+        cursor: 'pointer',
+        _hover: { bg: 'bg.muted' },
+        // Inset outline instead of the shared focusRing util (boxShadow
+        // ring): rows are clipped by TableContainer's rounded overflow,
+        // which would crop an outer ring.
+        _focusVisible: {
+          outline: '2px solid',
+          outlineColor: 'primary.main',
+          outlineOffset: '-2px',
+        },
+      },
+      // Row-state tints: set via <Tr state="..."> (data-selected /
+      // data-invalid / data-highlighted)
+      _selected: { bg: 'bg.selected' },
+      _invalid: { bg: 'bg.invalid.subtle' },
+      _highlighted: { bg: 'bg.highlighted' },
+    },
+    columnHeader: {
+      color: 'fg.muted',
+      fontWeight: 'medium',
+      bg: 'bg.subtle',
+      borderBottomWidth: '1px',
+      borderBottomColor: 'border.subtle',
+    },
+    cell: {
+      borderBottomColor: 'border.subtle',
+    },
+  },
+  variants: {
+    variant: {
+      line: {
+        // Chakra's line variant paints rows with the raw `bg` token (pure
+        // black in dark mode); keep rows transparent so the surface behind
+        // the table shows through and state tints/hover sit on top.
+        row: { bg: 'transparent' },
+      },
+    },
+  },
+});