@x-plat/design-system 0.6.1 → 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/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 {

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;