@jk-core/components 1.1.9 → 1.1.11

package/src/styles/color.scss

@@ -1,94 +1,346 @@
-:root {
-  --white: #ffffff;
-  --black: #000000;
-  --P-5: #eff5ff;
-  --P-10: #d3e1fb;
-  --P-20: #a7c4f7;
-  --P-30: #7ca6f3;
-  --P-40: #5089ef;
-  --P-50: #246beb;
-  --P-60: #1d56bc;
-  --P-70: #16408d;
-  --P-90: #07152f;
-  --P-100: #000000;
-  --S-5: #edf1f5;
-  --S-10: #cdd7e4;
-  --S-20: #b4c4d6;
-  --S-30: #99b0cb;
-  --S-40: #6B96C7;
-  --S-50: #346FB2;
-  --S-60: #1C589C;
-  --S-70: #063a74;
-  --S-80: #00162f;
-  --S-90: #000b17;
-  --G-5: #f8f8f8;
-  --G-10: #f0f0f0;
-  --G-20: #e4e4e4;
-  --G-30: #d8d8d8;
-  --G-40: #c6c6c6;
-  --G-50: #8e8e8e;
-  --G-60: #717171;
-  --G-70: #555555;
-  --G-80: #2d2d2d;
-  --G-90: #1d1d1d;
-  --Point-5: #fdf2f3;
-  --Point-10: #f8d6d8;
-  --Point-20: #f5a3a8;
-  --Point-30: #f1747c;
-  --Point-40: #ec4651;
-  --Point-50: #e71825;
-  --Point-60: #b9131e;
-  --Point-70: #8b0e16;
-  --Point-80: #5c0a0f;
-  --Point-90: #2e0507;
-  --Warning-5: #fff8e9;
-  --Warning-10: #ffeac1;
-  --Warning-20: #ffe2a7;
-  --Warning-30: #ffd47c;
-  --Warning-40: #ffc550;
-  --Warning-50: #ffb724;
-  --Warning-60: #98690a;
-  --Warning-70: #66490e;
-  --Warning-80: #4d370b;
-  --Warning-90: #332507;
-  --Success-5: #eef7f0;
-  --Success-10: #cee9d4;
-  --Success-20: #b2dcbb;
-  --Success-30: #8cca99;
-  --Success-40: #33a14b;
-  --Success-50: #008a1e;
-  --Success-60: #006e18;
-  --Success-70: #005312;
-  --Success-80: #00370c;
-  --Success-90: #002207;
-  --Info-5: #e9f0ff;
-  --Info-10: #d4e1ff;
-  --Info-20: #a9c3ff;
-  --Info-30: #7da4ff;
-  --Info-40: #5286ff;
-  --Info-50: #2768ff;
-  --Info-60: #1f53cc;
-  --Info-70: #173e99;
-  --Info-80: #0c1f4d;
-  --Info-90: #040a1a;
-  --Red: #e40000;
-  --Red2: #ffe4e4;
-  --Green: #2fb400;
-  --Green-2: #d7ffe0;
-  --Orange: #ff8800;
-  --Orange-5: #ffead1;
-  --Orange-10: #ffdacc;
-  --Orange-30: #ff8f66;
-  --Orange-40: #ff6a33;
-  --Orange-50: #ff4500;
-  --Orange-60: #d53209;
-  --Orange-70: #992900;
-  --Orange-80: #661c00;
-  --Orange-90: #330e00;
-  --Modal-Shadow: #0000005a;
-  --Modal-Background: #6666663a;
-  --loading: #6666663a;
-  --loading-color: #ffffff;
-  --loading-shadow: #00000033;
-  --loading-spinner: #222222;
-}
+:root {
+  --white: #ffffff;
+  --black: #000000;
+
+  /**
+  * Key_Color_(KRDS_v1.0.0)
+  */
+  --P-5: #ecf2fe;
+  --P-10: #d8e5fd;
+  --P-20: #b1cefb;
+  --P-30: #86aff9;
+  --P-40: #4c87f6;
+  --P-50: #256ef4;
+  --P-60: #0b50d0;
+  --P-70: #083891;
+  --P-90: #07152f;
+  --S-5: #eef2f7;
+  --S-10: #d6e0eb;
+  --S-20: #bacbde;
+  --S-30: #90b0d5;
+  --S-40: #6b96c7;
+  --S-50: #346fb2;
+  --S-60: #1c589c;
+  --S-70: #063a74;
+  --S-80: #052b57;
+  --S-90: #031f3f;
+  --G-3: #f8f8f8;
+  --G-5: #f4f5f6;
+  --G-10: #e6e8ea;
+  --G-20: #cdd1d5;
+  --G-30: #b1b8be;
+  --G-40: #8a949e;
+  --G-50: #6d7882;
+  --G-60: #58616a;
+  --G-70: #464c53;
+  --G-80: #33363d;
+  --G-90: #1e2124;
+  --Point-5: #fbeff0;
+  --Point-10: #f5d6d9;
+  --Point-20: #ebadb2;
+  --Point-30: #e0858c;
+  --Point-40: #d65c66;
+  --Point-50: #d63d4a;
+  --Point-60: #ab2b36;
+  --Point-70: #7a1f26;
+  --Point-80: #521419;
+  --Point-90: #310c0f;
+
+  /**
+  * System_Color_(KRDS_v1.0.0)
+  */
+  --Danger-5: #fcdfd9;
+  --Danger-10: #fcdfd9;
+  --Danger-20: #f7afa1;
+  --Danger-30: #f48771;
+  --Danger-40: #f05f42;
+  --Danger-50: #de3412;
+  --Danger-60: #bd2c0f;
+  --Danger-70: #8a240f;
+  --Danger-80: #5c180a;
+  --Danger-90: #390d05;
+  --Warning-5: #fff3db;
+  --Warning-10: #ffe0a3;
+  --Warning-20: #ffc95c;
+  --Warning-30: #ffb114;
+  --Warning-40: #c78500;
+  --Warning-50: #9e6a00;
+  --Warning-60: #8a5c00;
+  --Warning-70: #614100;
+  --Warning-80: #422c00;
+  --Warning-90: #2e1f00;
+  --Success-5: #eaf6ec;
+  --Success-10: #d8eedd;
+  --Success-20: #a9dab4;
+  --Success-30: #7ec88e;
+  --Success-40: #3fa654;
+  --Success-50: #228738;
+  --Success-60: #267337;
+  --Success-70: #285d33;
+  --Success-80: #1f4727;
+  --Success-90: #122b18;
+  --Info-5: #e7f4fe;
+  --Info-10: #d3ebfd;
+  --Info-20: #9ed2fa;
+  --Info-30: #5fb5f7;
+  --Info-40: #2098f3;
+  --Info-50: #0b78cb;
+  --Info-60: #096ab3;
+  --Info-70: #085691;
+  --Info-80: #053961;
+  --Info-90: #03253f;
+
+  /**
+  * Common
+  */
+  --Modal-Shadow: #0000005a;
+  --Modal-Background: #6666663a;
+  --loading: #6666663a;
+  --loading-color: #ffffff;
+  --loading-shadow: #00000033;
+  --loading-spinner: #222222;
+
+  /**
+  * Palette_(JKCore UI/UX 표쥰 Palette)
+  */
+  --Navy-5: #f1f1f9;
+  --Navy-10: #d3d5ed;
+  --Navy-20: #a7abda;
+  --Navy-30: #7b82c8;
+  --Navy-40: #4f58b5;
+  --Navy-50: #232ea3;
+  --Navy-60: #1c2582;
+  --Navy-70: #151c62;
+  --Navy-80: #0e1241;
+  --Navy-90: #070921;
+  --Blue-5: #f0f3ff;
+  --Blue-10: #d2dcfe;
+  --Blue-20: #a4b8fe;
+  --Blue-30: #7795fd;
+  --Blue-40: #4971fd;
+  --Blue-50: #1c4efc;
+  --Blue-60: #163eca;
+  --Blue-70: #112f97;
+  --Blue-80: #0b1f65;
+  --Blue-90: #061032;
+  --Royal-Blue-5: #ebf5ff;
+  --Royal-Blue-10: #c7e3ff;
+  --Royal-Blue-20: #8fc8ff;
+  --Royal-Blue-30: #56acff;
+  --Royal-Blue-40: #1e90ff;
+  --Royal-Blue-50: #0074e5;
+  --Royal-Blue-60: #0056aa;
+  --Royal-Blue-70: #00407f;
+  --Royal-Blue-80: #002b55;
+  --Royal-Blue-90: #00152a;
+  --Sky-Blue-5: #f0fbff;
+  --Sky-Blue-10: #d4f3fe;
+  --Sky-Blue-20: #a9e6fc;
+  --Sky-Blue-30: #7ddafb;
+  --Sky-Blue-40: #52cdf9;
+  --Sky-Blue-50: #27c1f8;
+  --Sky-Blue-60: #1f9ac6;
+  --Sky-Blue-70: #177495;
+  --Sky-Blue-80: #104d63;
+  --Sky-Blue-90: #082732;
+  --Aqua-5: #e7fdfd;
+  --Aqua-10: #cefbfb;
+  --Aqua-20: #9df6f6;
+  --Aqua-30: #6df2f2;
+  --Aqua-40: #3beded;
+  --Aqua-50: #15dfdf;
+  --Aqua-60: #03c4c4;
+  --Aqua-70: #078c8c;
+  --Aqua-80: #045d5d;
+  --Aqua-90: #022f2f;
+  --Teal-5: #edf8f8;
+  --Teal-10: #ceebeb;
+  --Teal-20: #9dd7d7;
+  --Teal-30: #6dc3c3;
+  --Teal-40: #3cafaf;
+  --Teal-50: #0b9b9b;
+  --Teal-60: #097c7c;
+  --Teal-70: #075d5d;
+  --Teal-80: #043e3e;
+  --Teal-90: #021f1f;
+  --Green-5: #eef7ee;
+  --Green-10: #cce6cc;
+  --Green-20: #99cc99;
+  --Green-30: #66b366;
+  --Green-40: #339933;
+  --Green-50: #008000;
+  --Green-60: #006600;
+  --Green-70: #004d00;
+  --Green-80: #003300;
+  --Green-90: #001a00;
+  --Lime-Green-5: #f3fcf3;
+  --Lime-Green-10: #d6f5d6;
+  --Lime-Green-20: #adebad;
+  --Lime-Green-30: #84e184;
+  --Lime-Green-40: #5bd75b;
+  --Lime-Green-50: #32cd32;
+  --Lime-Green-60: #1fad1f;
+  --Lime-Green-70: #1e7b1e;
+  --Lime-Green-80: #145214;
+  --Lime-Green-90: #0a290a;
+  --Lime-5: #f7ffea;
+  --Lime-10: #eefed6;
+  --Lime-20: #deffab;
+  --Lime-30: #cefe83;
+  --Lime-50: #a1f524;
+  --Lime-60: #8edd13;
+  --Lime-64: #bcf95d;
+  --Lime-70: #699b1c;
+  --Lime-80: #476912;
+  --Lime-90: #253709;
+  --Olive-5: #f8f8ed;
+  --Olive-10: #ebebcc;
+  --Olive-20: #d6d699;
+  --Olive-30: #c2c266;
+  --Olive-40: #adad33;
+  --Olive-50: #999900;
+  --Olive-60: #7a7a00;
+  --Olive-70: #5c5c00;
+  --Olive-80: #3d3d00;
+  --Olive-90: #1f1f00;
+  --Yellow-5: #fffbe5;
+  --Yellow-10: #fff6cc;
+  --Yellow-20: #ffee99;
+  --Yellow-30: #ffe566;
+  --Yellow-40: #ffdd33;
+  --Yellow-50: #ffd400;
+  --Yellow-60: #d6ab00;
+  --Yellow-70: #a38500;
+  --Yellow-80: #6b5700;
+  --Yellow-90: #332a00;
+  --Gold-5: #fdf7e9;
+  --Gold-10: #faefd3;
+  --Gold-20: #f5dfa7;
+  --Gold-30: #f1cf7a;
+  --Gold-40: #ecbf4e;
+  --Gold-50: #e7af22;
+  --Gold-60: #b98c1b;
+  --Gold-70: #8b6914;
+  --Gold-80: #5c460e;
+  --Gold-90: #2e2307;
+  --Saddle-Brown-5: #f8f2ed;
+  --Saddle-Brown-10: #ecdccd;
+  --Saddle-Brown-20: #d9b99c;
+  --Saddle-Brown-30: #c6976a;
+  --Saddle-Brown-40: #b37439;
+  --Saddle-Brown-50: #a05107;
+  --Saddle-Brown-60: #804106;
+  --Saddle-Brown-70: #603104;
+  --Saddle-Brown-80: #402003;
+  --Saddle-Brown-90: #201001;
+  --Brown-5: #f9f2f0;
+  --Brown-10: #eed8d3;
+  --Brown-20: #dcb0a7;
+  --Brown-30: #cb897c;
+  --Brown-40: #b96150;
+  --Brown-50: #a83a24;
+  --Brown-60: #862e1d;
+  --Brown-70: #652316;
+  --Brown-80: #43170e;
+  --Brown-90: #220c07;
+  --Dark-Red-5: #faeff0;
+  --Dark-Red-10: #f1cecf;
+  --Dark-Red-20: #e39d9f;
+  --Dark-Red-30: #d56b70;
+  --Dark-Red-40: #c73a40;
+  --Dark-Red-50: #b90910;
+  --Dark-Red-60: #94070d;
+  --Dark-Red-70: #6f050a;
+  --Dark-Red-80: #4a0406;
+  --Dark-Red-90: #250203;
+  --Red-5: #fef1f1;
+  --Red-10: #fccccc;
+  --Red-20: #f89999;
+  --Red-30: #f56666;
+  --Red-40: #f23b3b;
+  --Red-50: #ee0000;
+  --Red-60: #cd0404;
+  --Red-70: #8f0000;
+  --Red-80: #5f0000;
+  --Red-90: #300000;
+  --Orange-5: #fff4f0;
+  --Orange-10: #ffdacc;
+  --Orange-20: #ffb599;
+  --Orange-30: #ff8f66;
+  --Orange-40: #ff6a33;
+  --Orange-50: #ff4500;
+  --Orange-60: #d53209;
+  --Orange-70: #992900;
+  --Orange-80: #661c00;
+  --Orange-90: #330e00;
+  --Coral-5: #fff8f5;
+  --Coral-10: #ffe6dc;
+  --Coral-20: #ffccba;
+  --Coral-30: #feb397;
+  --Coral-40: #fe9975;
+  --Coral-50: #fe8052;
+  --Coral-60: #d36942;
+  --Coral-70: #a85131;
+  --Coral-80: #7e3a21;
+  --Coral-90: #532210;
+  --Salmon-5: #fff1f0;
+  --Salmon-10: #ffe3e0;
+  --Salmon-20: #ffc8c1;
+  --Salmon-30: #feaca3;
+  --Salmon-40: #fe9184;
+  --Salmon-50: #fe7565;
+  --Salmon-60: #d75f51;
+  --Salmon-70: #b0493d;
+  --Salmon-80: #893228;
+  --Salmon-90: #621c14;
+  --Hot-Pink-5: #fff5fc;
+  --Hot-Pink-10: #ffe3f5;
+  --Hot-Pink-20: #ffc6ec;
+  --Hot-Pink-30: #ffaae2;
+  --Hot-Pink-40: #ff8dd9;
+  --Hot-Pink-50: #ff6fce;
+  --Hot-Pink-60: #d05aa8;
+  --Hot-Pink-70: #a14482;
+  --Hot-Pink-80: #732d5b;
+  --Hot-Pink-90: #3d1530;
+  --Pink-5: #fff0f8;
+  --Pink-10: #ffd0e9;
+  --Pink-20: #ffa1d4;
+  --Pink-30: #ff72be;
+  --Pink-40: #fd51ad;
+  --Pink-50: #ff1493;
+  --Pink-60: #cc1076;
+  --Pink-70: #990c58;
+  --Pink-80: #66083b;
+  --Pink-90: #33041d;
+  --Fuchsia-5: #fdf2fd;
+  --Fuchsia-10: #f9d1f9;
+  --Fuchsia-20: #f2a3f2;
+  --Fuchsia-30: #ec75ec;
+  --Fuchsia-40: #e547e5;
+  --Fuchsia-50: #df19df;
+  --Fuchsia-60: #b214b2;
+  --Fuchsia-70: #860f86;
+  --Fuchsia-80: #590a59;
+  --Fuchsia-90: #2d052d;
+  --Purple-5: #f5eef7;
+  --Purple-10: #e1cce6;
+  --Purple-20: #c499cc;
+  --Purple-30: #a666b3;
+  --Purple-40: #893399;
+  --Purple-50: #6b0080;
+  --Purple-60: #560066;
+  --Purple-70: #40004d;
+  --Purple-80: #2b0033;
+  --Purple-90: #15001a;
+  --Blue-Violet-5: #f4effa;
+  --Blue-Violet-10: #ded1f1;
+  --Blue-Violet-20: #bda2e3;
+  --Blue-Violet-30: #9b74d4;
+  --Blue-Violet-40: #7a45c6;
+  --Blue-Violet-50: #5917b8;
+  --Blue-Violet-60: #471293;
+  --Blue-Violet-70: #350e6e;
+  --Blue-Violet-80: #24094a;
+  --Blue-Violet-90: #120525;
+}

package/src/styles/font-face.scss

@@ -1,18 +1,18 @@
-@use "sass:string";
-
-@mixin font-face($font-name, $src, $weight: normal, $style: normal) {
-  @font-face {
-    font-family: $font-name;
-    src: url($src);
-    font-style: $style;
-    font-weight: $weight;
-    font-display: swap;
-  }
-}
-
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Regular.woff2", 400);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Medium.woff2", 500);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-SemiBold.woff2", 600);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Bold.woff2", 700);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-ExtraBold.woff2", 800);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Black.woff2", 900);
+@use "sass:string";
+
+@mixin font-face($font-name, $src, $weight: normal, $style: normal) {
+  @font-face {
+    font-family: $font-name;
+    src: url($src);
+    font-style: $style;
+    font-weight: $weight;
+    font-display: swap;
+  }
+}
+
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Regular.woff2", 400);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Medium.woff2", 500);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-SemiBold.woff2", 600);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Bold.woff2", 700);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-ExtraBold.woff2", 800);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Black.woff2", 900);

package/src/styles/font.scss

@@ -1,49 +1,49 @@
-@use "/src/utils/styles/mediaQuery.scss" as media;
-@use "sass:math";
-
-@mixin font($weight, $size) {
-  font-weight: $weight;
-  font-size: $size;
-}
-
-// 반응형 폰트 mixin
-// nesting 규칙에 의해 폰트는 항상 코드의 가장 마지막에 위치해야 한다.
-
-@mixin B-($i) {
-  font-weight: 700;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
-
-@mixin Semi-($i) {
-  font-weight: 600;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
-
-@mixin R-($i) {
-  font-weight: 400;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
+@use "/src/utils/styles/mediaQuery.scss" as media;
+@use "sass:math";
+
+@mixin font($weight, $size) {
+  font-weight: $weight;
+  font-size: $size;
+}
+
+// 반응형 폰트 mixin
+// nesting 규칙에 의해 폰트는 항상 코드의 가장 마지막에 위치해야 한다.
+
+@mixin B-($i) {
+  font-weight: 700;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}
+
+@mixin Semi-($i) {
+  font-weight: 600;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}
+
+@mixin R-($i) {
+  font-weight: 400;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}

package/src/styles/mediaQuery.scss

@@ -1,22 +1,22 @@
-// 스크롤바 너비 14px 추가
-$pc: 1396px;
-$tablet: 1395px;
-$mobile: 774px;
-
-@mixin pc {
-  @media (min-width: $pc) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: $tablet) {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media (max-width: $mobile) {
-    @content;
-  }
-}
+// 스크롤바 너비 14px 추가
+$pc: 1396px;
+$tablet: 1395px;
+$mobile: 774px;
+
+@mixin pc {
+  @media (min-width: $pc) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $mobile) {
+    @content;
+  }
+}