atomsystem 0.1.21 → 0.1.23

package/app/templates/Card/Card.tsx

@@ -4,10 +4,12 @@ export const Card = ({
   children,
   type = "standard",
   className = "",
+  overflow = "overflow-auto",
 }: {
   children: React.ReactNode;
   className?: string;
   type?: "standard" | "group";
+  overflow?: "overflow-auto" | "overflow-hidden" | "overflow-none";
 }) => {
   // CardHeader와 CardContent의 존재 여부 확인
   const hasCardContent = React.Children.toArray(children).some(
@@ -19,7 +21,7 @@ export const Card = ({
   );
   return (
     <div
-      className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-[var(--background-wrapper)] border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} overflow-auto`}
+      className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-[var(--background-wrapper)] border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} ${overflow === "overflow-auto" ? `overflow-auto` : overflow === "overflow-hidden" ? "overflow-hidden" : overflow === "overflow-none" ? "" : ""}`}
     >
       {children}
     </div>

package/app/templates/Collapse/Collapse.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+
+export const Collapse = ({
+  type = "collapse",
+  collapses,
+}: {
+  type?: "accordion" | "collapse";
+  collapses: { title: string; content: string }[];
+}) => {
+  const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
+    type === "collapse" ? [] : null
+  );
+
+  const toggleContent = (idx: number) => {
+    if (type === "accordion") {
+      setActiveIndex((prev) => (prev === idx ? null : idx));
+    } else {
+      setActiveIndex((prev) => {
+        const current = prev as number[];
+        return current.includes(idx)
+          ? current.filter((i) => i !== idx) // 닫기
+          : [...current, idx]; // 열기
+      });
+    }
+  };
+
+  const isActive = (idx: number) => {
+    return type === "accordion"
+      ? activeIndex === idx
+      : (activeIndex as number[]).includes(idx);
+  };
+
+  return (
+    <>
+      {collapses.map((collapse, idx) => (
+        <div key={idx}>
+          <label className="flex justify-between cursor-pointer p-4 border-t border-[var(--color-border)]">
+            {collapse.title}
+            <button
+              onClick={() => toggleContent(idx)}
+              className={`material-symbols-outlined cursor-pointer transition-all duration-300 ${
+                isActive(idx) ? "rotate-90" : "rotate-0"
+              }`}
+            >
+              keyboard_arrow_right
+            </button>
+          </label>
+          {isActive(idx) && (
+            <div className="p-4 bg-[var(--background-wrapper)] border-rounded">
+              {collapse.content}
+            </div>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export const NodeCollapse = ({
+  type = "collapse",
+  collapses,
+}: {
+  type?: "accordion" | "collapse";
+  collapses: { title: React.ReactNode; content: React.ReactNode }[];
+}) => {
+  const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
+    type === "collapse" ? [] : null
+  );
+
+  const toggleContent = (idx: number) => {
+    if (type === "accordion") {
+      setActiveIndex((prev) => (prev === idx ? null : idx));
+    } else {
+      setActiveIndex((prev) => {
+        const current = prev as number[];
+        return current.includes(idx)
+          ? current.filter((i) => i !== idx) // 닫기
+          : [...current, idx]; // 열기
+      });
+    }
+  };
+
+  const isActive = (idx: number) => {
+    return type === "accordion"
+      ? activeIndex === idx
+      : (activeIndex as number[]).includes(idx);
+  };
+
+  return (
+    <>
+      {collapses.map((collapse, idx) => (
+        <div key={idx}>
+          <label className="flex justify-between cursor-pointer p-4 border-t border-[var(--color-border)]">
+            {collapse.title}
+            <button
+              onClick={() => toggleContent(idx)}
+              className={`material-symbols-outlined cursor-pointer transition-all duration-300 ${
+                isActive(idx) ? "rotate-90" : "rotate-0"
+              }`}
+            >
+              keyboard_arrow_right
+            </button>
+          </label>
+          {isActive(idx) && (
+            <div className="p-4 bg-[var(--background-wrapper)] border-rounded">
+              {collapse.content}
+            </div>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};

package/app/templates/Input/Input.tsx

@@ -37,10 +37,10 @@ export const Input = ({
         className="border rounded focus:outline-none focus:ring-0 bg-[var(--input-background-standard)] disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed border-[var(--input-border-standard)] focus:border-[var(--input-border-focus)] w-full"
         style={{
           color: "var(--input-text-standard)",
-          paddingLeft: "var(--global-padding-x)",
-          paddingRight: "var(--global-padding-x)",
-          paddingTop: "var(--global-padding-y)",
-          paddingBottom: "var(--global-padding-y)",
+          paddingLeft: "var(--spacing-global-x)",
+          paddingRight: "var(--spacing-global-x)",
+          paddingTop: "var(--spacing-global-y)",
+          paddingBottom: "var(--spacing-global-y)",
           borderRadius: "var(--input-rounded)",
         }}
         placeholder={placeholder}

package/app/templates/Pagination/Pagination.tsx

@@ -16,9 +16,9 @@ const Pagination = ({
   pageViewRange: number;
   /**  페이지네이션을 보여줄 최대 개수정보를 받습니다. */
   pageRange: number;
-  /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
+  /** 데이터의 총 개수를 받아 페이지당 데이터 개수로 나누어 총 페이지네이션 정보를 계산합니다. */
   totalCount?: number;
-  /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
+  /** 전체 페이지네이션의 토탈 정보를 받습니다. */
   pageTotal?: number;
 }) => {
   const totalPages = pageTotal

package/app/templates/TOC/TOC.tsx

@@ -15,6 +15,9 @@ export default function TOC() {
 
   useEffect(() => {
     const timer = setTimeout(() => {
+      /**
+       * Document에서 읽히는 h1, h2, h3 태그를 array 형태로 정의
+       * */
       const headingElements = Array.from(
         document.querySelectorAll("h1, h2, h3")
       ) as HTMLHeadingElement[];
@@ -26,7 +29,7 @@ export default function TOC() {
             heading.textContent
               ?.toLowerCase()
               .replace(/\s+/g, "-")
-              .replace(/[^\w\-]+/g, "") ?? "";
+              .replace(/[^\w\-가-힣]+/g, "") ?? "";
         }
 
         return {
@@ -40,7 +43,7 @@ export default function TOC() {
     }, 50);
 
     return () => clearTimeout(timer);
-  }, [pathname]);
+  }, [pathname]); // 페이지 변경사항이 있다면 목차 재정의
 
   return (
     <nav className="space-y-2 flex flex-col">

package/build/build-tokens.js

@@ -0,0 +1,67 @@
+import StyleDictionary from "style-dictionary";
+
+const valueWithUnit = (val) => {
+  return typeof val === "number" ? `${val}px` : val;
+};
+
+// register it with register method
+StyleDictionary.registerFormat({
+  name: "css/variables-multi-context",
+  format: ({ dictionary }) => {
+    const root = [];
+    const light = [];
+    const dark = [];
+
+    dictionary.allTokens.map((token) => {
+      const name = `--${token.name}`;
+      const val = token.value;
+      if (
+        typeof token.value === "object" &&
+        (token.value.light || token.value.dark)
+      ) {
+        if (token.value.light) {
+          light.push(`${name}: ${valueWithUnit(val.light)};`);
+        }
+        if (token.value.dark) {
+          dark.push(`${name}: ${valueWithUnit(val.dark)};`);
+        }
+      } else {
+        root.push(`${name}: ${valueWithUnit(val)};`);
+      }
+    });
+    return `
+    @import "tailwindcss";
+
+    @theme {
+        ${root.join("\n")}
+    }
+        
+    :root{
+          ${root.join("\n")}
+    }    
+    .light {
+        ${light.join("\n")}
+    }
+    .dark {
+        ${dark.join("\n")}
+    }`.trim();
+  },
+});
+
+const sd = new StyleDictionary({
+  source: ["token.json"],
+  platforms: {
+    css: {
+      transformGroup: "css",
+      buildPath: "app/",
+      files: [
+        {
+          destination: "globals.css",
+          format: "css/variables-multi-context",
+        },
+      ],
+    },
+  },
+});
+
+await sd.buildAllPlatforms();

package/cli/add.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-
 import inquirer from "inquirer";
 import fs from "fs";
 import path from "path";
@@ -18,6 +17,7 @@ const components = [
   "Button",
   "Badge",
   "Card",
+  "Collapse",
   "CodeBlock",
   "GlobalNav",
   "Input",
@@ -27,6 +27,7 @@ const components = [
   "Pagination",
   "Table",
   "Modal",
+  "TOC",
 ]; // 여기 추가할 컴포넌트 목록
 
 // 명령어에서 컴포넌트 이름 가져오기

package/cli/init.js

@@ -15,10 +15,12 @@ const __dirname = path.dirname(__filename);
 // 패키지 내부 경로 설정
 const packageRoot = path.join(__dirname, "..");
 const tokenFile = path.join(packageRoot, "token.json");
+const buildFile = path.join(packageRoot, "/build/build-tokens.js");
 
 // 프로젝트 루트 경로 (사용자가 실행한 곳)
 const projectRoot = process.cwd();
 const targetTokenFile = path.join(projectRoot, "token.json");
+const targetBuildFile = path.join(projectRoot, "/build/build-tokens.js");
 
 // 사용자에게 Next.js 설치 여부 질문
 inquirer
@@ -53,12 +55,7 @@ inquirer
 
         packageJson.scripts = {
           ...packageJson.scripts,
-          dev: "npm run build:token && next dev",
-          build: "next build",
-          build_token:
-            "node tokens/buildTokenSplit.js && node tokens/buildMergeCss.js",
-          start: "next start",
-          lint: "next lint",
+          "token-build": "node build/build-tokens.js",
         };
 
         fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
@@ -102,6 +99,8 @@ inquirer
     // ✅ 토큰 파일 복사 (Next.js 설치 여부와 관계없이 실행)
     copyFileSync(tokenFile, targetTokenFile);
     console.log(`✅ Copied: token.json -> ${targetTokenFile}`);
+    copyFileSync(buildFile, targetBuildFile);
+    console.log(`✅ Copied: ${buildFile} -> ${targetTokenFile}`);
 
     console.log("🚀 Token setup complete!");
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
@@ -11,6 +11,7 @@
     "token.json",
     "tokens",
     "tailwind.config.ts",
+    "build",
     "app/templates"
   ],
   "scripts": {

package/token.json

@@ -4,6 +4,207 @@
     "secondary": { "value": "#162c4e", "type": "color" },
     "danger": { "value": "#ff4a4a", "type": "color" },
     "warning": { "value": "#ffa300", "type": "color" },
+    "white": { "value": "#fafafa", "type": "color" },
+    "black": { "value": "#111111", "type": "color" },
+
+    "black-900": { "value": "#222222", "type": "color" },
+    "black-800": { "value": "#333333", "type": "color" },
+    "black-700": { "value": "#444444", "type": "color" },
+    "black-600": { "value": "#555555", "type": "color" },
+    "black-500": { "value": "#666666", "type": "color" },
+    "black-400": { "value": "#777777", "type": "color" },
+    "black-300": { "value": "#888888", "type": "color" },
+    "black-200": { "value": "#999999", "type": "color" },
+    "black-100": { "value": "#aaaaaa", "type": "color" },
+    "black-50": { "value": "#bbbbbb", "type": "color" },
+
+    "gray-900": { "value": "#cccccc", "type": "color" },
+    "gray-800": { "value": "#d4d4d4", "type": "color" },
+    "gray-700": { "value": "#dbdbdb", "type": "color" },
+    "gray-600": { "value": "#e2e2e2", "type": "color" },
+    "gray-500": { "value": "#e8e8e8", "type": "color" },
+    "gray-400": { "value": "#eeeeee", "type": "color" },
+    "gray-300": { "value": "#f2f2f2", "type": "color" },
+    "gray-200": { "value": "#f5f5f5", "type": "color" },
+    "gray-100": { "value": "#f8f8f8", "type": "color" },
+    "gray-50": { "value": "#fbfbfb", "type": "color" },
+
+    "red-900": { "value": "#b71c1c", "type": "color" },
+    "red-800": { "value": "#c62828", "type": "color" },
+    "red-700": { "value": "#d32f2f", "type": "color" },
+    "red-600": { "value": "#e53935", "type": "color" },
+    "red-500": { "value": "#f44336", "type": "color" },
+    "red-400": { "value": "#ef5350", "type": "color" },
+    "red-300": { "value": "#e57373", "type": "color" },
+    "red-200": { "value": "#ef9a9a", "type": "color" },
+    "red-100": { "value": "#ffcdd2", "type": "color" },
+    "red-50": { "value": "#ffebee", "type": "color" },
+
+    "magenta-900": { "value": "#880e4f", "type": "color" },
+    "magenta-800": { "value": "#ad1457", "type": "color" },
+    "magenta-700": { "value": "#c2185b", "type": "color" },
+    "magenta-600": { "value": "#d81b60", "type": "color" },
+    "magenta-500": { "value": "#e91e63", "type": "color" },
+    "magenta-400": { "value": "#ec407a", "type": "color" },
+    "magenta-300": { "value": "#f06292", "type": "color" },
+    "magenta-200": { "value": "#f48fb1", "type": "color" },
+    "magenta-100": { "value": "#f8bbd0", "type": "color" },
+    "magenta-50": { "value": "#fce4ec", "type": "color" },
+
+    "purple-900": { "value": "#4a148c ", "type": "color" },
+    "purple-800": { "value": "#6a1b9a", "type": "color" },
+    "purple-700": { "value": "#761fa2", "type": "color" },
+    "purple-600": { "value": "#8e24aa", "type": "color" },
+    "purple-500": { "value": "#9c27b0", "type": "color" },
+    "purple-400": { "value": "#ab47bc", "type": "color" },
+    "purple-300": { "value": "#ba68c8", "type": "color" },
+    "purple-200": { "value": "#ce93d8", "type": "color" },
+    "purple-100": { "value": "#e1bee7", "type": "color" },
+    "purple-50": { "value": "#f3e5f5", "type": "color" },
+
+    "violet-900": { "value": "#311b92", "type": "color" },
+    "violet-800": { "value": "#4527a0", "type": "color" },
+    "violet-700": { "value": "#512da8", "type": "color" },
+    "violet-600": { "value": "#5e35b1", "type": "color" },
+    "violet-500": { "value": "#673ab7", "type": "color" },
+    "violet-400": { "value": "#7e57c2 ", "type": "color" },
+    "violet-300": { "value": "#9575cd", "type": "color" },
+    "violet-200": { "value": "#b39ddb", "type": "color" },
+    "violet-100": { "value": "#d1c4e9", "type": "color" },
+    "violet-50": { "value": "#ede7f6", "type": "color" },
+
+    "deepblue-900": { "value": "#1a237e ", "type": "color" },
+    "deepblue-800": { "value": "#283593", "type": "color" },
+    "deepblue-700": { "value": "#303f9f", "type": "color" },
+    "deepblue-600": { "value": "#3949ab", "type": "color" },
+    "deepblue-500": { "value": "#3f51b5", "type": "color" },
+    "deepblue-400": { "value": "#5c6bc0", "type": "color" },
+    "deepblue-300": { "value": "#7986cb", "type": "color" },
+    "deepblue-200": { "value": "#9fa8da", "type": "color" },
+    "deepblue-100": { "value": "#c5cae9", "type": "color" },
+    "deepblue-50": { "value": "#e8eaf6", "type": "color" },
+
+    "blue-900": { "value": "#0d47a1", "type": "color" },
+    "blue-800": { "value": "#1565c0", "type": "color" },
+    "blue-700": { "value": "#1976d2", "type": "color" },
+    "blue-600": { "value": "#1e88e5", "type": "color" },
+    "blue-500": { "value": "#2196f3", "type": "color" },
+    "blue-400": { "value": "#42a5f5", "type": "color" },
+    "blue-300": { "value": "#64b5f6", "type": "color" },
+    "blue-200": { "value": "#90caf9", "type": "color" },
+    "blue-100": { "value": "#bbdefb", "type": "color" },
+    "blue-50": { "value": "#e3f2fd", "type": "color" },
+
+    "sky-900": { "value": "#01579b", "type": "color" },
+    "sky-800": { "value": "#0277bd", "type": "color" },
+    "sky-700": { "value": "#0288d1", "type": "color" },
+    "sky-600": { "value": "#039be5", "type": "color" },
+    "sky-500": { "value": "#03a9f4", "type": "color" },
+    "sky-400": { "value": "#29b6f6", "type": "color" },
+    "sky-300": { "value": "#4fc3f7", "type": "color" },
+    "sky-200": { "value": "#81d4fa", "type": "color" },
+    "sky-100": { "value": "#b3e5fc", "type": "color" },
+    "sky-50": { "value": "#e1f5fe", "type": "color" },
+
+    "teal-900": { "value": "#006064", "type": "color" },
+    "teal-800": { "value": "#00838f", "type": "color" },
+    "teal-700": { "value": "#0097a7", "type": "color" },
+    "teal-600": { "value": "#00acc1", "type": "color" },
+    "teal-500": { "value": "#00bcd4", "type": "color" },
+    "teal-400": { "value": "#26c6da", "type": "color" },
+    "teal-300": { "value": "#4dd0e1", "type": "color" },
+    "teal-200": { "value": "#80deea", "type": "color" },
+    "teal-100": { "value": "#b2ebf2", "type": "color" },
+    "teal-50": { "value": "#e0f7fa", "type": "color" },
+
+    "deepgreen-900": { "value": "#004d40", "type": "color" },
+    "deepgreen-800": { "value": "#00695c", "type": "color" },
+    "deepgreen-700": { "value": "#00796b", "type": "color" },
+    "deepgreen-600": { "value": "#00897b", "type": "color" },
+    "deepgreen-500": { "value": "#009688", "type": "color" },
+    "deepgreen-400": { "value": "#26a69a", "type": "color" },
+    "deepgreen-300": { "value": "#4db6ac", "type": "color" },
+    "deepgreen-200": { "value": "#80cbc4", "type": "color" },
+    "deepgreen-100": { "value": "#b2dfdb", "type": "color" },
+    "deepgreen-50": { "value": "#e0f2f1", "type": "color" },
+
+    "green-900": { "value": "#1b5e20", "type": "color" },
+    "green-800": { "value": "#2e7d32", "type": "color" },
+    "green-700": { "value": "#388e3c", "type": "color" },
+    "green-600": { "value": "#43a047", "type": "color" },
+    "green-500": { "value": "#4caf50", "type": "color" },
+    "green-400": { "value": "#66bb6a", "type": "color" },
+    "green-300": { "value": "#81c784", "type": "color" },
+    "green-200": { "value": "#a5d6a7", "type": "color" },
+    "green-100": { "value": "#c8e6c9", "type": "color" },
+    "green-50": { "value": "#e8f5e9", "type": "color" },
+
+    "lightgreen-900": { "value": "#33691e", "type": "color" },
+    "lightgreen-800": { "value": "#558b2f", "type": "color" },
+    "lightgreen-700": { "value": "#689f38", "type": "color" },
+    "lightgreen-600": { "value": "#7cb342", "type": "color" },
+    "lightgreen-500": { "value": "#8bc34a", "type": "color" },
+    "lightgreen-400": { "value": "#9ccc65", "type": "color" },
+    "lightgreen-300": { "value": "#aed581", "type": "color" },
+    "lightgreen-200": { "value": "#c5e1a5", "type": "color" },
+    "lightgreen-100": { "value": "#dcedc8", "type": "color" },
+    "lightgreen-50": { "value": "#f1f8e9", "type": "color" },
+
+    "yellow-900": { "value": "#827717", "type": "color" },
+    "yellow-800": { "value": "#9e9d24", "type": "color" },
+    "yellow-700": { "value": "#afb42b", "type": "color" },
+    "yellow-600": { "value": "#c0ca33", "type": "color" },
+    "yellow-500": { "value": "#cddc39", "type": "color" },
+    "yellow-400": { "value": "#d4e157", "type": "color" },
+    "yellow-300": { "value": "#dce775", "type": "color" },
+    "yellow-200": { "value": "#e6ee9c", "type": "color" },
+    "yellow-100": { "value": "#f0f4c3", "type": "color" },
+    "yellow-50": { "value": "#f9fbe7", "type": "color" },
+
+    "amber-900": { "value": "#f57f17", "type": "color" },
+    "amber-800": { "value": "#f9a825", "type": "color" },
+    "amber-700": { "value": "#fbc02d", "type": "color" },
+    "amber-600": { "value": "#fdd835", "type": "color" },
+    "amber-500": { "value": "#ffeb3b", "type": "color" },
+    "amber-400": { "value": "#ffee58", "type": "color" },
+    "amber-300": { "value": "#fff176", "type": "color" },
+    "amber-200": { "value": "#fff59d", "type": "color" },
+    "amber-100": { "value": "#fff9c4", "type": "color" },
+    "amber-50": { "value": "#fffde7", "type": "color" },
+
+    "orange-900": { "value": "#ff6f00", "type": "color" },
+    "orange-800": { "value": "#ff8f00", "type": "color" },
+    "orange-700": { "value": "#ffa000", "type": "color" },
+    "orange-600": { "value": "#ffb300", "type": "color" },
+    "orange-500": { "value": "#ffc107", "type": "color" },
+    "orange-400": { "value": "#ffca28", "type": "color" },
+    "orange-300": { "value": "#ffd54f", "type": "color" },
+    "orange-200": { "value": "#ffe082", "type": "color" },
+    "orange-100": { "value": "#ffecb3", "type": "color" },
+    "orange-50": { "value": "#fff8e1", "type": "color" },
+
+    "deeporange-900": { "value": "#e65100", "type": "color" },
+    "deeporange-800": { "value": "#ef6c00", "type": "color" },
+    "deeporange-700": { "value": "#f57c00", "type": "color" },
+    "deeporange-600": { "value": "#fb8c00", "type": "color" },
+    "deeporange-500": { "value": "#ff9800", "type": "color" },
+    "deeporange-400": { "value": "#ffa726", "type": "color" },
+    "deeporange-300": { "value": "#ffb74d", "type": "color" },
+    "deeporange-200": { "value": "#ffcc80", "type": "color" },
+    "deeporange-100": { "value": "#ffe0b2", "type": "color" },
+    "deeporange-50": { "value": "#fff320", "type": "color" },
+
+    "brown-900": { "value": "#3e2723", "type": "color" },
+    "brown-800": { "value": "#4e342e", "type": "color" },
+    "brown-700": { "value": "#5d4037", "type": "color" },
+    "brown-600": { "value": "#6d4c41", "type": "color" },
+    "brown-500": { "value": "#795548", "type": "color" },
+    "brown-400": { "value": "#8d6e63", "type": "color" },
+    "brown-300": { "value": "#a1887f", "type": "color" },
+    "brown-200": { "value": "#bcaaa4", "type": "color" },
+    "brown-100": { "value": "#d7ccc8", "type": "color" },
+    "brown-50": { "value": "#efebe9", "type": "color" },
+
     "border": {
       "value": {
         "light": "#ccc",
@@ -12,18 +213,20 @@
       "type": "color"
     }
   },
+  "spacing": {
+    "desktop-x": { "value": 48, "type": "spacing" },
+    "desktop-y": { "value": 48, "type": "spacing" },
+    "table-x": { "value": 24, "type": "spacing" },
+    "table-y": { "value": 24, "type": "spacing" },
+    "mobile-x": { "value": 12, "type": "spacing" },
+    "mobile-y": { "value": 12, "type": "spacing" },
+    "global-x": { "value": 16, "type": "spacing" },
+    "global-y": { "value": 12, "type": "spacing" }
+  },
   "global": {
     "rounded": {
       "value": 4,
       "type": "borderRadius"
-    },
-    "padding-x": {
-      "value": 12,
-      "type": "spacing"
-    },
-    "padding-y": {
-      "value": 8,
-      "type": "spacing"
     }
   },
   "text": {
@@ -112,22 +315,22 @@
     "background": {
       "standard": {
         "value": {
-          "light": "#fff",
-          "dark": "#333"
+          "light": "{color.white}",
+          "dark": "{color.black-800}"
         },
         "type": "color"
       },
       "hover": {
         "value": {
-          "light": "#f5f5f5",
-          "dark": "#444"
+          "light": "{color.gray-200}",
+          "dark": "{color.black-700}"
         },
         "type": "color"
       },
       "disabled": {
         "value": {
-          "light": "#e6e6e6",
-          "dark": "#555"
+          "light": "{color.gray-500}",
+          "dark": "{color.black-600}"
         },
         "type": "color"
       }
@@ -135,29 +338,29 @@
     "text": {
       "standard": {
         "value": {
-          "light": "#333333",
-          "dark": "#e6e6e6"
+          "light": "{color.black-800}",
+          "dark": "{color.gray-500}"
         }
       },
       "disabled": {
         "value": {
-          "light": "#999999",
-          "dark": "#666666"
+          "light": "{color.black-300}",
+          "dark": "{color.black-500}"
         }
       }
     },
     "border": {
       "standard": {
         "value": {
-          "light": "#ccc",
-          "dark": "#555"
+          "light": "{color.gray-900}",
+          "dark": "{color.black-600}"
         },
         "type": "color"
       },
       "focus": {
         "value": {
-          "light": "#333",
-          "dark": "#ccc"
+          "light": "{color.black-800}",
+          "dark": "{color.gray-900}"
         },
         "type": "color"
       }