@lettealo/hanwha-life-ds 3.1.1

package/src/styles/tokens.css

@@ -0,0 +1,437 @@
+/* =========================================================================
+   Hanwha Life Design System — colors_and_type.css
+   모든 값은 HDS_color.pdf, HDS_brand.pdf, HDS_layout.pdf 기반
+   ========================================================================= */
+
+/* ---------- 웹폰트 (WOFF2 + 한글 서브셋) ---------- */
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicT.woff2") format("woff2");
+  font-weight: 100;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicEL.woff2") format("woff2");
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicL.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicR.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicR.woff2") format("woff2");
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicB.woff2") format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha Gothic";
+  src: url("../assets/fonts/HanwhaGothicB.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+/* 한화체 — 브랜드 로고용 */
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaL.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaR.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Hanwha";
+  src: url("../assets/fonts/HanwhaB.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+/* LIFEPLUS */
+@font-face {
+  font-family: "LIFEPLUS";
+  src: url("../assets/fonts/LIFEPLUS-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "LIFEPLUS";
+  src: url("../assets/fonts/LIFEPLUS-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: "LIFEPLUS";
+  src: url("../assets/fonts/LIFEPLUS-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: "LIFEPLUS Body";
+  src: url("../assets/fonts/LIFEPLUS-BODY-Light_Hinted.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "LIFEPLUS Body";
+  src: url("../assets/fonts/LIFEPLUS-BODY-Medium_Hinted.ttf") format("truetype");
+  font-weight: 500;
+  font-display: swap;
+}
+
+:root {
+  /* ===================== Color — 기본 팔레트 ===================== */
+  /* Orange (Primary) */
+  --orange-100: #FFE0CC;
+  --orange-200: #FFC299;
+  --orange-300: #FFAF7F;
+  --orange-400: #FF8F4C;
+  --orange-500: #FA6600;  /* Hanwha Orange — Primary */
+  --orange-600: #E15A00;
+  --orange-700: #BF4C00;
+  --orange-800: #9E3F00;
+  --orange-900: #803300;
+
+  /* Gray */
+  --gray-100: #F5F5F5;
+  --gray-200: #F0F0F0;
+  --gray-300: #E5E4E3;
+  --gray-400: #D0CFCE;
+  --gray-500: #B4B3B2;
+  --gray-600: #908F8E;
+  --gray-700: #7E7C7A;
+  --gray-800: #5E5C5A;
+  --gray-900: #403F3E;
+
+  /* Red */
+  --red-100: #FEE5D8;
+  --red-200: #FEC6B2;
+  --red-300: #FC9F8B;
+  --red-400: #F97A6E;
+  --red-500: #F53F3F;
+  --red-600: #D22E3C;
+  --red-700: #B01F38;
+  --red-800: #8E1433;
+  --red-900: #750C30;
+
+  /* Bluegreen */
+  --bluegreen-100: #D6F6ED;
+  --bluegreen-200: #8DEFDC;
+  --bluegreen-300: #55DFCF;
+  --bluegreen-400: #29C4BF;
+  --bluegreen-500: #009CA5;
+  --bluegreen-600: #008195;
+  --bluegreen-700: #00617D;
+  --bluegreen-800: #004664;
+  --bluegreen-900: #003353;
+
+  /* Deepyellow */
+  --deepyellow-100: #FEF6D4;
+  --deepyellow-200: #FEEBAA;
+  --deepyellow-300: #FCDC7F;
+  --deepyellow-400: #FACD5F;
+  --deepyellow-500: #F8B62B;
+  --deepyellow-600: #D5941F;
+  --deepyellow-700: #B27515;
+  --deepyellow-800: #8F590D;
+  --deepyellow-900: #774408;
+
+  /* Jadegreen */
+  --jadegreen-100: #E1FAEE;
+  --jadegreen-200: #C5F5E3;
+  --jadegreen-300: #A0E3CF;
+  --jadegreen-400: #7EC7B8;
+  --jadegreen-500: #53A299;
+  --jadegreen-600: #3C8B89;
+  --jadegreen-700: #296F74;
+  --jadegreen-800: #1A535D;
+  --jadegreen-900: #0F3E4D;
+
+  /* Indigoblue */
+  --indigoblue-100: #E0EBFC;
+  --indigoblue-200: #C1D6F9;
+  --indigoblue-300: #9EBAEE;
+  --indigoblue-400: #819EDE;
+  --indigoblue-500: #5979C9;
+  --indigoblue-600: #415CAC;
+  --indigoblue-700: #2C4390;
+  --indigoblue-800: #1C2D74;
+  --indigoblue-900: #111E60;
+
+  /* Magenta */
+  --magenta-100: #FCE1E3;
+  --magenta-200: #FAC5CD;
+  --magenta-300: #F1A4B8;
+  --magenta-400: #E489A9;
+  --magenta-500: #D36396;
+  --magenta-600: #B54884;
+  --magenta-700: #973174;
+  --magenta-800: #7A1F64;
+  --magenta-900: #651359;
+
+  /* Basic */
+  --basic-black: #272B2F;
+  --basic-white: #FFFFFF;
+
+  /* ===================== Semantic Tokens ===================== */
+  /* Background */
+  --bg-white: #FFFFFF;
+  --bg-neutral: var(--gray-100);
+  --bg-dimmed: rgba(0, 0, 0, 0.5);
+
+  /* Surface */
+  --surface-primary: var(--orange-500);
+  --surface-secondary: var(--gray-900);
+  --surface-neutral: var(--basic-white);
+  --surface-neutral-1: var(--gray-100);
+  --surface-neutral-2: var(--gray-200);
+  --surface-neutral-3: var(--gray-300);
+  --surface-neutral-4: var(--orange-100);
+
+  /* Text */
+  --text-primary: var(--orange-500);
+  --text-secondary: var(--orange-700);
+  --text-body: var(--basic-black);
+  --text-body-0: var(--basic-white);
+  --text-body-1: var(--gray-900);
+  --text-body-2: var(--gray-800);
+  --text-body-3: var(--gray-700);
+  --text-neutral-1: var(--gray-600);
+  --text-neutral-2: var(--gray-500);
+
+  /* Border */
+  --border-primary-1: var(--orange-500);
+  --border-primary-2: var(--orange-400);
+  --border-neutral-1: var(--gray-100);
+  --border-neutral-2: var(--gray-200);
+  --border-neutral-3: var(--gray-300);
+  --border-neutral-4: var(--gray-400);
+  --border-neutral-5: var(--gray-600);
+  --border-neutral-6: var(--gray-900);
+
+  /* Additional / Semantic */
+  --semantic-1: var(--bluegreen-500);  /* info */
+  --semantic-2: var(--red-500);         /* error */
+  --semantic-3: var(--deepyellow-500);  /* warning */
+  --semantic-4: var(--gray-500);        /* disabled */
+  --custom-1: var(--indigoblue-400);
+  --custom-2: var(--orange-400);
+  --custom-3: var(--deepyellow-400);
+
+  /* States */
+  --state-dark-1: rgba(0, 0, 0, 0.02);
+  --state-dark-2: rgba(0, 0, 0, 0.10);
+  --state-dark-3: rgba(0, 0, 0, 0.16);
+  --state-light-1: rgba(255, 255, 255, 0.60);
+  --state-selected: rgba(255, 224, 204, 0.50);
+
+  /* ===================== Typography ===================== */
+  --font-ko: "Hanwha Gothic", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-multi: "Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-sans: var(--font-ko);
+  --font-brand: "Hanwha", "Hanwha Gothic", "Noto Sans KR", sans-serif;
+
+  /* ----- fontWeight 토큰 ----- */
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* ----- 타입 토큰 — PC 기본 (px / weight / line-height) ----- */
+  /* Weight convention — Bold=700, Regular=400, Light=300 */
+  --title1-size: 26px; --title1-weight: 700; --title1-lh: 1.5;
+  --title2-size: 24px; --title2-weight: 700; --title2-lh: 1.5;
+  --title3-size: 22px; --title3-weight: 700; --title3-lh: 1.5;
+  --title4-size: 20px; --title4-weight: 700; --title4-lh: 1.5;
+  --title5-size: 18px; --title5-weight: 700; --title5-lh: 1.5;
+
+  --subtitle1-size: 20px; --subtitle1-weight: 400; --subtitle1-lh: 1.5;
+  --subtitle2-size: 18px; --subtitle2-weight: 400; --subtitle2-lh: 1.5;
+  --subtitle3-size: 16px; --subtitle3-weight: 400; --subtitle3-lh: 1.5;
+
+  --body1-size: 18px; --body1-weight: 300; --body1-lh: 1.5;
+  --body2-size: 16px; --body2-weight: 300; --body2-lh: 1.5;
+  --body3-size: 14px; --body3-weight: 300; --body3-lh: 1.5;
+  --body4-size: 12px; --body4-weight: 300; --body4-lh: 1.5;
+
+  --caption-size: 14px; --caption-weight: 300; --caption-lh: 1.4;
+
+  --link-large-size: 18px; --link-large-weight: 300;
+  --link-medium-size: 16px; --link-medium-weight: 300;
+  --link-small-size: 14px; --link-small-weight: 300;
+
+  --input-large-size: 16px; --input-large-weight: 400;
+  --input-medium-size: 16px; --input-medium-weight: 300;
+  --input-small-size: 14px; --input-small-weight: 300;
+
+  /* ===================== Shape (Radius) ===================== */
+  /* Shape value scale — 4, 6, 8, 10, 12, 14, 16 */
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+
+  /* Basic scale (default = PC) */
+  --radius-small: 4px;
+  --radius-medium: 8px;
+  --radius-large: 12px;
+  --radius-xLarge: 16px;
+  --radius-full: 1000px;
+
+  /* Modal radius per breakpoint */
+  --radius-modal-pc-wide: 16px;
+  --radius-modal-pc: 16px;
+  --radius-modal-tablet: 14px;
+  --radius-modal-mobile: 0;
+
+  /* ===================== Spacing ===================== */
+  --space-0: 0;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-14: 14px;
+  --space-16: 16px;
+  --space-18: 18px;
+  --space-20: 20px;
+  --space-22: 22px;
+  --space-24: 24px;
+  --space-26: 26px;
+  --space-28: 28px;
+  --space-30: 30px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-40: 40px;
+  --space-44: 44px;
+  --space-48: 48px;
+
+  /* Padding tokens (PC) */
+  --padding-zero: 0;
+  --padding-xxxxSmall: 2px;
+  --padding-xxxSmall: 4px;
+  --padding-xxSmall: 6px;
+  --padding-xSmall: 8px;
+  --padding-small: 10px;
+  --padding-medium: 12px;
+  --padding-large: 16px;
+  --padding-xLarge: 20px;
+  --padding-xxLarge: 24px;
+  --padding-xxxLarge: 28px;
+  --padding-xxxxLarge: 48px;
+
+  /* Layout (PC) */
+  --layout-gutter: 16px;
+  --layout-column: 12px;
+  --layout-padding-sub: 32px;
+  --layout-padding-top-bottom: 20px;
+
+  /* ===================== Elevation / Shadow ===================== */
+  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-large: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* ===================== Base + Semantic Elements ===================== */
+html, body {
+  font-family: var(--font-sans);
+  color: var(--text-body);
+  background: var(--bg-white);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body { font-size: var(--body2-size); font-weight: var(--body2-weight); line-height: var(--body2-lh); }
+
+/* Form element reset — browsers apply ~83% font-size by default */
+button, input, select, textarea, optgroup {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+h1 { font-size: var(--title1-size); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; }
+h2 { font-size: var(--title2-size); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; }
+h3 { font-size: var(--title3-size); font-weight: 700; line-height: 1.5; }
+h4 { font-size: var(--title4-size); font-weight: 700; line-height: 1.5; }
+h5 { font-size: var(--title5-size); font-weight: 700; line-height: 1.5; }
+p  { font-size: var(--body2-size); font-weight: 300; line-height: 1.5; }
+small { font-size: var(--body4-size); font-weight: 300; }
+a  { color: var(--text-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* 타입 클래스 */
+.title1 { font-size: var(--title1-size); font-weight: 700; line-height: 1.5; }
+.title2 { font-size: var(--title2-size); font-weight: 700; line-height: 1.5; }
+.title3 { font-size: var(--title3-size); font-weight: 700; line-height: 1.5; }
+.title4 { font-size: var(--title4-size); font-weight: 700; line-height: 1.5; }
+.title5 { font-size: var(--title5-size); font-weight: 700; line-height: 1.5; }
+.subtitle1 { font-size: var(--subtitle1-size); font-weight: 400; line-height: 1.5; }
+.subtitle2 { font-size: var(--subtitle2-size); font-weight: 400; line-height: 1.5; }
+.subtitle3 { font-size: var(--subtitle3-size); font-weight: 400; line-height: 1.5; }
+.body1 { font-size: var(--body1-size); font-weight: 300; line-height: 1.5; }
+.body2 { font-size: var(--body2-size); font-weight: 300; line-height: 1.5; }
+.body3 { font-size: var(--body3-size); font-weight: 300; line-height: 1.5; }
+.body4 { font-size: var(--body4-size); font-weight: 300; line-height: 1.5; }
+.caption { font-size: var(--caption-size); font-weight: 300; line-height: 1.4; color: var(--text-body-3); }
+
+/* ===================== Responsive Type Tokens ===================== */
+/* Tablet — 768 ~ 1280px */
+@media (max-width: 1280px) and (min-width: 768px) {
+  :root {
+    --title1-size: 24px; --title2-size: 22px; --title3-size: 20px;
+    --title4-size: 18px; --title5-size: 1rem;
+    --subtitle1-size: 18px; --subtitle2-size: 1rem; --subtitle3-size: 0.875rem;
+    --body1-size: 1rem; --body2-size: 1rem; --body3-size: 0.875rem; --body4-size: 0.875rem;
+    --caption-size: 0.875rem;
+    --link-large-size: 1rem; --link-medium-size: 0.875rem; --link-small-size: 0.875rem;
+    --input-large-size: 1rem; --input-medium-size: 1rem; --input-small-size: 0.875rem;
+    /* Tablet radius scale — xLarge 14 대신 */
+    --radius-medium: 6px;
+    --radius-large: 10px;
+    --radius-xLarge: 14px;
+  }
+}
+
+/* Mobile — 0 ~ 767px */
+@media (max-width: 767px) {
+  :root {
+    /* 대부분 PC와 동일하되 subtitle·input은 재정렬 */
+    --title1-size: 26px; --title2-size: 22px; --title3-size: 22px;
+    --title4-size: 20px; --title5-size: 18px;
+    --subtitle1-size: 20px; --subtitle2-size: 18px; --subtitle3-size: 16px;
+    --body1-size: 18px; --body2-size: 16px; --body3-size: 14px; --body4-size: 12px;
+    --caption-size: 14px;
+    --input-large-size: 18px;
+    --input-medium-size: 18px;
+    --input-small-size: 16px;
+    --link-large-size: 18px; --link-medium-size: 16px; --link-small-size: 14px;
+  }
+}