@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.1

package/src/components/Modal/Modal.stories.tsx

@@ -17,9 +17,11 @@
  *
  * @see ModalCloseButton.tsx - 구현 세부사항 확인
  */
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { useState } from 'react';
+import { Button } from '../Button';
+import { ButtonVariant } from '../Button/Button.types';
 import {
   Modal,
   ModalBody,
@@ -28,8 +30,6 @@ import {
   ModalFooter,
   ModalHeader,
 } from '.';
-import { Button } from '../Button';
-import { ButtonVariant } from '../Button/Button.types';
 
 interface ModalArgs {
   headerTitle: string;
@@ -74,7 +74,7 @@ export const Default: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'soft'}>
+                  <Button key={index} variant={button.variant || 'subtle'}>
                     {button.label}
                   </Button>
                 ))}
@@ -105,7 +105,7 @@ export const WithHeader: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'soft'}>
+                  <Button key={index} variant={button.variant || 'subtle'}>
                     {button.label}
                   </Button>
                 ))}
@@ -137,7 +137,7 @@ export const WithFooterButton: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'soft'}>
+                  <Button key={index} variant={button.variant || 'subtle'}>
                     {button.label}
                   </Button>
                 ))}
@@ -154,7 +154,7 @@ export const TwoButtons: Story = {
   args: {
     footerButtons: [
       { label: 'Cancel', variant: 'ghost' },
-      { label: 'Save', variant: 'solid' },
+      { label: 'Save', variant: 'primary' },
     ],
   },
   render: (args) => {
@@ -171,7 +171,7 @@ export const TwoButtons: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'soft'}>
+                  <Button key={index} variant={button.variant || 'subtle'}>
                     {button.label}
                   </Button>
                 ))}
@@ -207,8 +207,8 @@ export const WithCloseButton: Story = {
             {/* ModalCloseButton: Dialog.CloseTrigger + CloseButton 조합 */}
             <ModalCloseButton />
             <ModalBody>
-              이 모달은 우측 상단에 닫기 버튼이 있습니다. 버튼을 클릭하거나 ESC 키를
-              눌러 닫을 수 있습니다.
+              이 모달은 우측 상단에 닫기 버튼이 있습니다. 버튼을 클릭하거나 ESC
+              키를 눌러 닫을 수 있습니다.
             </ModalBody>
           </ModalContent>
         </Modal>
@@ -266,7 +266,7 @@ export const WithoutHeader: Story = {
               <Button variant="ghost" onClick={() => setIsOpen(false)}>
                 Cancel
               </Button>
-              <Button variant="solid" onClick={() => setIsOpen(false)}>
+              <Button variant="primary" onClick={() => setIsOpen(false)}>
                 Confirm
               </Button>
             </ModalFooter>
@@ -308,7 +308,7 @@ export const FullFeatured: Story = {
     hasCloseButton: true,
     footerButtons: [
       { label: 'Cancel', variant: 'ghost' },
-      { label: 'Delete', variant: 'solid' },
+      { label: 'Delete', variant: 'danger' },
     ],
   },
   render: (args) => {
@@ -322,14 +322,14 @@ export const FullFeatured: Story = {
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              헤더, 바디, 푸터, 닫기 버튼이 모두 포함된 완전한 모달 예제입니다. 모든
-              요소가 조화롭게 배치되어 있습니다.
+              헤더, 바디, 푸터, 닫기 버튼이 모두 포함된 완전한 모달 예제입니다.
+              모든 요소가 조화롭게 배치되어 있습니다.
             </ModalBody>
             <ModalFooter>
               {args.footerButtons?.map((button, index) => (
                 <Button
                   key={index}
-                  variant={button.variant || 'soft'}
+                  variant={button.variant || 'subtle'}
                   onClick={() => setIsOpen(false)}
                 >
                   {button.label}
@@ -393,7 +393,8 @@ export const DifferentSizes: Story = {
             <ModalHeader>Modal Size: {openSize?.toUpperCase()}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              현재 모달 크기는 {openSize}입니다. 다양한 크기의 모달을 테스트해보세요.
+              현재 모달 크기는 {openSize}입니다. 다양한 크기의 모달을
+              테스트해보세요.
             </ModalBody>
             <ModalFooter>
               <Button onClick={() => setOpenSize(null)}>Close</Button>
@@ -433,7 +434,12 @@ export const DifferentPlacements: Story = {
             </ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              모달이 화면의 {openPlacement === 'top' ? '상단' : openPlacement === 'center' ? '중앙' : '하단'}
+              모달이 화면의{' '}
+              {openPlacement === 'top'
+                ? '상단'
+                : openPlacement === 'center'
+                  ? '중앙'
+                  : '하단'}
               에 표시됩니다.
             </ModalBody>
             <ModalFooter>
@@ -466,8 +472,8 @@ export const PreventOutsideClick: Story = {
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              이 모달은 Overlay를 클릭해도 닫히지 않습니다. 닫기 버튼이나 ESC 키를
-              사용하세요.
+              이 모달은 Overlay를 클릭해도 닫히지 않습니다. 닫기 버튼이나 ESC
+              키를 사용하세요.
             </ModalBody>
             <ModalFooter>
               <Button onClick={() => setIsOpen(false)}>Close</Button>
@@ -507,14 +513,15 @@ export const FullScreenOnMobile: Story = {
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              모바일에서 이 모달은 전체 화면으로 표시됩니다. 브라우저 창을 좁혀서
-              확인해보세요. fullScreenOnMobile은 기본값이 false라 직접 켜야 합니다.
+              모바일에서 이 모달은 전체 화면으로 표시됩니다. 브라우저 창을
+              좁혀서 확인해보세요. fullScreenOnMobile은 기본값이 false라 직접
+              켜야 합니다.
             </ModalBody>
             <ModalFooter>
               <Button variant="ghost" onClick={() => setIsOpen(false)}>
                 Cancel
               </Button>
-              <Button variant="solid" onClick={() => setIsOpen(false)}>
+              <Button variant="primary" onClick={() => setIsOpen(false)}>
                 Confirm
               </Button>
             </ModalFooter>
@@ -552,14 +559,14 @@ export const NoFullScreenOnMobile: Story = {
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
-              fullScreenOnMobile={'{false}'}로 설정하면 모바일에서도 풀스크린이 아닌
-              인라인 모달로 표시됩니다. 좌우에 마진이 적용됩니다.
+              fullScreenOnMobile={'{false}'}로 설정하면 모바일에서도 풀스크린이
+              아닌 인라인 모달로 표시됩니다. 좌우에 마진이 적용됩니다.
             </ModalBody>
             <ModalFooter>
               <Button variant="ghost" onClick={() => setIsOpen(false)}>
                 Cancel
               </Button>
-              <Button variant="solid" onClick={() => setIsOpen(false)}>
+              <Button variant="primary" onClick={() => setIsOpen(false)}>
                 Confirm
               </Button>
             </ModalFooter>
@@ -569,3 +576,47 @@ export const NoFullScreenOnMobile: Story = {
     );
   },
 };
+
+/**
+ * `headerTone="brand"` bands the header in `layer.3` with a
+ * `secondary.border` bottom rule for a modal that wants brand presence up
+ * top. `ModalHeader`'s `subtitle` prop renders a second line under the title.
+ */
+export const BrandHeader: Story = {
+  args: {
+    headerTitle: 'Welcome to Mindlogic!',
+    footerButtons: [{ label: 'Get started', variant: 'primary' }],
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Brand Modal</Button>
+        <Modal
+          {...args}
+          headerTone="brand"
+          open={isOpen}
+          onOpenChange={(e) => setIsOpen(e.open)}
+        >
+          <ModalContent>
+            <ModalHeader subtitle="Let's set up your workspace.">
+              {args.headerTitle}
+            </ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>열려라 참깨!</ModalBody>
+            {args.footerButtons && (
+              <ModalFooter>
+                {args.footerButtons.map((button, index) => (
+                  <Button key={index} variant={button.variant || 'subtle'}>
+                    {button.label}
+                  </Button>
+                ))}
+              </ModalFooter>
+            )}
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -10,9 +10,13 @@ export const Modal = ({
   onOpenChange,
   portalProps,
   fullScreenOnMobile = false,
+  headerTone = 'default',
   ...rest
 }: ModalProps) => {
-  const ctx = useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);
+  const ctx = useMemo(
+    () => ({ fullScreenOnMobile, headerTone }),
+    [fullScreenOnMobile, headerTone]
+  );
 
   return (
     <Dialog.Root

package/src/components/Modal/Modal.types.ts

@@ -1,9 +1,22 @@
 import { Dialog, PortalProps } from '@chakra-ui/react';
 
+/**
+ * `'brand'` paints the header a neutral `layer.3` band with a
+ * `secondary.border` bottom rule (the subtitle stays `fg.muted`) for a modal that
+ * wants brand presence up top — an onboarding step, a celebratory confirm.
+ * `'default'` (the default) leaves the header unstyled, matching the body.
+ */
+export type ModalHeaderTone = 'default' | 'brand';
+
 export type ModalProps = Dialog.RootProps & {
   // Allows passing props to the Portal component for more control over where the modal is rendered
   // Added for backwards compatibility.
   portalProps?: PortalProps;
+  /**
+   * Styles `ModalHeader` as a brand band instead of the plain default.
+   * @default 'default'
+   */
+  headerTone?: ModalHeaderTone;
   /**
    * When true, the modal becomes fullscreen on mobile viewports
    * (100vw x 100dvh, no border-radius). When false it keeps the dialog

package/src/components/Modal/ModalContext.ts

@@ -2,12 +2,16 @@
 
 import { createContext, useContext } from 'react';
 
+import { ModalHeaderTone } from './Modal.types';
+
 interface ModalContextValue {
   fullScreenOnMobile: boolean;
+  headerTone: ModalHeaderTone;
 }
 
 export const ModalContext = createContext<ModalContextValue>({
   fullScreenOnMobile: false,
+  headerTone: 'default',
 });
 
 export const useModalContext = () => useContext(ModalContext);

package/src/components/Modal/ModalHeader.a11y.test.tsx

@@ -0,0 +1,51 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Modal } from './Modal';
+import { ModalContent } from './ModalContent';
+import { ModalHeader } from './ModalHeader';
+
+const renderModal = (header: React.ReactNode) =>
+  render(
+    <ChakraProvider value={system}>
+      <Modal open>
+        <ModalContent>{header}</ModalContent>
+      </Modal>
+    </ChakraProvider>
+  );
+
+describe('ModalHeader', () => {
+  it('names the dialog with the title and describes it with the subtitle', async () => {
+    renderModal(<ModalHeader subtitle="s">T</ModalHeader>);
+    const dialog = await screen.findByRole('dialog', { name: 'T' });
+    expect(dialog).toHaveAccessibleDescription('s');
+  });
+
+  it('stacks the subtitle under the title', async () => {
+    renderModal(<ModalHeader subtitle="s">T</ModalHeader>);
+    await screen.findByRole('dialog');
+    const header = screen.getByText('s').parentElement!;
+    expect(getComputedStyle(header).flexDirection).toBe('column');
+  });
+
+  it('text mixed with expressions is one title heading', async () => {
+    const where = 'Top';
+    renderModal(<ModalHeader>Placement: {where}</ModalHeader>);
+    await screen.findByRole('dialog', { name: 'Placement: Top' });
+    expect(
+      screen.getByRole('heading', { name: 'Placement: Top' })
+    ).toBeInTheDocument();
+  });
+
+  it('a caller heading is not nested inside another heading', async () => {
+    renderModal(
+      <ModalHeader>
+        <h3>Own heading</h3>
+      </ModalHeader>
+    );
+    await screen.findByRole('dialog', { name: 'Own heading' });
+    expect(screen.getAllByRole('heading')).toHaveLength(1);
+  });
+});

package/src/components/Modal/ModalHeader.tsx

@@ -1,7 +1,49 @@
-import React from 'react';
+import React, { Fragment, isValidElement, ReactNode } from 'react';
 import { Dialog } from '@chakra-ui/react';
 
-export const ModalHeader = ({ ...rest }: Dialog.HeaderProps) => {
+import { Subtext } from '../Typography';
+import { useModalContext } from './ModalContext';
+
+export type ModalHeaderProps = Dialog.HeaderProps & {
+  /**
+   * Optional line under the title, in `fg.muted` (on the brand band too —
+   * `secondary.fgStrong` on `layer.3` misses 7:1 in high-contrast dark). Rendered as the dialog's
+   * description, so the dialog gets `aria-describedby` pointing at it.
+   */
+  subtitle?: ReactNode;
+};
+
+/**
+ * The title takes the header's own type (`textStyle="h4"`) instead of the
+ * recipe's `textStyle: lg` / `semibold`, so wrapping it changes nothing on
+ * screen.
+ */
+const inheritType = {
+  fontSize: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit',
+} as const;
+
+/**
+ * The dialog header: the children are the dialog's title and `subtitle` sits
+ * under it.
+ *
+ * Children become `Dialog.Title`, which gives the dialog its accessible name
+ * (`aria-labelledby`). Text — a string, or text mixed with expressions — is
+ * rendered as the title heading (`h2`). A single element is the caller's own
+ * markup, possibly its own heading, so it is wrapped in a `div` carrying the
+ * title id instead of being nested inside an `h2`.
+ */
+export const ModalHeader = ({
+  subtitle,
+  children,
+  ...rest
+}: ModalHeaderProps) => {
+  const { headerTone } = useModalContext();
+  const isBrand = headerTone === 'brand';
+  const isOwnMarkup = isValidElement(children) && children.type !== Fragment;
+
   return (
     <Dialog.Header
       textStyle="h4"
@@ -9,7 +51,35 @@ export const ModalHeader = ({ ...rest }: Dialog.HeaderProps) => {
       pt={4}
       pb={3}
       borderTopRadius="l3"
+      // The recipe lays the header out as a row (`display: flex`, `gap: 2`),
+      // which put the subtitle to the right of the title.
+      flexDirection="column"
+      alignItems="flex-start"
+      gap={0}
+      // Brand band: a neutral `layer.3` ground (≥ 1.13:1 off the panel in every
+      // mode) with a `secondary.border` rule carrying the brand. Not the sand
+      // `secondary.surface*` tint — that is accent-only, never a background.
+      {...(isBrand && {
+        bg: 'layer.3',
+        borderBottomWidth: '1px',
+        borderBottomColor: 'secondary.border',
+      })}
       {...rest}
-    />
+    >
+      {isOwnMarkup ? (
+        <Dialog.Title asChild {...inheritType}>
+          <div>{children}</div>
+        </Dialog.Title>
+      ) : (
+        <Dialog.Title {...inheritType}>{children}</Dialog.Title>
+      )}
+      {subtitle && (
+        <Dialog.Description asChild>
+          <Subtext mt={1} fontWeight="normal" color="fg.muted">
+            {subtitle}
+          </Subtext>
+        </Dialog.Description>
+      )}
+    </Dialog.Header>
   );
 };

package/src/components/Modal/index.tsx

@@ -1,9 +1,9 @@
 export { Modal } from './Modal';
-export { type ModalProps } from './Modal.types';
+export { type ModalHeaderTone, type ModalProps } from './Modal.types';
 export { ModalBody } from './ModalBody';
 export { ModalCloseButton } from './ModalCloseButton';
 export { ModalContent } from './ModalContent';
 export { useModalContext } from './ModalContext';
 export { ModalFooter } from './ModalFooter';
-export { ModalHeader } from './ModalHeader';
+export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalOverlay } from './ModalOverlay';

package/src/components/MonthPicker/MonthButton/MonthButton.tsx

@@ -1,10 +1,7 @@
 import React, { memo } from 'react';
 
 import { Button } from '@/components/Button';
-import {
-  ButtonColorPalette,
-  ButtonVariant,
-} from '@/components/Button/Button.types';
+import { ButtonVariant } from '@/components/Button/Button.types';
 
 import {
   isMonthDisabled,
@@ -17,7 +14,6 @@ import { MonthRange } from '../MonthPicker.types';
 import { MonthButtonProps } from './MonthButton.types';
 
 type MonthButtonStyle = {
-  colorScheme: ButtonColorPalette;
   variant: ButtonVariant;
 };
 
@@ -63,17 +59,17 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
       selectionStart?: Date | null,
       hoveredMonth?: { month: number; year: number } | null
     ): MonthButtonStyle => {
-      // Selected months get solid primary
+      // Selected months get the primary fill
       if (isMonthSelected(month, year, selectedRange)) {
-        return { colorScheme: 'primary', variant: 'solid' };
+        return { variant: 'primary' };
       }
       if (isSelectionStart(month, year, selectionStart)) {
-        return { colorScheme: 'primary', variant: 'solid' };
+        return { variant: 'primary' };
       }
 
-      // In-range months get soft primary
+      // In-range months get the subtle wash
       if (isMonthInRange(month, year, selectedRange)) {
-        return { colorScheme: 'primary', variant: 'soft' };
+        return { variant: 'subtle' };
       }
 
       // Preview range when hovering with a selection start
@@ -85,11 +81,11 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
           hoveredMonth || null
         )
       ) {
-        return { colorScheme: 'primary', variant: 'soft' };
+        return { variant: 'subtle' };
       }
 
-      // Default: ghost neutral
-      return { colorScheme: 'neutral', variant: 'outline' };
+      // Default: outlined
+      return { variant: 'secondary' };
     };
 
     const style = getMonthButtonStyle(
@@ -103,7 +99,6 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
     return (
       <Button
         size="sm"
-        colorPalette={style.colorScheme}
         variant={style.variant}
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}

package/src/components/MonthPicker/MonthPicker.stories.tsx

@@ -42,16 +42,20 @@ const meta = {
           {selectedRange && (
             <Box
               p={3}
-              bg="green.50"
+              bg="success.bg"
               borderRadius="md"
               width="100%"
               border="1px solid"
-              borderColor="green.200"
+              borderColor="success.border"
             >
-              <Text textStyle="subtext" fontWeight="semibold" color="green.700">
+              <Text
+                textStyle="subtext"
+                fontWeight="semibold"
+                color="success.fg"
+              >
                 ✓ Range Selected:
               </Text>
-              <Text textStyle="subtext" color="green.600">
+              <Text textStyle="subtext" color="success.fg">
                 {selectedRange.startMonth.toLocaleDateString()}
                 {selectedRange.endMonth ? (
                   <> - {selectedRange.endMonth.toLocaleDateString()}</>
@@ -93,7 +97,7 @@ export const WithConstraints: Story = {
         <Text fontWeight="semibold" mb={2}>
           With Date Constraints
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Only allows selection 6 months before/after current date
         </Text>
       </Box>
@@ -111,7 +115,7 @@ export const Disabled: Story = {
         <Text fontWeight="semibold" mb={2}>
           Disabled State
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           The picker is disabled and cannot be interacted with
         </Text>
       </Box>
@@ -130,7 +134,7 @@ export const CustomFormat: Story = {
         <Text fontWeight="semibold" mb={2}>
           Custom Date Format
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Uses full month names (MMMM yyyy) instead of abbreviated
         </Text>
       </Box>
@@ -145,11 +149,11 @@ export const CrossYearSelection: Story = {
         <Text fontWeight="semibold" mb={2}>
           Cross-Year Range Selection
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Demonstrates selecting ranges across different years with immediate
           feedback.
         </Text>
-        <Box textStyle="subtext" color="gray.700">
+        <Box textStyle="subtext" color="fg.default">
           <Text>
             • Click a month to start selection (shows immediately in input)
           </Text>

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Box, VStack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Pagination } from './Pagination';
-import { PaginationProps } from './Pagination.types';
-import { useState } from 'react';
 
 const meta = {
   title: 'Components/Pagination',
@@ -75,7 +74,7 @@ export const AtPageTop: Story = {
             onItemsPerPageOptionChange={setItemsPerPage}
           />
         </Box>
-        <Box flex={1} bg="gray.50" p={4}>
+        <Box flex={1} bg="bg.subtle" p={4}>
           페이지 상단에 위치한 Pagination입니다. Select 드롭다운이 아래로
           열립니다.
         </Box>
@@ -91,7 +90,7 @@ export const AtPageBottom: Story = {
 
     return (
       <VStack align="stretch" gap={4} h="100vh">
-        <Box flex={1} bg="gray.50" p={4}>
+        <Box flex={1} bg="bg.subtle" p={4}>
           페이지 하단에 위치한 Pagination입니다. Select 드롭다운이 위로
           열립니다.
         </Box>
@@ -129,7 +128,7 @@ export const InScrollableContainer: Story = {
     );
 
     return (
-      <Box h="100vh" overflow="auto" bg="gray.50">
+      <Box h="100vh" overflow="auto" bg="bg.subtle">
         <VStack align="stretch" gap={8} p={4}>
           <Box bg="white" p={4} borderRadius="md" shadow="sm">
             <Pagination

package/src/components/Pagination/Pagination.tsx

@@ -106,7 +106,6 @@ export const Pagination = ({
         {maxPage > 1 && (
           <Flex align="center">
             <IconButton
-              colorPalette="neutral"
               variant="ghost"
               aria-label={translate('previous') as string}
               onClick={handleBack}
@@ -116,7 +115,6 @@ export const Pagination = ({
               <ChevronLeftIcon boxSize="sm" />
             </IconButton>
             <IconButton
-              colorPalette="neutral"
               variant="ghost"
               aria-label={translate('go_next_page_button') as string}
               onClick={handleNext}

package/src/components/PinInput/PinInput.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { PinInput as ChakraPinInput } from '@chakra-ui/react';
 
 import { noZoomOnFocus } from '@/theme/formControls';
+import { disabledControl } from '@/utils/disabledControl';
 
 import { PinInputProps } from './PinInput.types';
 
@@ -43,11 +44,14 @@ export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
               borderRadius="md"
               bg="bg.surface"
               color="fg.default"
-              borderColor="border.default"
-              _hover={{ borderColor: 'primary.lighter' }}
-              _focus={{ borderColor: 'primary.main' }}
-              _invalid={{ borderColor: 'danger.main' }}
-              _disabled={{ borderColor: 'border.subtle', bg: 'bg.subtle' }}
+              borderColor="border.control"
+              _hover={{ borderColor: 'fg.icon' }}
+              _focus={{
+                borderColor: 'primary.main',
+                boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+              }}
+              _invalid={{ borderColor: 'danger.solid' }}
+              _disabled={{ ...disabledControl }}
               css={noZoomOnFocus}
             />
           ))}