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

package/src/components/DatePicker/SingleDatePicker.tsx

@@ -45,7 +45,7 @@ export const SingleDatePicker = ({
           ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
-          color: 'primary.dark',
+          color: 'fg.default',
           ...propsConfigs?.inputProps,
         },
         popoverCompProps: {
@@ -94,17 +94,18 @@ export const SingleDatePicker = ({
             fontSize: 'sm',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.extralight',
+              background: 'primary.wash',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
           todayBtnProps: {
             fontWeight: 'semibold',
+            boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-strong)',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
-            color: 'white',
+            color: 'fg.onPrimary',
             border: 'none',
             background: 'primary.main',
             borderRadius: 'full',
@@ -119,8 +120,7 @@ export const SingleDatePicker = ({
         <Popover.Trigger asChild>
           <Button
             pl={2}
-            colorPalette="neutral"
-            variant="outline"
+            variant="secondary"
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday

package/src/components/ErrorFallback/ErrorFallback.lift.test.tsx

@@ -0,0 +1,45 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { ErrorFallback } from './ErrorFallback';
+
+/**
+ * The "try again" button used a hand-rolled `_hover` with `boxShadow: 'lg'`.
+ * The focus ring is a box-shadow and Chakra emits `:hover` after
+ * `:focus-visible`, so a focused-and-hovered button lost its ring. It now uses
+ * Button's `lift`, whose shadow is a `filter`.
+ */
+const emittedCss = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('');
+
+const hoverDeclarations = (el: Element) => {
+  const cls =
+    (el.getAttribute('class') ?? '')
+      .split(' ')
+      .find((c) => c.startsWith('css-')) ?? '';
+  return [
+    ...emittedCss().matchAll(new RegExp(`\\.${cls}([^{]*)\\{([^{}]*)\\}`, 'g')),
+  ]
+    .filter(([, selector]) => selector.includes(':hover'))
+    .map(([, , declarations]) => declarations)
+    .join(' ');
+};
+
+describe('ErrorFallback primary action', () => {
+  it('lifts without a hover box-shadow that would hide the focus ring', () => {
+    const { container } = render(
+      <ChakraProvider value={system}>
+        <ErrorFallback error={new Error('boom')} onErrorReset={() => {}} />
+      </ChakraProvider>
+    );
+    const primary = container.querySelector('button[data-variant="primary"]');
+    expect(primary).not.toBeNull();
+    const hover = hoverDeclarations(primary!);
+    expect(hover).toContain('drop-shadow');
+    expect(hover).not.toMatch(/box-shadow/);
+  });
+});

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -92,13 +92,8 @@ User Agent: ${errorInfo.userAgent}`;
         >
           <VStack gap={6} align="center" w="full" mx="auto">
             {/* Error Icon */}
-            <Box
-              position="relative"
-              p={4}
-              bg="danger.extralight"
-              borderRadius="full"
-            >
-              <MdError boxSize="xl" color="danger.main" />
+            <Box position="relative" p={4} bg="danger.bg" borderRadius="full">
+              <MdError boxSize="xl" color="danger.fg" />
             </Box>
 
             {/* Error Title */}
@@ -118,44 +113,35 @@ User Agent: ${errorInfo.userAgent}`;
 
             {/* Error Message */}
             <Card
-              bg="danger.extralight"
+              bg="danger.bg"
               border="1px solid"
-              borderColor="danger.lighter"
+              borderColor="danger.border"
               p={4}
               w="full"
             >
-              <Text
-                color="danger.dark"
-                fontFamily="mono"
-                wordBreak="break-word"
-              >
+              <Text color="danger.fg" fontFamily="mono" wordBreak="break-word">
                 {error?.message || translate('error_boundary_default_message')}
               </Text>
             </Card>
 
             {/* Support Information */}
-            <Card
-              bg="primary.extralight"
-              borderColor="primary.lighter"
-              p={6}
-              w="full"
-            >
+            <Card bg="bg.muted" borderColor="secondary.border" p={6} w="full">
               {/* `as="h2"`: `H4` is the type size wanted here, but this block
                   sits directly under the card's `<h1>` — an `<h4>` there skips
                   two levels and tells a screen-reader user there are sections
                   they missed (KWCAG 5.2.4.2 제목 제공). */}
-              <H4 as="h2" color="primary.dark" mb={4} textAlign="center">
+              <H4 as="h2" color="fg.default" mb={4} textAlign="center">
                 {translate('support_information')}
               </H4>
               <VStack gap={2} align="stretch" mb={4}>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('error_id')}:
                   </Text>
                   <Text fontFamily="mono">{errorInfo.errorId}</Text>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('time')}:
                   </Text>
                   <Subtext fontFamily="mono">
@@ -163,7 +149,7 @@ User Agent: ${errorInfo.userAgent}`;
                   </Subtext>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('component')}:
                   </Text>
                   <Text fontFamily="mono">
@@ -171,7 +157,7 @@ User Agent: ${errorInfo.userAgent}`;
                   </Text>
                 </Flex>
                 <Flex justify="space-between">
-                  <Text color="primary.main" fontWeight="semibold">
+                  <Text color="fg.muted" fontWeight="semibold">
                     {translate('user_id')}:
                   </Text>
                   <Text fontFamily="mono">
@@ -180,7 +166,7 @@ User Agent: ${errorInfo.userAgent}`;
                 </Flex>
                 {typeof window !== 'undefined' && (
                   <Flex justify="space-between">
-                    <Text color="primary.main" fontWeight="semibold">
+                    <Text color="fg.muted" fontWeight="semibold">
                       {translate('page')}:
                     </Text>
                     <Subtext fontFamily="mono">
@@ -211,11 +197,10 @@ User Agent: ${errorInfo.userAgent}`;
               <Button
                 onClick={onErrorReset}
                 size="lg"
-                variant="solid"
-                _hover={{
-                  transform: 'translateY(-1px)',
-                  boxShadow: 'lg',
-                }}
+                variant="primary"
+                // `lift`, not a hand-rolled `_hover` box-shadow: the focus
+                // ring is a box-shadow too, and a hover one replaced it.
+                lift
                 w="full"
                 maxW="300px"
               >

package/src/components/ExpandableText/ExpandableText.tsx

@@ -90,7 +90,7 @@ export const ExpandableText = ({
         <Link
           as="button"
           textDecor="none"
-          _hover={{ color: 'primary.dark' }}
+          _hover={{ color: 'fg.default' }}
           onClick={handleToggle}
           aria-expanded={isExpanded}
         >

package/src/components/FileItem/FileItem.tsx

@@ -30,7 +30,7 @@ export const FileItem = ({
   ...rest
 }: FileItemProps) => {
   const translate = useTranslate();
-  const errorColor = 'danger.main';
+  const errorColor = 'danger.fg';
 
   const isUploadingFile =
     !error && typeof progress === 'number' && progress >= 0 && progress < 100;
@@ -86,7 +86,6 @@ export const FileItem = ({
                   onClick={onFileDelete}
                   size="2xs"
                   disabled={isDeleting}
-                  colorPalette="neutral"
                   variant="ghost"
                 >
                   <CloseIcon color="fg.subtle" boxSize="md" />
@@ -110,7 +109,6 @@ export const FileItem = ({
                       aria-label={translate('download') as string}
                       onClick={onFileDownload}
                       size="2xs"
-                      colorPalette="neutral"
                       variant="ghost"
                     >
                       <DownloadIcon color="fg.muted" />
@@ -131,7 +129,6 @@ export const FileItem = ({
                       aria-label={translate('delete') as string}
                       onClick={onFileDelete}
                       size="2xs"
-                      colorPalette="neutral"
                       variant="ghost"
                     >
                       <TrashIcon boxSize="sm" color="fg.muted" />

package/src/components/FlyTo/FlyTo.stories.tsx

@@ -120,7 +120,12 @@ export const Lift: Story = {
       <Stack gap={6}>
         <HStack gap={2}>
           {[0, 46, 120].map((v) => (
-            <Button key={v} size="xs" variant="outline" onClick={() => send(v)}>
+            <Button
+              key={v}
+              size="xs"
+              variant="secondary"
+              onClick={() => send(v)}
+            >
               lift {v}
             </Button>
           ))}

package/src/components/Form/FieldError/FieldError.tsx

@@ -11,10 +11,10 @@ export interface FieldErrorProps {
  * shows only when the enclosing `FormControl`/`Field.Root` is `invalid`, and is
  * wired to the control via `aria-describedby` + `aria-invalid` automatically.
  * Use it inside a `FieldRow` (which flips the field to invalid when an `error`
- * is set) — it replaces the hand-rolled `<Subtext color="danger.main">` error
+ * is set) — it replaces the hand-rolled `<Subtext color="danger.fg">` error
  * rows scattered across the app.
  */
 export const FieldError = ({ children }: FieldErrorProps) => {
   if (children == null || children === false || children === '') return null;
-  return <Field.ErrorText color="danger.main">{children}</Field.ErrorText>;
+  return <Field.ErrorText color="danger.fg">{children}</Field.ErrorText>;
 };

package/src/components/Form/FormFooter/FormFooter.stories.tsx

@@ -35,13 +35,13 @@ type Story = StoryObj<typeof FormFooter>;
 export const WithStartMetaAndAction: Story = {
   args: {
     start: (
-      <Button size="sm" variant="ghost" colorPalette="danger">
+      <Button size="sm" variant="ghost" isDestructive>
         Delete
       </Button>
     ),
     meta: <Subtitle>Updated 2 minutes ago</Subtitle>,
     action: (
-      <Button size="sm" variant="solid">
+      <Button size="sm" variant="primary">
         Save
       </Button>
     ),
@@ -52,7 +52,7 @@ export const WithStartMetaAndAction: Story = {
 export const FullWidthAction: Story = {
   args: {
     action: (
-      <Button variant="solid" size="lg" w="100%">
+      <Button variant="primary" size="lg" w="100%">
         Generate image · 12
       </Button>
     ),
@@ -62,7 +62,7 @@ export const FullWidthAction: Story = {
 export const ActionOnly: Story = {
   args: {
     action: (
-      <Button size="sm" variant="solid">
+      <Button size="sm" variant="primary">
         Save
       </Button>
     ),

package/src/components/Form/FormModalFooter/FormModalFooter.tsx

@@ -48,8 +48,7 @@ export const FormModalFooter = ({
     >
       {onDelete && (
         <Button
-          colorPalette="danger"
-          variant="solid"
+          variant="danger"
           type="button"
           onClick={onDelete}
           disabled={isSubmitting}
@@ -60,8 +59,7 @@ export const FormModalFooter = ({
         </Button>
       )}
       <Button
-        colorPalette="neutral"
-        variant="outline"
+        variant="secondary"
         type="button"
         onClick={onCancel}
         disabled={isSubmitting}
@@ -69,8 +67,9 @@ export const FormModalFooter = ({
         {cancelLabel}
       </Button>
       <Button
-        colorPalette={submitColorPalette}
-        variant="solid"
+        // 5.0 has no colour axis: the deprecated `submitColorPalette` only
+        // picks between the two filled roles.
+        variant={submitColorPalette === 'danger' ? 'danger' : 'primary'}
         type={onSubmit ? 'button' : 'submit'}
         onClick={onSubmit}
         loading={isSubmitting}

package/src/components/Form/FormSection/FormSection.stories.tsx

@@ -38,7 +38,7 @@ export const WithDescription: Story = {
 export const WithAction: Story = {
   args: {
     action: (
-      <Button size="sm" variant="outline">
+      <Button size="sm" variant="secondary">
         Add
       </Button>
     ),

package/src/components/FormIntegration/FormIntegration.stories.tsx

@@ -317,7 +317,7 @@ export const FormikFormExample: StoryObj = {
                     이미지 또는 PDF 파일만 업로드 가능합니다
                   </Field.HelperText>
                   {values.files && values.files.length > 0 && (
-                    <Text fontSize="sm" color="gray.600" mt={2}>
+                    <Text fontSize="sm" color="fg.muted" mt={2}>
                       {values.files.length}개 파일 선택됨
                     </Text>
                   )}
@@ -331,7 +331,7 @@ export const FormikFormExample: StoryObj = {
                 {/* Submit Button */}
                 <Button
                   type="submit"
-                  variant="solid"
+                  variant="primary"
                   w="100%"
                   mt={4}
                   disabled={isSubmitting}
@@ -641,7 +641,7 @@ export const RegularFormExample: StoryObj = {
                 이미지 또는 PDF 파일만 업로드 가능합니다
               </Field.HelperText>
               {formData.files && formData.files.length > 0 && (
-                <Text fontSize="sm" color="gray.600" mt={2}>
+                <Text fontSize="sm" color="fg.muted" mt={2}>
                   {formData.files.length}개 파일 선택됨
                 </Text>
               )}
@@ -651,7 +651,7 @@ export const RegularFormExample: StoryObj = {
             {/* Submit Button */}
             <Button
               type="submit"
-              variant="solid"
+              variant="primary"
               w="100%"
               mt={4}
               disabled={isSubmitting}

package/src/components/FormLabel/FormLabel.tsx

@@ -17,7 +17,7 @@ export const FormLabel = (props: Field.LabelProps) => (
         field.required가 falsy면 null을 반환하므로, props 없이도 조건부 렌더링됩니다.
         @see node_modules/@chakra-ui/react/dist/esm/components/field/field.js
       */}
-      <Field.RequiredIndicator />
+      <Field.RequiredIndicator color="danger.fg" />
     </Field.Label>
   </Box>
 );

package/src/components/Icon/ICON_MANAGEMENT.md

@@ -60,24 +60,24 @@ const iconList = {
 import { FaBuildingUser, MyNewIcon } from '@mindlogic-ai/logician-ui';
 
 <FaBuildingUser boxSize="lg" />
-<MyNewIcon boxSize="md" color="blue.500" />
+<MyNewIcon boxSize="md" color="fg.icon" />
 ```
 
 ## Defaults
 
 All icons created via `createIcon` share these defaults (set in `_utils/createIcon.tsx`):
 
-| Prop      | Default   |
-|-----------|-----------|
-| `boxSize` | `'md'` (24px) |
-| `color`   | `'gray.600'` |
+| Prop      | Default                                                |
+| --------- | ------------------------------------------------------ |
+| `boxSize` | `'md'` (24px)                                          |
+| `color`   | `'currentColor'` (inherits the surrounding text color) |
 
 Override per usage: `<MyIcon color="primary.main" />`.
 
 ## Size Reference
 
-| boxSize | px  |
-|---------|-----|
+| boxSize | px   |
+| ------- | ---- |
 | `2xs`   | 14px |
 | `xs`    | 16px |
 | `sm`    | 20px |