@x-plat/design-system 0.6.1 → 0.7.1

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,10 @@ interface TableCellProps {
     isSticky?: boolean;
     width?: string | number;
     nowrap?: boolean;
+    /** th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) */
+    scope?: "col" | "row";
+    /** 가로로 합칠 칸 수. 합계 행처럼 표 안에서 칸을 합칠 때 쓴다 */
+    colSpan?: number;
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

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

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

package/dist/components/Table/index.js

@@ -93,6 +93,8 @@ var TableCell = React4.memo((props) => {
     isSticky = false,
     width,
     nowrap = false,
+    scope = "col",
+    colSpan,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -124,7 +126,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 +142,8 @@ var TableCell = React4.memo((props) => {
         enableHover && "cell-hover",
         nowrap && "nowrap"
       ),
+      scope: isHeaderCell ? scope : void 0,
+      colSpan,
       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 {

package/dist/components/Video/index.css

@@ -40,7 +40,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--semantic-interaction-overlay-25);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -49,7 +49,7 @@
   z-index: 1;
   display: flex;
   font-size: var(--semantic-typo-display-1-b-size);
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  filter: drop-shadow(0 2px 8px var(--semantic-interaction-overlay-50));
 }
 .lib-xplat-video > .center-play.is-playing {
   opacity: 0;
@@ -69,8 +69,8 @@
   background:
     linear-gradient(
       to top,
-      rgba(0, 0, 0, 0.7),
-      rgba(0, 0, 0, 0));
+      var(--semantic-interaction-overlay-75),
+      transparent);
   color: var(--semantic-icon-inverse);
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -101,7 +101,7 @@
   transition: background-color 0.15s ease;
 }
 .lib-xplat-video .control-btn:hover {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: color-mix(in srgb, var(--semantic-icon-inverse) 15%, transparent);
 }
 .lib-xplat-video .control-btn:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -111,7 +111,7 @@
   margin-left: auto;
 }
 .lib-xplat-video .control-btn.is-active {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: color-mix(in srgb, var(--semantic-icon-inverse) 25%, transparent);
 }
 .lib-xplat-video .rate-group {
   position: relative;
@@ -119,8 +119,11 @@
 .lib-xplat-video .rate-group .rate-btn {
   width: auto;
   padding: 0 var(--spacing-space-2);
-  font-size: var(--semantic-typo-caption-2-r-size);
-  font-weight: 600;
+  font-family: var(--semantic-typo-caption-2-sb-font);
+  font-size: var(--semantic-typo-caption-2-sb-size);
+  line-height: var(--semantic-typo-caption-2-sb-lh);
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
   font-variant-numeric: tabular-nums;
 }
 .lib-xplat-video .rate-group .rate-menu {
@@ -130,7 +133,7 @@
   margin: 0;
   padding: var(--spacing-space-1);
   list-style: none;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: var(--semantic-interaction-overlay-85);
   border-radius: var(--spacing-radius-sm);
   min-width: 64px;
 }
@@ -143,18 +146,26 @@
   text-align: left;
   cursor: pointer;
   border-radius: var(--spacing-radius-sm);
+  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);
   font-variant-numeric: tabular-nums;
 }
 .lib-xplat-video .rate-group .rate-menu .rate-item:hover {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: color-mix(in srgb, var(--semantic-icon-inverse) 15%, transparent);
 }
 .lib-xplat-video .rate-group .rate-menu .rate-item.is-active {
   color: var(--semantic-surface-brand-default);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
 }
 .lib-xplat-video .time {
+  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);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -220,15 +231,15 @@
       to right,
       var(--semantic-surface-brand-default) 0%,
       var(--semantic-surface-brand-default) var(--progress, 0%),
-      rgba(255, 255, 255, 0.4) var(--progress, 0%),
-      rgba(255, 255, 255, 0.4) var(--buffered, 0%),
-      rgba(255, 255, 255, 0.2) var(--buffered, 0%),
-      rgba(255, 255, 255, 0.2) 100%);
+      color-mix(in srgb, var(--semantic-icon-inverse) 40%, transparent) var(--progress, 0%),
+      color-mix(in srgb, var(--semantic-icon-inverse) 40%, transparent) var(--buffered, 0%),
+      color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent) var(--buffered, 0%),
+      color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent) 100%);
 }
 .lib-xplat-video .seekbar::-moz-range-track {
   height: 4px;
   border-radius: 2px;
-  background: rgba(255, 255, 255, 0.2);
+  background: color-mix(in srgb, var(--semantic-icon-inverse) 20%, transparent);
 }
 .lib-xplat-video .seekbar::-moz-range-progress {
   height: 4px;
@@ -246,13 +257,13 @@
       to right,
       var(--semantic-icon-inverse) 0%,
       var(--semantic-icon-inverse) var(--volume, 0%),
-      rgba(255, 255, 255, 0.3) var(--volume, 0%),
-      rgba(255, 255, 255, 0.3) 100%);
+      color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent) var(--volume, 0%),
+      color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent) 100%);
 }
 .lib-xplat-video .volume-slider::-moz-range-track {
   height: 4px;
   border-radius: 2px;
-  background: rgba(255, 255, 255, 0.3);
+  background: color-mix(in srgb, var(--semantic-icon-inverse) 30%, transparent);
 }
 .lib-xplat-video .volume-slider::-moz-range-progress {
   height: 4px;