chore: registry & stylesheet 최신화

daangn · Nov 28, 2024 · 7c793a5 · 7c793a5
1 parent 8ba7b30
commit 7c793a5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
@@ -109,6 +109,7 @@
   "inline-banner-with-link": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLink() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" link={{ label: \"자세히 보기\", onClick: () => {} }}>\n      다른 사람과 예약된 물품이 있어요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-with-title-text": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithTitleText() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" titleText=\"예약\">\n      다른 사람과 예약된 물품이 있어요.\n    </InlineBanner>\n  );\n}",
   "skeleton-wave-activity": "import type { ActivityComponentType } from \"@stackflow/react/future\";\nimport type * as React from \"react\";\n\nimport Layout from \"@/components/stackflow/ActivityLayout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\nimport {\n  useSkeletonDuration,\n  useIsRealLoading,\n  useSkeletonLoading,\n  useSkeletonTimingFunction,\n  useSkeletonInitTransitionDuration,\n  useSkeletonGradient,\n} from \"@/stores/skeleton\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    SkeletonWave: unknown;\n  }\n}\n\nconst Fallback = () => {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <Skeleton width=\"100%\" height=\"300px\" borderRadius=\"square\" />\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"4px\" }}>\n        <Skeleton width=\"50px\" height=\"50px\" borderRadius=\"circle\" />\n        <Skeleton width=\"100%\" height=\"20px\" borderRadius=\"rounded\" />\n        <Skeleton width=\"200px\" height=\"20px\" borderRadius=\"rounded\" />\n      </div>\n    </div>\n  );\n};\n\nconst SkeletonWaveActivity: ActivityComponentType<\"SkeletonWave\"> = () => {\n  const isLoading = useSkeletonLoading();\n  const isRealLoading = useIsRealLoading();\n  const animationDuration = useSkeletonDuration();\n  const animationTiming = useSkeletonTimingFunction();\n  const initTransitionDuration = useSkeletonInitTransitionDuration();\n  const gradient = useSkeletonGradient();\n\n  return (\n    <Layout>\n      <div\n        style={\n          {\n            padding: \"16px\",\n            \"--skeleton-gradient\": gradient,\n            \"--skeleton-init-transition-duration\": initTransitionDuration,\n            \"--skeleton-animation-duration\": animationDuration,\n            \"--skeleton-animation-timing-function\": animationTiming,\n          } as React.CSSProperties\n        }\n      >\n        {isLoading ? isRealLoading && <Fallback /> : <div>content</div>}\n      </div>\n    </Layout>\n  );\n};\n\nexport default SkeletonWaveActivity;\n\nSkeletonWaveActivity.displayName = \"SkeletonWaveActivity\";",
+  "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
   "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",
   "switch-preview": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchPreview() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
   "switch-small": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchSmall() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"small\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",

diff --git a/docs/public/__registry__/ui/switch.json b/docs/public/__registry__/ui/switch.json
@@ -7,7 +7,7 @@
     {
       "name": "switch.tsx",
       "type": "ui",
-      "content": "import { type UseSwitchProps, useSwitch } from \"@seed-design/react-switch\";\nimport { type SwitchVariantProps, switchStyle } from \"@seed-design/recipe/switch\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/switch.css\";\n\nexport interface SwitchProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseSwitchProps>,\n    SwitchVariantProps {}\n\nexport const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, size = \"medium\", ...otherProps }, ref) => {\n    const { restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =\n      useSwitch(otherProps);\n    const classNames = switchStyle({ size });\n\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <div {...thumbProps} className={classNames.thumb} />\n        </div>\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n"
+      "content": "import { type UseSwitchProps, useSwitch } from \"@seed-design/react-switch\";\nimport {\n  type SwitchVariantProps,\n  switchStyle,\n} from \"@seed-design/recipe/switch\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/switch.css\";\n\nexport interface SwitchProps extends SwitchVariantProps {}\n\ninterface ReactSwitchProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseSwitchProps>,\n    SwitchProps {}\n\nexport const Switch = React.forwardRef<HTMLInputElement, ReactSwitchProps>(\n  ({ className, size = \"medium\", ...otherProps }, ref) => {\n    const { restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =\n      useSwitch(otherProps);\n    const classNames = switchStyle({ size });\n\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <div {...thumbProps} className={classNames.thumb} />\n        </div>\n        <input\n          ref={ref}\n          {...hiddenInputProps}\n          {...restProps}\n          style={visuallyHidden}\n        />\n      </label>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n"
     }
   ]
 }
diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css
@@ -145,6 +145,8 @@
   --seed-v3-color-palette-purple-900: #46308a;
   --seed-v3-color-palette-purple-1000: #29175d;
   --seed-v3-color-palette-static-white-alpha-800: #ffffffcc;
+  --seed-v3-color-palette-slate-900: #2a3038;
+  --seed-v3-color-palette-slate-800: #545c6e;
   --seed-v3-color-fg-static-white: var(--seed-v3-color-palette-static-white);
   --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-900);
   --seed-v3-color-fg-neutral-muted: var(--seed-v3-color-palette-gray-800);
@@ -179,7 +181,7 @@
   --seed-v3-color-bg-layer-default-pressed: var(--seed-v3-color-palette-gray-100);
   --seed-v3-color-bg-layer-fill: var(--seed-v3-color-palette-gray-100);
   --seed-v3-color-bg-neutral-weak: var(--seed-v3-color-palette-gray-200);
-  --seed-v3-color-bg-neutral-solid: var(--seed-v3-color-palette-gray-900);
+  --seed-v3-color-bg-neutral-solid: var(--seed-v3-color-palette-slate-900);
   --seed-v3-color-bg-neutral-weak-pressed: var(--seed-v3-color-palette-gray-300);
   --seed-v3-color-bg-informative-weak: var(--seed-v3-color-palette-blue-100);
   --seed-v3-color-bg-overlay: var(--seed-v3-color-palette-static-black-alpha-500);
@@ -202,9 +204,9 @@
   --seed-v3-color-bg-magic-solid-pressed: var(--seed-v3-color-palette-purple-700);
   --seed-v3-color-bg-magic-weak: var(--seed-v3-color-palette-purple-100);
   --seed-v3-color-bg-magic-weak-pressed: var(--seed-v3-color-palette-purple-200);
-  --seed-v3-color-bg-neutral-muted: var(--seed-v3-color-palette-gray-800);
+  --seed-v3-color-bg-neutral-muted: var(--seed-v3-color-palette-slate-800);
   --seed-v3-color-bg-floating-solid: var(--seed-v3-color-palette-gray-900);
-  --seed-v3-color-bg-neutral-muted-pressed: var(--seed-v3-color-palette-gray-700);
+  --seed-v3-color-bg-neutral-muted-pressed: var(--seed-v3-color-palette-slate-900);
   --seed-v3-color-stroke-neutral: var(--seed-v3-color-palette-gray-300);
   --seed-v3-color-stroke-brand: var(--seed-v3-color-palette-carrot-500);
   --seed-v3-color-stroke-field: var(--seed-v3-color-palette-gray-400);
@@ -294,6 +296,8 @@
   --seed-v3-color-palette-purple-900: #d9cefa;
   --seed-v3-color-palette-purple-1000: #f0edfc;
   --seed-v3-color-palette-static-white-alpha-800: #ffffffcc;
+  --seed-v3-color-palette-slate-900: #edf2f7;
+  --seed-v3-color-palette-slate-800: #dde3ed;
   --seed-v3-color-fg-static-white: var(--seed-v3-color-palette-static-white);
   --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-900);
   --seed-v3-color-fg-neutral-muted: var(--seed-v3-color-palette-gray-800);