@loword/loword-design-system 0.0.4 → 0.0.6

package/dist/index.css

@@ -44,6 +44,7 @@
     --color-mono300: #dadada;
     --color-mono400: #aaaaaa;
     --color-mono500: #7c7c7c;
+    --color-mono600: #5c5c5c;
     --color-mono700: #4e4e4e;
     --color-mono800: #2a2a2a;
     --color-mono900: #111111;
@@ -2167,6 +2168,9 @@
   .bg-mono300 {
     background-color: var(--color-mono300);
   }
+  .bg-mono600 {
+    background-color: var(--color-mono600);
+  }
   .bg-neutral-100 {
     background-color: var(--color-neutral-100);
   }
@@ -2471,6 +2475,11 @@
     line-height: var(--leading-display32);
     letter-spacing: var(--tracking-display32);
   }
+  .display40 {
+    font-size: var(--text-display40);
+    line-height: var(--leading-display40);
+    letter-spacing: var(--tracking-display40);
+  }
   .toggle-lg {
     font-size: var(--text-display14);
     line-height: var(--leading-display14);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -27,13 +27,16 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/theme.css",
+    "src/styles"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./theme.css": "./src/theme.css",
     "./styles.css": "./dist/index.css",
     "./*": {
       "types": "./dist/*.d.ts",
@@ -46,7 +49,7 @@
   "license": "MIT",
   "scripts": {
     "build": "pnpm build:components && pnpm build:styles",
-    "prepublishOnly": "pnpm build",
+    "prepublishOnly": "rm -rf dist && pnpm build",
     "build:components": "tsc && tsc-alias",
     "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
     "check-types": "tsc --noEmit",

package/src/styles/carousel.css

@@ -0,0 +1,9 @@
+.ld-carousel__viewport {
+  overflow: hidden;
+}
+
+/* 세로 방향 캐러셀은 viewport에 높이가 필요합니다.
+   소비자가 viewportClassName 또는 height 스타일로 지정합니다. */
+.ld-carousel__viewport > * {
+  height: 100%;
+}

package/src/styles/color.css

@@ -0,0 +1,185 @@
+@theme {
+  --color-scheme: light;
+
+  /* absolute */
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* hyper */
+  --color-hyper-blue: #0066ff;
+
+  /* mono (grayscale) */
+  --color-mono50: #f6f7f9;
+  --color-mono100: #f0f0f0;
+  --color-mono200: #ebebeb;
+  --color-mono300: #dadada;
+  --color-mono400: #aaaaaa;
+  --color-mono500: #7c7c7c;
+  --color-mono600: #5c5c5c;
+  --color-mono700: #4e4e4e;
+  --color-mono800: #2a2a2a;
+  --color-mono900: #111111;
+
+  /* neutral (cool gray) */
+  --color-neutral50: #fafafa;
+  --color-neutral100: #e3e6ea;
+  --color-neutral200: #cdd2d7;
+  --color-neutral300: #b7bbbf;
+  --color-neutral400: #9da3a9;
+  --color-neutral500: #848a92;
+  --color-neutral600: #6a7079;
+  --color-neutral700: #535a64;
+  --color-neutral800: #3a3f46;
+  --color-neutral900: #191f28;
+
+  /* blue (primary palette) */
+  --color-blue50: #ccd9ff;
+  --color-blue100: #b8c9ff;
+  --color-blue200: #8fabff;
+  --color-blue300: #5c85ff;
+  --color-blue400: #2158fd;
+  --color-blue500: #003fff;
+  --color-blue600: #0033cc;
+  --color-blue700: #002699;
+  --color-blue800: #011960;
+  --color-blue900: #000a29;
+
+  /* red */
+  --color-red50: #ffdbdb;
+  --color-red100: #ffbdbd;
+  --color-red200: #ff9494;
+  --color-red300: #ff7575;
+  --color-red400: #ff5a5a;
+  --color-red500: #ff4747;
+  --color-red600: #ff2e2e;
+  --color-red700: #ff0404;
+  --color-red800: #c70000;
+  --color-red900: #7b0000;
+
+  /* orange */
+  --color-orange50: #ffe8dd;
+  --color-orange100: #ffd4c4;
+  --color-orange200: #ffb699;
+  --color-orange300: #ff9166;
+  --color-orange400: #ff7a33;
+  --color-orange500: #ff6a00;
+  --color-orange600: #ff530f;
+  --color-orange700: #e64500;
+  --color-orange800: #cc3a00;
+  --color-orange900: #802300;
+
+  /* yellow */
+  --color-yellow50: #fff8e0;
+  --color-yellow100: #fff3cc;
+  --color-yellow200: #ffedb3;
+  --color-yellow300: #fce392;
+  --color-yellow400: #ffdc6b;
+  --color-yellow500: #ffd23d;
+  --color-yellow600: #ffcc24;
+  --color-yellow700: #f0ac00;
+  --color-yellow800: #c58e02;
+  --color-yellow900: #856403;
+
+  /* green */
+  --color-green50: #e6ffee;
+  --color-green100: #c2ffd5;
+  --color-green200: #8effae;
+  --color-green300: #52ff89;
+  --color-green400: #25f968;
+  --color-green500: #00f34c;
+  --color-green600: #00de47;
+  --color-green700: #00cc41;
+  --color-green800: #008f2d;
+  --color-green900: #004717;
+
+  /* pink */
+  --color-pink50: #fcf2f8;
+  --color-pink100: #fde0ef;
+  --color-pink200: #fbb9db;
+  --color-pink300: #ff78cb;
+  --color-pink400: #ff52d0;
+  --color-pink500: #ff33d3;
+  --color-pink600: #e61eb8;
+  --color-pink700: #c2128f;
+  --color-pink800: #930e6d;
+  --color-pink900: #5a0744;
+
+  /* purple */
+  --color-purple50: #f1e3ff;
+  --color-purple100: #deb3ff;
+  --color-purple200: #c78ef0;
+  --color-purple300: #b06be0;
+  --color-purple400: #9069c2;
+  --color-purple500: #7b40c7;
+  --color-purple600: #8520c9;
+  --color-purple700: #9210cc;
+  --color-purple800: #6a0ea9;
+  --color-purple900: #450b90;
+
+  /* danger */
+  --color-danger50: #fef7f7;
+  --color-danger100: #fdefef;
+  --color-danger200: #fbdede;
+  --color-danger300: #f7bdbd;
+  --color-danger400: #f29d9d;
+  --color-danger500: #ee7c7c;
+  --color-danger600: #ea5b5b;
+  --color-danger700: #c54646;
+  --color-danger800: #9e3838;
+  --color-danger900: #6d2626;
+
+  /* accept */
+  --color-accept50: #f0f6ff;
+  --color-accept100: #e0eaff;
+  --color-accept200: #bdd4ff;
+  --color-accept300: #9bbdff;
+  --color-accept400: #81abfc;
+  --color-accept500: #6c9cf9;
+  --color-accept600: #5388ef;
+  --color-accept700: #3e73dc;
+  --color-accept800: #2a5ec0;
+  --color-accept900: #1a4499;
+
+  /* success */
+  --color-success50: #f5fdf8;
+  --color-success100: #eafbf1;
+  --color-success200: #d5f7e3;
+  --color-success300: #a9eec7;
+  --color-success400: #82e6ab;
+  --color-success500: #58dd8f;
+  --color-success600: #2ed573;
+  --color-success700: #20b560;
+  --color-success800: #158a47;
+  --color-success900: #0c5e30;
+
+  /* warning */
+  --color-warning50: #fffcf4;
+  --color-warning100: #fff8e9;
+  --color-warning200: #fff2d3;
+  --color-warning300: #ffe5a6;
+  --color-warning400: #ffd87a;
+  --color-warning500: #ffcb4d;
+  --color-warning600: #ffbe21;
+  --color-warning700: #e6a500;
+  --color-warning800: #b38000;
+  --color-warning900: #805b00;
+
+  /* loword blue */
+  --color-lb50: #e0e9ff;
+  --color-lb100: #c3d4ff;
+  --color-lb200: #acc3ff;
+  --color-lb300: #95b2fa;
+  --color-lb400: #7ea1f9;
+  --color-lb500: #6891f8;
+  --color-lb600: #5883ee;
+  --color-lb700: #4a75df;
+  --color-lb800: #315cc9;
+  --color-lb900: #143ca3;
+
+  /* tint (배경 전용) */
+  --color-tintRed: #fdf4f4;
+  --color-tintOrange: #fffaf2;
+  --color-tintYellow: #ffefd2;
+  --color-tintGreen: #f5fbf8;
+  --color-tintBlue: #f0f4ff;
+}

package/src/styles/components/badge.css

@@ -0,0 +1,41 @@
+@theme {
+  /* padding-x: Button */
+  --control-padding-x-badge-2xs: var(--spacing_4);
+  --control-padding-x-badge-xs: var(--spacing_8);
+  --control-padding-x-badge-sm: var(--spacing_12);
+  --control-padding-x-badge-md: var(--spacing_16);
+  --control-padding-x-badge-lg: var(--spacing_20);
+  --control-padding-x-badge-xl: var(--spacing_28);
+}
+
+@utility badge-xs {
+  height: var(--control-height-2xs);
+  padding-inline: var(--control-padding-x-badge-2xs);
+  border-radius: var(--control-radius-xs);
+  gap: var(--control-gap-2xs);
+  @apply display10;
+}
+
+@utility badge-sm {
+  height: var(--control-height-xs);
+  padding-inline: var(--control-padding-x-badge-xs);
+  border-radius: var(--control-radius-xs);
+  gap: var(--control-gap-xs);
+  @apply display12;
+}
+
+@utility badge-md {
+  height: var(--control-height-sm);
+  padding-inline: var(--control-padding-x-badge-sm);
+  border-radius: var(--control-radius-sm);
+  gap: var(--control-gap-sm);
+  @apply display16;
+}
+
+@utility badge-lg {
+  height: var(--control-height-md);
+  padding-inline: var(--control-padding-x-badge-md);
+  border-radius: var(--control-radius-md);
+  gap: var(--control-gap-md);
+  @apply display20;
+}

package/src/styles/components/bread-crumb.css

@@ -0,0 +1,23 @@
+@utility bread-crumb-2xs {
+  @apply display10;
+}
+
+@utility bread-crumb-xs {
+  @apply display12;
+}
+
+@utility bread-crumb-sm {
+  @apply display14;
+}
+
+@utility bread-crumb-md {
+  @apply display16;
+}
+
+@utility bread-crumb-lg {
+  @apply display18;
+}
+
+@utility bread-crumb-xl {
+  @apply display20;
+}

package/src/styles/components/button.css

@@ -0,0 +1,183 @@
+@theme {
+  /* padding-x: Button */
+  --control-padding-x-button-2xs: var(--spacing_4);
+  --control-padding-x-button-xs: var(--spacing_8);
+  --control-padding-x-button-sm: var(--spacing_12);
+  --control-padding-x-button-md: var(--spacing_16);
+  --control-padding-x-button-lg: var(--spacing_20);
+  --control-padding-x-button-xl: var(--spacing_28);
+
+  /* min-width (Button) */
+  --control-min-width-2xs: 32px;
+  --control-min-width-xs: 48px;
+  --control-min-width-sm: 64px;
+  --control-min-width-md: 80px;
+  --control-min-width-lg: 96px;
+  --control-min-width-xl: 128px;
+
+  /* toggle-gap */
+  --toggle-gap: 2px;
+}
+
+/**
+ * button-root
+ */
+
+@utility btn-2xs {
+  height: var(--control-height-2xs);
+  /* min-width: var(--control-min-width-2xs); */
+  padding-inline: var(--control-padding-x-button-2xs);
+  border-radius: var(--control-radius-2xs);
+  gap: var(--control-gap-2xs);
+  font-weight: var(--control-font-weight);
+  @apply display10;
+}
+
+@utility btn-xs {
+  height: var(--control-height-xs);
+  /* min-width: var(--control-min-width-xs); */
+  padding-inline: var(--control-padding-x-button-xs);
+  border-radius: var(--control-radius-xs);
+  gap: var(--control-gap-xs);
+  font-weight: var(--control-font-weight);
+  @apply display12;
+}
+
+@utility btn-sm {
+  height: var(--control-height-sm);
+  min-width: var(--control-min-width-sm);
+  padding-inline: var(--control-padding-x-button-sm);
+  border-radius: var(--control-radius-sm);
+  gap: var(--control-gap-sm);
+  font-weight: var(--control-font-weight);
+  @apply display14;
+}
+
+@utility btn-md {
+  height: var(--control-height-md);
+  min-width: var(--control-min-width-md);
+  padding-inline: var(--control-padding-x-button-md);
+  border-radius: var(--control-radius-md);
+  gap: var(--control-gap-md);
+  font-weight: var(--control-font-weight);
+  @apply display16;
+}
+
+@utility btn-lg {
+  height: var(--control-height-lg);
+  min-width: var(--control-min-width-lg);
+  padding-inline: var(--control-padding-x-button-lg);
+  border-radius: var(--control-radius-lg);
+  gap: var(--control-gap-lg);
+  font-weight: var(--control-font-weight);
+  @apply display18;
+}
+
+@utility btn-xl {
+  height: var(--control-height-xl);
+  min-width: var(--control-min-width-xl);
+  padding-inline: var(--control-padding-x-button-xl);
+  border-radius: var(--control-radius-xl);
+  gap: var(--control-gap-xl);
+  font-weight: var(--control-font-weight);
+  @apply display20;
+}
+
+/**
+ * toggle-button size
+ */
+
+/* track */
+@utility toggle-track-xs {
+  width: 28px;
+  height: 14px;
+}
+@utility toggle-track-sm {
+  width: 32px;
+  height: 16px;
+}
+@utility toggle-track-md {
+  width: 36px;
+  height: 18px;
+}
+@utility toggle-track-lg {
+  width: 40px;
+  height: 20px;
+}
+@utility toggle-track-xl {
+  width: 44px;
+  height: 22px;
+}
+
+/* thumb */
+@utility toggle-thumb-xs {
+  width: 10px;
+  height: 10px;
+}
+@utility toggle-thumb-sm {
+  width: 12px;
+  height: 12px;
+}
+@utility toggle-thumb-md {
+  width: 14px;
+  height: 14px;
+}
+@utility toggle-thumb-lg {
+  width: 16px;
+  height: 16px;
+}
+@utility toggle-thumb-xl {
+  width: 18px;
+  height: 18px;
+}
+
+/* thumb unchecked */
+@utility toggle-thumb-off-xs {
+  left: var(--toggle-gap);
+}
+@utility toggle-thumb-off-sm {
+  left: var(--toggle-gap);
+}
+@utility toggle-thumb-off-md {
+  left: var(--toggle-gap);
+}
+@utility toggle-thumb-off-lg {
+  left: var(--toggle-gap);
+}
+@utility toggle-thumb-off-xl {
+  left: var(--toggle-gap);
+}
+
+/* thumb checked */
+@utility toggle-thumb-on-xs {
+  left: 16px;
+} /* 28 - 10 - 2 */
+@utility toggle-thumb-on-sm {
+  left: 18px;
+} /* 32 - 12 - 2 */
+@utility toggle-thumb-on-md {
+  left: 20px;
+} /* 36 - 14 - 2 */
+@utility toggle-thumb-on-lg {
+  left: 22px;
+} /* 40 - 16 - 2 */
+@utility toggle-thumb-on-xl {
+  left: 24px;
+} /* 44 - 18 - 2 */
+
+/* root font */
+@utility toggle-xs {
+  @apply display12;
+}
+@utility toggle-sm {
+  @apply display12;
+}
+@utility toggle-md {
+  @apply display14;
+}
+@utility toggle-lg {
+  @apply display14;
+}
+@utility toggle-xl {
+  @apply display16;
+}

package/src/styles/components/editor.css

@@ -0,0 +1,147 @@
+@layer utilities {
+  prose p {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 !important;
+  }
+
+  prose h1,
+  prose h2,
+  prose h3 {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 !important;
+  }
+
+  prose ul,
+  prose ol {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+    padding: 0 20px !important;
+  }
+
+  prose ul li::marker,
+  prose ol li::marker {
+    color: #000 !important;
+  }
+}
+
+/* 이미지 정렬 스타일 */
+.ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem auto;
+}
+
+.ProseMirror img[style*='text-align: left'] {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.ProseMirror img[style*='text-align: center'] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ProseMirror img[style*='text-align: right'] {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+/* 이미지 선택 스타일 */
+.ProseMirror img {
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: border-color 0.2s;
+}
+
+.ProseMirror img:hover {
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+/* 이미지 리사이즈 핸들 스타일 */
+.ProseMirror [data-resize-handle] {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.ProseMirror [data-resize-handle]:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+/* 모서리 핸들 */
+.ProseMirror [data-resize-handle='top-left'],
+.ProseMirror [data-resize-handle='top-right'],
+.ProseMirror [data-resize-handle='bottom-left'],
+.ProseMirror [data-resize-handle='bottom-right'] {
+  width: 8px;
+  height: 8px;
+}
+
+.ProseMirror [data-resize-handle='top-left'] {
+  top: -4px;
+  left: -4px;
+  cursor: nwse-resize;
+}
+
+.ProseMirror [data-resize-handle='top-right'] {
+  top: -4px;
+  right: -4px;
+  cursor: nesw-resize;
+}
+
+.ProseMirror [data-resize-handle='bottom-left'] {
+  bottom: -4px;
+  left: -4px;
+  cursor: nesw-resize;
+}
+
+.ProseMirror [data-resize-handle='bottom-right'] {
+  bottom: -4px;
+  right: -4px;
+  cursor: nwse-resize;
+}
+
+/* 상하 핸들 */
+.ProseMirror [data-resize-handle='top'],
+.ProseMirror [data-resize-handle='bottom'] {
+  height: 6px;
+  left: 8px;
+  right: 8px;
+}
+
+.ProseMirror [data-resize-handle='top'] {
+  top: -3px;
+  cursor: ns-resize;
+}
+
+.ProseMirror [data-resize-handle='bottom'] {
+  bottom: -3px;
+  cursor: ns-resize;
+}
+
+/* 좌우 핸들 */
+.ProseMirror [data-resize-handle='left'],
+.ProseMirror [data-resize-handle='right'] {
+  width: 6px;
+  top: 8px;
+  bottom: 8px;
+}
+
+.ProseMirror [data-resize-handle='left'] {
+  left: -3px;
+  cursor: ew-resize;
+}
+
+.ProseMirror [data-resize-handle='right'] {
+  right: -3px;
+  cursor: ew-resize;
+}
+
+.ProseMirror [data-resize-wrapper] img {
+  margin: 0 !important;
+}

package/src/styles/components/icon.css

@@ -0,0 +1,29 @@
+@utility icon-2xs {
+  width: var(--control-icon-2xs);
+  height: var(--control-icon-2xs);
+}
+
+@utility icon-xs {
+  width: var(--control-icon-xs);
+  height: var(--control-icon-xs);
+}
+
+@utility icon-sm {
+  width: var(--control-icon-sm);
+  height: var(--control-icon-sm);
+}
+
+@utility icon-md {
+  width: var(--control-icon-md);
+  height: var(--control-icon-md);
+}
+
+@utility icon-lg {
+  width: var(--control-icon-lg);
+  height: var(--control-icon-lg);
+}
+
+@utility icon-xl {
+  width: var(--control-icon-xl);
+  height: var(--control-icon-xl);
+}

package/src/styles/components/index.css

@@ -0,0 +1,9 @@
+@import './shared.css';
+@import './icon.css';
+@import './spinner.css';
+@import './button.css';
+@import './input.css';
+@import './badge.css';
+@import './modal.css';
+@import './editor.css';
+@import './bread-crumb.css';