@loword/loword-design-system 0.0.4 → 0.0.6

package/src/styles/components/input.css

@@ -0,0 +1,52 @@
+@theme {
+  /* padding-x: Input */
+  --control-padding-x-input-2xs: var(--spacing_4);
+  --control-padding-x-input-xs: var(--spacing_6);
+  --control-padding-x-input-sm: var(--spacing_10);
+  --control-padding-x-input-md: var(--spacing_12);
+  --control-padding-x-input-lg: var(--spacing_16);
+  --control-padding-x-input-xl: var(--spacing_20);
+}
+
+@utility input-2xs {
+  height: var(--control-height-2xs);
+  padding-inline: var(--control-padding-x-input-2xs);
+  border-radius: var(--control-radius-2xs);
+  border-width: var(--control-border-2xs);
+  @apply display10;
+}
+@utility input-xs {
+  height: var(--control-height-xs);
+  padding-inline: var(--control-padding-x-input-xs);
+  border-radius: var(--control-radius-xs);
+  border-width: var(--control-border-2xs);
+  @apply display12;
+}
+@utility input-sm {
+  height: var(--control-height-sm);
+  padding-inline: var(--control-padding-x-input-sm);
+  border-radius: var(--control-radius-sm);
+  border-width: var(--control-border-2xs);
+  @apply display14;
+}
+@utility input-md {
+  height: var(--control-height-md);
+  padding-inline: var(--control-padding-x-input-md);
+  border-radius: var(--control-radius-md);
+  border-width: var(--control-border-2xs);
+  @apply display16;
+}
+@utility input-lg {
+  height: var(--control-height-lg);
+  padding-inline: var(--control-padding-x-input-lg);
+  border-radius: var(--control-radius-lg);
+  border-width: var(--control-border-2xs);
+  @apply display18;
+}
+@utility input-xl {
+  height: var(--control-height-xl);
+  padding-inline: var(--control-padding-x-input-xl);
+  border-radius: var(--control-radius-xl);
+  border-width: var(--control-border-xs);
+  @apply display20;
+}

package/src/styles/components/modal.css

@@ -0,0 +1,25 @@
+/* small | medium | large | xlarge  */
+
+@theme {
+  --modal-width-sm: 400px;
+  --modal-width-md: 520px;
+  --modal-width-lg: 680px;
+  --modal-width-xl: 860px;
+  --modal-mobile-margin: px;
+}
+
+@utility modal-sm {
+  width: var(--modal-width-sm);
+}
+
+@utility modal-md {
+  width: var(--modal-width-md);
+}
+
+@utility modal-lg {
+  width: var(--modal-width-lg);
+}
+
+@utility modal-xl {
+  width: var(--modal-width-xl);
+}

package/src/styles/components/shared.css

@@ -0,0 +1,52 @@
+@theme {
+  /* height (축) */
+  --control-height-2xs: 16px;
+  --control-height-xs: 24px;
+  --control-height-sm: 32px;
+  --control-height-md: 40px;
+  --control-height-lg: 48px;
+  --control-height-xl: 64px;
+
+  /* radius */
+  --control-radius-2xs: var(--radius_2);
+  --control-radius-xs: var(--radius_4);
+  --control-radius-sm: var(--radius_6);
+  --control-radius-md: var(--radius_8);
+  --control-radius-lg: var(--radius_10);
+  --control-radius-xl: var(--radius_16);
+
+  /* icon size (≈ height * 0.5) */
+  --control-icon-2xs: 8px;
+  --control-icon-xs: 12px;
+  --control-icon-sm: 16px;
+  --control-icon-md: 20px;
+  --control-icon-lg: 24px;
+  --control-icon-xl: 28px;
+
+  /* gap (text ↔ icon) */
+  --control-gap-2xs: var(--spacing_2);
+  --control-gap-xs: var(--spacing_4);
+  --control-gap-sm: var(--spacing_6);
+  --control-gap-md: var(--spacing_8);
+  --control-gap-lg: var(--spacing_10);
+  --control-gap-xl: var(--spacing_12);
+
+  /* border width */
+  --control-border-2xs: 1px;
+  --control-border-xs: 2px;
+  --control-border-sm: 3px;
+  --control-border-md: 4px;
+  --control-border-lg: 5px;
+  --control-border-xl: 6px;
+
+  /* focus ring width */
+  --control-focus-ring-2xs: 1px;
+  --control-focus-ring-xs: 2px;
+  --control-focus-ring-sm: 3px;
+  --control-focus-ring-md: 4px;
+  --control-focus-ring-lg: 5px;
+  --control-focus-ring-xl: 6px;
+
+  /* font-weight (컴포넌트 공용) */
+  --control-font-weight: var(--font-medium);
+}

package/src/styles/components/spinner.css

@@ -0,0 +1,38 @@
+@theme {
+  --control-size-spinner-2xs: var(--spacing_8);
+  --control-size-spinner-xs: var(--spacing_12);
+  --control-size-spinner-sm: var(--spacing_16);
+  --control-size-spinner-md: var(--spacing_20);
+  --control-size-spinner-lg: var(--spacing_24);
+  --control-size-spinner-xl: var(--spacing_28);
+}
+
+@utility spinner-2xs {
+  width: var(--control-size-spinner-2xs);
+  height: var(--control-size-spinner-2xs);
+}
+
+@utility spinner-xs {
+  width: var(--control-size-spinner-xs);
+  height: var(--control-size-spinner-xs);
+}
+
+@utility spinner-sm {
+  width: var(--control-size-spinner-sm);
+  height: var(--control-size-spinner-sm);
+}
+
+@utility spinner-md {
+  width: var(--control-size-spinner-md);
+  height: var(--control-size-spinner-md);
+}
+
+@utility spinner-lg {
+  width: var(--control-size-spinner-lg);
+  height: var(--control-size-spinner-lg);
+}
+
+@utility spinner-xl {
+  width: var(--control-size-spinner-xl);
+  height: var(--control-size-spinner-xl);
+}

package/src/styles/focus.css

@@ -0,0 +1,12 @@
+/* ==================== focus ==================== */
+/* 포커스 시 outline을 강조 */
+@utility ld-outline {
+  outline: 3px solid transparent;
+  transition: all 300ms ease-out;
+  border: 1px solid var(--color-mono10);
+
+  &:focus {
+    outline: 3px solid var(--color-lb500);
+    border: 0px;
+  }
+}

package/src/styles/gradient.css

@@ -0,0 +1,41 @@
+/* ==================== text gradient ==================== */
+/* 텍스트에 그라데이션을 적용 */
+@utility gradient-text {
+  background: linear-gradient(to right, #06f, #c0f, #f00);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@utility gradient-text2 {
+  background: linear-gradient(90deg, #9f21ff 0%, #d427db 50.96%, #f6214b 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* ==================== gradient motion ==================== */
+/* 그라데이션 배경 이동 애니메이션 */
+@utility animate-gradient {
+  animation: gradient 8s linear infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* ==================== performance ==================== */
+/* 그라데이션 렌더링 최적화 */
+@utility gradient-options {
+  will-change: transform;
+  transform: translateZ(0);
+  contain: layout style paint;
+}

package/src/styles/layout.css

@@ -0,0 +1,19 @@
+@theme {
+  /* layout size */
+  --size_xs: 480px;
+  --size_sm: 576px;
+  --size_md: 768px;
+  --size_lg: 992px;
+  --size_xl: 1200px;
+  --size_2xl: 1600px;
+  --size_3xl: 1920px;
+
+  /* width layout */
+  --width-layout_xs: var(--size_xs);
+  --width-layout_sm: var(--size_sm);
+  --width-layout_md: var(--size_md);
+  --width-layout_lg: var(--size_lg);
+  --width-layout_xl: var(--size_xl);
+  --width-layout_2xl: var(--size_2xl);
+  --width-layout_3xl: var(--size_3xl);
+}

package/src/styles/motion.css

@@ -0,0 +1,235 @@
+/* ==================== transition ==================== */
+/* 상태 전환을 부드럽게 처리 */
+@utility ld-transition {
+  transition: all 300ms ease-out;
+}
+
+/* ==================== error ==================== */
+/* 에러 메시지 등장/퇴장 */
+@keyframes error-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes error-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* ==================== shake ==================== */
+/* 흔들림 피드백 */
+@utility animate-shake {
+  animation: shake 0.1s ease-in-out 2;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+
+/* ==================== collapsible ==================== */
+/* 펼침/접힘 모션 */
+@utility animate-down {
+  animation: collapsible-down 300ms ease-in-out;
+}
+
+@utility animate-up {
+  animation: collapsible-up 300ms ease-in-out;
+}
+
+@keyframes collapsible-down {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ==================== plan ==================== */
+/* plan 패널 등장/퇴장 */
+@utility plan-enter {
+  animation: plan-enter 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+@utility plan-leave {
+  animation: plan-leave 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes plan-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes plan-leave {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+/* ==================== plan slide ==================== */
+/* plan 패널 폭 슬라이드 */
+@utility plan-slide-enter {
+  animation: plan-slide-enter-w 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  will-change: width;
+}
+
+@utility plan-slide-leave {
+  animation: plan-slide-leave-w 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
+  will-change: width;
+}
+
+@keyframes plan-slide-enter-w {
+  from {
+    width: 0;
+    max-width: 0;
+  }
+  to {
+    width: 300px;
+    max-width: 300px;
+  }
+}
+
+@keyframes plan-slide-leave-w {
+  from {
+    width: 300px;
+    max-width: 300px;
+  }
+  to {
+    width: 0;
+    max-width: 0;
+  }
+}
+
+/* ==================== spin ==================== */
+/* 1회 회전 */
+@keyframes spin-once {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@utility spin-once {
+  animation: spin-once 1000ms;
+}
+
+/* ==================== migration ==================== */
+/* migration 드롭 모션 */
+@keyframes migration-drop {
+  0% {
+    transform: translateX(-50%) translateY(-200px)
+      rotate(calc(var(--rf) + 18deg)) scale(0.98);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-50%) translateY(0) rotate(var(--rf));
+    opacity: 1;
+  }
+}
+
+@utility migration-drop {
+  animation: migration-drop var(--dur, 1.1s) cubic-bezier(0.16, 0.9, 0.1, 1)
+    both;
+}
+
+@utility migration-variation {
+  position: absolute;
+  left: 50%;
+  will-change: transform, opacity;
+}
+
+/* migration 드롭 모바일 버전 */
+@keyframes migration-drop-mobile {
+  0% {
+    transform: translateX(-50%) translateY(-100px)
+      rotate(calc(var(--rf) + 18deg)) scale(0.98);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-50%) translateY(0) rotate(var(--rf));
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .migration-drop {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: translateX(-50%) translateY(0) rotate(var(--rf));
+  }
+}
+
+@media (max-width: 1080px) {
+  .migration-drop {
+    animation: migration-drop-mobile var(--dur, 1.1s)
+      cubic-bezier(0.16, 0.9, 0.1, 1) both;
+  }
+}
+
+/* ==================== fade ==================== */
+/* 일반 fade-in */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@utility animate-fade-in {
+  animation: fade-in 300ms ease-out forwards;
+}
+
+@utility animate-fade-out {
+  animation: fade-out 300ms ease-out forwards;
+}

package/src/styles/radius.css

@@ -0,0 +1,8 @@
+@theme {
+  --radius_2: 2px;
+  --radius_4: 4px;
+  --radius_6: 6px;
+  --radius_8: 8px;
+  --radius_10: 10px;
+  --radius_16: 16px;
+}

package/src/styles/responsive.css

@@ -0,0 +1,42 @@
+@variant responsive_layout_min_xs  (@media (min-width: theme(--size_xs)));
+@variant responsive_layout_max_xs  (@media (max-width: calc(theme(--size_xs) - 1px)));
+@variant responsive_layout_min_sm  (@media (min-width: theme(--size_sm)));
+@variant responsive_layout_max_sm  (@media (max-width: calc(theme(--size_sm) - 1px)));
+@variant responsive_layout_min_md  (@media (min-width: theme(--size_md)));
+@variant responsive_layout_max_md  (@media (max-width: calc(theme(--size_md) - 1px)));
+@variant responsive_layout_min_lg  (@media (min-width: theme(--size_lg)));
+@variant responsive_layout_max_lg  (@media (max-width: calc(theme(--size_lg) - 1px)));
+@variant responsive_layout_min_xl  (@media (min-width: theme(--size_xl)));
+@variant responsive_layout_max_xl  (@media (max-width: calc(theme(--size_xl) - 1px)));
+@variant responsive_layout_min_2xl (@media (min-width: theme(--size_2xl)));
+@variant responsive_layout_max_2xl (@media (max-width: calc(theme(--size_2xl) - 1px)));
+@variant responsive_layout_min_3xl (@media (min-width: theme(--size_3xl)));
+@variant responsive_layout_max_3xl (@media (max-width: calc(theme(--size_3xl) - 1px)));
+
+@custom-variant mobile {
+  @variant responsive_layout_max_md {
+    @slot;
+  }
+}
+@custom-variant tablet {
+  @variant responsive_layout_min_md {
+    @variant responsive_layout_max_lg {
+      @slot;
+    }
+  }
+}
+@custom-variant tablet-up {
+  @variant responsive_layout_min_md {
+    @slot;
+  }
+}
+@custom-variant tablet-down {
+  @variant responsive_layout_max_lg {
+    @slot;
+  }
+}
+@custom-variant pc {
+  @variant responsive_layout_min_lg {
+    @slot;
+  }
+}

package/src/styles/scrollbar.css

@@ -0,0 +1,59 @@
+/* ==================== scrollbar ==================== */
+/* 스크롤은 유지하고 스크롤바는 숨김 */
+@utility scrollbar-hide {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+}
+
+/* hover 시 스크롤바를 드러냄 */
+@utility scrollbar-hover {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    animation: scrollbar-fade-in 0.3s ease forwards;
+  }
+
+  &:not(:hover)::-webkit-scrollbar-thumb {
+    animation: scrollbar-fade-out 0.3s ease forwards;
+  }
+}
+
+@keyframes scrollbar-fade-in {
+  from {
+    background: transparent;
+  }
+  to {
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+@keyframes scrollbar-fade-out {
+  from {
+    background: rgba(0, 0, 0, 0.3);
+  }
+  to {
+    background: transparent;
+  }
+}

package/src/styles/slider.css

@@ -0,0 +1,65 @@
+.ld-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.ld-slider-thumb::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+.ld-slider-thumb::-moz-range-track {
+  background: transparent;
+}
+
+.ld-slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--color-lb500);
+  border: 2px solid white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
+  pointer-events: auto;
+}
+
+.ld-slider-thumb::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 2px 8px rgba(104, 145, 248, 0.4);
+}
+
+.ld-slider-thumb::-webkit-slider-thumb:active {
+  transform: scale(1.25);
+}
+
+.ld-slider-thumb::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--color-lb500);
+  border: 2px solid white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.ld-slider-thumb:disabled::-webkit-slider-thumb {
+  background-color: var(--color-mono300);
+  cursor: not-allowed;
+}
+
+.ld-slider-thumb:disabled::-moz-range-thumb {
+  background-color: var(--color-mono300);
+  cursor: not-allowed;
+}
+
+.ld-slider-thumb-active::-webkit-slider-thumb {
+  pointer-events: auto;
+}
+
+.ld-slider-thumb-inactive::-webkit-slider-thumb {
+  pointer-events: none;
+}