asharyu-design-token 1.0.3 → 2.0.4

package/dist/index.js

@@ -1,202 +1,273 @@
-// src/color/value.ts
-var colorValue = Object.freeze({
-  $white: {
-    0: "#FFFFFF",
-    1: "#EEEEEE",
-    2: "#DDDDDD",
-    3: "#CCCCCC",
-    4: "#BBBBBB"
+// src/color/colorValue.ts
+var colorValue = {
+  yang: {
+    0: "#ffffff",
+    1: "#fefdfa",
+    2: "#fdfaf4",
+    3: "#f7f2e1",
+    4: "#f1ebd0"
   },
-  $black: {
-    0: "#000000",
-    1: "#111111",
-    2: "#222222",
-    3: "#333333",
-    4: "#444444"
+  yin: {
+    0: "#333333",
+    1: "#1a1a1a",
+    2: "#0c0c0c",
+    3: "#060606",
+    4: "#000000"
   },
-  $red: {
-    0: "#FF0000",
-    1: "#DD0000",
-    2: "#BB0000",
-    3: "#990000",
-    4: "#770000"
+  wood: {
+    0: "#ECF2F6",
+    1: "#AEC6D7",
+    2: "#7BA2BE",
+    3: "#5C83A2",
+    4: "#3E6586"
   },
-  $blue: {
-    0: "#0000FF",
-    1: "#0000DD",
-    2: "#0000BB",
-    3: "#000099",
-    4: "#000077"
+  fire: {
+    0: "#F4E7E7",
+    1: "#DDA8A8",
+    2: "#C96B6B",
+    3: "#A74E4E",
+    4: "#853131"
   },
-  $yellow: {
-    0: "#FFFF00",
-    1: "#DDDD00",
-    2: "#BBBB00",
-    3: "#999900",
-    4: "#777700"
+  earth: {
+    0: "#F6F1E3",
+    1: "#E8DDBF",
+    2: "#D9C58F",
+    3: "#B5A16B",
+    4: "#917D47"
   },
-  $orangered: {
-    0: "#FF4500",
-    1: "#EE4500",
-    2: "#DD4500",
-    3: "#CC4500",
-    4: "#BB4500"
+  metal: {
+    0: "#FAFAFA",
+    1: "#F2F2F2",
+    2: "#E2E2E2",
+    3: "#C2C2C2",
+    4: "#A2A2A2"
   },
-  $purple: {
-    0: "#800080",
-    1: "#800070",
-    2: "#800060",
-    3: "#800050",
-    4: "#800040"
+  water: {
+    0: "#999999",
+    1: "#555555",
+    2: "#333333",
+    3: "#222222",
+    4: "#111111"
   },
-  $aqua: {
-    0: "#00FFFF",
-    1: "#00EEFF",
-    2: "#00DDFF",
-    3: "#00CCFF",
-    4: "#00BBFF"
+  hong: {
+    0: "#F2E5E5",
+    1: "#E5C7C7",
+    2: "#D6A6A6",
+    3: "#B37D7D",
+    4: "#915555"
   },
-  $orange: {
-    0: "#FFA500",
-    1: "#EEA500",
-    2: "#DDA500",
-    3: "#CCA500",
-    4: "#BBA500"
+  byeok: {
+    0: "#E6EEF4",
+    1: "#CEDAE3",
+    2: "#AFC2D0",
+    3: "#8AA1B2",
+    4: "#668194"
   },
-  $green: {
-    0: "#00FF00",
-    1: "#00EE00",
-    2: "#00DD00",
-    3: "#00CC00",
-    4: "#00BB00"
+  nok: {
+    0: "#E7F0E6",
+    1: "#CDDAC9",
+    2: "#ACC4A6",
+    3: "#8AA885",
+    4: "#698C64"
+  },
+  yuhwang: {
+    0: "#D0CCBE",
+    1: "#AFA895",
+    2: "#867D61",
+    3: "#6D654E",
+    4: "#544D3C"
+  },
+  ja: {
+    0: "#D1BFC0",
+    1: "#A9898B",
+    2: "#7E4F53",
+    3: "#653A3D",
+    4: "#4C2628"
   }
-});
-var value_default = colorValue;
+};
 
 // src/color/semanticValue.ts
 var semanticValue = Object.freeze({
-  $yin: {
-    0: value_default.$black[0],
-    1: value_default.$black[1],
-    2: value_default.$black[2],
-    3: value_default.$black[3],
-    4: value_default.$black[4]
-  },
-  $yang: {
-    0: value_default.$white[0],
-    1: value_default.$white[1],
-    2: value_default.$white[2],
-    3: value_default.$white[3],
-    4: value_default.$white[4]
-  },
-  $wood: {
-    0: value_default.$blue[0],
-    1: value_default.$blue[1],
-    2: value_default.$blue[2],
-    3: value_default.$blue[3],
-    4: value_default.$blue[4]
-  },
-  $fire: {
-    0: value_default.$red[0],
-    1: value_default.$red[1],
-    2: value_default.$red[2],
-    3: value_default.$red[3],
-    4: value_default.$red[4]
-  },
-  $earth: {
-    0: value_default.$yellow[0],
-    1: value_default.$yellow[1],
-    2: value_default.$yellow[2],
-    3: value_default.$yellow[3],
-    4: value_default.$yellow[4]
-  },
-  $metal: {
-    0: value_default.$white[0],
-    1: value_default.$white[1],
-    2: value_default.$white[2],
-    3: value_default.$white[3],
-    4: value_default.$white[4]
-  },
-  $water: {
-    0: value_default.$black[0],
-    1: value_default.$black[1],
-    2: value_default.$black[2],
-    3: value_default.$black[3],
-    4: value_default.$black[4]
+  light: {
+    scale: {
+      subtle: colorValue.yang[0],
+      soft: colorValue.yang[1],
+      primary: colorValue.yang[2],
+      deep: colorValue.yang[3],
+      sharp: colorValue.yang[4]
+    },
+    background: colorValue.yang[2],
+    text: colorValue.yin[2],
+    stroke: colorValue.yin[4],
+    action: {
+      subtle: colorValue.wood[0],
+      soft: colorValue.wood[1],
+      primary: colorValue.wood[2],
+      deep: colorValue.wood[3],
+      sharp: colorValue.wood[4]
+    },
+    danger: {
+      subtle: colorValue.fire[0],
+      soft: colorValue.fire[1],
+      primary: colorValue.fire[2],
+      deep: colorValue.fire[3],
+      sharp: colorValue.fire[4]
+    },
+    surface: {
+      subtle: colorValue.earth[0],
+      soft: colorValue.earth[1],
+      primary: colorValue.earth[2],
+      deep: colorValue.earth[3],
+      sharp: colorValue.earth[4]
+    },
+    border: {
+      subtle: colorValue.metal[0],
+      soft: colorValue.metal[1],
+      primary: colorValue.metal[2],
+      deep: colorValue.metal[3],
+      sharp: colorValue.metal[4]
+    },
+    info: {
+      subtle: colorValue.water[0],
+      soft: colorValue.water[1],
+      primary: colorValue.water[2],
+      deep: colorValue.water[3],
+      sharp: colorValue.water[4]
+    },
+    status: {
+      success: {
+        subtle: colorValue.nok[0],
+        soft: colorValue.nok[1],
+        primary: colorValue.nok[2],
+        deep: colorValue.nok[3],
+        sharp: colorValue.nok[4]
+      },
+      alertHover: {
+        subtle: colorValue.hong[0],
+        soft: colorValue.hong[1],
+        primary: colorValue.hong[2],
+        deep: colorValue.hong[3],
+        sharp: colorValue.hong[4]
+      },
+      actionFocus: {
+        subtle: colorValue.byeok[0],
+        soft: colorValue.byeok[1],
+        primary: colorValue.byeok[2],
+        deep: colorValue.byeok[3],
+        sharp: colorValue.byeok[4]
+      },
+      subSurface: {
+        subtle: colorValue.yuhwang[0],
+        soft: colorValue.yuhwang[1],
+        primary: colorValue.yuhwang[2],
+        deep: colorValue.yuhwang[3],
+        sharp: colorValue.yuhwang[4]
+      },
+      infoActive: {
+        subtle: colorValue.ja[0],
+        soft: colorValue.ja[1],
+        primary: colorValue.ja[2],
+        deep: colorValue.ja[3],
+        sharp: colorValue.ja[4]
+      }
+    },
+    bleed: {
+      primary: "rgba(12, 12, 12, 0.08)",
+      soft: "rgba(217, 197, 143, 0.15)"
+    }
   },
-  $firebwmetal: {
-    0: value_default.$orangered[0],
-    1: value_default.$orangered[1],
-    2: value_default.$orangered[2],
-    3: value_default.$orangered[3],
-    4: value_default.$orangered[4]
-  },
-  $metalbwwood: {
-    0: value_default.$aqua[0],
-    1: value_default.$aqua[1],
-    2: value_default.$aqua[2],
-    3: value_default.$aqua[3],
-    4: value_default.$aqua[4]
-  },
-  $woodbwearth: {
-    0: value_default.$green[0],
-    1: value_default.$green[1],
-    2: value_default.$green[2],
-    3: value_default.$green[3],
-    4: value_default.$green[4]
-  },
-  $earthbwwater: {
-    0: value_default.$orange[0],
-    1: value_default.$orange[1],
-    2: value_default.$orange[2],
-    3: value_default.$orange[3],
-    4: value_default.$orange[4]
-  },
-  $waterbwfire: {
-    0: value_default.$purple[0],
-    1: value_default.$purple[1],
-    2: value_default.$purple[2],
-    3: value_default.$purple[3],
-    4: value_default.$purple[4]
-  }
-});
-var semanticValue_default = semanticValue;
-
-// src/color/index.ts
-var yinYang = Object.freeze({
-  schema: {
-    ...getSchema("yin", semanticValue_default.$yin),
-    ...getSchema("yang", semanticValue_default.$yang)
-  }
-});
-var fiveElements = Object.freeze({
-  schema: {
-    ...getSchema("wood", semanticValue_default.$wood),
-    ...getSchema("fire", semanticValue_default.$fire),
-    ...getSchema("earth", semanticValue_default.$earth),
-    ...getSchema("metal", semanticValue_default.$metal),
-    ...getSchema("water", semanticValue_default.$water),
-    ...getSchema("firemetal", semanticValue_default.$firebwmetal),
-    ...getSchema("metalwood", semanticValue_default.$metalbwwood),
-    ...getSchema("woodearth", semanticValue_default.$woodbwearth),
-    ...getSchema("earthwater", semanticValue_default.$earthbwwater),
-    ...getSchema("waterfire", semanticValue_default.$waterbwfire)
+  dark: {
+    scale: {
+      subtle: colorValue.yin[4],
+      soft: colorValue.yin[3],
+      primary: colorValue.yin[2],
+      deep: colorValue.yin[1],
+      sharp: colorValue.yin[0]
+    },
+    background: colorValue.yin[2],
+    text: colorValue.yang[2],
+    stroke: colorValue.yang[0],
+    action: {
+      subtle: colorValue.wood[4],
+      soft: colorValue.wood[3],
+      primary: colorValue.wood[1],
+      deep: colorValue.wood[2],
+      sharp: colorValue.wood[0]
+    },
+    danger: {
+      subtle: colorValue.fire[4],
+      soft: colorValue.fire[3],
+      primary: colorValue.fire[1],
+      deep: colorValue.fire[2],
+      sharp: colorValue.fire[0]
+    },
+    surface: {
+      subtle: colorValue.earth[4],
+      soft: colorValue.earth[3],
+      primary: colorValue.earth[1],
+      deep: colorValue.earth[2],
+      sharp: colorValue.earth[0]
+    },
+    border: {
+      subtle: colorValue.metal[4],
+      soft: colorValue.metal[3],
+      primary: colorValue.metal[1],
+      deep: colorValue.metal[2],
+      sharp: colorValue.metal[0]
+    },
+    info: {
+      subtle: colorValue.water[4],
+      soft: colorValue.water[3],
+      primary: colorValue.water[1],
+      deep: colorValue.water[2],
+      sharp: colorValue.water[0]
+    },
+    status: {
+      success: {
+        subtle: colorValue.nok[4],
+        soft: colorValue.nok[3],
+        primary: colorValue.nok[1],
+        deep: colorValue.nok[2],
+        sharp: colorValue.nok[0]
+      },
+      alertHover: {
+        subtle: colorValue.hong[4],
+        soft: colorValue.hong[3],
+        primary: colorValue.hong[1],
+        deep: colorValue.hong[2],
+        sharp: colorValue.hong[0]
+      },
+      actionFocus: {
+        subtle: colorValue.byeok[4],
+        soft: colorValue.byeok[3],
+        primary: colorValue.byeok[1],
+        deep: colorValue.byeok[2],
+        sharp: colorValue.byeok[0]
+      },
+      subSurface: {
+        subtle: colorValue.yuhwang[4],
+        soft: colorValue.yuhwang[3],
+        primary: colorValue.yuhwang[1],
+        deep: colorValue.yuhwang[2],
+        sharp: colorValue.yuhwang[0]
+      },
+      infoActive: {
+        subtle: colorValue.ja[4],
+        soft: colorValue.ja[3],
+        primary: colorValue.ja[1],
+        deep: colorValue.ja[2],
+        sharp: colorValue.ja[0]
+      }
+    },
+    bleed: {
+      primary: "rgba(253, 250, 244, 0.12)",
+      soft: "rgba(123, 162, 190, 0.2)"
+    }
   }
 });
-var colorSchema = value_default;
-function getSchema(key, model) {
-  return Object.values(model).reduce((result, current, idx) => {
-    idx > 0 ? result[`$${key}$${idx}`] = current : result[`$${key}`] = current;
-    return result;
-  }, {});
-}
 
 // src/font/value.ts
 var fontSizeValue = Object.freeze({
-  $basic: "16px",
-  $1x: "1rem",
-  $2x: "2rem",
-  $3x: "3rem",
   $rem: {
     $8: "0.5rem",
     $10: "0.625rem",
@@ -233,7 +304,7 @@ var fontSizeValue = Object.freeze({
 });
 
 // src/font/index.ts
-var fontSizeSchema = fontSizeValue.$rem;
+var rawFontSizeRem = fontSizeValue.$rem;
 var fontSize = Object.freeze({
   schema: {
     $h1: fontSizeValue.$rem.$68,
@@ -242,32 +313,100 @@ var fontSize = Object.freeze({
     $h4: fontSizeValue.$rem.$28,
     $h5: fontSizeValue.$rem.$22,
     $h6: fontSizeValue.$rem.$18,
-    $subtitle$1: fontSizeValue.$rem.$16,
-    $subtitle$2: fontSizeValue.$rem.$14,
-    $subTitle$3: fontSizeValue.$rem.$12,
-    $body$1: fontSizeValue.$rem.$16,
-    $body$2: fontSizeValue.$rem.$14,
-    $body$3: fontSizeValue.$rem.$12,
+    $subtitle1: fontSizeValue.$rem.$16,
+    $subtitle2: fontSizeValue.$rem.$14,
+    $subtitle3: fontSizeValue.$rem.$12,
+    $body1: fontSizeValue.$rem.$16,
+    $body2: fontSizeValue.$rem.$14,
+    $body3: fontSizeValue.$rem.$12,
     $button: fontSizeValue.$rem.$12,
     $caption: fontSizeValue.$rem.$10,
     $overline: fontSizeValue.$rem.$8
   }
 });
+var semanticFontSize = fontSize.schema;
+
+// src/motion/index.ts
+var motion = Object.freeze({
+  kiUn: {
+    gentle: "cubic-bezier(0.4, 0, 0.2, 1)",
+    sharp: "cubic-bezier(0.19, 1, 0.22, 1)",
+    spread: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+  },
+  duration: {
+    decisive: "0.15s",
+    flow: "0.3s",
+    bleed: "0.8s"
+  }
+});
+
+// src/stroke/index.ts
+var stroke = Object.freeze({
+  weight: {
+    sharp: "0.5px",
+    fine: "1px",
+    medium: "1.5px",
+    bold: "2px",
+    heavy: "3px"
+  },
+  ink: {
+    pressureLight: "var(--asharyu-stroke-weight-sharp)",
+    pressureHeavy: "var(--asharyu-stroke-weight-heavy)",
+    bleed: "blur(1.2px)"
+  },
+  sharp: `var(--asharyu-stroke-weight-fine) solid var(--asharyu-color-semantic-stroke)`,
+  rough: "url(#ink-bleed-filter)"
+});
+
+// src/interaction/index.ts
+var interaction = Object.freeze({
+  flow: {
+    sangSaeng: "all var(--asharyu-motion-duration-flow) var(--asharyu-motion-ki-un-gentle)"
+  },
+  feedback: {
+    sangGeukDecisive: "all var(--asharyu-motion-duration-decisive) var(--asharyu-motion-ki-un-sharp)",
+    sangGeukSpread: "all var(--asharyu-motion-duration-bleed) var(--asharyu-motion-ki-un-spread)"
+  },
+  theme: {
+    bleed: "background-color var(--asharyu-motion-duration-bleed) var(--asharyu-motion-ki-un-spread), color var(--asharyu-motion-duration-flow) var(--asharyu-motion-ki-un-gentle)"
+  }
+});
 
 // src/index.ts
 var color = Object.freeze({
-  yinYang: yinYang.schema,
-  fiveElements: fiveElements.schema,
-  colorSchema
+  raw: colorValue,
+  semantic: semanticValue
 });
-var font = Object.freeze({ fontSize: fontSize.schema, fontSizeSchema });
-var AsharyuDesignToken = { color, font };
+var font = Object.freeze({
+  rawRem: rawFontSizeRem,
+  semantic: semanticFontSize
+});
+var AsharyuDesignToken = { color, font, motion, stroke, interaction };
+var normalizeKey = (key) => key.replace(/^\$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var createBridge = (obj, path = ["asharyu"]) => {
+  const bridge = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const normalizedKey = normalizeKey(key);
+    if (typeof value === "object" && value !== null) {
+      bridge[key] = createBridge(value, [...path, normalizedKey]);
+    } else {
+      bridge[key] = `var(--${[...path, normalizedKey].join("-")})`;
+    }
+  }
+  return bridge;
+};
+var tokens = createBridge(AsharyuDesignToken);
+var css = (strings, ...values) => {
+  return strings.reduce((acc, str, i) => acc + str + (values[i] ?? ""), "");
+};
 var src_default = AsharyuDesignToken;
 export {
-  colorSchema,
+  colorValue,
+  css,
   src_default as default,
-  fiveElements,
-  fontSize,
-  fontSizeSchema,
-  yinYang
+  normalizeKey,
+  rawFontSizeRem,
+  semanticFontSize,
+  semanticValue,
+  tokens
 };

package/dist/src/color/colorValue.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Asharyu Design System - Raw Color Values
+ * 음양오행(陰陽五行)과 담채(Modern Damchae)의 미학을 담은 원천 색상 정의입니다.
+ * 0: 가장 은은한(Subtle), 1: 부드러운(Soft), 2: 기준(Primary), 3: 깊은(Deep), 4: 예리한(Sharp)
+ */
+export declare const colorValue: {
+    yang: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    yin: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    wood: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    fire: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    earth: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    metal: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    water: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    hong: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    byeok: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    nok: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    yuhwang: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    ja: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+};