@cieloazul310/digital-go-pandacss-preset 0.0.0

package/src/recipes/notification-banner.ts

@@ -0,0 +1,246 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/tree/main/src/components/NotificationBanner
+ * inspired by Park UI
+ * https://park-ui.com/react/docs/components/alert
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { notificationBannerAnatomy } from "../anatomy";
+
+export default defineSlotRecipe({
+  className: "notification-banner",
+  slots: notificationBannerAnatomy.keys(),
+  base: {
+    root: {
+      /**
+       * [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
+       */
+      "--icon-size": {
+        base: "calc(24 / 16 * 1rem)",
+        md: "calc(36 / 16 * 1rem)",
+      },
+      "--icon-scale": {
+        base: 24 / 36,
+        md: 1,
+      },
+      /**
+       * p-4 desktop:p-6 border-current
+       */
+      p: { base: 4, md: 6 },
+      borderColor: "currentcolor",
+      /**
+       * grid grid-cols-[var(--icon-size)_1fr_minmax(0,auto)]
+       * gap-x-3 desktop:gap-x-6 gap-y-4
+       */
+      display: "grid",
+      gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
+      columnGap: { base: 3, md: 6 },
+      rowGap: 4,
+    },
+    header: {
+      /**
+       * grid grid-cols-subgrid col-start-2 -col-end-1 place-items-start
+        [&>*:last-child]:-col-end-1
+       */
+      display: "grid",
+      gridTemplateColumns: "subgrid",
+      gridColumnStart: 2,
+      gridColumnEnd: -1,
+      placeItems: "start",
+      "& > *:last-child": {
+        gridColumnEnd: -1,
+      },
+    },
+    icon: {
+      /**
+       * mt-[calc(2/16*1rem)] desktop:mt-0
+       */
+      mt: { base: "calc(2 / 16 * 1rem)", md: 0 },
+      /**
+       * h-auto max-w-full
+       */
+      height: "auto",
+      maxWidth: "full",
+      /**
+       * icon element
+       * instead of icon component
+       */
+      _before: {
+        content: '""',
+        display: "block",
+        bg: "currentColor",
+        width: "36px",
+        height: "36px",
+        transformOrigin: "left center",
+        transform: "scale(var(--icon-scale))",
+      },
+    },
+    close: {
+      /**
+       * inline-flex items-center gap-0.5
+       * -mt-2 -mr-3 desktop:mt-0 desktop:mr-0 desktop:px-2 desktop:py-0.5
+       */
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5,
+      mt: { base: -2, md: 0 },
+      mr: { base: -3, md: 0 },
+      px: { base: 0, md: 2 },
+      py: { base: 0, md: 0.5 },
+      /**
+       * text-solid-gray-900
+       */
+      color: "solid-gray.900",
+      /**
+       * border border-transparent  hover:border-solid-gray-900 rounded-8 focus-visible:border-transparent
+       */
+      borderWidth: "1px",
+      borderColor: {
+        base: "transparent",
+        _hover: "solid-gray.900",
+        _focusVisible: "transparent",
+      },
+      rounded: 8,
+      /**
+       * 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 focus-visible:bg-yellow-300
+       *
+       */
+      _focusVisible: {
+        outlineStyle: "solid",
+        outlineWidth: "4px",
+        outlineColor: "black",
+        outlineOffset: "calc(2 / 16 * 1rem)",
+        focusRing: "calc(2 / 16 * 1rem)",
+      },
+    },
+    heading: {
+      /**
+       * text-solid-gray-900 col-start-1 desktop:mt-0.5
+       * text-std-17B-170 desktop:text-std-20B-160
+       *
+       * @todo
+       * std-20B-160 doesn't exist and replace it to std-20B-150
+       */
+      textStyle: { base: "std-17B-170", md: "std-20B-150" },
+      color: "solid-gray.900",
+      gridColumnStart: 1,
+      mt: { base: "auto", md: 0.5 },
+    },
+    body: {
+      /**
+       * col-start-1 -col-end-1 desktop:col-start-2 text-std-16N-170 text-solid-gray-800
+       */
+      gridColumnStart: { base: 1, md: 2 },
+      gridColumnEnd: -1,
+      textStyle: "std-16N-170",
+      color: "solid-gray.800",
+    },
+  },
+  variants: {
+    type: {
+      success: {
+        root: {
+          /**
+           * text-success-2 [--color-chip-color:currentColor]
+           */
+          color: "success.2",
+          "--color-chip-color": "currentColor",
+        },
+        icon: {
+          _before: {
+            clipPath:
+              "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')",
+          },
+        },
+      },
+      error: {
+        root: {
+          /**
+           * text-error-1 [--color-chip-color:currentColor]
+           */
+          color: "error.1",
+          "--color-chip-color": "currentColor",
+        },
+        icon: {
+          _before: {
+            clipPath:
+              "path('M24.2525 33H11.7475L3 24.2525V11.7475L11.7475 3H24.2525L33 11.7475V24.2525L24.2525 33Z')",
+          },
+        },
+      },
+      warning: {
+        root: {
+          /**
+           * text-warning-yellow-2 [--color-chip-color:theme(colors.yellow.400)]
+           */
+          color: "warning.yellow.2",
+          "--color-chip-color": "{colors.yellow.400}",
+        },
+        icon: {
+          _before: {
+            clipPath:
+              "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')",
+          },
+        },
+      },
+      info1: {
+        root: {
+          /**
+           * text-blue-900 [--color-chip-color:currentColor]
+           */
+          color: "blue.900",
+          "--color-chip-color": "currentColor",
+        },
+        icon: {
+          _before: {
+            clipPath:
+              "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')",
+          },
+        },
+      },
+      info2: {
+        root: {
+          /**
+           * text-solid-gray-536 [--color-chip-color:currentColor]
+           */
+          color: "solid-gray.536",
+          "--color-chip-color": "currentColor",
+        },
+        icon: {
+          _before: {
+            clipPath:
+              "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')",
+          },
+        },
+      },
+    },
+    bannerStyle: {
+      standard: {
+        root: {
+          /**
+           * border-[3px] rounded-12
+           */
+          borderWidth: "3px",
+          rounded: 12,
+        },
+      },
+      "color-chip": {
+        root: {
+          /**
+           * border-2 !pl-6 desktop:!pl-10
+           * shadow-[inset_8px_0_0_0_var(--color-chip-color)]
+           * desktop:shadow-[inset_16px_0_0_0_var(--color-chip-color)]
+           */
+          borderWidth: "2px",
+          pl: { base: 6, md: 10 },
+          shadow: "inset 16px 0 0 0 var(--color-chip-color)",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    type: "info1",
+    bannerStyle: "standard",
+  },
+});

package/src/recipes/ordered-list.ts

@@ -0,0 +1,23 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Ol/Ol.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "ordered-list",
+  base: {
+    /**
+     * pl-8 list-[revert]
+     */
+    pl: 8,
+    listStyle: "revert",
+    /**
+     * [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
+     */
+    "&:where(ol,ul)": {
+      mt: 1,
+      mb: -1,
+    },
+  },
+});

package/src/recipes/radio-group.ts

@@ -0,0 +1,74 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Radio/Radio.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+import { anatomy as radioGroupAnatomy } from "@ark-ui/anatomy/radio-group";
+import radio from "./radio";
+
+export default defineSlotRecipe({
+  className: "radio-group",
+  slots: radioGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      _vertical: {
+        flexDirection: "column",
+        gap: 0,
+      },
+      _horizonal: {
+        flexDirection: "row",
+        gap: 4,
+      },
+    },
+    item: {
+      ...radio.base?.item,
+    },
+    itemControl: {
+      ...radio.base?.itemControl,
+    },
+    itemText: {
+      ...radio.base?.itemText,
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        item: {
+          ...radio.variants?.size?.sm?.item,
+        },
+        itemControl: {
+          ...radio.variants?.size?.sm?.itemControl,
+        },
+        itemText: {
+          ...radio.variants?.size?.sm?.itemText,
+        },
+      },
+      md: {
+        item: {
+          ...radio.variants?.size?.md?.item,
+        },
+        itemControl: {
+          ...radio.variants?.size?.md?.itemControl,
+        },
+        itemText: {
+          ...radio.variants?.size?.md?.itemText,
+        },
+      },
+      lg: {
+        item: {
+          ...radio.variants?.size?.lg?.item,
+        },
+        itemControl: {
+          ...radio.variants?.size?.lg?.itemControl,
+        },
+        itemText: {
+          ...radio.variants?.size?.lg?.itemText,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});

package/src/recipes/radio.ts

@@ -0,0 +1,227 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Radio/Radio.tsx
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export default defineSlotRecipe({
+  className: "radio",
+  slots: ["item", "itemControl", "itemText"],
+  base: {
+    item: {
+      /**
+       * flex w-fit items-start py-2
+       */
+      display: "flex",
+      width: "fit-content",
+      alignItems: "start",
+      py: 2,
+    },
+    itemControl: {
+      /**
+       * flex items-center justify-center shrink-0 rounded-full
+       * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+       */
+      /*
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      rounded: "full",
+      */
+      /**
+       * appearance-none size-[calc(5/6*100%)] rounded-full
+       */
+      appearance: "none",
+      rounded: "full",
+      width: "calc(var(--radio-size) * 5 / 6)",
+      height: "calc(var(--radio-size) * 5 / 6)",
+      m: "calc(var(--radio-size) / 12)",
+      flexShrink: 0,
+      /**
+       * bg-white aria-disabled:!bg-solid-gray-50
+       */
+      bg: { base: "white", _disabled: "solid-gray.50" },
+      borderColor: {
+        /**
+         * border-solid-gray-600
+         * hover:border-black
+         * checked:border-blue-900
+         * checked:hover:border-blue-1100
+         * forced-colors:!border-[ButtonText] forced-colors:checked:!border-[Highlight]
+         */
+        base: "solid-gray.600",
+        _hover: "black",
+        _highContrast: { base: "ButtonText" },
+        _checked: {
+          base: "keyColor.900",
+          _hover: "keyColor.1100",
+          _disabled: "solid-gray.300",
+          _highContrast: "Highlight",
+        },
+        /**
+         * data-[error]:border-error-1 data-[error]:hover:border-red-1000
+         */
+        _invalid: { base: "error.1", _hover: "red.1000" },
+        /**
+         * aria-disabled:!border-solid-gray-300
+         * forced-colors:aria-disabled:!border-[GrayText]
+         */
+        _disabled: { base: "solid-gray.300", _highContrast: "GrayText" },
+      },
+      /**
+       * outline on hover
+       * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+       */
+      '&:is(:hover, [data-hover]):not(:focus):not([aria-disabled="true"])': {
+        outlineStyle: "solid",
+        outlineWidth: "calc(var(--radio-size) / 12)",
+        outlineColor: "solid-gray.420",
+      },
+      /**
+       * 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)",
+      },
+      _before: {
+        /**
+         * before:hidden
+         * before:size-full
+         * before:[clip-path:circle(calc(5/16*100%))]
+         * before:bg-white
+         */
+        content: '""',
+        display: "none",
+        width: "full",
+        height: "full",
+        clipPath: "circle(calc(5 / 16 * 100%))",
+        bg: "white",
+      },
+      _checked: {
+        /**
+         * checked:before:block
+         * checked:before:bg-blue-900 checked:hover:before:bg-blue-1100
+         * data-[error]:checked:before:bg-error-1
+         * data-[error]:checked:hover:before:bg-red-1000
+         * aria-disabled:checked:before:!bg-solid-gray-300
+         * forced-colors:checked:before:!bg-[Highlight]
+         * forced-colors:aria-disabled:checked:before:!bg-[GrayText]
+         */
+        _before: {
+          display: "block",
+          bg: "keyColor.900",
+          _hover: "keyColor.1100",
+          _invalid: {
+            base: "error.1",
+            _hover: "red.1000",
+          },
+          _highContrast: "Highlight",
+        },
+        _disabled: {
+          _before: {
+            base: "solid-gray.300",
+            _highContrast: "GrayText",
+          },
+        },
+      },
+    },
+    itemText: {
+      /**
+       * text-solid-gray-800
+       */
+      color: "solid-gray.800",
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        item: {
+          /**
+           * data-[size=sm]:gap-1
+           */
+          gap: 1,
+        },
+        itemControl: {
+          /**
+           * data-[size=sm]:size-6
+           */
+          "--radio-size": "{spacing.6}",
+          /**
+           * data-[size=sm]:border-[calc(2/16*1rem)]
+           */
+          borderWidth: "calc(2 / 16 * 1rem)",
+        },
+        itemText: {
+          /**
+           * data-[size=sm]:pt-px
+           * data-[size=sm]:text-dns-16N-130
+           */
+          pt: "1px",
+          textStyle: "dns-16N-130",
+        },
+      },
+      md: {
+        item: {
+          /**
+           * data-[size=md]:gap-2
+           */
+          gap: 2,
+        },
+        itemControl: {
+          /**
+           * data-[size=md]:size-8
+           */
+          "--radio-size": "{spacing.8}",
+          /**
+           * data-[size=md]:border-[calc(2/16*1rem)]
+           */
+          borderWidth: "calc(2 / 16 * 1rem)",
+        },
+        itemText: {
+          /**
+           * data-[size=md]:pt-1
+           * data-[size=md]:text-dns-16N-130
+           */
+          pt: 1,
+          textStyle: "dns-16N-130",
+        },
+      },
+      lg: {
+        item: {
+          /**
+           * data-[size=lg]:gap-3
+           */
+          gap: 3,
+        },
+        itemControl: {
+          /**
+           * data-[size=lg]:size-11
+           */
+          "--radio-size": "{spacing.11}",
+          /**
+           * data-[size=lg]:border-[calc(3/16*1rem)]
+           */
+          borderWidth: "calc(3 / 16 * 1rem)",
+        },
+        itemText: {
+          /**
+           * 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/requirement-badge.ts

@@ -0,0 +1,29 @@
+/**
+ * source:
+ * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/RequirementBadge/RequirementBadge.tsx
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+export default defineRecipe({
+  className: "requirement-badge",
+  base: {
+    /**
+     * text-oln-16N-100 text-red-800
+     */
+    textStyle: "oln-16N-100",
+    color: "red.800",
+  },
+  variants: {
+    isOptional: {
+      true: {
+        /**
+         * data-[is-optional]:text-solid-gray-800
+         */
+        color: "solid-gray.800",
+      },
+    },
+  },
+  defaultVariants: {
+    isOptional: false,
+  },
+});