@loword/loword-design-system 0.0.7 → 0.0.9

package/src/styles/components/button.css

@@ -23,161 +23,163 @@
  * 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;
-}
+@layer components {
+  .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;
-}
+  .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;
-}
+  .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;
-}
+  .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;
-}
+  .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;
-}
+  .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;
-}
+  /* track */
+  .toggle-track-xs {
+    width: 28px;
+    height: 14px;
+  }
+  .toggle-track-sm {
+    width: 32px;
+    height: 16px;
+  }
+  .toggle-track-md {
+    width: 36px;
+    height: 18px;
+  }
+  .toggle-track-lg {
+    width: 40px;
+    height: 20px;
+  }
+  .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 */
+  .toggle-thumb-xs {
+    width: 10px;
+    height: 10px;
+  }
+  .toggle-thumb-sm {
+    width: 12px;
+    height: 12px;
+  }
+  .toggle-thumb-md {
+    width: 14px;
+    height: 14px;
+  }
+  .toggle-thumb-lg {
+    width: 16px;
+    height: 16px;
+  }
+  .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 unchecked */
+  .toggle-thumb-off-xs {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-sm {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-md {
+    left: var(--toggle-gap);
+  }
+  .toggle-thumb-off-lg {
+    left: var(--toggle-gap);
+  }
+  .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 */
+  /* thumb checked */
+  .toggle-thumb-on-xs {
+    left: 16px;
+  } /* 28 - 10 - 2 */
+  .toggle-thumb-on-sm {
+    left: 18px;
+  } /* 32 - 12 - 2 */
+  .toggle-thumb-on-md {
+    left: 20px;
+  } /* 36 - 14 - 2 */
+  .toggle-thumb-on-lg {
+    left: 22px;
+  } /* 40 - 16 - 2 */
+  .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;
+  /* root font */
+  .toggle-xs {
+    @apply display12;
+  }
+  .toggle-sm {
+    @apply display12;
+  }
+  .toggle-md {
+    @apply display14;
+  }
+  .toggle-lg {
+    @apply display14;
+  }
+  .toggle-xl {
+    @apply display16;
+  }
 }

package/src/styles/components/icon.css

@@ -1,29 +1,31 @@
-@utility icon-2xs {
-  width: var(--control-icon-2xs);
-  height: var(--control-icon-2xs);
-}
+@layer components {
+  .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);
-}
+  .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);
-}
+  .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);
-}
+  .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);
-}
+  .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);
+  .icon-xl {
+    width: var(--control-icon-xl);
+    height: var(--control-icon-xl);
+  }
 }

package/src/styles/components/index.css

@@ -8,3 +8,4 @@
 @import './editor.css';
 @import './bread-crumb.css';
 @import './auto-complete.css';
+@import './team-history.css';

package/src/styles/components/input.css

@@ -8,45 +8,47 @@
   --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;
+@layer components {
+  .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;
+  }
+  .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;
+  }
+  .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;
+  }
+  .input-md {
+    height: var(--control-height-md);
+    padding-inline: var(--control-padding-x-input-md);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-2xs);
+    @apply display16;
+  }
+  .input-lg {
+    height: var(--control-height-lg);
+    padding-inline: var(--control-padding-x-input-lg);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-2xs);
+    @apply display18;
+  }
+  .input-xl {
+    height: var(--control-height-xl);
+    padding-inline: var(--control-padding-x-input-xl);
+    border-radius: var(--control-radius-sm);
+    border-width: var(--control-border-xs);
+    @apply display20;
+  }
 }

package/src/styles/components/modal.css

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

package/src/styles/components/shared.css

@@ -1,7 +1,7 @@
 @theme {
   /* height (축) */
-  --control-height-2xs: 16px;
-  --control-height-xs: 24px;
+  --control-height-2xs: 24px;
+  --control-height-xs: 28px;
   --control-height-sm: 32px;
   --control-height-md: 40px;
   --control-height-lg: 48px;

package/src/styles/components/spinner.css

@@ -7,32 +7,34 @@
   --control-size-spinner-xl: var(--spacing_28);
 }
 
-@utility spinner-2xs {
-  width: var(--control-size-spinner-2xs);
-  height: var(--control-size-spinner-2xs);
-}
+@layer components {
+  .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);
-}
+  .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);
-}
+  .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);
-}
+  .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);
-}
+  .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);
+  .spinner-xl {
+    width: var(--control-size-spinner-xl);
+    height: var(--control-size-spinner-xl);
+  }
 }

package/src/styles/components/team-history.css

@@ -0,0 +1,10 @@
+/* 연결선: 스크롤 진행도(--ld-line-fill, 0%~100%)만큼 위에서부터 채워진다. */
+@layer components {
+  .team-history-line {
+    background-image: linear-gradient(
+      to bottom,
+      var(--color-lb500) var(--ld-line-fill, 0%),
+      var(--color-lb100) var(--ld-line-fill, 0%)
+    );
+  }
+}

package/src/styles/focus.css

@@ -3,7 +3,7 @@
 @utility ld-outline {
   outline: 3px solid transparent;
   transition: all 300ms ease-out;
-  border: 1px solid var(--color-mono10);
+  border: 1px solid var(--color-mono100);
 
   &:focus {
     outline: 3px solid var(--color-lb500);