@loword/loword-design-system 0.0.4 → 0.0.6

package/src/styles/spacing.css

@@ -0,0 +1,592 @@
+@theme {
+  --spacing_1: 1px;
+  --spacing_2: 2px;
+  --spacing_4: 4px;
+  --spacing_6: 6px;
+  --spacing_8: 8px;
+  --spacing_10: 10px;
+  --spacing_12: 12px;
+  --spacing_14: 14px;
+  --spacing_16: 16px;
+  --spacing_18: 18px;
+  --spacing_20: 20px;
+  --spacing_22: 22px;
+  --spacing_24: 24px;
+  --spacing_28: 28px;
+  --spacing_32: 32px;
+  --spacing_36: 36px;
+  --spacing_40: 40px;
+  --spacing_44: 44px;
+  --spacing_48: 48px;
+  --spacing_52: 52px;
+  --spacing_56: 56px;
+  --spacing_60: 60px;
+  --spacing_64: 64px;
+  --spacing_72: 72px;
+  --spacing_80: 80px;
+  --spacing_88: 88px;
+  --spacing_96: 96px;
+  --spacing_104: 104px;
+  --spacing_112: 112px;
+  --spacing_120: 120px;
+  --spacing_128: 128px;
+  --spacing_136: 136px;
+  --spacing_144: 144px;
+  --spacing_152: 152px;
+  --spacing_160: 160px;
+  --spacing_168: 168px;
+  --spacing_176: 176px;
+  --spacing_184: 184px;
+  --spacing_192: 192px;
+  --spacing_200: 200px;
+  --spacing_208: 208px;
+  --spacing_216: 216px;
+  --spacing_224: 224px;
+  --spacing_232: 232px;
+  --spacing_240: 240px;
+}
+
+/* gap */
+@utility gap-4xs {
+  gap: var(--spacing_1);
+}
+@utility gap-3xs {
+  gap: var(--spacing_2);
+}
+@utility gap-2xs {
+  gap: var(--spacing_4);
+}
+@utility gap-xs {
+  gap: var(--spacing_8);
+}
+@utility gap-sm {
+  gap: var(--spacing_12);
+}
+@utility gap-md {
+  gap: var(--spacing_20);
+}
+@utility gap-lg {
+  gap: var(--spacing_32);
+}
+@utility gap-xl {
+  gap: var(--spacing_40);
+}
+@utility gap-2xl {
+  gap: var(--spacing_64);
+}
+@utility gap-3xl {
+  gap: var(--spacing_128);
+}
+@utility gap-4xl {
+  gap: var(--spacing_200);
+}
+
+/* padding */
+@utility p-4xs {
+  padding: var(--spacing_1);
+}
+@utility px-4xs {
+  padding-left: var(--spacing_1);
+  padding-right: var(--spacing_1);
+}
+@utility py-4xs {
+  padding-top: var(--spacing_1);
+  padding-bottom: var(--spacing_1);
+}
+@utility pt-4xs {
+  padding-top: var(--spacing_1);
+}
+@utility pb-4xs {
+  padding-bottom: var(--spacing_1);
+}
+@utility pr-4xs {
+  padding-right: var(--spacing_1);
+}
+@utility pl-4xs {
+  padding-left: var(--spacing_1);
+}
+@utility p-3xs {
+  padding: var(--spacing_2);
+}
+@utility px-3xs {
+  padding-left: var(--spacing_2);
+  padding-right: var(--spacing_2);
+}
+@utility py-3xs {
+  padding-top: var(--spacing_2);
+  padding-bottom: var(--spacing_2);
+}
+@utility pt-3xs {
+  padding-top: var(--spacing_2);
+}
+@utility pb-3xs {
+  padding-bottom: var(--spacing_2);
+}
+@utility pr-3xs {
+  padding-right: var(--spacing_2);
+}
+@utility pl-3xs {
+  padding-left: var(--spacing_2);
+}
+@utility p-2xs {
+  padding: var(--spacing_4);
+}
+@utility px-2xs {
+  padding-left: var(--spacing_4);
+  padding-right: var(--spacing_4);
+}
+@utility py-2xs {
+  padding-top: var(--spacing_4);
+  padding-bottom: var(--spacing_4);
+}
+@utility pt-2xs {
+  padding-top: var(--spacing_4);
+}
+@utility pb-2xs {
+  padding-bottom: var(--spacing_4);
+}
+@utility pr-2xs {
+  padding-right: var(--spacing_4);
+}
+@utility pl-2xs {
+  padding-left: var(--spacing_4);
+}
+@utility p-xs {
+  padding: var(--spacing_8);
+}
+@utility px-xs {
+  padding-left: var(--spacing_8);
+  padding-right: var(--spacing_8);
+}
+@utility py-xs {
+  padding-top: var(--spacing_8);
+  padding-bottom: var(--spacing_8);
+}
+@utility pt-xs {
+  padding-top: var(--spacing_8);
+}
+@utility pb-xs {
+  padding-bottom: var(--spacing_8);
+}
+@utility pr-xs {
+  padding-right: var(--spacing_8);
+}
+@utility pl-xs {
+  padding-left: var(--spacing_8);
+}
+@utility p-sm {
+  padding: var(--spacing_12);
+}
+@utility px-sm {
+  padding-left: var(--spacing_12);
+  padding-right: var(--spacing_12);
+}
+@utility py-sm {
+  padding-top: var(--spacing_12);
+  padding-bottom: var(--spacing_12);
+}
+@utility pt-sm {
+  padding-top: var(--spacing_12);
+}
+@utility pb-sm {
+  padding-bottom: var(--spacing_12);
+}
+@utility pr-sm {
+  padding-right: var(--spacing_12);
+}
+@utility pl-sm {
+  padding-left: var(--spacing_12);
+}
+@utility p-md {
+  padding: var(--spacing_20);
+}
+@utility px-md {
+  padding-left: var(--spacing_20);
+  padding-right: var(--spacing_20);
+}
+@utility py-md {
+  padding-top: var(--spacing_20);
+  padding-bottom: var(--spacing_20);
+}
+@utility pt-md {
+  padding-top: var(--spacing_20);
+}
+@utility pb-md {
+  padding-bottom: var(--spacing_20);
+}
+@utility pr-md {
+  padding-right: var(--spacing_20);
+}
+@utility pl-md {
+  padding-left: var(--spacing_20);
+}
+@utility p-lg {
+  padding: var(--spacing_32);
+}
+@utility px-lg {
+  padding-left: var(--spacing_32);
+  padding-right: var(--spacing_32);
+}
+@utility py-lg {
+  padding-top: var(--spacing_32);
+  padding-bottom: var(--spacing_32);
+}
+@utility pt-lg {
+  padding-top: var(--spacing_32);
+}
+@utility pb-lg {
+  padding-bottom: var(--spacing_32);
+}
+@utility pr-lg {
+  padding-right: var(--spacing_32);
+}
+@utility pl-lg {
+  padding-left: var(--spacing_32);
+}
+@utility p-xl {
+  padding: var(--spacing_40);
+}
+@utility px-xl {
+  padding-left: var(--spacing_40);
+  padding-right: var(--spacing_40);
+}
+@utility py-xl {
+  padding-top: var(--spacing_40);
+  padding-bottom: var(--spacing_40);
+}
+@utility pt-xl {
+  padding-top: var(--spacing_40);
+}
+@utility pb-xl {
+  padding-bottom: var(--spacing_40);
+}
+@utility pr-xl {
+  padding-right: var(--spacing_40);
+}
+@utility pl-xl {
+  padding-left: var(--spacing_40);
+}
+@utility p-2xl {
+  padding: var(--spacing_64);
+}
+@utility px-2xl {
+  padding-left: var(--spacing_64);
+  padding-right: var(--spacing_64);
+}
+@utility py-2xl {
+  padding-top: var(--spacing_64);
+  padding-bottom: var(--spacing_64);
+}
+@utility pt-2xl {
+  padding-top: var(--spacing_64);
+}
+@utility pb-2xl {
+  padding-bottom: var(--spacing_64);
+}
+@utility pr-2xl {
+  padding-right: var(--spacing_64);
+}
+@utility pl-2xl {
+  padding-left: var(--spacing_64);
+}
+@utility p-3xl {
+  padding: var(--spacing_128);
+}
+@utility px-3xl {
+  padding-left: var(--spacing_128);
+  padding-right: var(--spacing_128);
+}
+@utility py-3xl {
+  padding-top: var(--spacing_128);
+  padding-bottom: var(--spacing_128);
+}
+@utility pt-3xl {
+  padding-top: var(--spacing_128);
+}
+@utility pb-3xl {
+  padding-bottom: var(--spacing_128);
+}
+@utility pr-3xl {
+  padding-right: var(--spacing_128);
+}
+@utility pl-3xl {
+  padding-left: var(--spacing_128);
+}
+@utility p-4xl {
+  padding: var(--spacing_200);
+}
+@utility px-4xl {
+  padding-left: var(--spacing_200);
+  padding-right: var(--spacing_200);
+}
+@utility py-4xl {
+  padding-top: var(--spacing_200);
+  padding-bottom: var(--spacing_200);
+}
+@utility pt-4xl {
+  padding-top: var(--spacing_200);
+}
+@utility pb-4xl {
+  padding-bottom: var(--spacing_200);
+}
+@utility pr-4xl {
+  padding-right: var(--spacing_200);
+}
+@utility pl-4xl {
+  padding-left: var(--spacing_200);
+}
+
+/* margin */
+@utility m-4xs {
+  margin: var(--spacing_1);
+}
+@utility mx-4xs {
+  margin-left: var(--spacing_1);
+  margin-right: var(--spacing_1);
+}
+@utility my-4xs {
+  margin-top: var(--spacing_1);
+  margin-bottom: var(--spacing_1);
+}
+@utility mt-4xs {
+  margin-top: var(--spacing_1);
+}
+@utility mb-4xs {
+  margin-bottom: var(--spacing_1);
+}
+@utility mr-4xs {
+  margin-right: var(--spacing_1);
+}
+@utility ml-4xs {
+  margin-left: var(--spacing_1);
+}
+@utility m-3xs {
+  margin: var(--spacing_2);
+}
+@utility mx-3xs {
+  margin-left: var(--spacing_2);
+  margin-right: var(--spacing_2);
+}
+@utility my-3xs {
+  margin-top: var(--spacing_2);
+  margin-bottom: var(--spacing_2);
+}
+@utility mt-3xs {
+  margin-top: var(--spacing_2);
+}
+@utility mb-3xs {
+  margin-bottom: var(--spacing_2);
+}
+@utility mr-3xs {
+  margin-right: var(--spacing_2);
+}
+@utility ml-3xs {
+  margin-left: var(--spacing_2);
+}
+@utility m-2xs {
+  margin: var(--spacing_4);
+}
+@utility mx-2xs {
+  margin-left: var(--spacing_4);
+  margin-right: var(--spacing_4);
+}
+@utility my-2xs {
+  margin-top: var(--spacing_4);
+  margin-bottom: var(--spacing_4);
+}
+@utility mt-2xs {
+  margin-top: var(--spacing_4);
+}
+@utility mb-2xs {
+  margin-bottom: var(--spacing_4);
+}
+@utility mr-2xs {
+  margin-right: var(--spacing_4);
+}
+@utility ml-2xs {
+  margin-left: var(--spacing_4);
+}
+@utility m-xs {
+  margin: var(--spacing_8);
+}
+@utility mx-xs {
+  margin-left: var(--spacing_8);
+  margin-right: var(--spacing_8);
+}
+@utility my-xs {
+  margin-top: var(--spacing_8);
+  margin-bottom: var(--spacing_8);
+}
+@utility mt-xs {
+  margin-top: var(--spacing_8);
+}
+@utility mb-xs {
+  margin-bottom: var(--spacing_8);
+}
+@utility mr-xs {
+  margin-right: var(--spacing_8);
+}
+@utility ml-xs {
+  margin-left: var(--spacing_8);
+}
+@utility m-sm {
+  margin: var(--spacing_12);
+}
+@utility mx-sm {
+  margin-left: var(--spacing_12);
+  margin-right: var(--spacing_12);
+}
+@utility my-sm {
+  margin-top: var(--spacing_12);
+  margin-bottom: var(--spacing_12);
+}
+@utility mt-sm {
+  margin-top: var(--spacing_12);
+}
+@utility mb-sm {
+  margin-bottom: var(--spacing_12);
+}
+@utility mr-sm {
+  margin-right: var(--spacing_12);
+}
+@utility ml-sm {
+  margin-left: var(--spacing_12);
+}
+@utility m-md {
+  margin: var(--spacing_20);
+}
+@utility mx-md {
+  margin-left: var(--spacing_20);
+  margin-right: var(--spacing_20);
+}
+@utility my-md {
+  margin-top: var(--spacing_20);
+  margin-bottom: var(--spacing_20);
+}
+@utility mt-md {
+  margin-top: var(--spacing_20);
+}
+@utility mb-md {
+  margin-bottom: var(--spacing_20);
+}
+@utility mr-md {
+  margin-right: var(--spacing_20);
+}
+@utility ml-md {
+  margin-left: var(--spacing_20);
+}
+@utility m-lg {
+  margin: var(--spacing_32);
+}
+@utility mx-lg {
+  margin-left: var(--spacing_32);
+  margin-right: var(--spacing_32);
+}
+@utility my-lg {
+  margin-top: var(--spacing_32);
+  margin-bottom: var(--spacing_32);
+}
+@utility mt-lg {
+  margin-top: var(--spacing_32);
+}
+@utility mb-lg {
+  margin-bottom: var(--spacing_32);
+}
+@utility mr-lg {
+  margin-right: var(--spacing_32);
+}
+@utility ml-lg {
+  margin-left: var(--spacing_32);
+}
+@utility m-xl {
+  margin: var(--spacing_40);
+}
+@utility mx-xl {
+  margin-left: var(--spacing_40);
+  margin-right: var(--spacing_40);
+}
+@utility my-xl {
+  margin-top: var(--spacing_40);
+  margin-bottom: var(--spacing_40);
+}
+@utility mt-xl {
+  margin-top: var(--spacing_40);
+}
+@utility mb-xl {
+  margin-bottom: var(--spacing_40);
+}
+@utility mr-xl {
+  margin-right: var(--spacing_40);
+}
+@utility ml-xl {
+  margin-left: var(--spacing_40);
+}
+@utility m-2xl {
+  margin: var(--spacing_64);
+}
+@utility mx-2xl {
+  margin-left: var(--spacing_64);
+  margin-right: var(--spacing_64);
+}
+@utility my-2xl {
+  margin-top: var(--spacing_64);
+  margin-bottom: var(--spacing_64);
+}
+@utility mt-2xl {
+  margin-top: var(--spacing_64);
+}
+@utility mb-2xl {
+  margin-bottom: var(--spacing_64);
+}
+@utility mr-2xl {
+  margin-right: var(--spacing_64);
+}
+@utility ml-2xl {
+  margin-left: var(--spacing_64);
+}
+@utility m-3xl {
+  margin: var(--spacing_128);
+}
+@utility mx-3xl {
+  margin-left: var(--spacing_128);
+  margin-right: var(--spacing_128);
+}
+@utility my-3xl {
+  margin-top: var(--spacing_128);
+  margin-bottom: var(--spacing_128);
+}
+@utility mt-3xl {
+  margin-top: var(--spacing_128);
+}
+@utility mb-3xl {
+  margin-bottom: var(--spacing_128);
+}
+@utility mr-3xl {
+  margin-right: var(--spacing_128);
+}
+@utility ml-3xl {
+  margin-left: var(--spacing_128);
+}
+@utility m-4xl {
+  margin: var(--spacing_200);
+}
+@utility mx-4xl {
+  margin-left: var(--spacing_200);
+  margin-right: var(--spacing_200);
+}
+@utility my-4xl {
+  margin-top: var(--spacing_200);
+  margin-bottom: var(--spacing_200);
+}
+@utility mt-4xl {
+  margin-top: var(--spacing_200);
+}
+@utility mb-4xl {
+  margin-bottom: var(--spacing_200);
+}
+@utility mr-4xl {
+  margin-right: var(--spacing_200);
+}
+@utility ml-4xl {
+  margin-left: var(--spacing_200);
+}

package/src/styles/text-utils.css

@@ -0,0 +1,7 @@
+/* ==================== text ==================== */
+/* 긴 텍스트를 한 줄로 말줄임 */
+@utility ld-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}