@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Pagination/index.css

@@ -2,74 +2,85 @@
 .lib-xplat-pagination {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
 }
 .lib-xplat-pagination.sm .dots {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn {
-  min-width: 24px;
-  height: 24px;
+  min-width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }
 .lib-xplat-pagination.lg .dots {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn {
-  min-width: 40px;
-  height: 40px;
+  min-width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn svg {
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 .lib-xplat-pagination .dots {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
   font-size: 14px;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   user-select: none;
 }
 .lib-xplat-pagination .page-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 6px;
+  min-width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-2);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   font-size: 14px;
   cursor: pointer;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-pagination .page-btn:disabled {
   cursor: not-allowed;
   opacity: 0.4;
 }
 .lib-xplat-pagination .page-btn.active {
-  color: var(--xplat-white);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
-  background-color: var(--ds-color);
+}
+.lib-xplat-pagination.brand .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-pagination.success .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-pagination.error .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-pagination.warning .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-pagination.info .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-pagination .page-btn svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }

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

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
-interface PaginationProps extends ColorProps {
+type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+interface PaginationProps {
     current: number;
     total: number;
     pageSize?: number;
     siblingCount?: number;
     onChange?: (page: number) => void;
     size?: PaginationSize;
-    className?: string;
+    type?: PaginationType;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

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

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type PaginationSize = "sm" | "md" | "lg";
-interface PaginationProps extends ColorProps {
+type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+interface PaginationProps {
     current: number;
     total: number;
     pageSize?: number;
     siblingCount?: number;
     onChange?: (page: number) => void;
     size?: PaginationSize;
-    className?: string;
+    type?: PaginationType;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;