@cieloazul310/digital-go-pandacss-plugin 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,56 @@
+{
+  "name": "@cieloazul310/digital-go-pandacss-plugin",
+  "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-base"
+  },
+  "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-utils": "^0.0.0",
+    "@digital-go-jp/design-tokens": "^1.1.0"
+  },
+  "devDependencies": {
+    "@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"
+  },
+  "lint-staged": {
+    "**/*.{js,mjs,cjs,tsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser typescript --write"
+    ]
+  }
+}

package/src/globalCss.ts

@@ -0,0 +1,7 @@
+import { defineGlobalStyles } from "@pandacss/dev";
+
+export default defineGlobalStyles({
+  html: {
+    fontSmoothing: "auto",
+  },
+});

package/src/index.ts

@@ -0,0 +1,21 @@
+import { definePreset } from "@pandacss/dev";
+import semanticTokens from "./semanticTokens";
+import textStyles from "./textStyles";
+import tokens from "./tokens";
+import utilities from "./utilities";
+import globalCss from "./globalCss";
+
+const preset = definePreset({
+  name: "digital-go",
+  theme: {
+    extend: {
+      textStyles,
+      semanticTokens,
+      tokens,
+    },
+  },
+  utilities,
+  globalCss,
+});
+
+export default preset;

package/src/semanticTokens/colors.ts

@@ -0,0 +1,8 @@
+import { createKeyColor } from "@cieloazul310/digital-go-pandacss-utils";
+
+const colors = {
+  keyColor: createKeyColor("blue"),
+  ring: { value: "{colors.yellow.300}" },
+};
+
+export default colors;

package/src/semanticTokens/index.ts

@@ -0,0 +1,10 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+import colors from "./colors";
+
+export default defineSemanticTokens({
+  colors,
+  fontWeights: {
+    N: { value: "{fontWeights.400}", description: "400 (normal)" },
+    B: { value: "{fontWeights.700}", description: "700 (bold)" },
+  },
+});

package/src/textStyles/index.ts

@@ -0,0 +1,383 @@
+import { defineTextStyles } from "@pandacss/dev";
+
+type TextStylesMap = Record<
+  string,
+  {
+    fontFamily: string;
+    description: string;
+    variants: {
+      fontSize: number;
+      fontWeight: string;
+      lineHeight: number;
+      letterSpacing?: number;
+    }[];
+  }
+>;
+
+const textStylesMap: TextStylesMap = {
+  dsp: {
+    fontFamily: "body",
+    description:
+      "Displayテキストは、主に冒頭で大きく掲出されるテキストやメッセージを伝えるヘッドコピーなど、視覚的なインパクトを強く与えたい場合に使用されます。",
+    variants: [
+      /** Display(Dsp) Bold */
+      {
+        fontSize: 64,
+        fontWeight: "B",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 57,
+        fontWeight: "B",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 48,
+        fontWeight: "B",
+        lineHeight: 140,
+      },
+      /** Display(Dsp) Normal */
+      {
+        fontSize: 64,
+        fontWeight: "N",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 57,
+        fontWeight: "N",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 48,
+        fontWeight: "N",
+        lineHeight: 140,
+      },
+    ],
+  },
+  std: {
+    fontFamily: "body",
+    description:
+      "Standardテキストは、ページの文書構造を形成する見出しや本文など、多くの要素において最も使用される普遍的なテキストスタイルです。",
+    variants: [
+      /** Standard(Std) Bold */
+      {
+        fontSize: 45,
+        fontWeight: "B",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 36,
+        fontWeight: "B",
+        lineHeight: 140,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 32,
+        fontWeight: "B",
+        lineHeight: 150,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 28,
+        fontWeight: "B",
+        lineHeight: 150,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 24,
+        fontWeight: "B",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 22,
+        fontWeight: "B",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 20,
+        fontWeight: "B",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 18,
+        fontWeight: "B",
+        lineHeight: 160,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 17,
+        fontWeight: "B",
+        lineHeight: 170,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 170,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 175,
+        letterSpacing: 0.02,
+      },
+      /** Standard(Std) Normal */
+      {
+        fontSize: 45,
+        fontWeight: "N",
+        lineHeight: 140,
+      },
+      {
+        fontSize: 36,
+        fontWeight: "N",
+        lineHeight: 140,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 32,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 28,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.01,
+      },
+      {
+        fontSize: 26,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 24,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 22,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 20,
+        fontWeight: "N",
+        lineHeight: 150,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 18,
+        fontWeight: "N",
+        lineHeight: 160,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 17,
+        fontWeight: "N",
+        lineHeight: 170,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 170,
+        letterSpacing: 0.02,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 175,
+        letterSpacing: 0.02,
+      },
+    ],
+  },
+  dns: {
+    fontFamily: "body",
+    description:
+      "Denseテキストは管理画面や業務システムなど、限られた画面領域での表示情報量を優先したテキストスタイルです。たとえば、データテーブル内での情報提示など、表示領域に制約がある場合のテキストスタイルとして使用します。",
+    variants: [
+      /** Dense(Dns) Bold */
+      {
+        fontSize: 17,
+        fontWeight: "B",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 17,
+        fontWeight: "B",
+        lineHeight: 120,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 120,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "B",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "B",
+        lineHeight: 120,
+      },
+      /** Dense(Dns) Normal */
+      {
+        fontSize: 17,
+        fontWeight: "N",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 17,
+        fontWeight: "N",
+        lineHeight: 120,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 120,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "N",
+        lineHeight: 130,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "N",
+        lineHeight: 120,
+      },
+    ],
+  },
+  oln: {
+    fontFamily: "body",
+    description:
+      "Onelineテキストは1行展開を前提として、主にUI要素への適用を想定したテキストスタイルです。行間の余白を最小限にすることでUIパーツに対するデザイン、及びコーディング実装調整コストの軽減を優先したデキストスタイルとなります。",
+    variants: [
+      /** Oneline(Oln) Bold */
+      {
+        fontSize: 17,
+        fontWeight: "B",
+        lineHeight: 100,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 100,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "B",
+        lineHeight: 100,
+      },
+      /** Oneline(Oln) Normal */
+      {
+        fontSize: 17,
+        fontWeight: "N",
+        lineHeight: 100,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 100,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "N",
+        lineHeight: 100,
+      },
+    ],
+  },
+  mono: {
+    fontFamily: "mono",
+    description:
+      "Monoテキストはコード系コンテンツへの適用を想定したテキストスタイルです。文字・単語レベルの可読性を優先したモノスペース（等幅フォント）を使用します。",
+    variants: [
+      /** Mono Bold */
+      {
+        fontSize: 17,
+        fontWeight: "B",
+        lineHeight: 150,
+      },
+      {
+        fontSize: 16,
+        fontWeight: "B",
+        lineHeight: 150,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "B",
+        lineHeight: 150,
+      },
+      /** Oneline(Oln) Normal */
+      {
+        fontSize: 17,
+        fontWeight: "N",
+        lineHeight: 150,
+      },
+
+      {
+        fontSize: 16,
+        fontWeight: "N",
+        lineHeight: 150,
+      },
+      {
+        fontSize: 14,
+        fontWeight: "N",
+        lineHeight: 150,
+      },
+    ],
+  },
+};
+
+const textStyle = Object.entries(textStylesMap);
+const map = new Map<
+  string,
+  {
+    value: {
+      deprecated?: boolean;
+      fontFamily: string;
+      fontSize: number;
+      fontWeight: string;
+      lineHeight: number;
+      letterSpacing?: string;
+    };
+    description: string;
+  }
+>();
+
+textStyle.forEach(([key, { fontFamily, description, variants }]) => {
+  variants.forEach(({ fontSize, fontWeight, lineHeight, letterSpacing }) => {
+    map.set(`${key}-${fontSize}${fontWeight}-${lineHeight}`, {
+      value: {
+        fontFamily,
+        fontSize,
+        fontWeight,
+        lineHeight,
+        letterSpacing: letterSpacing ? `${letterSpacing}em` : undefined,
+      },
+      description,
+    });
+  });
+});
+
+export default defineTextStyles(Object.fromEntries(map));