@cieloazul310/digital-go-pandacss-preset 0.0.0

package/eslint.config.mjs

@@ -0,0 +1,6 @@
+import libraryConfig from "@repo/eslint-config/library";
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [...libraryConfig];

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@cieloazul310/digital-go-pandacss-preset",
+  "version": "0.0.0",
+  "license": "MIT",
+  "homepage": "https://github.com/cieloazul310/digital-go-design-system-with-panda",
+  "author": {
+    "name": "cieloazul310",
+    "url": "https://cieloazul310.github.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cieloazul310/digital-go-design-system-with-panda.git",
+    "directory": "packages/preset"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "npm run build -- --watch",
+    "eslint": "eslint src --fix",
+    "format": "prettier --parser typescript --write ."
+  },
+  "dependencies": {
+    "@cieloazul310/digital-go-pandacss-plugin": "^0.0.0",
+    "@cieloazul310/digital-go-pandacss-utils": "^0.0.0"
+  },
+  "devDependencies": {
+    "@ark-ui/anatomy": "^3.5.0",
+    "@pandacss/dev": "^0.53.7",
+    "@repo/eslint-config": "^0.0.0",
+    "@repo/typescript-config": "^0.0.0",
+    "eslint": "^9.28.0",
+    "tsup": "8.5.0",
+    "typescript": "5.8.3"
+  },
+  "peerDependencies": {
+    "@ark-ui/anatomy": "^3.0.0"
+  },
+  "lint-staged": {
+    "**/*.{js,mjs,cjs,tsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser typescript --write"
+    ]
+  }
+}

package/src/anatomy.ts

@@ -0,0 +1,41 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/anatomy.ts
+ */
+import { createAnatomy } from "@ark-ui/react/anatomy";
+
+export const breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
+  "root",
+  "list",
+  "item",
+  "link",
+  "separator",
+);
+
+export const menuListAnatomy = createAnatomy("menu-list").parts(
+  "root",
+  "label",
+  "content",
+  "item",
+  "itemGroup",
+  "itemGroupLabel",
+  "itemText",
+  "itemIndicator",
+  "input",
+);
+
+export const notificationBannerAnatomy = createAnatomy(
+  "notification-banner",
+).parts("root", "icon", "close", "header", "heading", "body");
+
+export const resourceListAnatomy = createAnatomy("resource-list").parts(
+  "root",
+  "contentsContainer",
+  "functionButton",
+  "frontIcon",
+  "form",
+  "content",
+  "label",
+  "title",
+  "supportText",
+  "subLabel",
+);

package/src/index.ts

@@ -0,0 +1,32 @@
+import { definePreset, type Preset } from "@pandacss/dev";
+import presetBase from "@cieloazul310/digital-go-pandacss-plugin";
+import {
+  createKeyColor,
+  type Palette,
+} from "@cieloazul310/digital-go-pandacss-utils";
+import recipes from "./recipes";
+
+const base = {
+  name: "digital-go-pandacss-preset",
+  presets: [presetBase],
+  theme: {
+    recipes,
+  },
+} satisfies Preset;
+
+export default definePreset(base);
+
+export const createPreset = (keyColor?: Palette) =>
+  definePreset({
+    ...base,
+    theme: {
+      ...base.theme,
+      extend: {
+        semanticTokens: {
+          colors: {
+            keyColor: createKeyColor(keyColor ?? "blue"),
+          },
+        },
+      },
+    },
+  });

package/src/recipes/accordion.ts

@@ -0,0 +1,128 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Accordion/Accordion.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as accordionAnatomy } from "@ark-ui/anatomy/accordion";
+
+export default defineSlotRecipe({
+  className: "accordion",
+  slots: accordionAnatomy.keys(),
+  base: {
+    item: {
+      /**
+       * group/accordion border-b border-solid-gray-420
+        [--icon-size:calc(20/16*1rem)] desktop:[--icon-size:calc(32/16*1rem)]
+        ${className ?? ''}
+       */
+      borderBottomWidth: "1px",
+      borderBottomColor: "solid-gray.420",
+      "--icon-size": {
+        base: "calc(20 / 16 * 1rem)",
+        md: "calc(32 / 16 * 1rem)",
+      },
+    },
+    itemTrigger: {
+      /**
+       * group/summary relative block cursor-default
+       */
+      position: "relative",
+      display: "block",
+      /**
+       * hover:bg-solid-gray-50
+       * focus-visible:bg-yellow-300
+       */
+      bg: {
+        base: "transparent",
+        _hover: "solid-gray.50",
+        _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
+      },
+      /*
+       * py-2 pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2
+       * desktop:py-3.5 desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4
+       */
+      py: { base: 2, md: 3.5 },
+      pl: {
+        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
+        md: "calc(var(--icon-size) + (20 / 16 * 1rem))",
+      },
+      pr: { base: 2, md: 4 },
+      cursor: { _hover: "pointer" },
+      /**
+       * marker:[content:'']
+        [&::-webkit-details-marker]:hidden
+       */
+      "&::marker": { content: '""' },
+      /**
+       * 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: {
+        rounded: 4,
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+      /**
+       * remove button style
+       */
+      textAlign: "start",
+      width: "full",
+    },
+    itemIndicator: {
+      /**
+       * absolute top-2 left-0.5
+       * desktop:top-3.5 desktop:left-1.5
+       * size-[var(--icon-size)]
+       * mt-[calc((1lh-var(--icon-size))/2)]
+       */
+      position: "absolute",
+      top: { base: 2, md: 3.5 },
+      left: { base: 0.5, md: 1.5 },
+      width: "var(--icon-size)",
+      height: "var(--icon-size)",
+      mt: "calc((1lh - var(--icon-size)) / 2)",
+      /**
+       * inline-flex items-center justify-center
+       */
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      /**
+       * bg-white text-blue-1000
+       */
+      bg: "white",
+      color: "keyColor.1000",
+      /**
+       * border border-current rounded-full
+          group-hover/summary:outline group-hover/summary:outline-2 group-hover/summary:outline-current
+          group-open/accordion:rotate-180
+       */
+      borderWidth: "1px",
+      borderColor: "currentcolor",
+      rounded: "full",
+      outlineStyle: "solid",
+      outlineWidth: { base: "0px", _groupHover: "2px" },
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(-180deg)",
+      },
+    },
+    itemContent: {
+      /**
+       * pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2 py-4
+        desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
+       */
+      pl: {
+        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
+        md: "calc(var(--icon-size) + (20 / 16 * 1rem))",
+      },
+      pr: { base: 2, md: 4 },
+      py: { base: 4, md: 6 },
+    },
+  },
+});

package/src/recipes/breadcrumb.ts

@@ -0,0 +1,64 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Breadcrumbs/Breadcrumbs.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { breadcrumbAnatomy } from "../anatomy";
+import link from "./link";
+
+export default defineSlotRecipe({
+  className: "breadcrumb",
+  description:
+    "パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。",
+  slots: breadcrumbAnatomy.keys(),
+  base: {
+    root: {
+      /**
+       * icon
+       */
+      "--icon-size": "16px",
+    },
+    list: {
+      /**
+       * inline
+       */
+      display: "inline",
+    },
+    item: {
+      /**
+       * inline break-words text-oln-16N-100
+       */
+      display: "inline",
+      overflowWrap: "break-word",
+      textStyle: "oln-16N-100",
+    },
+    link: {
+      /**
+       * text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
+       * hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
+       * active:text-orange-700 active:decoration-1
+       * 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:text-blue-1000
+       * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+       */
+      ...link.base,
+      /**
+       * icon
+       */
+      "& svg": {
+        display: "inline",
+        width: "var(--icon-size)",
+        height: "var(--icon-size)",
+        mr: 1,
+      },
+    },
+    separator: {
+      /**
+       * mx-2 inline
+       */
+      mx: 2,
+      display: "inline",
+    },
+  },
+});

package/src/recipes/button.ts

@@ -0,0 +1,192 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Button/Button.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "button",
+  description:
+    "ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。画面内におけるボタンの重要度に応じて使い分け可能な複数のスタイルがあります。",
+  base: {
+    /**
+     * underline-offset-[calc(3/16*1rem)]
+     */
+    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:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+     */
+    _focusVisible: {
+      outlineStyle: "solid",
+      outlineWidth: "4px",
+      outlineColor: "black",
+      outlineOffset: "calc(2 / 16 * 1rem)",
+      focusRing: "calc(2 / 16 * 1rem)",
+    },
+    /**
+     * aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
+     */
+    _disabled: {
+      pointerEvents: "none",
+    },
+    /**
+     * button default
+     */
+    display: "inline-flex",
+    textAlign: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+  },
+  variants: {
+    variant: {
+      "solid-fill": {
+        /**
+         * text-white aria-disabled:text-solid-gray-50
+         * bg-blue-900 hover:bg-blue-1000 active:bg-blue-1200 aria-disabled:bg-solid-gray-300
+         */
+        bg: {
+          base: "keyColor.900",
+          _hover: "keyColor.1000",
+          _active: "keyColor.1200",
+          _disabled: "solid-gray.300",
+        },
+        color: { base: "white", _disabled: "solid-gray.50" },
+        /**
+         * border-4 border-double border-transparent
+         * hover:underline active:underline
+         */
+        borderWidth: "4px",
+        borderStyle: "double",
+        borderColor: "transparent",
+        textDecoration: {
+          base: "none",
+          _hover: "underline",
+          _active: "underline",
+        },
+      },
+      outline: {
+        /**
+         * bg-white hover:bg-blue-200 active:bg-blue-300 aria-disabled:bg-white
+         * text-blue-900 hover:text-blue-1000 active:text-blue-1200
+         * aria-disabled:text-solid-gray-300
+         */
+        bg: {
+          base: "white",
+          _hover: "keyColor.200",
+          _active: "keyColor.300",
+          _disabled: "white",
+        },
+        color: {
+          base: "keyColor.900",
+          _hover: "keyColor.1000",
+          _active: "keyColor.1200",
+          _disabled: "solid-gray.300",
+        },
+        /**
+         * border border-current hover:underline active:underline
+         */
+        borderWidth: "1px",
+        borderColor: "currentcolor",
+        textDecoration: {
+          base: "none",
+          _hover: "underline",
+          _active: "underline",
+        },
+      },
+      text: {
+        /**
+         *
+         * hover:bg-blue-50 active:bg-blue-100 focus-visible:bg-yellow-300
+         * aria-disabled:bg-transparent aria-disabled:focus-visible:bg-yellow-300
+         * text-blue-900 hover:text-blue-1000 active:text-blue-1200
+         * aria-disabled:text-solid-gray-300
+         */
+        bg: {
+          base: "transparent",
+          _hover: "keyColor.50",
+          _active: "keyColor.100",
+          _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
+          _disabled: "transparent",
+        },
+        color: {
+          base: "keyColor.900",
+          _hover: "keyColor.1000",
+          _active: "keyColor.1200",
+          _disabled: "solid-gray.300",
+        },
+        /**
+         * hover:decoration-[calc(3/16*1rem)] underline
+         */
+        textDecoration: "underline",
+        textDecorationThickness: { base: "1px", _hover: "calc(3 / 16 * 1rem)" },
+      },
+    },
+    size: {
+      lg: {
+        /**
+         * lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
+         */
+        minWidth: "calc(136 / 16 * 1rem)",
+        minHeight: 14,
+        rounded: 8,
+        px: 4,
+        py: 3,
+        textStyle: "oln-16B-100",
+      },
+      md: {
+        /**
+         * md: 'min-w-24 min-h-12 rounded-8 px-4 py-2 text-oln-16B-100',
+         */
+        minWidth: 24,
+        minHeight: 12,
+        textStyle: "oln-16B-100",
+        px: 4,
+        py: 2,
+        rounded: 8,
+      },
+      sm: {
+        /**
+         * sm: 'relative min-w-20 min-h-9 rounded-6 px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+         */
+        position: "relative",
+        minWidth: 20,
+        minHeight: 9,
+        textStyle: "oln-16B-100",
+        py: 0.5,
+        rounded: 6,
+        _after: {
+          position: "absolute",
+          insetInline: 0,
+          insetBlock: "full",
+          m: "auto",
+          height: "44px",
+        },
+      },
+      xs: {
+        /**
+         * xs: 'relative min-w-18 min-h-7 rounded-4 px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+         */
+        minWidth: 18,
+        minHeight: 7,
+        textStyle: "oln-14B-100",
+        px: 2,
+        py: 0.5,
+        rounded: 4,
+        _after: {
+          position: "absolute",
+          insetInline: 0,
+          insetBlock: "full",
+          m: "auto",
+          height: "44px",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "solid-fill",
+    size: "md",
+  },
+});