@x-plat/design-system 0.6.0 → 0.7.0

package/dist/components/Pagination/index.css

@@ -7,12 +7,20 @@
 .lib-xplat-pagination.sm .dots {
   width: var(--spacing-control-height-xs);
   height: var(--spacing-control-height-xs);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-pagination.sm .page-btn {
   min-width: var(--spacing-control-height-xs);
   height: var(--spacing-control-height-xs);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-pagination.sm .page-btn svg {
   font-size: var(--semantic-typo-caption-1-r-size);
@@ -20,12 +28,20 @@
 .lib-xplat-pagination.lg .dots {
   width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-pagination.lg .page-btn {
   min-width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-pagination.lg .page-btn svg {
   font-size: var(--semantic-typo-heading-1-m-size);
@@ -36,7 +52,11 @@
   justify-content: center;
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   color: var(--semantic-text-tertiary);
   user-select: none;
 }
@@ -50,7 +70,11 @@
   border: none;
   border-radius: var(--spacing-radius-md);
   background: none;
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   cursor: pointer;
   color: var(--semantic-text-secondary);
   transition: background-color 0.2s, color 0.2s;
@@ -64,7 +88,7 @@
 }
 .lib-xplat-pagination .page-btn.active {
   color: var(--semantic-text-inverse);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-caption-1-sb-weight);
 }
 .lib-xplat-pagination .page-btn svg {
   font-size: var(--semantic-typo-label-2-m-size);

package/dist/components/PopOver/index.css

@@ -13,7 +13,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
   background: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-md);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--semantic-shadow-md);
   opacity: 0;
   transform: scale(0.8);
 }

package/dist/components/Progress/index.css

@@ -41,8 +41,11 @@
   background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-progress .label {
-  font-size: var(--semantic-typo-caption-2-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-2-m-font);
+  font-size: var(--semantic-typo-caption-2-m-size);
+  line-height: var(--semantic-typo-caption-2-m-lh);
+  font-weight: var(--semantic-typo-caption-2-m-weight);
+  letter-spacing: var(--semantic-typo-caption-2-m-ls);
   color: var(--semantic-text-secondary);
   min-width: 36px;
   text-align: right;

package/dist/components/Radio/index.css

@@ -20,8 +20,11 @@
   height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-radio.md > .circle {
   width: var(--spacing-space-5);
@@ -29,8 +32,11 @@
   margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
 }
 .lib-xplat-radio.md > span {
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-radio.lg > .circle {
   width: var(--spacing-space-6);
@@ -41,8 +47,11 @@
   height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-radio > .circle {
   border: 2px solid var(--semantic-border-tertiary);

package/dist/components/Select/index.css

@@ -11,20 +11,29 @@
 .lib-xplat-select.sm .select-trigger {
   height: var(--spacing-control-height-sm);
   padding: 0 var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-select.md .select-trigger {
   height: var(--spacing-control-height-md);
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-select.lg .select-trigger {
   height: var(--spacing-control-height-lg);
   padding: 0 var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-select .select-trigger {
   cursor: pointer;
@@ -101,7 +110,7 @@
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);
   background-color: var(--semantic-surface-neutral-primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--semantic-shadow-md);
   cursor: default;
   max-height: 220px;
   overflow-y: auto;
@@ -132,25 +141,33 @@
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-select-content.lg .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
-  font-weight: var(--semantic-typo-label-1-m-weight);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
   cursor: pointer;
   transition: background-color 0.15s ease;
   outline: none;
 }
 .lib-xplat-select-content .select-item.is-selected {
-  font-weight: var(--semantic-typo-label-1-sb-weight);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
 }
 .lib-xplat-select-content .select-item:hover:not(.disabled) {
   background-color: var(--semantic-surface-neutral-secondary);

package/dist/components/Skeleton/index.cjs

@@ -43,12 +43,12 @@ var clsx_default = clsx;
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var SIZE_MAP = {
-  xs: "var(--spacing-size-1)",
-  sm: "var(--spacing-size-2)",
-  md: "var(--spacing-size-4)",
-  lg: "var(--spacing-size-8)",
-  xl: "var(--spacing-size-12)",
-  "2xl": "var(--spacing-size-16)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-8)",
+  xl: "var(--spacing-space-12)",
+  "2xl": "var(--spacing-space-16)",
   full: "100%"
 };
 var Skeleton = (props) => {

package/dist/components/Skeleton/index.js

@@ -17,12 +17,12 @@ var clsx_default = clsx;
 // src/components/Skeleton/Skeleton.tsx
 import { jsx } from "react/jsx-runtime";
 var SIZE_MAP = {
-  xs: "var(--spacing-size-1)",
-  sm: "var(--spacing-size-2)",
-  md: "var(--spacing-size-4)",
-  lg: "var(--spacing-size-8)",
-  xl: "var(--spacing-size-12)",
-  "2xl": "var(--spacing-size-16)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-8)",
+  xl: "var(--spacing-space-12)",
+  "2xl": "var(--spacing-space-16)",
   full: "100%"
 };
 var Skeleton = (props) => {

package/dist/components/Steps/index.css

@@ -27,8 +27,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 600;
+  font-family: var(--semantic-typo-caption-1-sb-font);
+  font-size: var(--semantic-typo-caption-1-sb-size);
+  line-height: var(--semantic-typo-caption-1-sb-lh);
+  font-weight: var(--semantic-typo-caption-1-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-1-sb-ls);
   flex-shrink: 0;
   z-index: 1;
   transition: background-color 0.2s, color 0.2s;
@@ -44,12 +47,19 @@
   text-align: center;
 }
 .lib-xplat-steps .step-title {
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
   color: var(--semantic-text-primary);
 }
 .lib-xplat-steps .step-description {
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }

package/dist/components/Switch/index.css

@@ -98,6 +98,6 @@
   transform: translateY(-50%);
   background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-full);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--semantic-shadow-sm);
   transition: left 0.25s;
 }

package/dist/components/Tab/index.css

@@ -14,15 +14,27 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -60,8 +72,11 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
-  font-weight: 500;
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
   height: 100%;
   background: none;
   border: none;

package/dist/components/Table/index.cjs

@@ -133,6 +133,7 @@ var TableCell = import_react4.default.memo((props) => {
     isSticky = false,
     width,
     nowrap = false,
+    scope = "col",
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -164,7 +165,8 @@ var TableCell = import_react4.default.memo((props) => {
     }
     return () => observer.disconnect();
   }, [isSticky, registerStickyCell, calculateLeft]);
-  const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
+  const isHeaderCell = headContext !== null;
+  const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -179,6 +181,7 @@ var TableCell = import_react4.default.memo((props) => {
         enableHover && "cell-hover",
         nowrap && "nowrap"
       ),
+      scope: isHeaderCell ? scope : void 0,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null

package/dist/components/Table/index.css

@@ -15,21 +15,33 @@
 .lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > th,
 .lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > td,
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-3) var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;

package/dist/components/Table/index.d.cts

@@ -29,6 +29,8 @@ interface TableCellProps {
     isSticky?: boolean;
     width?: string | number;
     nowrap?: boolean;
+    /** th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) */
+    scope?: "col" | "row";
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

package/dist/components/Table/index.d.ts

@@ -29,6 +29,8 @@ interface TableCellProps {
     isSticky?: boolean;
     width?: string | number;
     nowrap?: boolean;
+    /** th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) */
+    scope?: "col" | "row";
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

package/dist/components/Table/index.js

@@ -93,6 +93,7 @@ var TableCell = React4.memo((props) => {
     isSticky = false,
     width,
     nowrap = false,
+    scope = "col",
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -124,7 +125,8 @@ var TableCell = React4.memo((props) => {
     }
     return () => observer.disconnect();
   }, [isSticky, registerStickyCell, calculateLeft]);
-  const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
+  const isHeaderCell = headContext !== null;
+  const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
   return /* @__PURE__ */ jsx3(
@@ -139,6 +141,7 @@ var TableCell = React4.memo((props) => {
         enableHover && "cell-hover",
         nowrap && "nowrap"
       ),
+      scope: isHeaderCell ? scope : void 0,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null

package/dist/components/Tag/index.css

@@ -9,17 +9,29 @@
 .lib-xplat-tag.sm {
   gap: var(--spacing-space-1);
   padding: 1px var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-tag.md {
   gap: var(--spacing-space-1);
   padding: 2px var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-tag.lg {
   gap: var(--spacing-space-1);
   padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-tag.neutral {
   color: var(--semantic-text-tertiary);

package/dist/components/TextArea/index.css

@@ -16,18 +16,27 @@
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.sm {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.md {
   padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.lg {
   padding: var(--spacing-space-3) var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:hover:not(.disabled):not(:focus) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Toast/index.css

@@ -53,9 +53,12 @@
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  box-shadow: var(--semantic-shadow-md);
   pointer-events: auto;
   animation: lib-xplat-toast-enter 0.2s ease;
   min-width: 240px;
@@ -73,7 +76,11 @@
   background: none;
   border: none;
   cursor: pointer;
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
   line-height: 1;
   padding: 0;
   opacity: 0.6;

package/dist/components/Tooltip/index.css

@@ -11,18 +11,22 @@
   animation: tooltip-show 120ms ease-out;
 }
 .lib-xplat-tooltip .tooltip-title {
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
-  font-weight: 400;
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-tooltip .tooltip-desc {
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
   line-height: var(--semantic-typo-caption-2-r-lh);
-  font-weight: 400;
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-tooltip.dark {
   background-color: var(--semantic-surface-neutral-tertiary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--semantic-shadow-md);
 }
 .lib-xplat-tooltip.dark .tooltip-title,
 .lib-xplat-tooltip.dark .tooltip-desc {
@@ -30,7 +34,7 @@
 }
 .lib-xplat-tooltip.light {
   background-color: var(--semantic-surface-neutral-primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--semantic-shadow-md);
 }
 .lib-xplat-tooltip.light .tooltip-title,
 .lib-xplat-tooltip.light .tooltip-desc {