@cieloazul310/digital-go-pandacss-preset 0.0.0

package/src/recipes/input-text.ts

@@ -0,0 +1,76 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Input/Input.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as fieldAnatomy } from "@ark-ui/anatomy/field";
+import errorText from "./error-text";
+import input from "./input";
+import label from "./label";
+import selectBox from "./select-box";
+import supportText from "./support-text";
+import textarea from "./textarea";
+
+const inputText = defineSlotRecipe({
+  className: "input-text",
+  description:
+    "インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。",
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1.5,
+    },
+    label: {
+      ...label.base,
+    },
+    input: {
+      ...input.base,
+    },
+    textarea: {
+      ...textarea.base,
+    },
+    select: {
+      ...selectBox.base,
+    },
+    errorText: {
+      ...errorText.base,
+    },
+    helperText: {
+      ...supportText.base,
+    },
+  },
+  variants: {
+    size: {
+      lg: {
+        label: { ...label.variants?.size?.lg },
+        input: { ...input.variants?.size?.lg },
+        select: { ...selectBox.variants?.size?.lg },
+      },
+      md: {
+        label: { ...label.variants?.size?.md },
+        input: { ...input.variants?.size?.md },
+        select: { ...selectBox.variants?.size?.md },
+      },
+      sm: {
+        label: { ...label.variants?.size?.sm },
+        input: { ...input.variants?.size?.sm },
+        select: { ...selectBox.variants?.size?.sm },
+      },
+    },
+    invalid: {
+      true: {
+        input: { ...input.variants?.invalid?.true },
+        select: { ...selectBox.variants?.invalid?.true },
+        textarea: { ...textarea.variants?.invalid?.true },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+    invalid: false,
+  },
+});
+
+export default inputText;

package/src/recipes/input.ts

@@ -0,0 +1,81 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Input/Input.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "input",
+  description:
+    "インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。",
+  base: {
+    /**
+     * max-w-full px-4 py-3 rounded-8
+     */
+    // minWidth: "80px",
+    maxWidth: "full",
+    rounded: 8,
+    px: 4,
+    py: 3,
+    /**
+     * 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", _highContrast: "GrayText" },
+    },
+    /**
+     * bg-white text-oln-16N-100 text-solid-gray-800
+     * aria-disabled:bg-solid-gray-50 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: { base: "solid-gray.420", _highContrast: "GrayText" },
+    },
+    textStyle: "oln-16N-100",
+    /**
+     * 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)",
+    },
+    /**
+     * aria-disabled:pointer-events-none
+     */
+    pointerEvents: { base: "inherit", _disabled: "none" },
+  },
+  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: {
+      true: {
+        /**
+         * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
+         */
+        borderColor: { base: "error.1", _hover: "red.1000" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+    invalid: false,
+  },
+});

package/src/recipes/label.ts

@@ -0,0 +1,32 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Label/Label.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "label",
+  base: {
+    /**
+     * flex w-fit items-center gap-2 text-solid-gray-800
+     */
+    display: "flex",
+    width: "fit-content",
+    alignItems: "center",
+    gap: 2,
+    color: "solid-gray.800",
+  },
+  variants: {
+    size: {
+      /**
+       * data-[size=sm]:text-std-16B-170 data-[size=md]:text-std-17B-170 data-[size=lg]:text-std-18B-160
+       */
+      sm: { textStyle: "std-16B-170" },
+      md: { textStyle: "std-17B-170" },
+      lg: { textStyle: "std-18B-160" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/recipes/legend.ts

@@ -0,0 +1,44 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Legend/Legend.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "legend",
+  base: {
+    /**
+     * flex w-fit items-center gap-2 text-solid-gray-800
+     */
+    display: "flex",
+    width: "fit-content",
+    alignItems: "center",
+    gap: 2,
+    color: "solid-gray.800",
+  },
+  variants: {
+    size: {
+      sm: {
+        /**
+         * data-[size=sm]:text-std-16B-170
+         */
+        textStyle: "std-16B-170",
+      },
+      md: {
+        /**
+         * data-[size=md]:text-std-17B-170
+         */
+        textStyle: "std-17B-170",
+      },
+      lg: {
+        /**
+         * data-[size=lg]:text-std-18B-160
+         */
+        textStyle: "std-18B-160",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/recipes/link.ts

@@ -0,0 +1,66 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Link/Link.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "link",
+  description:
+    "リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。この関連付けをハイパーリンクと呼び、これはウェブをウェブたらしめている基本的な概念のひとつです。",
+  base: {
+    /**
+     * text-blue-1000 visited:text-magenta-900 hover:text-blue-1000
+     * focus-visible:text-blue-1000 active:text-orange-700
+     */
+    color: {
+      base: "keyColor.1000",
+      _visited: "magenta.900",
+      _hover: "keyColor.1000",
+      _focusVisible: "keyColor.1000",
+      _active: "orange.700",
+    },
+    /**
+     * focus-visible:bg-yellow-300
+     */
+    bg: {
+      base: "transparent",
+      _focusVisible: "yellow.300",
+    },
+    /**
+     * underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)]
+     * active:decoration-1
+     */
+    textDecoration: "underline",
+    textDecorationThickness: {
+      base: "1px",
+      _hover: "calc(3 / 16 * 1rem)",
+      _active: "1px",
+    },
+    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:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+     */
+    _focusVisible: {
+      rounded: 4,
+      outlineStyle: "solid",
+      outlineWidth: "4px",
+      outlineColor: "black",
+      outlineOffset: "calc(2 / 16 * 1rem)",
+      focusRing: "calc(2 / 16 * 1rem)",
+    },
+    /**
+     * with icon
+     */
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 1,
+    "& svg": {
+      width: "1em",
+      height: "1em",
+    },
+  },
+});

package/src/recipes/list.ts

@@ -0,0 +1,11 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "list",
+  base: {
+    /**
+     * py-1
+     */
+    py: 1,
+  },
+});

package/src/recipes/menu-item.ts

@@ -0,0 +1,99 @@
+/**
+ * reference:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/LanguageSelector/parts/MenuItem.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "menu-item",
+  base: {
+    /**
+     * flex relative items-center bg-white hover:bg-solid-gray-50 text-nowrap
+     * text-oln-16N-100 text-solid-gray-800
+     * ${isCurrent ? '!text-blue-1000 !bg-blue-100 font-bold' : ''}
+     */
+    display: "flex",
+    position: "relative",
+    alignItems: "center",
+    textStyle: "dns-16N-130",
+    bg: {
+      base: "transparent",
+      _hover: "solid-gray.50",
+      _selected: {
+        base: "keyColor.100",
+        _hover: "keyColor.100",
+      },
+      _checked: {
+        base: "keyColor.100",
+        _hover: "keyColor.100",
+      },
+      _open: {
+        base: "keyColor.50",
+        _hover: "keyColor.50",
+      },
+    },
+    color: {
+      base: "solid-gray.800",
+      _selected: "keyColor.1000",
+      _checked: "keyColor.1000",
+      _open: "keyColor.1000",
+    },
+    fontWeight: { base: "normal", _selected: "bold", _checked: "bold" },
+    /**
+     * hover:underline hover:underline-offset-[calc(3/16*1rem)]
+     */
+    _hover: {
+      textDecoration: "underline",
+      textUnderlineOffset: "calc(3 / 16 * 1rem)",
+    },
+    /**
+     * py-3 pl-3 pr-6 gap-x-2
+     */
+    py: 3,
+    pl: 3,
+    pr: 6,
+    columnGap: 2,
+    /**
+     * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
+     * focus-visible:-outline-offset-4 focus-visible:bg-yellow-300
+     * focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset
+     * focus-visible:ring-yellow-300
+     */
+    _focusVisible: {
+      // rounded: 4,
+      outlineStyle: "solid",
+      outlineWidth: "4px",
+      outlineColor: "black",
+      outlineOffset: "calc(2 / 16 * 1rem)",
+      focusRing: "calc(6 / 16 * 1rem)",
+    },
+  },
+  variants: {
+    variant: {
+      standard: {
+        rounded: 4,
+      },
+      boxed: {
+        rounded: {
+          base: 0,
+          _focusVisible: 4,
+        },
+      },
+    },
+    isCondensed: {
+      true: {
+        /**
+         * ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5'}
+         */
+        py: 1.5,
+        pl: 1.5,
+        pr: 4,
+        columnGap: 1.5,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "standard",
+    isCondensed: false,
+  },
+});

package/src/recipes/menu-list.ts

@@ -0,0 +1,67 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+import { menuListAnatomy } from "../anatomy";
+import menuItem from "./menu-item";
+
+export default defineSlotRecipe({
+  className: "menu-list",
+  slots: menuListAnatomy.keys(),
+  base: {
+    root: {},
+    label: {
+      py: 3,
+      pl: 3,
+      pr: 6,
+      textStyle: "oln-17B-100",
+      textWrap: "nowrap",
+      display: "block",
+      mb: 2,
+    },
+    content: {},
+    item: {
+      ...menuItem.base,
+    },
+    itemGroup: {
+      my: 1,
+    },
+    itemGroupLabel: {
+      ...menuItem.base,
+      position: "sticky",
+      top: 0,
+      bg: "white",
+    },
+    itemText: {},
+    itemIndicator: {
+      position: "absolute",
+      top: "50%",
+      right: 4,
+      transform: "translateY(-50%)",
+    },
+  },
+  variants: {
+    variant: {
+      standard: {
+        item: {
+          ...menuItem.variants?.variant?.standard,
+        },
+        itemGroupLabel: {
+          ...menuItem.variants?.variant?.standard,
+        },
+      },
+      boxed: {
+        item: {
+          ...menuItem.variants?.variant?.boxed,
+        },
+        itemGroupLabel: {
+          ...menuItem.variants?.variant?.boxed,
+        },
+      },
+    },
+    isCondensed: {
+      true: {},
+    },
+  },
+  defaultVariants: {
+    variant: "standard",
+    isCondensed: false,
+  },
+});

package/src/recipes/menu.ts

@@ -0,0 +1,101 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/LanguageSelector/parts/Menu.tsx
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/LanguageSelector/parts/MenuItem.tsx
+ */
+import { defineSlotRecipe, type SystemStyleObject } from "@pandacss/dev";
+import { anatomy as menuAnatomy } from "@ark-ui/anatomy/menu";
+import menuItem from "./menu-item";
+
+const itemStyle = {
+  ...menuItem.base,
+} satisfies SystemStyleObject;
+
+export default defineSlotRecipe({
+  className: "menu",
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      minWidth: "fit-content",
+      width: "auto",
+      maxHeight: "calc((44 * 6.5 + 16) / 16 * 1rem)",
+      py: 2,
+      borderWidth: "1px",
+      borderColor: "solid-gray.420",
+      bg: "white",
+      rounded: "lg",
+      boxShadow: 1,
+      /**
+     * min-w-fit w-auto py-2 border border-solid-grey-420 bg-white shadow-1 rounded-lg
+      has-[>:nth-child(7)]:rounded-r-none
+      ${isCondensed ? 'max-h-[calc((32*6.5+16)/16*1rem)]' : 'max-h-[calc((44*6.5+16)/16*1rem)]'}
+     */
+    },
+    itemGroupLabel: {
+      ...itemStyle,
+      fontWeight: "bold",
+    },
+    triggerItem: {
+      ...itemStyle,
+    },
+    item: {
+      ...itemStyle,
+      textDecoration: {
+        base: "none",
+        _hover: "underline",
+      },
+      textUnderlineOffset: "calc(3 / 16 * 1rem)",
+      _checked: {
+        bg: "keyColor.100",
+        color: "keyColor.1000",
+        fontWeight: "bold",
+      },
+      _focusVisible: {
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+        zIndex: 1,
+      },
+      /**
+     * flex relative items-center bg-white text-nowrap text-oln-16N-1 text-solid-grey-800
+          ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5' : 'py-3 pl-3 pr-6 gap-x-2'}
+          ${isCurrent && '!text-blue-1000 !bg-blue-100 font-bold'}
+          hover:underline hover:underline-offset-[calc(3/16*1rem)] hover:bg-solid-grey-50
+          focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:-outline-offset-4 focus-visible:bg-yellow-300 focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset focus-visible:ring-yellow-300
+          ${className ?? ''}
+     */
+    },
+  },
+  variants: {
+    isCondensed: {
+      true: {
+        content: {
+          maxHeight: "calc((32 * 6.5 + 16) / 16 * 1rem)",
+        },
+        itemGroupLabel: {
+          py: 1.5,
+          pl: 1.5,
+          pr: 4,
+          columnGap: 1.5,
+        },
+        item: {
+          py: 1.5,
+          pl: 1.5,
+          pr: 4,
+          columnGap: 1.5,
+        },
+        triggerItem: {
+          py: 1.5,
+          pl: 1.5,
+          pr: 4,
+          columnGap: 1.5,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    isCondensed: false,
+  },
+});