@cieloazul310/digital-go-pandacss-plugin 0.0.0

package/src/tokens/colors.ts

@@ -0,0 +1,220 @@
+import tokens from "@digital-go-jp/design-tokens";
+
+const colors = {
+  white: { value: tokens.Color.Neutral.White.$value },
+  black: { value: tokens.Color.Neutral.Black.$value },
+  blue: {
+    50: { value: tokens.Color.Primitive.Blue[50].$value },
+    100: { value: tokens.Color.Primitive.Blue[100].$value },
+    200: { value: tokens.Color.Primitive.Blue[200].$value },
+    300: { value: tokens.Color.Primitive.Blue[300].$value },
+    400: { value: tokens.Color.Primitive.Blue[400].$value },
+    500: { value: tokens.Color.Primitive.Blue[500].$value },
+    600: { value: tokens.Color.Primitive.Blue[600].$value },
+    700: { value: tokens.Color.Primitive.Blue[700].$value },
+    800: { value: tokens.Color.Primitive.Blue[800].$value },
+    900: { value: tokens.Color.Primitive.Blue[900].$value },
+    1000: { value: tokens.Color.Primitive.Blue[1000].$value },
+    1100: { value: tokens.Color.Primitive.Blue[1100].$value },
+    1200: { value: tokens.Color.Primitive.Blue[1200].$value },
+  },
+  "light-blue": {
+    50: { value: tokens.Color.Primitive.LightBlue[50].$value },
+    100: { value: tokens.Color.Primitive.LightBlue[100].$value },
+    200: { value: tokens.Color.Primitive.LightBlue[200].$value },
+    300: { value: tokens.Color.Primitive.LightBlue[300].$value },
+    400: { value: tokens.Color.Primitive.LightBlue[400].$value },
+    500: { value: tokens.Color.Primitive.LightBlue[500].$value },
+    600: { value: tokens.Color.Primitive.LightBlue[600].$value },
+    700: { value: tokens.Color.Primitive.LightBlue[700].$value },
+    800: { value: tokens.Color.Primitive.LightBlue[800].$value },
+    900: { value: tokens.Color.Primitive.LightBlue[900].$value },
+    1000: { value: tokens.Color.Primitive.LightBlue[1000].$value },
+    1100: { value: tokens.Color.Primitive.LightBlue[1100].$value },
+    1200: { value: tokens.Color.Primitive.LightBlue[1200].$value },
+  },
+  cyan: {
+    50: { value: tokens.Color.Primitive.Cyan[50].$value },
+    100: { value: tokens.Color.Primitive.Cyan[100].$value },
+    200: { value: tokens.Color.Primitive.Cyan[200].$value },
+    300: { value: tokens.Color.Primitive.Cyan[300].$value },
+    400: { value: tokens.Color.Primitive.Cyan[400].$value },
+    500: { value: tokens.Color.Primitive.Cyan[500].$value },
+    600: { value: tokens.Color.Primitive.Cyan[600].$value },
+    700: { value: tokens.Color.Primitive.Cyan[700].$value },
+    800: { value: tokens.Color.Primitive.Cyan[800].$value },
+    900: { value: tokens.Color.Primitive.Cyan[900].$value },
+    1000: { value: tokens.Color.Primitive.Cyan[1000].$value },
+    1100: { value: tokens.Color.Primitive.Cyan[1100].$value },
+    1200: { value: tokens.Color.Primitive.Cyan[1200].$value },
+  },
+  green: {
+    50: { value: tokens.Color.Primitive.Green[50].$value },
+    100: { value: tokens.Color.Primitive.Green[100].$value },
+    200: { value: tokens.Color.Primitive.Green[200].$value },
+    300: { value: tokens.Color.Primitive.Green[300].$value },
+    400: { value: tokens.Color.Primitive.Green[400].$value },
+    500: { value: tokens.Color.Primitive.Green[500].$value },
+    600: { value: tokens.Color.Primitive.Green[600].$value },
+    700: { value: tokens.Color.Primitive.Green[700].$value },
+    800: { value: tokens.Color.Primitive.Green[800].$value },
+    900: { value: tokens.Color.Primitive.Green[900].$value },
+    1000: { value: tokens.Color.Primitive.Green[1000].$value },
+    1100: { value: tokens.Color.Primitive.Green[1100].$value },
+    1200: { value: tokens.Color.Primitive.Green[1200].$value },
+  },
+  lime: {
+    50: { value: tokens.Color.Primitive.Lime[50].$value },
+    100: { value: tokens.Color.Primitive.Lime[100].$value },
+    200: { value: tokens.Color.Primitive.Lime[200].$value },
+    300: { value: tokens.Color.Primitive.Lime[300].$value },
+    400: { value: tokens.Color.Primitive.Lime[400].$value },
+    500: { value: tokens.Color.Primitive.Lime[500].$value },
+    600: { value: tokens.Color.Primitive.Lime[600].$value },
+    700: { value: tokens.Color.Primitive.Lime[700].$value },
+    800: { value: tokens.Color.Primitive.Lime[800].$value },
+    900: { value: tokens.Color.Primitive.Lime[900].$value },
+    1000: { value: tokens.Color.Primitive.Lime[1000].$value },
+    1100: { value: tokens.Color.Primitive.Lime[1100].$value },
+    1200: { value: tokens.Color.Primitive.Lime[1200].$value },
+  },
+  yellow: {
+    50: { value: tokens.Color.Primitive.Yellow[50].$value },
+    100: { value: tokens.Color.Primitive.Yellow[100].$value },
+    200: { value: tokens.Color.Primitive.Yellow[200].$value },
+    300: { value: tokens.Color.Primitive.Yellow[300].$value },
+    400: { value: tokens.Color.Primitive.Yellow[400].$value },
+    500: { value: tokens.Color.Primitive.Yellow[500].$value },
+    600: { value: tokens.Color.Primitive.Yellow[600].$value },
+    700: { value: tokens.Color.Primitive.Yellow[700].$value },
+    800: { value: tokens.Color.Primitive.Yellow[800].$value },
+    900: { value: tokens.Color.Primitive.Yellow[900].$value },
+    1000: { value: tokens.Color.Primitive.Yellow[1000].$value },
+    1100: { value: tokens.Color.Primitive.Yellow[1100].$value },
+    1200: { value: tokens.Color.Primitive.Yellow[1200].$value },
+  },
+  orange: {
+    50: { value: tokens.Color.Primitive.Orange[50].$value },
+    100: { value: tokens.Color.Primitive.Orange[100].$value },
+    200: { value: tokens.Color.Primitive.Orange[200].$value },
+    300: { value: tokens.Color.Primitive.Orange[300].$value },
+    400: { value: tokens.Color.Primitive.Orange[400].$value },
+    500: { value: tokens.Color.Primitive.Orange[500].$value },
+    600: { value: tokens.Color.Primitive.Orange[600].$value },
+    700: { value: tokens.Color.Primitive.Orange[700].$value },
+    800: { value: tokens.Color.Primitive.Orange[800].$value },
+    900: { value: tokens.Color.Primitive.Orange[900].$value },
+    1000: { value: tokens.Color.Primitive.Orange[1000].$value },
+    1100: { value: tokens.Color.Primitive.Orange[1100].$value },
+    1200: { value: tokens.Color.Primitive.Orange[1200].$value },
+  },
+  red: {
+    50: { value: tokens.Color.Primitive.Red[50].$value },
+    100: { value: tokens.Color.Primitive.Red[100].$value },
+    200: { value: tokens.Color.Primitive.Red[200].$value },
+    300: { value: tokens.Color.Primitive.Red[300].$value },
+    400: { value: tokens.Color.Primitive.Red[400].$value },
+    500: { value: tokens.Color.Primitive.Red[500].$value },
+    600: { value: tokens.Color.Primitive.Red[600].$value },
+    700: { value: tokens.Color.Primitive.Red[700].$value },
+    800: { value: tokens.Color.Primitive.Red[800].$value },
+    900: { value: tokens.Color.Primitive.Red[900].$value },
+    1000: { value: tokens.Color.Primitive.Red[1000].$value },
+    1100: { value: tokens.Color.Primitive.Red[1100].$value },
+    1200: { value: tokens.Color.Primitive.Red[1200].$value },
+  },
+  magenta: {
+    50: { value: tokens.Color.Primitive.Magenta[50].$value },
+    100: { value: tokens.Color.Primitive.Magenta[100].$value },
+    200: { value: tokens.Color.Primitive.Magenta[200].$value },
+    300: { value: tokens.Color.Primitive.Magenta[300].$value },
+    400: { value: tokens.Color.Primitive.Magenta[400].$value },
+    500: { value: tokens.Color.Primitive.Magenta[500].$value },
+    600: { value: tokens.Color.Primitive.Magenta[600].$value },
+    700: { value: tokens.Color.Primitive.Magenta[700].$value },
+    800: { value: tokens.Color.Primitive.Magenta[800].$value },
+    900: { value: tokens.Color.Primitive.Magenta[900].$value },
+    1000: { value: tokens.Color.Primitive.Magenta[1000].$value },
+    1100: { value: tokens.Color.Primitive.Magenta[1100].$value },
+    1200: { value: tokens.Color.Primitive.Magenta[1200].$value },
+  },
+  purple: {
+    50: { value: tokens.Color.Primitive.Purple[50].$value },
+    100: { value: tokens.Color.Primitive.Purple[100].$value },
+    200: { value: tokens.Color.Primitive.Purple[200].$value },
+    300: { value: tokens.Color.Primitive.Purple[300].$value },
+    400: { value: tokens.Color.Primitive.Purple[400].$value },
+    500: { value: tokens.Color.Primitive.Purple[500].$value },
+    600: { value: tokens.Color.Primitive.Purple[600].$value },
+    700: { value: tokens.Color.Primitive.Purple[700].$value },
+    800: { value: tokens.Color.Primitive.Purple[800].$value },
+    900: { value: tokens.Color.Primitive.Purple[900].$value },
+    1000: { value: tokens.Color.Primitive.Purple[1000].$value },
+    1100: { value: tokens.Color.Primitive.Purple[1100].$value },
+    1200: { value: tokens.Color.Primitive.Purple[1200].$value },
+  },
+  "solid-gray": {
+    50: { value: tokens.Color.Neutral.SolidGray[50].$value },
+    100: { value: tokens.Color.Neutral.SolidGray[100].$value },
+    200: { value: tokens.Color.Neutral.SolidGray[200].$value },
+    300: { value: tokens.Color.Neutral.SolidGray[300].$value },
+    400: { value: tokens.Color.Neutral.SolidGray[400].$value },
+    420: { value: tokens.Color.Neutral.SolidGray[420].$value },
+    500: { value: tokens.Color.Neutral.SolidGray[500].$value },
+    536: { value: tokens.Color.Neutral.SolidGray[536].$value },
+    600: { value: tokens.Color.Neutral.SolidGray[600].$value },
+    700: { value: tokens.Color.Neutral.SolidGray[700].$value },
+    800: { value: tokens.Color.Neutral.SolidGray[800].$value },
+    900: { value: tokens.Color.Neutral.SolidGray[900].$value },
+  },
+  success: {
+    1: {
+      value: tokens.Color.Semantic.Success[1].$value,
+      description: "成功、安全、完了などを意味するカラー",
+    },
+    2: {
+      value: tokens.Color.Semantic.Success[2].$value,
+      description: "成功、安全、完了などを意味するカラー",
+    },
+  },
+  error: {
+    1: {
+      value: tokens.Color.Semantic.Error[1].$value,
+      description:
+        "失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー",
+    },
+    2: {
+      value: tokens.Color.Semantic.Error[2].$value,
+      description:
+        "失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー",
+    },
+  },
+  warning: {
+    yellow: {
+      1: {
+        value: tokens.Color.Semantic.Warning.Yellow[1].$value,
+        description: "警告や禁止事項などを意味するカラー",
+      },
+      2: {
+        value: tokens.Color.Semantic.Warning.Yellow[2].$value,
+        description: "警告や禁止事項などを意味するカラー",
+      },
+    },
+    orange: {
+      1: {
+        value: tokens.Color.Semantic.Warning.Orange[1].$value,
+        description: "警告や禁止事項などを意味するカラー",
+      },
+      2: {
+        value: tokens.Color.Semantic.Warning.Orange[2].$value,
+        description: "警告や禁止事項などを意味するカラー",
+      },
+    },
+  },
+  focus: {
+    yellow: { value: tokens.Color.Primitive.Yellow[700].$value },
+    blue: { value: tokens.Color.Primitive.LightBlue[700].$value },
+  },
+};
+
+export default colors;

package/src/tokens/index.ts

@@ -0,0 +1,34 @@
+import { defineTokens } from "@pandacss/dev";
+import tokens from "@digital-go-jp/design-tokens";
+import colors from "./colors";
+import { fonts, fontSizes, fontWeights, lineHeights } from "./typography";
+
+export default defineTokens({
+  colors,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii: {
+    xs: { value: "0.125rem" },
+    sm: { value: "0.25rem" },
+    md: { value: "0.375rem" },
+    lg: { value: "0.5rem" },
+    xl: { value: "0.75rem" },
+    "2xl": { value: "1rem" },
+    "3xl": { value: "1.5rem" },
+    "8": { value: tokens.BorderRadius[8].$value },
+    "16": { value: tokens.BorderRadius[16].$value },
+    "32": { value: tokens.BorderRadius[32].$value },
+  },
+  shadows: {
+    "1": { value: tokens.Elevation[1].$value },
+    "2": { value: tokens.Elevation[2].$value },
+    "3": { value: tokens.Elevation[3].$value },
+    "4": { value: tokens.Elevation[4].$value },
+    "5": { value: tokens.Elevation[5].$value },
+    "6": { value: tokens.Elevation[6].$value },
+    "7": { value: tokens.Elevation[7].$value },
+    "8": { value: tokens.Elevation[8].$value },
+  },
+});

package/src/tokens/typography.ts

@@ -0,0 +1,131 @@
+import tokens from "@digital-go-jp/design-tokens";
+
+export const fonts = {
+  body: {
+    value: [
+      "Noto Sans JP",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "sans-serif",
+    ],
+  },
+  mono: {
+    value: ["Noto Sans Mono", "monospace"],
+  },
+};
+
+export const fontSizes = {
+  "64": {
+    value: tokens.FontSize[64].$value,
+    description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。",
+  },
+  "57": {
+    value: tokens.FontSize[57].$value,
+    description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。",
+  },
+  "48": {
+    value: tokens.FontSize[48].$value,
+    description: "視覚的なインパクトが必要なデザイン要素としての文字サイズ。",
+  },
+  "45": {
+    value: tokens.FontSize[45].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "36": {
+    value: tokens.FontSize[36].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "32": {
+    value: tokens.FontSize[32].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "28": {
+    value: tokens.FontSize[28].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "24": {
+    value: tokens.FontSize[24].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "22": {
+    value: tokens.FontSize[22].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "20": {
+    value: tokens.FontSize[20].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "18": {
+    value: tokens.FontSize[18].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "17": {
+    value: tokens.FontSize[17].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "16": {
+    value: tokens.FontSize[16].$value,
+    description:
+      "読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。なお、本文やUIにおいては16 CSS px以上が基準値となります。",
+  },
+  "14": {
+    value: tokens.FontSize[14].$value,
+    description:
+      "基本的には使用しません。フッター要素などコンテンツに付随する情報や、UIやコンテンツを構成する際の領域的な制約がある場合のように標準的な文字サイズ（16 CSS px以上）の使用が難しいケースにおいてのみ使用される文字サイズです。なお、14 CSS px未満の大きさの使用は原則として許容されません。",
+  },
+};
+
+export const fontWeights = {
+  "400": { value: tokens.FontWeight[400].$value },
+  "700": { value: tokens.FontWeight[700].$value },
+};
+
+export const lineHeights = {
+  "100": {
+    value: tokens.LineHeight[100].$value,
+    description:
+      "主にボタンなど、コンポーネント内で使用されるワンラインのテキストで上下の余白を持っていない行間",
+  },
+  "120": {
+    value: tokens.LineHeight[120].$value,
+    description:
+      "主に管理画面や業務システムの画面等で、膨大な情報を一覧表示したりなど、限られた画面領域での表示情報量を最優先した行間",
+  },
+  "130": {
+    value: tokens.LineHeight[130].$value,
+    description:
+      "主に管理画面や業務システムの画面等で使用する、表示情報量を優先した行間",
+  },
+  "140": {
+    value: tokens.LineHeight[140].$value,
+    description: "見出しなど、やや大きな文字に使用される行間",
+  },
+  "150": {
+    value: tokens.LineHeight[150].$value,
+    description:
+      "一般的なウェブサイトの本文や見出しで使用される行間（本文の行間としては最低限度）",
+  },
+  "160": {
+    value: tokens.LineHeight[160].$value,
+    description: "一般的なウェブサイトの本文で使用される行間",
+  },
+  "170": {
+    value: tokens.LineHeight[170].$value,
+    description:
+      "一般的なウェブサイトの本文で使用する、心理的負荷の軽減を考慮した行間",
+  },
+  "175": {
+    value: tokens.LineHeight[175].$value,
+    description:
+      "一般的なウェブサイトの本文で使用する、心理的負荷の軽減を考慮した行間。採用するグリッド幅やフォントサイズに応じて170%と使い分ける",
+  },
+};

package/src/utilities/index.ts

@@ -0,0 +1,37 @@
+import { defineUtility } from "@pandacss/dev";
+
+const borderInset = defineUtility({
+  deprecated: true,
+  className: "border-inset",
+  values: ["xs", "sm", "md", "lg", "xl"],
+  transform(value, { token }) {
+    const width = (() => {
+      if (value === "xs") return "1px";
+      if (value === "sm") return "2px";
+      if (value === "lg") return "4px";
+      if (value === "xl") return "8px";
+      return "3px";
+    })();
+
+    return {
+      boxShadow: `inset 0 0 0 ${width} ${token("colors.ring")}`,
+    };
+  },
+});
+
+const focusRing = defineUtility({
+  className: "ring",
+  values: "borderWidths",
+  transform(value, { token }) {
+    return {
+      boxShadow: `0 0 0 ${value} ${token("colors.ring")}`,
+    };
+  },
+});
+
+const utilities = {
+  borderInset,
+  focusRing,
+};
+
+export default utilities;

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@repo/typescript-config/base.json",
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  external: ["@pandacss/dev"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+});