@cieloazul310/digital-go-pandacss-preset 0.0.0

package/src/recipes/checkbox.ts

@@ -0,0 +1,297 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as checkboxAnatomy } from "@ark-ui/anatomy/checkbox";
+
+export default defineSlotRecipe({
+  className: "checkbox",
+  slots: checkboxAnatomy.keys(),
+  base: {
+    root: {
+      /**
+       * flex w-fit items-start py-2
+       */
+      display: "flex",
+      alignItems: "flex-start",
+      width: "fit-content",
+      py: 2,
+    },
+    control: {
+      /**
+       * flex items-center justify-center shrink-0 rounded-[calc(1/8*100%)]
+       * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+       */
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      rounded: "calc(1 / 8 * 100%)",
+      _disabled: {
+        bg: "solid-gray.420",
+      },
+    },
+    indicator: {
+      /**
+       * appearance-none size-3/4 rounded-[calc(2/18*100%)]
+       */
+      appearance: "none",
+      width: "3/4",
+      height: "3/4",
+      rounded: "calc(2 / 18 * 100%)",
+      borderColor: {
+        /**
+         * border-solid-gray-600 hover:border-black
+         * forced-colors:!border-[ButtonText]
+         */
+        base: "solid-gray.600",
+        _hover: "black",
+        _highContrast: "ButtonText",
+        _checked: {
+          /**
+           * checked:border-blue-900 checked:hover:border-blue-1100
+           * forced-colors:checked:!border-[Highlight]
+           */
+          base: "keyColor.900",
+          _hover: "keyColor.1100",
+          _highContrast: "Highlight",
+        },
+        _indeterminate: {
+          /**
+           * indeterminate:border-blue-900 indeterminate:hover:border-blue-1100
+           * forced-colors:indeterminate:!border-[Highlight]
+           */
+          base: "keyColor.900",
+          _hover: "keyColor.1100",
+          _highContrast: "Highlight",
+        },
+        _invalid: {
+          /**
+           * data-[error]:border-error-1 data-[error]:hover:border-red-1000
+           */
+          base: "error.1",
+          _hover: "red.1000",
+        },
+        _disabled: {
+          /**
+           * aria-disabled:!border-solid-gray-300
+           * forced-colors:aria-disabled:!border-[GrayText]
+           */
+          base: "solid-gray.300",
+          _highContrast: "GrayText",
+        },
+      },
+      bg: {
+        /**
+         * bg-white
+         */
+        base: "white",
+        /**
+         * checked:bg-blue-900 checked:hover:bg-blue-1100
+         * forced-colors:checked:!bg-[Highlight]
+         */
+        _checked: {
+          base: "keyColor.900",
+          _hover: "keyColor.1100",
+          _highContrast: "Highlight",
+        },
+        _indeterminate: {
+          /**
+           * indeterminate:bg-blue-900 indeterminate:hover:bg-blue-1100
+           * forced-colors:indeterminate:!bg-[Highlight]
+           */
+          base: "keyColor.900",
+          _hover: "keyColor.1100",
+          _highContrast: "Highlight",
+        },
+        /**
+         * data-[error]:indeterminate:bg-error-1
+         * data-[error]:indeterminate:hover:bg-red-1000
+         * data-[error]:checked:bg-error-1 data-[error]:checked:hover:bg-red-1000
+         */
+        _invalid: {
+          _indeterminate: {
+            base: "error.1",
+            _hover: "red.1000",
+          },
+          _checked: {
+            base: "error.1",
+            _hover: "red.1000",
+          },
+        },
+        /**
+         * aria-disabled:!bg-solid-gray-50
+         * aria-disabled:checked:!bg-solid-gray-300
+         * aria-disabled:indeterminate:!bg-solid-gray-300
+         * forced-colors:aria-disabled:checked:!bg-[GrayText]
+         */
+        _disabled: {
+          base: "solid-gray.50",
+          _checked: "solid-gray.300",
+          _indeterminate: "solid-gray.300",
+          _highContrast: {
+            _checked: "GrayText",
+          },
+        },
+      },
+      /**
+       * bg-clip-padding
+       */
+      backgroundClip: "padding-box",
+      /**
+       * before:hidden checked:before:block indeterminate:before:block
+       * before:size-3.5
+       * before:bg-white
+       * forced-colors:before:!bg-[HighlightText]
+       * aria-disabled:before:border-solid-gray-50
+       */
+      _before: {
+        content: '""',
+        display: "none",
+        width: 3.5,
+        height: 3.5,
+        bg: { base: "white", _highContrast: "HighlightText" },
+        borderColor: { _disabled: "solid-gray.50" },
+      },
+      /**
+       * checked:before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
+       * indeterminate:before:[clip-path:path('M3.25,7.75H10.75V6.25H3.25V7.75Z')]
+       */
+      _checked: {
+        _before: {
+          display: "block",
+          clipPath:
+            "path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')",
+        },
+      },
+      _indeterminate: {
+        _before: {
+          display: "block",
+          clipPath: "path('M3.25,7.75H10.75V6.25H3.25V7.75Z')",
+        },
+      },
+      /**
+       * focus:outline focus:outline-4 focus:outline-black
+       * focus:outline-offset-[calc(2/16*1rem)]
+       * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+       */
+      _focus: {
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+    },
+    label: {
+      /**
+       * text-solid-gray-800
+       * data-[size=sm]:pt-px data-[size=sm]:text-dns-16N-130
+       * data-[size=md]:pt-1 data-[size=md]:text-dns-16N-130
+       * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
+       */
+      color: "solid-gray.800",
+    },
+    group: {},
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          /**
+           * data-[size=sm]:gap-1
+           */
+          gap: 1,
+        },
+        control: {
+          /**
+           * data-[size=sm]:size-6
+           */
+          width: 6,
+          height: 6,
+        },
+        indicator: {
+          /**
+           * data-[size=sm]:border-[calc(2/16*1rem)]
+           */
+          borderWidth: "calc(2 / 16 * 1rem)",
+        },
+        label: {
+          /**
+           * data-[size=sm]:pt-px data-[size=sm]:text-dns-16N-130
+           */
+          pt: "1px",
+          textStyle: "dns-16N-130",
+        },
+      },
+      md: {
+        root: {
+          /**
+           * data-[size=md]:gap-2
+           */
+          gap: 2,
+        },
+        control: {
+          /**
+           * data-[size=md]:size-8
+           */
+          width: 8,
+          height: 8,
+        },
+        indicator: {
+          /**
+           * data-[size=md]:border-[calc(2/16*1rem)]
+           * data-[size=md]:before:origin-top-left
+           * data-[size=md]:before:scale-[calc(20/14)]
+           */
+          borderWidth: "calc(2 / 16 * 1rem)",
+          _before: {
+            transformOrigin: "top left",
+            scale: "calc(20 / 14)",
+          },
+        },
+        label: {
+          /**
+           * data-[size=md]:pt-1 data-[size=md]:text-dns-16N-130
+           */
+          pt: 1,
+          textStyle: "dns-16N-130",
+        },
+      },
+      lg: {
+        root: {
+          /**
+           * data-[size=lg]:gap-2
+           */
+          gap: 2,
+        },
+        control: {
+          /**
+           * data-[size=lg]:size-11
+           */
+          width: 11,
+          height: 11,
+        },
+        indicator: {
+          /**
+           * data-[size=lg]:border-[calc(3/16*1rem)]
+           * data-[size=lg]:before:origin-top-left
+           * data-[size=lg]:before:scale-[calc(27/14)]
+           */
+          borderWidth: "calc(3 / 16 * 1rem)",
+          _before: {
+            transformOrigin: "top left",
+            scale: "calc(27 / 14)",
+          },
+        },
+        label: {
+          /**
+           * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
+           */
+          pt: 2.5,
+          textStyle: "dns-17N-130",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});

package/src/recipes/disclosure.ts

@@ -0,0 +1,98 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Disclosure/Disclosure.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export default defineSlotRecipe({
+  className: "disclosure",
+  slots: ["root", "summary", "icon", "content"],
+  base: {
+    root: {
+      /**
+       * group/disclosure
+       */
+    },
+    summary: {
+      /**
+       * group/summary
+       * [&::-webkit-details-marker]:hidden
+       */
+      /**
+       * flex w-fit cursor-default list-none items-start justify-start gap-2
+       */
+      display: "flex",
+      width: "fit-content",
+      cursor: "default",
+      listStyle: "none",
+      alignItems: "start",
+      justifyContent: "start",
+      gap: 2,
+      /**
+       * remove button style
+       */
+      textAlign: "start",
+      /**
+       * hover:underline hover:underline-offset-[calc(3/16*1rem)]
+       */
+      _hover: {
+        textDecoration: "underline",
+        textUnderlineOffset: "calc(3 / 16 * 1rem)",
+      },
+      /**
+       * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
+       * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+       * focus-visible:bg-yellow-300
+       * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+       */
+      _focusVisible: {
+        rounded: 4,
+        bg: "yellow.300",
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+    },
+    icon: {
+      /**
+       * flex-none text-blue-1000 mt-[calc((1lh-24px)/2)]
+       * group-open/disclosure:rotate-180
+       * forced-colors:text-inherit
+       */
+      flex: "none",
+      color: { base: "keyColor.1000", _highContrast: "inherit" },
+      mt: "calc((1lh - 24px) / 2)",
+      /**
+       * svg
+       */
+      width: "24px",
+      height: "24px",
+      rounded: "full",
+      bg: { base: "white", _groupHover: "currentColor" },
+      outlineStyle: "solid",
+      outlineWidth: "3px",
+      outlineOffset: "-3px",
+      transform: {
+        base: "rotate(-180deg)",
+        "[data-state=open]>&": "rotate(0deg)",
+      },
+      transition: "transform",
+      _before: {
+        content: '""',
+        bg: { base: "currentColor", _groupHover: "white" },
+        width: "full",
+        height: "full",
+        rounded: "full",
+        outlineStyle: "solid",
+        outlineWidth: "3px",
+        outlineOffset: "-3px",
+        display: "block",
+        clipPath:
+          "path('M12 15.525L16.925 10.625H7.07502L12 15.525ZM12 22.85C10.4834 22.85 9.06677 22.566 7.75027 21.998C6.43394 21.4298 5.28886 20.6588 4.31502 19.685C3.34119 18.7112 2.57019 17.5661 2.00202 16.2498C1.43402 14.9333 1.15002 13.5167 1.15002 12C1.15002 10.4833 1.43402 9.06675 2.00202 7.75025C2.57019 6.43392 3.34119 5.28883 4.31502 4.315C5.28886 3.34117 6.43394 2.57017 7.75027 2.002C9.06677 1.434 10.4834 1.15 12 1.15C13.5167 1.15 14.9333 1.434 16.2498 2.002C17.5661 2.57017 18.7112 3.34117 19.685 4.315C20.6589 5.28883 21.4299 6.43392 21.998 7.75025C22.566 9.06675 22.85 10.4833 22.85 12C22.85 13.5167 22.566 14.9333 21.998 16.2498C21.4299 17.5661 20.6589 18.7112 19.685 19.685C18.7112 20.6588 17.5661 21.4298 16.2498 21.998C14.9333 22.566 13.5167 22.85 12 22.85Z')",
+      },
+    },
+    content: {},
+  },
+});

package/src/recipes/divider.ts

@@ -0,0 +1,21 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Divider/Divider.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "divider",
+  description:
+    "ディバイダーは、異なるセクション、コンポーネント、またはコンテンツのグループ間に設けられる視覚的な区切りで、HTMLのhr要素に相当します。要素間に明確な区切りを設けることで、読みやすさを向上させる役割を果たします。",
+  variants: {
+    color: {
+      "gray-420": { borderColor: "solid-gray.420" },
+      "gray-536": { borderColor: "solid-gray.536" },
+      black: { borderColor: "black" },
+    },
+  },
+  defaultVariants: {
+    color: "gray-420",
+  },
+});

package/src/recipes/drawer.ts

@@ -0,0 +1,126 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Drawer/Drawer.stories.tsx
+ * https://github.com/cschroeter/park-ui/blob/main/packages/preset/src/theme/recipes/drawer.ts
+ */
+import { anatomy as dialogAnatomy } from "@ark-ui/anatomy/dialog";
+import { defineSlotRecipe } from "@pandacss/dev";
+
+const anatomy = dialogAnatomy.extendWith("header", "body", "footer");
+
+export default defineSlotRecipe({
+  className: "drawer",
+  slots: anatomy.keys(),
+  base: {
+    backdrop: {
+      /**
+       * backdrop:bg-opacity-gray-100 forced-colors:backdrop:bg-[#000b]
+       */
+      backdropFilter: "blur(4px)",
+      background: "gray.100/90",
+      height: "100vh",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      zIndex: 10,
+      // zIndex: "overlay",
+      _open: {
+        animation: "backdrop-in",
+      },
+      _closed: {
+        animation: "backdrop-out",
+      },
+    },
+    positioner: {
+      alignItems: "center",
+      display: "flex",
+      height: "100dvh",
+      justifyContent: "center",
+      position: "fixed",
+      top: 0,
+      /**
+       * w-72
+       */
+      width: 72,
+      zIndex: 1400,
+      // zIndex: "modal",
+    },
+    content: {
+      /**
+       * m-[unset] max-w-full max-h-[unset] overflow-visible start-auto
+       */
+      margin: "unset",
+      maxWidth: "full",
+      maxHeight: "full",
+      overflow: "visible",
+      insetInlineStart: "auto",
+      width: "full",
+      /**
+       * bg-white shadow-2 border-l-transparent
+       */
+      borderColor: "transparent",
+      background: "white",
+      boxShadow: 2,
+      /**
+       * grid grid-rows-[auto_1fr] h-dvh
+       */
+      display: "grid",
+      gridTemplateRows: "auto 1fr",
+      height: "100dvh",
+      _hidden: {
+        display: "none",
+      },
+    },
+    header: {
+      /**
+       * flex justify-end py-4 pl-4 pr-8
+       */
+      display: "flex",
+      justifyContent: "start",
+      py: 4,
+      px: 4,
+    },
+    title: {
+      textStyle: "std-20B-150",
+    },
+    body: {
+      /**
+       * overflow-auto
+       */
+      overflow: "auto",
+      px: 4,
+      py: 4,
+      textStyle: "std-17N-170",
+    },
+  },
+  variants: {
+    placement: {
+      right: {
+        positioner: {
+          right: 0,
+        },
+        content: {
+          /**
+           * border-l
+           */
+          borderLeftWidth: "1px",
+        },
+      },
+      left: {
+        positioner: {
+          left: 0,
+        },
+        content: {
+          /**
+           * border-l
+           */
+          borderRightWidth: "1px",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    placement: "right",
+  },
+});

package/src/recipes/error-text.ts

@@ -0,0 +1,16 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/ErrorText/ErrorText.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "error-text",
+  base: {
+    /**
+     * text-dns-16N-130 text-error-1
+     */
+    textStyle: "dns-16N-130",
+    color: "error.1",
+  },
+});

package/src/recipes/hamburger-menu-button.ts

@@ -0,0 +1,45 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/HamburgerMenuButton/HamburgerMenuButton.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "hamburger-menu-button",
+  base: {
+    /**
+     * flex w-fit items-center text-oln-16N-100 rounded-4 touch-manipulation
+     */
+    display: "flex",
+    width: "fit-content",
+    alignItems: "center",
+    textStyle: "oln-16N-100",
+    rounded: 4,
+    touchAction: "manipulation",
+    /**
+     * hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
+     */
+    _hover: {
+      bg: "solid-gray.50",
+      textDecoration: "underline",
+      textUnderlineOffset: "calc(3 / 16 * 1rem)",
+    },
+    /**
+     * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
+     * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300
+     * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+     */
+    _focusVisible: {
+      bg: "yellow.300",
+      outlineStyle: "solid",
+      outlineWidth: "4px",
+      outlineColor: "black",
+      outlineOffset: "calc(2 / 16 * 1rem)",
+      focusRing: "calc(2 / 16 * 1rem)",
+    },
+    /**
+     * override reset
+     */
+    cursor: "pointer",
+  },
+});

package/src/recipes/index.ts

@@ -0,0 +1,71 @@
+import accordion from "./accordion";
+import breadcrumb from "./breadcrumb";
+import button from "./button";
+import checkbox from "./checkbox";
+import disclosure from "./disclosure";
+import digitalGoDivider from "./divider";
+import drawer from "./drawer";
+import errorText from "./error-text";
+import hamburgerMenuButton from "./hamburger-menu-button";
+import input from "./input";
+import inputText from "./input-text";
+import label from "./label";
+import legend from "./legend";
+import link from "./link";
+import list from "./list";
+import menu from "./menu";
+import menuItem from "./menu-item";
+import menuList from "./menu-list";
+import notificationBanner from "./notification-banner";
+import orderedList from "./ordered-list";
+import radio from "./radio";
+import radioGroup from "./radio-group";
+import requirementBadge from "./requirement-badge";
+import resourceList from "./resource-list";
+import select from "./select";
+import selectBox from "./select-box";
+import supportText from "./support-text";
+import table from "./table";
+import tabs from "./tabs";
+import textarea from "./textarea";
+import treeView from "./tree-view";
+import unorderedList from "./unordered-list";
+import utilityLink from "./utility-link";
+
+const recipes = {
+  accordion,
+  breadcrumb,
+  button,
+  checkbox,
+  drawer,
+  disclosure,
+  digitalGoDivider,
+  errorText,
+  hamburgerMenuButton,
+  input,
+  inputText,
+  label,
+  legend,
+  link,
+  list,
+  menu,
+  menuItem,
+  menuList,
+  notificationBanner,
+  orderedList,
+  radio,
+  radioGroup,
+  requirementBadge,
+  resourceList,
+  select,
+  selectBox,
+  supportText,
+  table,
+  tabs,
+  textarea,
+  treeView,
+  unorderedList,
+  utilityLink,
+};
+
+export default recipes;