@pylerai/design-system 1.2.4 → 2.1.0

package/dist/tokens/pyler-light.js

@@ -0,0 +1,134 @@
+"use client";
+const g = [
+  "primitive",
+  "main",
+  "background",
+  "text",
+  "line",
+  "surface",
+  "primary",
+  "category",
+  "icon"
+];
+function c(e) {
+  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function a(e) {
+  return e.split(".").map(c).join("-");
+}
+function s(e) {
+  return `--ds-${a(e)}`;
+}
+function l(e) {
+  return `bg-ds-${a(e)}`;
+}
+function F(e) {
+  return typeof e == "object" && e !== null && "hex" in e && typeof e.hex == "string";
+}
+function i(e, o, r) {
+  if (F(e)) {
+    const t = o.join("."), n = o[0];
+    return [
+      {
+        path: t,
+        hex: e.hex,
+        cssVar: s(t),
+        tailwindBg: l(t),
+        group: n,
+        figmaKey: r == null ? void 0 : r.get(t)
+      }
+    ];
+  }
+  return Object.entries(e).flatMap(
+    ([t, n]) => i(n, [...o, t], r)
+  );
+}
+const h = {
+  primitive: {
+    black: { hex: "#121212" },
+    white: { hex: "#FFFFFF" }
+  },
+  main: {
+    default: { hex: "#2C80F5" }
+  },
+  background: {
+    default: { hex: "#FFFFFF" }
+  },
+  text: {
+    strong: { hex: "#333333" },
+    normal: { hex: "#969696" },
+    disabled: { hex: "#CCCCCC" }
+  },
+  line: {
+    strong: { hex: "#E2E2E2" },
+    normal: { hex: "#EBEBEB" }
+  },
+  surface: {
+    strong: { hex: "#F5F5F5" },
+    normal: { hex: "#F7F8F9" },
+    alternative: { hex: "#FFFFFF" }
+  },
+  primary: {
+    "blue-normal": { hex: "#2C80F5" },
+    "blue-hovered": { hex: "#0B64E2" },
+    "blue-disabled": { hex: "#D2E5FD" },
+    "blue-muted": { hex: "#F4F9FE" },
+    "red-normal": { hex: "#FF4242" },
+    "red-hovered": { hex: "#E60D0D" },
+    "red-disabled": { hex: "#FFDCDC" },
+    "red-muted": { hex: "#FFF7F7" },
+    "green-normal": { hex: "#0BC753" },
+    "green-hovered": { hex: "#00A13E" },
+    "green-disabled": { hex: "#B4ECD1" },
+    "green-muted": { hex: "#F4FBF7" }
+  },
+  category: {
+    sexual: { hex: "#FF6355" },
+    violence: { hex: "#C06528" },
+    hate: { hex: "#6554C0" },
+    politics: { hex: "#0B945A" },
+    controversy: { hex: "#0098B2" },
+    talk: { hex: "#2B70E4" },
+    overseas: { hex: "#E63FE1" },
+    religion: { hex: "#FFC400" },
+    custom: { hex: "#58CF04" },
+    sensitive: { hex: "#CC3D00" },
+    issue: { hex: "#00B8D9" }
+  },
+  icon: {
+    strong: { hex: "#333333" },
+    normal: { hex: "#969696" },
+    disabled: { hex: "#CCCCCC" }
+  }
+}, x = /* @__PURE__ */ new Map([
+  ["category.sexual", "Sexual"],
+  ["category.violence", "Violence"],
+  ["category.hate", "Hate"],
+  ["category.politics", "Politics"],
+  ["category.controversy", "Controversy"],
+  ["category.talk", "Talk"],
+  ["category.overseas", "Overseas"],
+  ["category.religion", "Religion"],
+  ["category.custom", "Custom"],
+  ["category.sensitive", "Sensitive"],
+  ["category.issue", "Issue"]
+]), C = i(
+  h,
+  [],
+  x
+);
+function u(e) {
+  return s(e);
+}
+const d = u;
+function b(e) {
+  return a(e);
+}
+export {
+  h as PYLER_LIGHT_COLOR_TOKENS,
+  g as PYLER_LIGHT_GROUP_ORDER,
+  C as flatPylerLightTokens,
+  b as formatPylerPathForDisplay,
+  u as getDsCssVar,
+  d as getPylerCssVar
+};

package/dist/tokens/typography.js

@@ -0,0 +1,84 @@
+"use client";
+const t = {
+  title1Sb: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-title-1-sb-font-size)",
+    lineHeight: "var(--ds-type-title-1-sb-line-height)",
+    fontWeight: "var(--ds-type-title-1-sb-font-weight)"
+  },
+  title1M: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-title-1-m-font-size)",
+    lineHeight: "var(--ds-type-title-1-m-line-height)",
+    fontWeight: "var(--ds-type-title-1-m-font-weight)"
+  },
+  title2Sb: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-title-2-sb-font-size)",
+    lineHeight: "var(--ds-type-title-2-sb-line-height)",
+    fontWeight: "var(--ds-type-title-2-sb-font-weight)"
+  },
+  body1M: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-1-m-font-size)",
+    lineHeight: "var(--ds-type-body-1-m-line-height)",
+    fontWeight: "var(--ds-type-body-1-m-font-weight)"
+  },
+  body1R: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-1-r-font-size)",
+    lineHeight: "var(--ds-type-body-1-r-line-height)",
+    fontWeight: "var(--ds-type-body-1-r-font-weight)"
+  },
+  body2Sb: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-2-sb-font-size)",
+    lineHeight: "var(--ds-type-body-2-sb-line-height)",
+    fontWeight: "var(--ds-type-body-2-sb-font-weight)"
+  },
+  body2M: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-2-m-font-size)",
+    lineHeight: "var(--ds-type-body-2-m-line-height)",
+    fontWeight: "var(--ds-type-body-2-m-font-weight)"
+  },
+  body2R: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-2-r-font-size)",
+    lineHeight: "var(--ds-type-body-2-r-line-height)",
+    fontWeight: "var(--ds-type-body-2-r-font-weight)"
+  },
+  body3M: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-3-m-font-size)",
+    lineHeight: "var(--ds-type-body-3-m-line-height)",
+    fontWeight: "var(--ds-type-body-3-m-font-weight)"
+  },
+  body3R: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-3-r-font-size)",
+    lineHeight: "var(--ds-type-body-3-r-line-height)",
+    fontWeight: "var(--ds-type-body-3-r-font-weight)"
+  },
+  body4M: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-4-m-font-size)",
+    lineHeight: "var(--ds-type-body-4-m-line-height)",
+    fontWeight: "var(--ds-type-body-4-m-font-weight)"
+  },
+  body4R: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-body-4-r-font-size)",
+    lineHeight: "var(--ds-type-body-4-r-line-height)",
+    fontWeight: "var(--ds-type-body-4-r-font-weight)"
+  },
+  label1R: {
+    fontFamily: "var(--ds-font-sans)",
+    fontSize: "var(--ds-type-label-1-r-font-size)",
+    lineHeight: "var(--ds-type-label-1-r-line-height)",
+    fontWeight: "var(--ds-type-label-1-r-font-weight)"
+  }
+};
+export {
+  t as PYLER_TYPOGRAPHY_STYLE
+};

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@pylerai/design-system",
-  "version": "1.2.4",
+  "version": "2.1.0",
   "description": "design-system for pyler frontend",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -12,6 +15,7 @@
       "default": "./dist/index.js"
     },
     "./style.css": "./dist/style.css",
+    "./fonts.css": "./dist/fonts.css",
     "./tailwind-preset": "./tailwind-preset.cjs",
     "./pyler-tailwind-colors": "./pyler-tailwind-colors.cjs",
     "./pyler-typography": "./pyler-typography.cjs"
@@ -24,19 +28,22 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && node scripts/build-fonts.cjs",
     "preview": "vite preview",
     "test": "vitest run",
+    "check:tokens": "node scripts/check-tokens.cjs",
+    "lint": "eslint . --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish:npm": "npm run build && npm publish --access public"
+    "publish:npm": "npm run build && npm publish --access public",
+    "build:fonts": "node scripts/build-fonts.cjs"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pylerAI/design-system.git"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "Pyler Inc.",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/pylerAI/design-system/issues"
   },
@@ -59,6 +66,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/js": "^9.39.5",
     "@storybook/addon-a11y": "^9.1.15",
     "@storybook/addon-docs": "^9.1.15",
     "@storybook/addon-onboarding": "^9.1.15",
@@ -72,14 +80,23 @@
     "@vitest/coverage-v8": "^4.0.4",
     "autoprefixer": "^10.4.16",
     "dotenv-cli": "^8.0.0",
+    "esbuild": "^0.21.5",
+    "eslint": "^9.39.5",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.1.20",
+    "globals": "^15.15.0",
     "playwright": "^1.56.1",
     "postcss": "^8.4.32",
+    "pretendard": "1.3.9",
+    "pretendard-jp": "1.3.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^9.1.15",
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^8.66.0",
     "vite": "^5.0.11",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.4"

package/pyler-tailwind-colors.cjs

@@ -15,6 +15,10 @@ module.exports = {
     background: {
       default: "var(--ds-background-default)",
     },
+    // Figma Foundation/Dim — 값이 rgba라 pyler-light.ts(HEX 전용)에는 없다
+    dim: {
+      default: "var(--ds-dim-default)",
+    },
     text: {
       strong: "var(--ds-text-strong)",
       normal: "var(--ds-text-normal)",