@sdata/web-vue 4.7.1 → 5.0.0

package/es/pagination/style/index.css

@@ -19,7 +19,7 @@
 .sd-pagination {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--component-pagination-pagination-size-default-font-size, var(--component-pagination-size-default-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-pagination-list {
   display: inline-block;
@@ -31,14 +31,14 @@
 .sd-pagination-item {
   display: inline-block;
   box-sizing: border-box;
-  padding: 0 8px;
-  color: var(--sd-color-text-2);
+  padding: 0 var(--component-pagination-pagination-padding-horizontal, var(--component-pagination-padding-horizontal, 8px));
+  color: var(--component-pagination-pagination-color-item-text, var(--component-pagination-color-item-text, var(--sd-color-text-2)));
   text-align: center;
   vertical-align: middle;
   list-style: none;
-  background-color: transparent;
-  border: 0 solid transparent;
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-pagination-pagination-color-bg-item, var(--component-pagination-color-bg-item, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border: var(--component-pagination-pagination-border-width, var(--component-pagination-border-width, var(--border-none, 0))) solid var(--component-pagination-pagination-color-item-border, var(--component-pagination-color-item-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-pagination-pagination-item-border-radius, var(--component-pagination-item-border-radius, var(--sd-border-radius-small)));
   outline: 0;
   cursor: pointer;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -48,41 +48,41 @@
   transform: scale(0.97);
 }
 .sd-pagination-item {
-  min-width: 32px;
-  height: 32px;
-  font-size: 14px;
-  line-height: 32px;
+  min-width: var(--component-pagination-pagination-size-default, var(--component-pagination-size-default, var(--size-default, 32px)));
+  height: var(--component-pagination-pagination-size-default, var(--component-pagination-size-default, var(--size-default, 32px)));
+  font-size: var(--component-pagination-pagination-size-default-font-size, var(--component-pagination-size-default-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-default, var(--component-pagination-size-default, var(--size-default, 32px)));
 }
 .sd-pagination-item-previous, .sd-pagination-item-next {
-  font-size: 12px;
+  font-size: var(--component-pagination-pagination-size-icon-arrow-default, var(--component-pagination-size-icon-arrow-default, var(--size-3, 12px)));
 }
 .sd-pagination-item:hover {
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-fill-1);
-  border-color: transparent;
+  color: var(--component-pagination-pagination-color-item-text-hover, var(--component-pagination-color-item-text-hover, var(--sd-color-text-2)));
+  background-color: var(--component-pagination-pagination-color-bg-item-hover, var(--component-pagination-color-bg-item-hover, var(--sd-color-fill-1)));
+  border-color: var(--component-pagination-pagination-color-item-border-hover, var(--component-pagination-color-item-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-item-active, .sd-pagination-item-active:hover {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-primary-light-1);
-  border-color: transparent;
+  color: var(--component-pagination-pagination-color-item-text-active, var(--component-pagination-color-item-text-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background-color: var(--component-pagination-pagination-color-bg-item-active, var(--component-pagination-color-bg-item-active, var(--sd-color-primary-light-1)));
+  border-color: var(--component-pagination-pagination-color-item-border-active, var(--component-pagination-color-item-border-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-item-disabled, .sd-pagination-item-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
-  border-color: transparent;
+  color: var(--component-pagination-pagination-color-item-text-disabled, var(--component-pagination-color-item-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-pagination-pagination-color-bg-item-disabled, var(--component-pagination-color-bg-item-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-color: var(--component-pagination-pagination-color-item-border-disabled, var(--component-pagination-color-item-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-pagination-item:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--component-pagination-pagination-item-spacing, var(--component-pagination-item-spacing, var(--spacing-4, 8px)));
 }
 .sd-pagination-item-previous, .sd-pagination-item-next {
-  color: var(--sd-color-text-2);
-  font-size: 12px;
-  background-color: transparent;
+  color: var(--component-pagination-pagination-color-icon-arrow, var(--component-pagination-color-icon-arrow, var(--sd-color-text-2)));
+  font-size: var(--component-pagination-pagination-size-icon-arrow-default, var(--component-pagination-size-icon-arrow-default, var(--size-3, 12px)));
+  background-color: var(--component-pagination-pagination-color-icon-arrow-bg, var(--component-pagination-color-icon-arrow-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover, .sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-fill-1);
+  color: var(--component-pagination-pagination-color-icon-arrow-text-hover, var(--component-pagination-color-icon-arrow-text-hover, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background-color: var(--component-pagination-pagination-color-icon-arrow-bg-hover, var(--component-pagination-color-icon-arrow-bg-hover, var(--sd-color-fill-1)));
 }
 .sd-pagination-item-previous::after, .sd-pagination-item-next::after {
   display: inline-block;
@@ -91,11 +91,11 @@
   content: ".";
 }
 .sd-pagination .sd-pagination-item-previous.sd-pagination-item-disabled, .sd-pagination .sd-pagination-item-next.sd-pagination-item-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-pagination-pagination-color-icon-arrow-text-disabled, var(--component-pagination-color-icon-arrow-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-pagination-pagination-color-icon-arrow-bg-disabled, var(--component-pagination-color-icon-arrow-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-item-jumper {
-  font-size: 16px;
+  font-size: var(--component-pagination-pagination-size-icon-ellipsis, var(--component-pagination-size-icon-ellipsis, var(--size-4, 16px)));
 }
 .sd-pagination {
   /*** 快速跳转 ***/
@@ -103,23 +103,23 @@
 .sd-pagination-jumper {
   display: flex;
   align-items: center;
-  margin-left: 8px;
+  margin-left: var(--component-pagination-pagination-margin-jumper-left, var(--component-pagination-margin-jumper-left, var(--spacing-4, 8px)));
 }
 .sd-pagination-jumper > span {
-  font-size: 14px;
+  font-size: var(--component-pagination-pagination-size-default-font-size, var(--component-pagination-size-default-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-pagination-jumper-text-goto, .sd-pagination-jumper-prepend, .sd-pagination-jumper-append {
-  color: var(--sd-color-text-3);
+  color: var(--component-pagination-pagination-color-jumper-goto, var(--component-pagination-color-jumper-goto, var(--sd-color-text-3)));
   white-space: nowrap;
 }
 .sd-pagination-jumper-prepend {
-  margin-right: 8px;
+  margin-right: var(--component-pagination-pagination-item-spacing, var(--component-pagination-item-spacing, var(--spacing-4, 8px)));
 }
 .sd-pagination-jumper-append {
-  margin-left: 8px;
+  margin-left: var(--component-pagination-pagination-item-spacing, var(--component-pagination-item-spacing, var(--spacing-4, 8px)));
 }
 .sd-pagination-jumper .sd-pagination-jumper-input {
-  width: 40px;
+  width: var(--component-pagination-patination-jumper-input-width, var(--component-pagination-jumper-input-width, var(--size-10, 40px)));
   padding-right: 2px;
   padding-left: 2px;
 }
@@ -131,7 +131,7 @@
   display: inline-block;
   flex: 0 0 auto;
   min-width: 0;
-  margin-left: 8px;
+  margin-left: var(--component-pagination-pagination-margin-option-left, var(--component-pagination-margin-option-left, var(--spacing-4, 8px)));
   text-align: center;
   vertical-align: middle;
 }
@@ -145,18 +145,18 @@
 .sd-pagination-total {
   display: inline-block;
   height: 100%;
-  margin-right: 8px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  font-size: 14px;
-  line-height: 32px;
+  margin-right: var(--component-pagination-pagination-margin-total-spacing, var(--component-pagination-margin-total-spacing, var(--spacing-4, 8px)));
+  color: var(--component-pagination-pagination-color-text-total, var(--component-pagination-color-text-total, var(--sd-color-text-1)));
+  font-size: var(--component-pagination-pagination-size-default-font-size, var(--component-pagination-size-default-font-size, var(--font-size-body-3, 14px)));
+  font-size: var(--component-pagination-pagination-size-default-font-size, var(--component-pagination-size-default-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-default, var(--component-pagination-size-default, var(--size-default, 32px)));
   white-space: nowrap;
 }
 .sd-pagination-jumper {
   flex: 0 0 auto;
 }
 .sd-pagination-jumper-separator {
-  padding: 0 12px 0 12px;
+  padding: 0 var(--component-pagination-pagination-simple-margin-separator-right, var(--component-pagination-simple-margin-separator-right, var(--spacing-6, 12px))) 0 var(--component-pagination-pagination-simple-margin-separator-left, var(--component-pagination-simple-margin-separator-left, var(--spacing-6, 12px)));
 }
 .sd-pagination-jumper-total-page {
   margin-right: 8px;
@@ -173,95 +173,95 @@
   color: var(--sd-color-text-1);
 }
 .sd-pagination-simple .sd-pagination-jumper .sd-pagination-jumper-input {
-  width: 40px;
+  width: var(--component-pagination-pagination-simple-input-width, var(--component-pagination-simple-input-width, var(--size-10, 40px)));
   margin-left: 0;
 }
 .sd-pagination-simple .sd-pagination-item-previous, .sd-pagination-simple .sd-pagination-item-next {
-  color: var(--sd-color-text-2);
-  background-color: transparent;
+  color: var(--component-pagination-pagination-simple-color-icon-arrow, var(--component-pagination-simple-color-icon-arrow, var(--sd-color-text-2)));
+  background-color: var(--component-pagination-pagination-simple-color-icon-arrow-bg, var(--component-pagination-simple-color-icon-arrow-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-simple .sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover, .sd-pagination-simple .sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-fill-1);
+  color: var(--component-pagination-pagination-simple-color-icon-arrow-text-hover, var(--component-pagination-simple-color-icon-arrow-text-hover, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background-color: var(--component-pagination-pagination-simple-color-icon-arrow-bg-hover, var(--component-pagination-simple-color-icon-arrow-bg-hover, var(--sd-color-fill-1)));
 }
 .sd-pagination-simple .sd-pagination-item-previous.sd-pagination-item-disabled, .sd-pagination-simple .sd-pagination-item-next.sd-pagination-item-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-pagination-pagination-simple-color-icon-arrow-text-disabled, var(--component-pagination-simple-color-icon-arrow-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-pagination-pagination-simple-color-icon-arrow-bg-disabled, var(--component-pagination-simple-color-icon-arrow-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-disabled {
   cursor: not-allowed;
 }
 .sd-pagination-disabled .sd-pagination-item, .sd-pagination-disabled .sd-pagination-item:not(.sd-pagination-item-disabled, .sd-pagination-item-active):hover {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
-  border-color: transparent;
+  color: var(--component-pagination-pagination-color-item-text-disabled, var(--component-pagination-color-item-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-pagination-pagination-color-bg-item-disabled, var(--component-pagination-color-bg-item-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-color: var(--component-pagination-pagination-color-item-border-disabled, var(--component-pagination-color-item-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-pagination.sd-pagination-disabled .sd-pagination-item-active {
-  color: var(--sd-color-primary-light-3);
-  background-color: var(--sd-color-fill-1);
-  border-color: transparent;
+  color: var(--component-pagination-pagination-color-item-text-active-disabled, var(--component-pagination-color-item-text-active-disabled, var(--sd-color-primary-light-3)));
+  background-color: var(--component-pagination-pagination-color-bg-item-active-disabled, var(--component-pagination-color-bg-item-active-disabled, var(--sd-color-fill-1)));
+  border-color: var(--component-pagination-pagination-color-item-border-active-disabled, var(--component-pagination-color-item-border-active-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-pagination-size-mini .sd-pagination-item {
-  min-width: 24px;
-  height: 24px;
-  font-size: 12px;
-  line-height: 24px;
+  min-width: var(--component-pagination-pagination-size-mini, var(--component-pagination-size-mini, var(--size-mini, 24px)));
+  height: var(--component-pagination-pagination-size-mini, var(--component-pagination-size-mini, var(--size-mini, 24px)));
+  font-size: var(--component-pagination-pagination-size-mini-font-size, var(--component-pagination-size-mini-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-pagination-pagination-size-mini, var(--component-pagination-size-mini, var(--size-mini, 24px)));
 }
 .sd-pagination-size-mini .sd-pagination-item-previous, .sd-pagination-size-mini .sd-pagination-item-next {
-  font-size: 12px;
+  font-size: var(--component-pagination-pagination-size-icon-arrow-mini, var(--component-pagination-size-icon-arrow-mini, var(--size-3, 12px)));
 }
 .sd-pagination-size-mini .sd-pagination-total {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: var(--component-pagination-pagination-size-mini-font-size, var(--component-pagination-size-mini-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-pagination-pagination-size-mini, var(--component-pagination-size-mini, var(--size-mini, 24px)));
 }
 .sd-pagination-size-mini .sd-pagination-option {
-  height: 24px;
-  font-size: 12px;
+  height: var(--component-pagination-pagination-size-mini, var(--component-pagination-size-mini, var(--size-mini, 24px)));
+  font-size: var(--component-pagination-pagination-size-mini-font-size, var(--component-pagination-size-mini-font-size, var(--font-size-body-1, 12px)));
   line-height: 0;
 }
 .sd-pagination-size-mini .sd-pagination-jumper > span {
-  font-size: 12px;
+  font-size: var(--component-pagination-pagination-size-mini-font-size, var(--component-pagination-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-pagination-size-small .sd-pagination-item {
-  min-width: 28px;
-  height: 28px;
-  font-size: 14px;
-  line-height: 28px;
+  min-width: var(--component-pagination-pagination-size-small, var(--component-pagination-size-small, var(--size-small, 28px)));
+  height: var(--component-pagination-pagination-size-small, var(--component-pagination-size-small, var(--size-small, 28px)));
+  font-size: var(--component-pagination-pagination-size-small-font-size, var(--component-pagination-size-small-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-small, var(--component-pagination-size-small, var(--size-small, 28px)));
 }
 .sd-pagination-size-small .sd-pagination-item-previous, .sd-pagination-size-small .sd-pagination-item-next {
-  font-size: 12px;
+  font-size: var(--component-pagination-pagination-size-icon-arrow-small, var(--component-pagination-size-icon-arrow-small, var(--size-3, 12px)));
 }
 .sd-pagination-size-small .sd-pagination-total {
-  font-size: 14px;
-  line-height: 28px;
+  font-size: var(--component-pagination-pagination-size-small-font-size, var(--component-pagination-size-small-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-small, var(--component-pagination-size-small, var(--size-small, 28px)));
 }
 .sd-pagination-size-small .sd-pagination-option {
-  height: 28px;
-  font-size: 14px;
+  height: var(--component-pagination-pagination-size-small, var(--component-pagination-size-small, var(--size-small, 28px)));
+  font-size: var(--component-pagination-pagination-size-small-font-size, var(--component-pagination-size-small-font-size, var(--font-size-body-3, 14px)));
   line-height: 0;
 }
 .sd-pagination-size-small .sd-pagination-jumper > span {
-  font-size: 14px;
+  font-size: var(--component-pagination-pagination-size-small-font-size, var(--component-pagination-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-pagination-size-large .sd-pagination-item {
-  min-width: 36px;
-  height: 36px;
-  font-size: 14px;
-  line-height: 36px;
+  min-width: var(--component-pagination-pagination-size-large, var(--component-pagination-size-large, var(--size-large, 36px)));
+  height: var(--component-pagination-pagination-size-large, var(--component-pagination-size-large, var(--size-large, 36px)));
+  font-size: var(--component-pagination-pagination-size-large-font-size, var(--component-pagination-size-large-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-large, var(--component-pagination-size-large, var(--size-large, 36px)));
 }
 .sd-pagination-size-large .sd-pagination-item-previous, .sd-pagination-size-large .sd-pagination-item-next {
-  font-size: 14px;
+  font-size: var(--component-pagination-pagination-size-icon-arrow-large, var(--component-pagination-size-icon-arrow-large, 14px));
 }
 .sd-pagination-size-large .sd-pagination-total {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-pagination-pagination-size-large-font-size, var(--component-pagination-size-large-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-pagination-pagination-size-large, var(--component-pagination-size-large, var(--size-large, 36px)));
 }
 .sd-pagination-size-large .sd-pagination-option {
-  height: 36px;
-  font-size: 14px;
+  height: var(--component-pagination-pagination-size-large, var(--component-pagination-size-large, var(--size-large, 36px)));
+  font-size: var(--component-pagination-pagination-size-large-font-size, var(--component-pagination-size-large-font-size, var(--font-size-body-3, 14px)));
   line-height: 0;
 }
 .sd-pagination-size-large .sd-pagination-jumper > span {
-  font-size: 14px;
+  font-size: var(--component-pagination-pagination-size-large-font-size, var(--component-pagination-size-large-font-size, var(--font-size-body-3, 14px)));
 }

package/es/pagination/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -95,3 +96,305 @@ $pagination-color-jumper-goto: var(string.unquote('#{global.$sd-cssvars-prefix}-
 
 // total text
 $pagination-color-text-total: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+// @generated runtime tokens — pnpm theme:generate
+$pagination-item-border-radius: theme-runtime.token(
+  'pagination',
+  'pagination-item-border-radius',
+  $pagination-item-border-radius
+);
+$pagination-item-spacing: theme-runtime.token(
+  'pagination',
+  'pagination-item-spacing',
+  $pagination-item-spacing,
+  'spacing-4'
+);
+$pagination-margin-total-spacing: theme-runtime.token(
+  'pagination',
+  'pagination-margin-total-spacing',
+  $pagination-margin-total-spacing,
+  'spacing-4'
+);
+$pagination-margin-option-left: theme-runtime.token(
+  'pagination',
+  'pagination-margin-option-left',
+  $pagination-margin-option-left,
+  'spacing-4'
+);
+$pagination-margin-jumper-left: theme-runtime.token(
+  'pagination',
+  'pagination-margin-jumper-left',
+  $pagination-margin-jumper-left,
+  'spacing-4'
+);
+$pagination-size-mini: theme-runtime.token(
+  'pagination',
+  'pagination-size-mini',
+  $pagination-size-mini,
+  'size-mini'
+);
+$pagination-size-small: theme-runtime.token(
+  'pagination',
+  'pagination-size-small',
+  $pagination-size-small,
+  'size-small'
+);
+$pagination-size-default: theme-runtime.token(
+  'pagination',
+  'pagination-size-default',
+  $pagination-size-default,
+  'size-default'
+);
+$pagination-size-large: theme-runtime.token(
+  'pagination',
+  'pagination-size-large',
+  $pagination-size-large,
+  'size-large'
+);
+$pagination-padding-horizontal: theme-runtime.token(
+  'pagination',
+  'pagination-padding-horizontal',
+  $pagination-padding-horizontal
+);
+$pagination-size-mini-font-size: theme-runtime.token(
+  'pagination',
+  'pagination-size-mini-font-size',
+  $pagination-size-mini-font-size,
+  'font-size-body-1'
+);
+$pagination-size-small-font-size: theme-runtime.token(
+  'pagination',
+  'pagination-size-small-font-size',
+  $pagination-size-small-font-size,
+  'font-size-body-3'
+);
+$pagination-size-default-font-size: theme-runtime.token(
+  'pagination',
+  'pagination-size-default-font-size',
+  $pagination-size-default-font-size,
+  'font-size-body-3'
+);
+$pagination-size-large-font-size: theme-runtime.token(
+  'pagination',
+  'pagination-size-large-font-size',
+  $pagination-size-large-font-size,
+  'font-size-body-3'
+);
+$pagination-size-icon-arrow_mini: theme-runtime.token(
+  'pagination',
+  'pagination-size-icon-arrow-mini',
+  $pagination-size-icon-arrow_mini,
+  'size-3'
+);
+$pagination-size-icon-arrow_small: theme-runtime.token(
+  'pagination',
+  'pagination-size-icon-arrow-small',
+  $pagination-size-icon-arrow_small,
+  'size-3'
+);
+$pagination-size-icon-arrow_default: theme-runtime.token(
+  'pagination',
+  'pagination-size-icon-arrow-default',
+  $pagination-size-icon-arrow_default,
+  'size-3'
+);
+$pagination-size-icon-arrow_large: theme-runtime.token(
+  'pagination',
+  'pagination-size-icon-arrow-large',
+  $pagination-size-icon-arrow_large
+);
+$pagination-size-icon-ellipsis: theme-runtime.token(
+  'pagination',
+  'pagination-size-icon-ellipsis',
+  $pagination-size-icon-ellipsis,
+  'size-4'
+);
+$pagination-border-width: theme-runtime.token(
+  'pagination',
+  'pagination-border-width',
+  $pagination-border-width,
+  'border-none'
+);
+$pagination-color-bg-item: theme-runtime.token(
+  'pagination',
+  'pagination-color-bg-item',
+  $pagination-color-bg-item,
+  'color-transparent'
+);
+$pagination-color-bg-item_active: theme-runtime.token(
+  'pagination',
+  'pagination-color-bg-item-active',
+  $pagination-color-bg-item_active
+);
+$pagination-color-bg-item_hover: theme-runtime.token(
+  'pagination',
+  'pagination-color-bg-item-hover',
+  $pagination-color-bg-item_hover
+);
+$pagination-color-bg-item_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-bg-item-disabled',
+  $pagination-color-bg-item_disabled,
+  'color-transparent'
+);
+$pagination-color-bg-item_active_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-bg-item-active-disabled',
+  $pagination-color-bg-item_active_disabled
+);
+$pagination-color-item-text: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-text',
+  $pagination-color-item-text
+);
+$pagination-color-item-text_hover: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-text-hover',
+  $pagination-color-item-text_hover
+);
+$pagination-color-item-text_active: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-text-active',
+  $pagination-color-item-text_active,
+  'color-primary-6'
+);
+$pagination-color-item-text_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-text-disabled',
+  $pagination-color-item-text_disabled
+);
+$pagination-color-item-text_active_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-text-active-disabled',
+  $pagination-color-item-text_active_disabled
+);
+$pagination-color-item-border: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-border',
+  $pagination-color-item-border,
+  'color-transparent'
+);
+$pagination-color-item-border_active: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-border-active',
+  $pagination-color-item-border_active,
+  'color-transparent'
+);
+$pagination-color-item-border_hover: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-border-hover',
+  $pagination-color-item-border_hover,
+  'color-transparent'
+);
+$pagination-color-item-border_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-border-disabled',
+  $pagination-color-item-border_disabled,
+  'color-transparent'
+);
+$pagination-color-item-border_active_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-item-border-active-disabled',
+  $pagination-color-item-border_active_disabled,
+  'color-transparent'
+);
+$pagination-color-icon-arrow: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow',
+  $pagination-color-icon-arrow
+);
+$pagination-color-icon-arrow-bg: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow-bg',
+  $pagination-color-icon-arrow-bg,
+  'color-transparent'
+);
+$pagination-color-icon-arrow-bg_hover: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow-bg-hover',
+  $pagination-color-icon-arrow-bg_hover
+);
+$pagination-color-icon-arrow-bg_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow-bg-disabled',
+  $pagination-color-icon-arrow-bg_disabled,
+  'color-transparent'
+);
+$pagination-color-icon-arrow-text_hover: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow-text-hover',
+  $pagination-color-icon-arrow-text_hover,
+  'color-primary-6'
+);
+$pagination-color-icon-arrow-text_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-color-icon-arrow-text-disabled',
+  $pagination-color-icon-arrow-text_disabled
+);
+$pagination-simple-input-width: theme-runtime.token(
+  'pagination',
+  'pagination-simple-input-width',
+  $pagination-simple-input-width,
+  'size-10'
+);
+$pagination-simple-color-icon-arrow: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow',
+  $pagination-simple-color-icon-arrow
+);
+$pagination-simple-color-icon-arrow-bg: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow-bg',
+  $pagination-simple-color-icon-arrow-bg,
+  'color-transparent'
+);
+$pagination-simple-color-icon-arrow-bg_hover: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow-bg-hover',
+  $pagination-simple-color-icon-arrow-bg_hover
+);
+$pagination-simple-color-icon-arrow-bg_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow-bg-disabled',
+  $pagination-simple-color-icon-arrow-bg_disabled,
+  'color-transparent'
+);
+$pagination-simple-color-icon-arrow-text_hover: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow-text-hover',
+  $pagination-simple-color-icon-arrow-text_hover,
+  'color-primary-6'
+);
+$pagination-simple-color-icon-arrow-text_disabled: theme-runtime.token(
+  'pagination',
+  'pagination-simple-color-icon-arrow-text-disabled',
+  $pagination-simple-color-icon-arrow-text_disabled
+);
+$pagination-simple-margin-separator-left: theme-runtime.token(
+  'pagination',
+  'pagination-simple-margin-separator-left',
+  $pagination-simple-margin-separator-left,
+  'spacing-6'
+);
+$pagination-simple-margin-separator-right: theme-runtime.token(
+  'pagination',
+  'pagination-simple-margin-separator-right',
+  $pagination-simple-margin-separator-right,
+  'spacing-6'
+);
+$patination-jumper-input-width: theme-runtime.token(
+  'pagination',
+  'patination-jumper-input-width',
+  $patination-jumper-input-width,
+  'size-10'
+);
+$pagination-color-jumper-goto: theme-runtime.token(
+  'pagination',
+  'pagination-color-jumper-goto',
+  $pagination-color-jumper-goto
+);
+$pagination-color-text-total: theme-runtime.token(
+  'pagination',
+  'pagination-color-text-total',
+  $pagination-color-text-total
+);

package/es/panel-group/style/index.css

@@ -66,16 +66,16 @@
   touch-action: none;
 }
 .sd-panel-separator-grip[aria-orientation=vertical] {
-  width: 14px;
+  width: var(--component-panel-group-panel-separator-hit-size, var(--component-panel-group-separator-hit-size, 14px));
   height: 100%;
 }
 .sd-panel-separator-grip[aria-orientation=horizontal] {
   width: 100%;
-  height: 14px;
+  height: var(--component-panel-group-panel-separator-hit-size, var(--component-panel-group-separator-hit-size, 14px));
 }
 .sd-panel-separator-grip:focus-visible {
   border-radius: 4px;
-  box-shadow: 0 0 0 3px var(--sd-color-primary-light-2);
+  box-shadow: var(--component-panel-group-panel-separator-focus-ring, var(--component-panel-group-separator-focus-ring, 0 0 0 3px var(--sd-color-primary-light-2)));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -92,10 +92,10 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: var(--sd-color-text-1);
+  color: var(--component-panel-group-panel-separator-color-icon, var(--component-panel-group-separator-color-icon, var(--sd-color-text-1)));
   font-size: 12px;
   line-height: 1;
-  background-color: var(--sd-color-neutral-3);
+  background-color: var(--component-panel-group-panel-separator-color-background, var(--component-panel-group-separator-color-background, var(--sd-color-neutral-3)));
   transform: translate(-50%, -50%);
 }
 .sd-resizebox-trigger-icon {
@@ -103,8 +103,8 @@
   margin: -3px;
 }
 .sd-resizebox-trigger-vertical > .sd-resizebox-trigger-icon-wrapper {
-  width: 6px;
+  width: var(--component-panel-group-panel-separator-trigger-size, var(--component-panel-group-separator-trigger-size, 6px));
 }
 .sd-resizebox-trigger-horizontal > .sd-resizebox-trigger-icon-wrapper {
-  height: 6px;
+  height: var(--component-panel-group-panel-separator-trigger-size, var(--component-panel-group-separator-trigger-size, 6px));
 }