@mindlogic-ai/logician-ui 3.2.0-alpha.4 → 4.0.0-alpha.10

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,4 +1,4 @@
-import { HStack, Icon, Text } from '@chakra-ui/react';
+import { HStack, Icon, Stack, Text, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { FiHome, FiSettings, FiUser } from 'react-icons/fi';
@@ -143,6 +143,32 @@ export const EditableLabel: StoryObj<
   ),
 };
 
+/**
+ * The same control rendered on each of the three main page-background tokens.
+ * The track fill (`bg.subtle`) matches `bg.sunken` in light mode, so without a
+ * defining ring the control would disappear on a sunken list/overview page.
+ * Confirm the control reads as a bounded control on all three surfaces, in both
+ * light and dark (flip the **Color mode** toolbar control).
+ */
+export const OnPageBackgrounds: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: (props) => {
+    const surfaces = ['bg.surface', 'bg.sunken', 'bg.canvas'] as const;
+    return (
+      <Stack gap={0}>
+        {surfaces.map((surface) => (
+          <VStack key={surface} bg={surface} p={8} align="start" gap={3}>
+            <Text fontSize="sm" fontWeight="600" color="fg.muted">
+              on {surface}
+            </Text>
+            <SegmentedControl {...props} />
+          </VStack>
+        ))}
+      </Stack>
+    );
+  },
+};
+
 export const WithCustomContent = {
   args: {
     options: [

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -66,31 +66,38 @@ export const SegmentedControl = forwardRef<
         }
       }}
       size={size}
-      // Light mode: track is bg.subtle (gray.50) and the selected indicator is
-      // bg.surface (white) lifted by an md shadow — a classic raised thumb.
+      // Track is bg.subtle (gray.50 light) and the selected indicator rides on
+      // `bg.raised` — a raised neutral surface that resolves white in light and
+      // the lightest neutral (gray.1100) in dark, so the thumb reads as lifted
+      // above the track in both modes (`bg.surface` could not: its dark value is
+      // darker than the track). The indicator also gains a shadow: an md drop
+      // shadow in light, and in dark — where a drop shadow is invisible on a
+      // dark canvas — a soft ambient shadow + a translucent-white hairline edge.
       //
-      // Selected indicator rides on `bg.raised` — a raised neutral surface that
-      // resolves white in light and the lightest neutral (gray.1100) in dark,
-      // so the thumb reads as lifted above the `bg.subtle` track in both modes
-      // (`bg.surface` could not: its dark value is darker than the track). Dark
-      // mode also needs two things light mode doesn't, and neither
-      // maps to a token: a drop shadow is invisible on a dark canvas, so the
-      // indicator gains a soft ambient shadow + a translucent-white hairline
-      // edge; and the track only contrasts against the app canvas — on a
-      // same-or-lighter dark surface (e.g. a bg.surface card) it would vanish
-      // and leave the control looking like floating text, so a translucent
-      // hairline ring defines its bounds on any dark background. Both rings are
-      // box-shadows (not borders) so the matched item-height math is preserved.
+      // The track itself only contrasts where the page wash is darker (light) or
+      // lighter (dark) than the fill. It vanishes when the page matches the
+      // track: a `bg.sunken` list/overview page is gray.50 in light — identical
+      // to the bg.subtle track — and a `bg.surface` card is lighter than the
+      // track in dark. In either case the control would read as floating text,
+      // so a hairline ring defines its bounds on *any* background: a neutral
+      // `border.default` ring in light, a translucent-white ring in dark. (The
+      // ring — not the track fill — does the work here: the selected thumb is a
+      // raised white surface lifted by its shadow, a relationship that depends
+      // on the track staying light, so we outline the group rather than darken
+      // it. `border.default` keeps the edge present but light — `border.strong`
+      // reads as a heavy box for a control that normally has no outline.) Both
+      // rings are box-shadows (not borders) so the matched item-height math is
+      // preserved.
       bg="bg.subtle"
       p="1"
       borderRadius={borderRadius}
-      boxShadow="none"
       w="fit-content"
       {...rest}
       css={mergeCss(
         {
           '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
           '--segment-indicator-shadow': `var(--chakra-shadows-md)`,
+          boxShadow: '0 0 0 1px var(--chakra-colors-border-default)',
           '.dark &': {
             '--segment-indicator-shadow':
               '0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08)',

package/src/components/SegmentedProgressBar/SegmentedProgressBar.tsx

@@ -13,7 +13,11 @@ export const SegmentedProgressBar = ({
         position="relative"
         flex={1}
         display="flex"
-        bgColor="bg.muted"
+        // The remainder behind the segments is a meter surface, so it needs a
+        // visible fill. bg.muted (gray.100) is ~1.03:1 against the bg.sunken page
+        // wash (gray.50) and vanishes there; bg.track (gray.300) reads as a
+        // filled track on any background. Filled segments paint over it.
+        bgColor="bg.track"
         borderRadius="full"
         w="100%"
         h="16px"

package/src/components/Slider/SliderTrack/SliderTrack.tsx

@@ -9,7 +9,16 @@ export const SliderTrack = forwardRef(
     ref?: ForwardedRef<HTMLDivElement>
   ) => {
     return (
-      <Slider.Track bg="bg.muted" {...rest} ref={ref}>
+      <Slider.Track
+        // The empty rail is a meter surface — too thin for an outline to read as
+        // anything but a hollow edge — so the fill itself must contrast. bg.muted
+        // (gray.100) is ~1.03:1 against the bg.sunken page wash (gray.50) and
+        // disappears there; bg.track (gray.300) reads as a filled rail on any
+        // background. The filled portion stays primary (SliderFilledTrack).
+        bg="bg.track"
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Slider.Track>
     );

package/src/components/Spinner/Spinner.tsx

@@ -13,7 +13,12 @@ export const Spinner = forwardRef(
         animationDuration="0.65s"
         ref={ref}
         {...rest}
-        css={mergeCss({ '--spinner-track-color': 'colors.bg.muted' }, css)}
+        // The track ring is the only non-animated affordance and can't take a
+        // box outline (SVG-style track), so its color carries the contrast.
+        // bg.muted (gray.100) is ~1.03:1 against the bg.sunken page wash
+        // (gray.50) and vanishes there; bg.track (gray.300) reads on any
+        // background and stays mode-aware.
+        css={mergeCss({ '--spinner-track-color': 'colors.bg.track' }, css)}
       />
     );
   }

package/src/components/Switch/SwitchControl.tsx

@@ -7,7 +7,12 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
   (props, ref) => (
     <ChakraSwitch.Control
       ref={ref}
-      bg="bg.muted"
+      // The off-state track is a meter surface — its extent is the information —
+      // so it needs a visible fill, not just an edge. bg.muted (gray.100) is
+      // only ~1.03:1 against the bg.sunken page wash (gray.50) and vanishes
+      // there; bg.track (gray.300) reads as a filled track on any background.
+      // The checked state is the self-defining primary.main fill.
+      bg="bg.track"
       _checked={{ bg: 'primary.main' }}
       {...focusRing}
       {...props}

package/src/components/Tag/Tag.styles.ts

@@ -17,7 +17,7 @@ export const tagColorPaletteStyles: Record<
     soft: {
       bgColor: 'primary.extralight',
       borderColor: 'primary.light',
-      color: 'primary.dark',
+      color: 'primary.darker',
     },
     solid: {
       bgColor: 'blue.500',
@@ -27,14 +27,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'primary.main',
-      color: 'primary.main',
+      color: 'primary.dark',
     },
   },
   secondary: {
     soft: {
       bgColor: 'secondary.extralight',
       borderColor: 'secondary.light',
-      color: 'secondary.dark',
+      color: 'secondary.darker',
     },
     solid: {
       bgColor: 'violet.500',
@@ -44,14 +44,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'secondary.main',
-      color: 'secondary.main',
+      color: 'secondary.dark',
     },
   },
   danger: {
     soft: {
       bgColor: 'danger.extralight',
       borderColor: 'danger.light',
-      color: 'danger.dark',
+      color: 'danger.darker',
     },
     solid: {
       bgColor: 'rose.500',
@@ -61,14 +61,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'danger.main',
-      color: 'danger.main',
+      color: 'danger.dark',
     },
   },
   success: {
     soft: {
       bgColor: 'success.extralight',
       borderColor: 'success.light',
-      color: 'success.dark',
+      color: 'success.darker',
     },
     solid: {
       bgColor: 'green.600',
@@ -78,34 +78,40 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'success.main',
-      color: 'success.main',
+      color: 'success.dark',
     },
   },
   warning: {
     soft: {
       bgColor: 'warning.extralight',
       borderColor: 'warning.light',
-      color: 'warning.dark',
+      color: 'warning.darker',
     },
     solid: {
-      bgColor: 'gold.500',
-      borderColor: 'gold.500',
-      color: 'gold.900', // dark text: white/gold.500 was 2.39:1; gold.900 = 6.73:1
+      // Deepened from gold.500 so white text clears AA and the chip matches the
+      // other solids (white on a saturated fill). White/gold.500 was only
+      // 2.39:1; white/gold.700 = 5.86:1 ✓ AA. Bright gold + near-black text read
+      // harsh on the dark canvas.
+      bgColor: 'gold.700',
+      borderColor: 'gold.700',
+      color: 'white',
     },
     outline: {
       bgColor: 'transparent',
       borderColor: 'warning.main',
-      color: 'warning.main',
+      // warning.dark (gold.700, 5.8:1 AA) over warning.main (gold.500, 3.0:1) —
+      // darker text also lifts this off the palette's AA-risk step.
+      color: 'warning.dark',
     },
   },
   neutral: {
     soft: {
-      // Flip surface + border with the mode so the fg.muted text stays legible
+      // Flip surface + border with the mode so the fg.default text stays legible
       // in dark. Light values preserved (bg.muted → gray.100, border.default →
       // gray.300).
       bgColor: 'bg.muted',
       borderColor: 'border.default',
-      color: 'fg.muted',
+      color: 'fg.default',
     },
     solid: {
       bgColor: 'gray.800',
@@ -115,7 +121,7 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'border.strong', // gray.500 / gray.900 (_dark)
-      color: 'fg.subtle',
+      color: 'fg.muted',
     },
   },
 };

package/src/components/Tag/Tag.tsx

@@ -36,6 +36,7 @@ export const Tag = forwardRef(
         borderRadius="md"
         boxShadow="none"
         fontSize="sm"
+        fontWeight="semibold"
         {...styles}
         {...rest}
         ref={ref}

package/src/components/Tree/Tree.GuideElbow.stories.tsx

@@ -0,0 +1,220 @@
+import { Box, HStack, Stack, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tree } from './Tree';
+import { createTreeCollection } from './index';
+
+/**
+ * Stories for the `elbow` option on `Tree.BranchIndentGuide`.
+ *
+ * `elbow` turns the plain vertical rails into `├` / `└` guide lines:
+ * every row gets a horizontal foot joining it to its parent rail, and
+ * the last row of each group stops at its centre (`└`). `guideColor`
+ * customizes the line color (default `border.default`, which flips
+ * with color mode). Pass both through the `indentGuide` element:
+ *
+ *   <Tree.Node indentGuide={<Tree.BranchIndentGuide elbow />} ... />
+ */
+
+interface Node {
+  id: string;
+  name: string;
+  children?: Node[];
+}
+
+const orgSample: Node = {
+  id: 'ROOT',
+  name: '',
+  children: [
+    {
+      id: 'hq',
+      name: '본사',
+      children: [
+        {
+          id: 'hq-dev',
+          name: '개발본부',
+          children: [
+            {
+              id: 'hq-dev-backend',
+              name: '백엔드그룹',
+              children: [
+                { id: 'hq-dev-backend-api', name: 'API팀' },
+                { id: 'hq-dev-backend-db', name: 'DB팀' },
+                { id: 'hq-dev-backend-platform', name: '플랫폼팀' },
+              ],
+            },
+            {
+              id: 'hq-dev-frontend',
+              name: '프론트엔드그룹',
+              children: [
+                { id: 'hq-dev-frontend-web', name: '웹팀' },
+                { id: 'hq-dev-frontend-mobile', name: '모바일팀' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'hq-sales',
+          name: '영업본부',
+          children: [
+            { id: 'hq-sales-domestic', name: '국내영업팀' },
+            { id: 'hq-sales-global', name: '해외영업팀' },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'rnd',
+      name: 'R&D센터',
+      children: [
+        { id: 'rnd-ml', name: '머신러닝팀' },
+        { id: 'rnd-data', name: '데이터팀' },
+      ],
+    },
+  ],
+};
+
+const orgCollection = createTreeCollection<Node>({
+  rootNode: orgSample,
+  nodeToValue: (node) => node.id,
+  nodeToString: (node) => node.name,
+});
+
+const allBranchIds = (function collect(n: Node): string[] {
+  if (!n.children) return [];
+  return n.children.flatMap((c) => (c.children ? [c.id, ...collect(c)] : []));
+})(orgSample);
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: Node;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchIndicator />
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+const meta = {
+  title: 'Components/Tree',
+  component: Tree.Root,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tree.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * `elbow` guides — the innermost rail grows a horizontal foot so each
+ * row connects to its parent column like a classic file-tree.
+ */
+export const WithElbowGuides: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+    defaultSelectedValue: ['hq-dev-frontend-web'],
+  },
+  render: (args) => (
+    <Box maxWidth="360px">
+      <Tree.Root {...args}>
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={<Tree.BranchIndentGuide elbow />}
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </Box>
+  ),
+};
+
+/**
+ * `guideColor` — customize the guide line color with any Chakra color
+ * token. The default `border.default` flips with color mode; pick a
+ * stronger token (or any palette color) for more contrast.
+ */
+export const GuideColor: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      {(
+        [
+          ['border.default (기본)', undefined],
+          ['border.strong', 'border.strong'],
+          ['primary.light', 'primary.light'],
+        ] as const
+      ).map(([label, guideColor]) => (
+        <Stack key={label} gap={2} width="280px">
+          <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+            {label}
+          </Text>
+          <Tree.Root {...args}>
+            <Tree.Tree>
+              <Tree.Node
+                indentGuide={
+                  <Tree.BranchIndentGuide elbow guideColor={guideColor} />
+                }
+                render={renderNode}
+              />
+            </Tree.Tree>
+          </Tree.Root>
+        </Stack>
+      ))}
+    </HStack>
+  ),
+};
+
+/**
+ * Plain vertical rails (default) vs. `elbow` guides, side by side.
+ */
+export const ElbowGuideComparison: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          기본 — 수직 레일
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          elbow — ├ / └ 가이드 라인
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide elbow />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+    </HStack>
+  ),
+};

package/src/components/Tree/Tree.types.ts

@@ -23,7 +23,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
 export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
 export type TreeBranchTextProps = TreeViewBranchTextProps;
 export type TreeBranchContentProps = TreeViewBranchContentProps;
-export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
+  /**
+   * Draw `├` / `└` guide lines instead of a plain vertical rail: every
+   * row gets a horizontal foot joining it to its parent rail, middle
+   * rows keep the vertical (`├`), and the last row of each group stops
+   * at its centre (`└`). Off by default to preserve the existing
+   * plain-vertical-rail look. See `TreeBranchIndentGuide`.
+   * @default false
+   */
+  elbow?: boolean;
+  /**
+   * Length of the elbow foot — the horizontal cross-stroke that joins
+   * the rail to the row content, drawn from the parent rail column
+   * toward the text. In elbow mode each level indents 4px further than
+   * the plain-rail default, and since the default foot length doesn't
+   * grow with it, the foot ends 8px short of the row text. Any Chakra
+   * width value. Only applies when `elbow` is set.
+   * @default 'calc(var(--tree-indentation) - 4px)'
+   */
+  footLength?: string | number;
+  /**
+   * Color of the guide lines (rail, elbow foot and vertical segments).
+   * Any Chakra color token. The default is a mode-flipping semantic
+   * token, so it darkens in light mode and lightens in dark mode
+   * automatically.
+   * @default 'border.default'
+   */
+  guideColor?: string;
+};
 export type TreeItemProps = TreeViewItemProps;
 export type TreeItemTextProps = TreeViewItemTextProps;
 export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;