@cieloazul310/digital-go-pandacss-preset 0.0.0

package/src/recipes/resource-list.ts

@@ -0,0 +1,122 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+import { resourceListAnatomy } from "../anatomy";
+
+export default defineSlotRecipe({
+  className: "resource-list",
+  slots: resourceListAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      borderColor: "solid-gray.420",
+      bg: {
+        "&:has(input:checked)": "keyColor.50",
+        _selected: "keyColor.50",
+      },
+    },
+    contentsContainer: {
+      display: "flex",
+      flexGrow: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "start",
+      gap: { base: 4, md: 6 },
+      /**
+       * p-4 md:px-6 md:py-4
+       */
+      py: 4,
+      px: { base: 4, md: 6 },
+      bg: { base: "transparent", _hover: "solid-gray.50" },
+      _focusVisible: {
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+    },
+    functionButton: {
+      p: 4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    frontIcon: {
+      // px: 2,
+    },
+    content: {
+      height: "full",
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+    },
+    title: {
+      /**
+       * mb-4 text-std-20B-150 font-bold group-hover:text-blue-1000 group-hover:decoration-[calc(3/16*1rem)] md:mb-4
+       */
+      textStyle: "std-20B-150",
+      width: "fit-content",
+    },
+    label: {
+      zIndex: 1,
+      width: "fit-content",
+      textStyle: "oln-17N-100",
+      color: "solid-gray.800",
+    },
+    supportText: {
+      color: "solid-gray.800",
+    },
+    subLabel: {
+      zIndex: 1,
+      color: "solid-gray.800",
+    },
+  },
+  variants: {
+    variant: {
+      list: {
+        root: {
+          borderBottomWidth: "1px",
+        },
+      },
+      frame: {
+        root: {
+          rounded: 16,
+          borderWidth: "1px",
+        },
+        contentsContainer: {
+          borderTopLeftRadius: 16,
+          borderBottomLeftRadius: 16,
+          _only: {
+            borderTopRightRadius: 16,
+            borderBottomRightRadius: 16,
+          },
+        },
+        functionButton: {
+          borderTopRightRadius: 16,
+          borderBottomRightRadius: 16,
+        },
+      },
+    },
+    asLink: {
+      true: {
+        contentsContainer: {
+          position: "relative",
+        },
+        title: {
+          _before: {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "full",
+            height: "full",
+            zIndex: 0,
+            cursor: "inherit",
+          },
+        },
+        supportText: {
+          textDecoration: { base: "none", _groupHover: "underline" },
+        },
+      },
+    },
+  },
+});

package/src/recipes/select-box.ts

@@ -0,0 +1,81 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Select/Select.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "select-box",
+  description:
+    "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
+  base: {
+    /**
+     * w-full pl-4 pr-10 py-[calc(11/16*1rem)]
+     * appearance-none rounded-8
+     * aria-disabled:pointer-events-none
+     */
+    width: "full",
+    appearance: "none",
+    pl: 4,
+    pr: 10,
+    py: "calc(11 / 16 * 1rem)",
+    rounded: 8,
+    pointerEvents: { base: "inherit", _disabled: "none" },
+    /**
+     * bg-white text-oln-16N-100 text-solid-gray-800
+     * aria-disabled:text-solid-gray-420
+     * aria-disabled:forced-colors:text-[GrayText]
+     */
+    bg: { base: "white", _disabled: "solid-gray.50" },
+    color: { base: "solid-gray.800", _disabled: "solid-gray.420" },
+    textStyle: "oln-16N-100",
+    /**
+     * border border-solid-gray-600 hover:border-black
+     * aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50
+     * aria-disabled:forced-colors:border-[GrayText]
+     */
+    borderWidth: "1px",
+    borderColor: {
+      base: "solid-gray.900",
+      _disabled: "solid-gray.300",
+    },
+    /**
+     * remove button style
+     */
+    textAlign: "start",
+    /**
+     * 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)",
+    },
+  },
+  variants: {
+    size: {
+      /**
+       * data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
+       */
+      sm: {
+        height: 10,
+      },
+      md: {
+        height: 12,
+      },
+      lg: {
+        height: 14,
+      },
+    },
+    invalid: {
+      /**
+       * aria-[invalid=true]:border-error-1aria-[invalid=true]:hover:border-red-1000
+       */
+      true: {
+        borderColor: { base: "error.1", _hover: "red.1000" },
+      },
+    },
+  },
+});

package/src/recipes/select.ts

@@ -0,0 +1,117 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Select/Select.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as selectAnatomy } from "@ark-ui/anatomy/select";
+import label from "./label";
+import selectBox from "./select-box";
+import menu from "./menu";
+
+export default defineSlotRecipe({
+  className: "select",
+  description:
+    "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
+  slots: selectAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1.5,
+    },
+    label: {
+      ...label.base,
+    },
+    control: {
+      /**
+       * relative min-w-80 max-w-full
+       */
+      position: "relative",
+      minWidth: "80px",
+      maxWidth: "full",
+    },
+    trigger: {
+      ...selectBox.base,
+      /**
+       * adapt to clearTrigger
+       */
+      pr: 20,
+    },
+    indicator: {
+      /**
+       * pointer-events-none absolute right-4 top-1/2 -translate-y-1/2
+       */
+      pointerEvents: "none",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      right: 4,
+      /**
+       * ${props['aria-disabled'] ? 'text-solid-gray-420 forced-colors:text-[GrayText]' : 'text-solid-gray-900 forced-colors:text-[CanvasText]'}
+       */
+      color: {
+        base: { base: "solid-gray.900", _highContrast: "CanvasText" },
+        _disabled: { base: "solid-gray.420", _highContrast: "GrayText" },
+      },
+    },
+    clearTrigger: {
+      position: "absolute",
+      top: "50%",
+      right: 12,
+      transform: "translateY(-50%)",
+    },
+    content: {
+      ...menu.base?.content,
+    },
+    itemGroupLabel: {
+      textStyle: "oln-16N-1",
+      fontWeight: "bold",
+      py: 3,
+      pl: 3,
+      pr: 6,
+    },
+    item: {
+      ...menu.base?.item,
+    },
+    itemIndicator: {
+      pointerEvents: "none",
+      position: "absolute",
+      right: 4,
+      top: "50%",
+      transform: "translateY(-50%)",
+    },
+  },
+  variants: {
+    size: {
+      lg: {
+        trigger: {
+          ...selectBox.variants?.size?.lg,
+        },
+        label: { ...label.variants?.size?.lg },
+      },
+      md: {
+        trigger: {
+          ...selectBox.variants?.size?.md,
+        },
+        label: { ...label.variants?.size?.md },
+      },
+      sm: {
+        trigger: {
+          ...selectBox.variants?.size?.sm,
+        },
+        label: { ...label.variants?.size?.sm },
+      },
+    },
+    invalid: {
+      true: {
+        trigger: {
+          ...selectBox.variants?.invalid?.true,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+    invalid: false,
+  },
+});

package/src/recipes/support-text.ts

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

package/src/recipes/table.ts

@@ -0,0 +1,146 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Table/Table.stories.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export default defineSlotRecipe({
+  className: "table",
+  slots: [
+    "root",
+    "head",
+    "body",
+    "foot",
+    "row",
+    "header",
+    "cell",
+    "colgroup",
+    "col",
+    "caption",
+  ],
+  base: {
+    root: {
+      /**
+       * w-full text-std-16N-170
+       */
+      width: "full",
+    },
+    head: {
+      "& tr": {
+        /**
+         * border-black bg-solid-gray-50
+         */
+        borderColor: "black",
+        bg: "solid-gray.50",
+      },
+    },
+    body: {
+      "& tr": {
+        /**
+         * border-solid-gray-420
+         */
+        borderColor: "solid-gray.420",
+        /**
+         * [&:has(input:checked)]:bg-blue-100
+         */
+        /*
+        "&:has(input:checked)": {
+          bg: "keyColor.100",
+        },
+        */
+      },
+    },
+    foot: {},
+    row: {
+      /**
+       * border-b
+       */
+      borderBottomWidth: "1px",
+      "tbody > &:has(input:checked)": { bg: "keyColor.100" },
+    },
+    header: {
+      /**
+       * px-4 text-start align-top
+       */
+      px: 4,
+      verticalAlign: "top",
+      textAlign: "start",
+    },
+    cell: {
+      /**
+       * px-4 align-top
+       */
+      px: 4,
+      verticalAlign: "top",
+    },
+    caption: {
+      mb: 4,
+      textStyle: "oln-17B-100",
+    },
+  },
+  variants: {
+    dense: {
+      false: {
+        root: {
+          textStyle: "std-16N-170",
+        },
+        header: {
+          /**
+           * py-5
+           */
+          py: 5,
+        },
+        cell: {
+          /**
+           * py-5
+           */
+          py: 5,
+        },
+      },
+      true: {
+        root: {
+          textStyle: "std-16N-120",
+        },
+        header: {
+          /**
+           * py-2.5
+           */
+          py: 2.5,
+        },
+        cell: {
+          /**
+           * py-2.5
+           */
+          py: 2.5,
+        },
+      },
+    },
+    striped: {
+      true: {
+        body: {
+          "& tr": {
+            _even: {
+              "&:not(:has(input:checked))": { bg: "{colors.keyColor.50}/25" },
+            },
+          },
+        },
+      },
+    },
+    hovered: {
+      true: {
+        body: {
+          "& tr": {
+            _hover: {
+              bg: "keyColor.50",
+            },
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    dense: false,
+    striped: false,
+    hovered: false,
+  },
+});

package/src/recipes/tabs.ts

@@ -0,0 +1,90 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as tabsAnatomy } from "@ark-ui/anatomy/tabs";
+
+export default defineSlotRecipe({
+  className: "tabs",
+  slots: tabsAnatomy.keys(),
+  base: {
+    root: {
+      p: 1.5,
+      mx: -1.5,
+    },
+    list: {
+      /**
+       * flex w-full min-w-max items-end whitespace-nowrap
+       * border-b border-solid-gray-420
+       */
+      display: "flex",
+      width: "full",
+      alignItems: "end",
+      whiteSpace: "nowrap",
+      borderBottomWidth: "1px",
+      borderColor: "solid-gray.420",
+      overflowX: "auto",
+    },
+    trigger: {
+      /**
+       * relative z-0 inline-flex gap-2 justify-center items-center
+       * text-oln-14B-100 md:text-oln-16B-100
+       */
+      position: "relative",
+      zIndex: 0,
+      display: "inline-flex",
+      gap: 2,
+      justifyContent: "center",
+      alignItems: "center",
+      textStyle: { base: "oln-14B-100", md: "oln-16B-100" },
+      /**
+       * px-4 py-6 group md:px-8 md:py-6
+       * hover:bg-solid-gray-50 focus-visible:bg-yellow-300
+       * aria-[current=page]:bg-white
+       */
+      px: { base: 4, md: 8 },
+      py: 6,
+      bg: {
+        base: "transparent",
+        _hover: "solid-gray.50",
+        _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
+        _selected: {
+          base: "white",
+          _hover: "white",
+          _focusVisible: "yellow.300",
+        },
+      },
+      /**
+       * focus-visible:z-10 focus-visible:rounded-4
+       * focus-visible:outline focus-visible:outline-4
+       * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black
+       * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+       */
+      _focusVisible: {
+        zIndex: 10,
+        rounded: 4,
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+      _selected: {
+        /**
+         * relative text-blue-900
+         * after:absolute after:bottom-0 after:left-0 after:w-full after:border-b-4
+         * after:border-current
+         * aria-[current=page]:cursor-default
+         */
+        color: "keyColor.900",
+        cursor: "default",
+        _after: {
+          content: '""',
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "full",
+          borderBottomWidth: "4px",
+          borderBlockColor: "currentcolor",
+        },
+      },
+    },
+  },
+});

package/src/recipes/textarea.ts

@@ -0,0 +1,63 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Textarea/Textarea.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "textarea",
+  description:
+    "テキストエリアコンポーネントは、1行以上のテキストを入力する場合に使用します。",
+  base: {
+    /**
+     * rounded-8 max-w-full p-4 aria-disabled:pointer-events-none
+     */
+    rounded: 8,
+    p: 4,
+    /**
+     * text-std-16N-170 bg-white text-solid-gray-800
+     * aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
+     * aria-disabled:forced-colors:text-[GrayText]
+     */
+    textStyle: "std-16N-170",
+    bg: { base: "white", _disabled: "solid-gray.50" },
+    color: {
+      base: "solid-gray.800",
+      _disabled: { base: "solid-gray.420", _highContrast: "GrayText" },
+    },
+    /**
+     * border border-solid-gray-600 hover:border-black
+     * aria-disabled:border-solid-gray-300 aria-disabled:forced-colors:border-[GrayText]
+     */
+    borderWidth: "1px",
+    borderColor: {
+      base: "solid-gray.600",
+      _hover: "black",
+      _disabled: { base: "solid-gray.300", _hover: "GrayText" },
+    },
+    /**
+     * 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)",
+    },
+  },
+  variants: {
+    invalid: {
+      true: {
+        /**
+         * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
+         */
+        borderColor: { base: "error.1", _hover: "red.1000" },
+      },
+    },
+  },
+  defaultVariants: {
+    invalid: false,
+  },
+});