@x-plat/design-system 0.5.53 → 0.5.55

package/dist/components/Tab/index.css

@@ -14,15 +14,15 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
-  font-size: 14px;
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
-  font-size: 16px;
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
-  font-size: 18px;
+  font-size: var(--semantic-typo-body-1-m-size);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -60,7 +60,7 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
-  font-size: 16px;
+  font-size: var(--semantic-typo-label-1-m-size);
   font-weight: 500;
   height: 100%;
   background: none;

package/dist/components/Table/index.css

@@ -15,21 +15,21 @@
 .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-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
 }
 .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-size: 14px;
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .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-size: 16px;
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;

package/dist/components/Tag/index.css

@@ -9,17 +9,17 @@
 .lib-xplat-tag.sm {
   gap: var(--spacing-space-1);
   padding: 1px var(--spacing-space-2);
-  font-size: 11px;
+  font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.md {
   gap: var(--spacing-space-1);
   padding: 2px var(--spacing-space-2);
-  font-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.lg {
   gap: var(--spacing-space-1);
   padding: var(--spacing-space-1) var(--spacing-space-2);
-  font-size: 14px;
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-tag.neutral {
   color: var(--semantic-text-muted);
@@ -89,11 +89,11 @@
   opacity: 1;
 }
 .lib-xplat-tag.sm .tag-close svg {
-  font-size: 10px;
+  font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.md .tag-close svg {
-  font-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.lg .tag-close svg {
-  font-size: 14px;
+  font-size: var(--semantic-typo-label-2-m-size);
 }

package/dist/components/Toast/index.css

@@ -53,8 +53,8 @@
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   pointer-events: auto;
   animation: lib-xplat-toast-enter 0.2s ease;
@@ -73,7 +73,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 18px;
+  font-size: var(--semantic-typo-body-1-m-size);
   line-height: 1;
   padding: 0;
   opacity: 0.6;

package/dist/components/Tooltip/index.css

@@ -11,13 +11,13 @@
   animation: tooltip-show 120ms ease-out;
 }
 .lib-xplat-tooltip .tooltip-title {
-  font-size: 13px;
-  line-height: 18px;
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
   font-weight: 400;
 }
 .lib-xplat-tooltip .tooltip-desc {
-  font-size: 12px;
-  line-height: 18px;
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
   font-weight: 400;
 }
 .lib-xplat-tooltip.dark {

package/dist/components/Video/index.css

@@ -48,7 +48,7 @@
   position: relative;
   z-index: 1;
   display: flex;
-  font-size: 64px;
+  font-size: var(--semantic-typo-display-1-b-size);
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
 .lib-xplat-video > .center-play.is-playing {
@@ -119,7 +119,7 @@
 .lib-xplat-video .rate-group .rate-btn {
   width: auto;
   padding: 0 var(--spacing-space-2);
-  font-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
@@ -143,7 +143,7 @@
   text-align: left;
   cursor: pointer;
   border-radius: var(--spacing-radius-xs);
-  font-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
   font-variant-numeric: tabular-nums;
 }
 .lib-xplat-video .rate-group .rate-menu .rate-item:hover {
@@ -154,7 +154,7 @@
   font-weight: 600;
 }
 .lib-xplat-video .time {
-  font-size: 12px;
+  font-size: var(--semantic-typo-caption-2-r-size);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }

package/dist/components/index.cjs

@@ -5296,7 +5296,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",