atomsystem 0.1.25 → 0.1.27

package/app/templates/Toast/Toast.tsx

@@ -9,7 +9,7 @@ gsap.registerPlugin(useGSAP);
 // ✅ Toast Message 타입 정의
 export type ToastMessage = {
   id: string;
-  status: "success" | "error";
+  status?: "standard" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "error";
   message: string;
   desc?: string;
 };
@@ -55,7 +55,7 @@ export const Toast = () => {
   }, []);
 
   return (
-    <div className="fixed flex flex-col gap-2 bottom-[24px] right-[24px] z-50">
+    <div className="toast-container">
       {messages.map((message) => (
         <ToastItem
           key={message.id}
@@ -97,10 +97,10 @@ const ToastItem = ({
   return (
     <div
       ref={elRef}
-      className="bg-[var(--background-card)] border border-[var(--color-border)] rounded text-white p-4 shadow-md min-w-[250px]"
+      className={`toast-item ${message.status || "standard"}`}
     >
       <p>{message.message}</p>
-      {message.desc ? <p className="text-sm">{message.desc}</p> : null}
+      {message.desc ? <p className="toast-desc">{message.desc}</p> : null}
     </div>
   );
 };

package/build/build-tokens.js

@@ -1,67 +1,218 @@
 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)};`);
+
+// 1. Style Dictionary 인스턴스 초기화
+const myStyleDictionary = new StyleDictionary({
+  source: ["tokens/tokens.json"],
+  preprocessors: ['flatten-global'],
+  hooks: {
+      preprocessors: {
+        'flatten-global': (dictionary) => {
+          // 1. global 객체를 찾습니다.
+          const { global, ...rest } = dictionary;
+          
+          // 2. global 내부의 내용을 루트로 끌어올려 병합합니다.
+          // 이렇게 하면 {palette.white} 참조가 루트 레벨에서 해석 가능해집니다.
+          return {
+            ...global,
+            ...rest
+          };
         }
-      } 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/",
+      transformGroup: "css", // CSS 기본 변환 적용 (예: size/rem, color/hex 등)
+      buildPath: "build/css/",
       files: [
         {
-          destination: "globals.css",
-          format: "css/variables-multi-context",
+          destination: "_variables.css",
+          format: "myCustomFormat", // 아래에서 정의한 커스텀 포맷 사용
+          options: {
+            outputReferences: true, // CSS 변수 참조 활성화 (var(--name))
+          },
         },
       ],
     },
+    typescript: {
+      transformGroup: "js",
+      buildPath: "build/typescript/",
+      files: [
+        {
+          destination: "theme.ts",
+          format: "theme",
+        },
+      ],
+    },
+  },
+  log: {
+    verbosity: 'verbose', // 어떤 reference를 못 찾는지 정확히 찍어줍니다.
+  },
+});
+
+// 2. 커스텀 포맷 등록
+// 토큰 그룹을 CSS 변수 블록으로 변환합니다.
+// - 'global' 카테고리 -> @theme 블록
+// - 그 외 카테고리 -> .{category} 클래스 블록
+myStyleDictionary.registerFormat({
+  name: "myCustomFormat",
+  format: function ({ dictionary, options }) {
+    // [헬퍼 함수]
+    // 1. getName: 토큰의 계층(type, item, subitem)을 하이픈(-)으로 연결하여 CSS 변수명 생성
+    //    예: palette.gray.500 -> palette-gray-500
+    const getName = (token) => token.path.slice(1).join("-");
+
+    // 2. getSemanticName: 시멘틱 토큰명을 생성 (예: color-card)
+    //    이름 규칙: $type(color)-...path -> color-bg-card
+    const getSemanticName = (token) => {
+      if (token.$type === "color") {
+        return [token.$type, ...token.path.slice(1)].join("-");
+      } else {
+        return null;
+      }
+    };
+
+    // [참조 맵 생성]
+    // {global.palette.white} 같은 참조 경로를 실제 토큰 객체로 찾기 위한 Map 생성
+    const tokenMap = new Map(
+      dictionary.allTokens.map((t) => [t.path.join("."), t])
+    );
+
+    // [토큰 그룹화]
+    // tokens.json의 최상위 카테고리(global, white, dark)별로 토큰을 묶음
+    const grouped = dictionary.allTokens.reduce((acc, token) => {
+      const category = token.attributes.category;
+      if (!acc[category]) acc[category] = [];
+      acc[category].push(token);
+      return acc;
+    }, {});
+
+    // [시멘틱 변수 수집 로직]
+    // global이 아닌 테마별 토큰(white, dark 등)을 순회하며 시멘틱 변수 정의를 수집함
+    // 목적: @theme 블록 안에 "--color-card: var(--card);" 형태의 매핑을 한 번만 선언하기 위함.
+    // 각 테마 파일(.white, .dark)에서는 --card 변수만 재정의하면 됨.
+    const themeTokens = dictionary.allTokens.filter(t => t.attributes.category !== 'palette');
+    const semanticMap = new Map();
+    
+    themeTokens.forEach(token => {
+        const semanticName = getSemanticName(token); // 예: color-card
+        const varName = getName(token);              // 예: card
+        
+        // 중복 선언 방지: 동일한 시멘틱 이름이 여러 테마에 있어도 한 번만 수집
+        if (semanticName && !semanticMap.has(semanticName)) {
+            semanticMap.set(semanticName, varName);
+        }
+    });
+
+    // 수집된 시멘틱 변수들을 CSS 문자열로 변환
+    const semanticCss = Array.from(semanticMap.entries())
+        .map(([name, val]) => `  --${name}: var(--${val});`)
+        .join('\n');
+
+
+    // [최종 CSS 생성]
+    // 그룹별로 순회하며 CSS 블록 생성
+    return Object.entries(grouped)
+      .map(([category, tokens]) => {
+        // 선택자 결정: 
+        // - 'global' 카테고리는 Tailwind CSS v4의 '@theme' 블록으로 변환
+        // - 나머지(white, dark)는 클래스 선택자(예: .white)로 변환
+        const selector = category === "palette" ? "@theme" : `.${category}`;
+
+
+        // 정렬
+        const typeOrder = ["color", "fontSizes", "fontWeights", "fontFamily", "borderRadius"];
+
+        const cssVariables = tokens
+          .sort((a, b) => {
+            const indexA = typeOrder.indexOf(a.$type);
+            const indexB = typeOrder.indexOf(b.$type);
+            if (indexA !== -1 && indexB !== -1) return indexA - indexB;
+            if (indexA !== -1) return -1;
+            if (indexB !== -1) return 1;
+            return 0;
+          })
+          .map((token) => {
+            const name = getName(token);
+            // 기본 값. 참조가 있다면 원본 값("{global.palette...}")을 가져옴
+            let value = token.$value || token.value;
+            const originalValue = token.original.$value || token.original.value;
+
+            // [수동 참조 해결]
+            // 값이 "{...}" 형태의 참조인 경우, 해당 참조를 var(--이름) 형태로 변환
+            if (
+              options?.outputReferences &&
+              typeof originalValue === "string" && // 값이 문자열이고
+              originalValue.includes("{")          // '{'를 포함하면 참조로 간주
+            ) {
+              value = originalValue.replace(/{([^}]+)}/g, (match, pathStr) => {
+                const refToken = tokenMap.get(pathStr);
+                if (refToken) {
+                  return `var(--${getName(refToken)})`;
+                }
+                return match; 
+              });
+            }
+
+            if (category === "palette") {
+              // $type을 확인하여 borderRadius나 dimension이면 px 추가
+              if(token.$type === "borderRadius" | token.$type === "fontSizes" | token.$type === "spacing" | token.$type === "sizing" | token.$type === "dimension") {
+                 if (!String(value).endsWith("px")) {
+                     return `--${name}: ${value}px;`;
+                 }
+              }
+              return `--${name}: ${value};`;
+            }
+            // 그 외 카테고리(테마)
+            if (token.$type === "color") {
+              return `--${name}: ${value};`;
+            }
+            if (token.$type === "spacing" || token.$type === "sizing") {
+               if (!String(value).endsWith("px") && !String(value).includes("var(")) {
+                   return `--${name}: ${value}px;`;
+               }
+               return `--${name}: ${value};`;
+            }
+            
+            return null;
+          })
+          .filter(Boolean)
+          .join("\n");
+
+        // global(@theme)인 경우에만 수집해둔 시멘틱 변수(semanticCss)를 추가
+        return `${selector} {\n${cssVariables}\n${selector === "@theme" ? `\n${semanticCss}\n` : ""}} `;
+      })
+      .join("\n\n");
+  },
+});
+
+// 3. theme와 관련된 커스텀 포맷 등록
+// theme.ts 파일을 위한 포맷 등록
+myStyleDictionary.registerFormat({
+  name: "theme",
+  format: function ({ dictionary }) {
+    const groupedThemes = dictionary.allTokens.reduce((acc, token) => {
+      const category = token.attributes.category;
+      if (category === "palette") return acc;
+
+      if (category.includes("-")) {
+        const prefix = category.split("-")[0];
+        if (!acc[prefix]) acc[prefix] = [];
+        if (!acc[prefix].includes(category)) {
+          acc[prefix].push(category);
+        }
+      } else {
+        if (!acc.global) acc.global = [];
+        if (!acc.global.includes(category)) {
+          acc.global.push(category);
+        }
+      }
+      return acc;
+    }, { global: [] });
+
+    return `export const themes: Record<string, string[]> = ${JSON.stringify(groupedThemes, null, 2)};`;
   },
 });
 
-await sd.buildAllPlatforms();
+// 3. 모든 플랫폼 빌드
+await myStyleDictionary.buildAllPlatforms();

package/build/css/_variables.css

@@ -0,0 +1,315 @@
+@theme {
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e6e6e6;
+  --color-gray-300: #dbdbdb;
+  --color-gray-400: #d4d4d4;
+  --color-gray-500: #cccccc;
+  --color-gray-600: #bfbfbf;
+  --color-gray-700: #b3b3b3;
+  --color-gray-800: #a6a6a6;
+  --color-gray-900: #999999;
+  --color-gray-950: #707070;
+  --color-dark-100: #111111;
+  --color-dark-200: #222222;
+  --color-dark-300: #333333;
+  --color-dark-400: #444444;
+  --color-dark-500: #555555;
+  --color-dark-600: #666666;
+  --color-dark-700: #777777;
+  --color-dark-800: #888888;
+  --color-dark-900: #999999;
+  --color-dark-950: #b2b2b2;
+  --color-blue-100: #e3f2fd;
+  --color-blue-200: #bbdefb;
+  --color-blue-300: #90caf9;
+  --color-blue-400: #64b5f6;
+  --color-blue-500: #2196f3;
+  --color-blue-600: #1e88e5;
+  --color-blue-700: #1976d2;
+  --color-blue-800: #1565c0;
+  --color-blue-900: #0d47a1;
+  --color-blue-950: #0a2f6b;
+  --color-indigo-100: #e8eaf6;
+  --color-indigo-200: #c5cae9;
+  --color-indigo-300: #7986cb;
+  --color-indigo-400: #3f51b5;
+  --color-indigo-500: #162c4e;
+  --color-indigo-600: #122542;
+  --color-indigo-700: #0e1d35;
+  --color-indigo-800: #0a1628;
+  --color-indigo-900: #070f1b;
+  --color-indigo-950: #04080e;
+  --color-red-100: #ffebee;
+  --color-red-200: #ffcdd2;
+  --color-red-300: #ef9a9a;
+  --color-red-400: #e57373;
+  --color-red-500: #f44336;
+  --color-red-600: #e53935;
+  --color-red-700: #d32f2f;
+  --color-red-800: #c62828;
+  --color-red-900: #b71c1c;
+  --color-red-950: #7f1212;
+  --color-yellow-100: #fff8e1;
+  --color-yellow-200: #ffecb3;
+  --color-yellow-300: #ffe082;
+  --color-yellow-400: #ffd54f;
+  --color-yellow-500: #ffb300;
+  --color-yellow-600: #ffa000;
+  --color-yellow-700: #ff8f00;
+  --color-yellow-800: #ff6f00;
+  --color-yellow-900: #e65100;
+  --color-yellow-950: #9e3600;
+  --color-green-100: #e8f5e9;
+  --color-green-200: #c8e6c9;
+  --color-green-300: #a5d6a7;
+  --color-green-400: #81c784;
+  --color-green-500: #4caf50;
+  --color-green-600: #43a047;
+  --color-green-700: #388e3c;
+  --color-green-800: #2e7d32;
+  --color-green-900: #1b5e20;
+  --color-green-950: #104015;
+  --color-black: #111111;
+  --color-white: #fafafa;
+  --color-primary: var(--color-blue-500);
+  --color-secondary: var(--color-indigo-500);
+  --color-danger: var(--color-red-500);
+  --color-warning: var(--color-yellow-500);
+  --color-info: var(--color-gray-900);
+  --color-success: var(--color-green-500);
+  --text-h1: 40px;
+  --text-h2: 36px;
+  --text-h3: 28px;
+  --text-h4: 24px;
+  --text-h5: 20px;
+  --text-h6: 16px;
+  --text-body: 16px;
+  --text-sm: 12px;
+  --font-weight-header: 700;
+  --radius-common: 4px;
+  --radius-circle: 10000000px;
+  --font-spoqaNeo: Spoqa Han Sans Neo;
+  --spacing-common-y: 12px;
+  --spacing-common-x: 16px;
+  --spacing-gap-small: 4px;
+  --spacing-sm-y: 8px;
+  --spacing-small: 20px;
+}
+
+@theme {
+  --bg-card: var(--color-white);
+  --color-bg-card: var(--bg-card);
+  --bg-wrapper: var(--color-gray-200);
+  --color-bg-wrapper: var(--bg-wrapper);
+  --bg-input-standard: var(--color-gray-100);
+  --color-bg-input-standard: var(--bg-input-standard);
+  --bg-input-hover: var(--color-gray-200);
+  --color-bg-input-hover: var(--bg-input-hover);
+  --bg-input-disabled: var(--color-gray-500);
+  --color-bg-input-disabled: var(--bg-input-disabled);
+  --text-standard: var(--color-dark-300);
+  --color-text-standard: var(--text-standard);
+  --text-active: var(--color-gray-100);
+  --color-text-active: var(--text-active);
+  --text-placeholder: var(--color-gray-950);
+  --color-text-placeholder: var(--text-placeholder);
+  --text-disabled: var(--color-gray-950);
+  --color-text-disabled: var(--text-disabled);
+  --border-standard: var(--color-gray-500);
+  --color-border-standard: var(--border-standard);
+  --border-active: var(--color-dark-400);
+  --color-border-active: var(--border-active);
+  --button-primary-bg-disabled: var(--color-blue-200);
+  --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
+  --button-primary-text-disabled: var(--color-blue-400);
+  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
+  --button-primary-border-disabled: var(--color-blue-200);
+  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
+  --button-secondary-bg-disabled: var(--color-indigo-200);
+  --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
+  --button-secondary-text-disabled: var(--color-indigo-400);
+  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
+  --button-secondary-border-disabled: var(--color-indigo-200);
+  --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
+  --button-success-bg-disabled: var(--color-green-200);
+  --color-button-success-bg-disabled: var(--button-success-bg-disabled);
+  --button-success-text-disabled: var(--color-green-400);
+  --color-button-success-text-disabled: var(--button-success-text-disabled);
+  --button-success-border-disabled: var(--color-green-200);
+  --color-button-success-border-disabled: var(--button-success-border-disabled);
+  --button-danger-bg-disabled: var(--color-red-200);
+  --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
+  --button-danger-text-disabled: var(--color-red-400);
+  --color-button-danger-text-disabled: var(--button-danger-text-disabled);
+  --button-danger-border-disabled: var(--color-red-200);
+  --color-button-danger-border-disabled: var(--button-danger-border-disabled);
+  --button-warning-bg-disabled: var(--color-yellow-200);
+  --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
+  --button-warning-text-disabled: var(--color-yellow-400);
+  --color-button-warning-text-disabled: var(--button-warning-text-disabled);
+  --button-warning-border-disabled: var(--color-yellow-200);
+  --color-button-warning-border-disabled: var(--button-warning-border-disabled);
+  --button-gray-bg-disabled: var(--color-gray-200);
+  --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
+  --button-gray-text-disabled: var(--color-gray-500);
+  --color-button-gray-text-disabled: var(--button-gray-text-disabled);
+  --button-gray-border-disabled: var(--color-gray-300);
+  --color-button-gray-border-disabled: var(--button-gray-border-disabled);
+  --table-header-bg: var(--color-gray-400);
+  --color-table-header-bg: var(--table-header-bg);
+  --table-header-text: var(--color-dark-500);
+  --color-table-header-text: var(--table-header-text);
+  --table-header-border: var(--color-gray-500);
+  --color-table-header-border: var(--table-header-border);
+  --table-body-bg: var(--color-white);
+  --color-table-body-bg: var(--table-body-bg);
+  --table-body-bgEven: var(--color-gray-100);
+  --color-table-body-bgEven: var(--table-body-bgEven);
+  --table-body-text: var(--color-dark-300);
+  --color-table-body-text: var(--table-body-text);
+  --table-body-border: var(--color-gray-300);
+  --color-table-body-border: var(--table-body-border);
+  --pagination-bg-hover: var(--color-gray-100);
+  --color-pagination-bg-hover: var(--pagination-bg-hover);
+}
+
+@theme .dark {
+  --bg-card: var(--color-dark-200);
+  --color-bg-card: var(--bg-card);
+  --bg-wrapper: var(--color-black);
+  --color-bg-wrapper: var(--bg-wrapper);
+  --bg-input-standard: var(--color-dark-300);
+  --color-bg-input-standard: var(--bg-input-standard);
+  --bg-input-hover: var(--color-dark-400);
+  --color-bg-input-hover: var(--bg-input-hover);
+  --bg-input-disabled: var(--color-dark-200);
+  --color-bg-input-disabled: var(--bg-input-disabled);
+  --text-standard: var(--color-white);
+  --color-text-standard: var(--text-standard);
+  --text-active: var(--color-white);
+  --color-text-active: var(--text-active);
+  --text-placeholder: var(--color-gray-950);
+  --color-text-placeholder: var(--text-placeholder);
+  --text-disabled: var(--color-dark-400);
+  --color-text-disabled: var(--text-disabled);
+  --border-standard: var(--color-dark-400);
+  --color-border-standard: var(--border-standard);
+  --border-active: var(--color-gray-500);
+  --color-border-active: var(--border-active);
+  --button-primary-bg-disabled: var(--color-blue-900);
+  --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
+  --button-primary-text-disabled: var(--color-blue-700);
+  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
+  --button-primary-border-disabled: var(--color-blue-800);
+  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
+  --button-secondary-bg-disabled: var(--color-indigo-900);
+  --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
+  --button-secondary-text-disabled: var(--color-indigo-700);
+  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
+  --button-secondary-border-disabled: var(--color-indigo-800);
+  --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
+  --button-success-bg-disabled: var(--color-green-900);
+  --color-button-success-bg-disabled: var(--button-success-bg-disabled);
+  --button-success-text-disabled: var(--color-green-700);
+  --color-button-success-text-disabled: var(--button-success-text-disabled);
+  --button-success-border-disabled: var(--color-green-800);
+  --color-button-success-border-disabled: var(--button-success-border-disabled);
+  --button-danger-bg-disabled: var(--color-red-900);
+  --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
+  --button-danger-text-disabled: var(--color-red-700);
+  --color-button-danger-text-disabled: var(--button-danger-text-disabled);
+  --button-danger-border-disabled: var(--color-red-800);
+  --color-button-danger-border-disabled: var(--button-danger-border-disabled);
+  --button-warning-bg-disabled: var(--color-yellow-900);
+  --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
+  --button-warning-text-disabled: var(--color-yellow-700);
+  --color-button-warning-text-disabled: var(--button-warning-text-disabled);
+  --button-warning-border-disabled: var(--color-yellow-800);
+  --color-button-warning-border-disabled: var(--button-warning-border-disabled);
+  --button-gray-bg-disabled: var(--color-gray-800);
+  --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
+  --button-gray-text-disabled: var(--color-gray-600);
+  --color-button-gray-text-disabled: var(--button-gray-text-disabled);
+  --button-gray-border-disabled: var(--color-gray-700);
+  --color-button-gray-border-disabled: var(--button-gray-border-disabled);
+  --table-header-bg: var(--color-dark-400);
+  --color-table-header-bg: var(--table-header-bg);
+  --table-header-text: var(--color-gray-200);
+  --color-table-header-text: var(--table-header-text);
+  --table-header-border: var(--color-dark-600);
+  --color-table-header-border: var(--table-header-border);
+  --table-body-bg: var(--color-dark-200);
+  --color-table-body-bg: var(--table-body-bg);
+  --table-body-bgEven: var(--color-dark-300);
+  --color-table-body-bgEven: var(--table-body-bgEven);
+  --table-body-text: var(--color-gray-200);
+  --color-table-body-text: var(--table-body-text);
+  --table-body-border: var(--color-dark-400);
+  --color-table-body-border: var(--table-body-border);
+  --pagination-bg-hover: var(--color-dark-300);
+  --color-pagination-bg-hover: var(--pagination-bg-hover);
+}
+
+@theme .topnav-standard {
+  --bg-topnav: var(--color-white);
+  --color-bg-topnav: var(--bg-topnav);
+  --text-topnav-standard: var(--color-dark-300);
+  --color-text-topnav-standard: var(--text-topnav-standard);
+  --text-topnav-active: var(--color-blue-500);
+  --color-text-topnav-active: var(--text-topnav-active);
+  --text-topnav-sub: var(--color-gray-600);
+  --color-text-topnav-sub: var(--text-topnav-sub);
+  --border-topnav: var(--color-gray-300);
+  --color-border-topnav: var(--border-topnav);
+  --spacing-topnav-x: var(--spacing-common-x);
+  --spacing-topnav-y: var(--spacing-common-y);
+  --spacing-topnav-gap: var(--spacing-common-x);
+}
+
+@theme .topnav-dark {
+  --bg-topnav: var(--color-dark-200);
+  --color-bg-topnav: var(--bg-topnav);
+  --text-topnav-standard: var(--color-white);
+  --color-text-topnav-standard: var(--text-topnav-standard);
+  --text-topnav-active: var(--color-blue-400);
+  --color-text-topnav-active: var(--text-topnav-active);
+  --text-topnav-sub: var(--color-dark-600);
+  --color-text-topnav-sub: var(--text-topnav-sub);
+  --border-topnav: var(--color-dark-400);
+  --color-border-topnav: var(--border-topnav);
+  --spacing-topnav-x: var(--spacing-common-x);
+  --spacing-topnav-y: var(--spacing-common-y);
+  --spacing-topnav-gap: var(--spacing-common-x);
+}
+
+@theme .sidenav-standard {
+  --bg-sidenav: var(--color-white);
+  --color-bg-sidenav: var(--bg-sidenav);
+  --text-sidenav-standard: var(--color-dark-300);
+  --color-text-sidenav-standard: var(--text-sidenav-standard);
+  --text-sidenav-active: var(--color-blue-500);
+  --color-text-sidenav-active: var(--text-sidenav-active);
+  --text-sidenav-sub: var(--color-gray-600);
+  --color-text-sidenav-sub: var(--text-sidenav-sub);
+  --border-sidenav: var(--color-gray-300);
+  --color-border-sidenav: var(--border-sidenav);
+  --spacing-sidenav-x: var(--spacing-common-x);
+  --spacing-sidenav-y: var(--spacing-common-y);
+  --spacing-sidenav-gap: var(--spacing-common-x);
+}
+
+@theme .sidenav-dark {
+  --bg-sidenav: var(--color-dark-200);
+  --color-bg-sidenav: var(--bg-sidenav);
+  --text-sidenav-standard: var(--color-white);
+  --color-text-sidenav-standard: var(--text-sidenav-standard);
+  --text-sidenav-active: var(--color-blue-400);
+  --color-text-sidenav-active: var(--text-sidenav-active);
+  --text-sidenav-sub: var(--color-dark-600);
+  --color-text-sidenav-sub: var(--text-sidenav-sub);
+  --border-sidenav: var(--color-dark-400);
+  --color-border-sidenav: var(--border-sidenav);
+  --spacing-sidenav-x: var(--spacing-common-x);
+  --spacing-sidenav-y: var(--spacing-common-y);
+  --spacing-sidenav-gap: var(--spacing-common-x);
+}

package/build/typescript/theme.ts

@@ -0,0 +1,14 @@
+export const themes: Record<string, string[]> = {
+  "global": [
+    "white",
+    "dark"
+  ],
+  "topnav": [
+    "topnav-standard",
+    "topnav-dark"
+  ],
+  "sidenav": [
+    "sidenav-standard",
+    "sidenav-dark"
+  ]
+};