@sdata/web-vue 4.7.1 → 5.0.0

package/es/tabs/style/index.css

@@ -16,22 +16,22 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-icon-hover.sd-tabs-icon-hover::before {
-  width: 16px;
-  height: 16px;
+  width: var(--component-tabs-tabs-size-icon-bg, var(--component-tabs-size-icon-bg, var(--size-4, 16px)));
+  height: var(--component-tabs-tabs-size-icon-bg, var(--component-tabs-size-icon-bg, var(--size-4, 16px)));
 }
 
 .sd-tabs .sd-tabs-icon-hover {
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-tabs-tabs-color-icon, var(--component-tabs-color-icon, var(--sd-color-text-2)));
+  font-size: var(--component-tabs-tabs-size-icon, var(--component-tabs-size-icon, var(--size-3, 12px)));
   user-select: none;
 }
 .sd-tabs-dropdown-icon {
-  margin-left: 6px;
-  font-size: 12px;
+  margin-left: var(--component-tabs-tabs-spacing-nav-icon-header, var(--component-tabs-spacing-nav-icon-header, var(--spacing-3, 6px)));
+  font-size: var(--component-tabs-tabs-size-icon, var(--component-tabs-size-icon, var(--size-3, 12px)));
   user-select: none;
 }
 .sd-tabs-tab-close-btn {
-  margin-left: 8px;
+  margin-left: var(--component-tabs-tabs-margin-close-icon-left, var(--component-tabs-margin-close-icon-left, var(--spacing-4, 8px)));
   padding: 0;
   color: inherit;
   font: inherit;
@@ -43,10 +43,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 8px;
+  padding: 0 var(--component-tabs-tabs-margin-add-icon-left, var(--component-tabs-margin-add-icon-left, var(--spacing-4, 8px)));
   color: inherit;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--component-tabs-tabs-size-icon, var(--component-tabs-size-icon, var(--size-3, 12px)));
   background: none;
   border: 0;
   user-select: none;
@@ -62,21 +62,21 @@
   border: 0;
 }
 .sd-tabs-nav-button-left {
-  margin-right: 6px;
-  margin-left: 10px;
+  margin-right: var(--component-tabs-tabs-spacing-nav-icon-header, var(--component-tabs-spacing-nav-icon-header, var(--spacing-3, 6px)));
+  margin-left: var(--component-tabs-tabs-padding-header-wrapper-horizontal, var(--component-tabs-padding-header-wrapper-horizontal, var(--spacing-5, 10px)));
 }
 .sd-tabs-nav-button-right {
-  margin-right: 10px;
-  margin-left: 6px;
+  margin-right: var(--component-tabs-tabs-padding-header-wrapper-horizontal, var(--component-tabs-padding-header-wrapper-horizontal, var(--spacing-5, 10px)));
+  margin-left: var(--component-tabs-tabs-spacing-nav-icon-header, var(--component-tabs-spacing-nav-icon-header, var(--spacing-3, 6px)));
 }
 .sd-tabs-nav-button-up {
-  margin-bottom: 10px;
+  margin-bottom: var(--component-tabs-tabs-padding-header-wrapper-horizontal, var(--component-tabs-padding-header-wrapper-horizontal, var(--spacing-5, 10px)));
 }
 .sd-tabs-nav-button-down {
-  margin-top: 10px;
+  margin-top: var(--component-tabs-tabs-padding-header-wrapper-horizontal, var(--component-tabs-padding-header-wrapper-horizontal, var(--spacing-5, 10px)));
 }
 .sd-tabs-nav-button-disabled {
-  color: var(--sd-color-text-4);
+  color: var(--component-tabs-tabs-color-icon-disabled, var(--component-tabs-color-icon-disabled, var(--sd-color-text-4)));
   cursor: not-allowed;
 }
 
@@ -95,8 +95,8 @@
   left: 0;
   display: block;
   clear: both;
-  height: 1px;
-  background-color: var(--sd-color-neutral-3);
+  height: var(--component-tabs-tabs-line-size-header-border, var(--component-tabs-line-size-header-border, var(--border-1, 1px)));
+  background-color: var(--component-tabs-tabs-line-color-header-border, var(--component-tabs-line-color-header-border, var(--sd-color-neutral-3)));
   content: "";
 }
 .sd-tabs-nav-tab {
@@ -123,9 +123,9 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 4px 0;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  padding: max(0px, (32px - 1.5715 * var(--component-tabs-tabs-size-default-font-size, var(--component-tabs-size-default-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px) 0;
+  color: var(--component-tabs-tabs-color-title-text, var(--component-tabs-color-title-text, var(--sd-color-text-2)));
+  font-size: var(--component-tabs-tabs-size-default-font-size, var(--component-tabs-size-default-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   outline: none;
   cursor: pointer;
@@ -135,42 +135,42 @@
   display: inline-block;
 }
 .sd-tabs-tab:hover {
-  color: var(--sd-color-text-2);
-  font-weight: 400;
+  color: var(--component-tabs-tabs-color-title-text-hover, var(--component-tabs-color-title-text-hover, var(--component-tabs-tabs-color-title-text, var(--component-tabs-color-title-text, var(--sd-color-text-2)))));
+  font-weight: var(--component-tabs-tabs-line-font-title-text-weight-hover, var(--component-tabs-line-font-title-text-weight-hover, var(--font-weight-400, 400)));
 }
 .sd-tabs-tab-disabled, .sd-tabs-tab-disabled:hover {
-  color: var(--sd-color-text-4);
+  color: var(--component-tabs-tabs-color-title-text-disabled, var(--component-tabs-color-title-text-disabled, var(--sd-color-text-4)));
   cursor: not-allowed;
 }
 .sd-tabs-tab-active, .sd-tabs-tab-active:hover {
-  color: rgb(var(--sd-primary-6));
-  font-weight: 500;
+  color: var(--component-tabs-tabs-color-title-text-active, var(--component-tabs-color-title-text-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  font-weight: var(--component-tabs-tabs-line-font-title-text-weight-active, var(--component-tabs-line-font-title-text-weight-active, var(--font-weight-500, 500)));
 }
 .sd-tabs-tab-active.sd-tabs-tab-disabled, .sd-tabs-tab-active:hover.sd-tabs-tab-disabled {
-  color: var(--sd-color-primary-light-3);
+  color: var(--component-tabs-tabs-color-title-text-disabled-active, var(--component-tabs-color-title-text-disabled-active, var(--sd-color-primary-light-3)));
 }
 .sd-tabs-nav-ink {
   position: absolute;
   top: initial;
   right: initial;
   bottom: 0;
-  height: 2px;
-  background-color: rgb(var(--sd-primary-6));
+  height: var(--component-tabs-tabs-line-size-ink-stroke, var(--component-tabs-line-size-ink-stroke, 2px));
+  background-color: var(--component-tabs-tabs-line-color-ink-bg, var(--component-tabs-line-color-ink-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-nav-ink.sd-tabs-header-ink-no-animation {
   transition: none;
 }
 .sd-tabs-nav-ink-disabled {
-  background-color: var(--sd-color-primary-light-3);
+  background-color: var(--component-tabs-tabs-line-color-ink-bg-disabled, var(--component-tabs-line-color-ink-bg-disabled, var(--sd-color-primary-light-3)));
 }
 
 .sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  line-height: 40px;
+  line-height: var(--component-tabs-tabs-size-default-header-height-line, var(--component-tabs-size-default-header-height-line, var(--size-10, 40px)));
 }
 .sd-tabs-nav-type-line .sd-tabs-tab {
   margin: 0 16px;
-  padding: 8px 0;
+  padding: max(0px, (var(--component-tabs-tabs-size-default-header-height-line, var(--component-tabs-size-default-header-height-line, var(--size-10, 40px))) - 1.5715 * var(--component-tabs-tabs-size-default-font-size, var(--component-tabs-size-default-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px) 0;
   line-height: 1.5715;
 }
 .sd-tabs-nav-type-line .sd-tabs-tab-title {
@@ -182,90 +182,86 @@
   position: absolute;
   inset: 0 -8px;
   z-index: -1;
-  background-color: transparent;
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-tabs-tabs-line-color-title-bg, var(--component-tabs-line-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-tabs-tabs-line-border-radius, var(--component-tabs-line-border-radius, var(--sd-border-radius-small)));
   opacity: 1;
   transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
 }
 .sd-tabs-nav-type-line .sd-tabs-tab:hover .sd-tabs-tab-title::before {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-tabs-tabs-line-color-title-bg-hover, var(--component-tabs-line-color-title-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-tabs-nav-type-line .sd-tabs-tab-active .sd-tabs-tab-title::before, .sd-tabs-nav-type-line .sd-tabs-tab-active:hover .sd-tabs-tab-title::before {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-line-color-title-bg-active, var(--component-tabs-line-color-title-bg-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-line .sd-tabs-tab-disabled .sd-tabs-tab-title::before, .sd-tabs-nav-type-line .sd-tabs-tab-disabled:hover .sd-tabs-tab-title::before {
   opacity: 0;
 }
+.sd-tabs-nav-type-line .sd-tabs-tab:focus-visible {
+  outline: none;
+}
 .sd-tabs-nav-type-line .sd-tabs-tab:focus-visible .sd-tabs-tab-title::before {
-  border: 2px solid rgb(var(--sd-primary-6));
+  background-color: var(--component-tabs-tabs-line-color-title-bg-hover, var(--component-tabs-line-color-title-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-tabs-nav-type-line.sd-tabs-nav-horizontal > .sd-tabs-tab:first-of-type {
-  margin-left: 16px;
+  margin-left: var(--component-tabs-tabs-line-margin-title-horizontal-first, var(--component-tabs-line-margin-title-horizontal-first, var(--spacing-7, 16px)));
 }
 .sd-tabs-nav-type-line.sd-tabs-nav-horizontal .sd-tabs-nav-tab-list-no-padding > .sd-tabs-tab:first-of-type, .sd-tabs-nav-text.sd-tabs-nav-horizontal .sd-tabs-nav-tab-list-no-padding > .sd-tabs-tab:first-of-type {
   margin-left: 0;
 }
 .sd-tabs-nav-type-card .sd-tabs-tab, .sd-tabs-nav-type-card-gutter .sd-tabs-tab {
   position: relative;
-  padding: 4px 16px;
+  padding: 3.9995px 16px;
   font-size: 14px;
-  border: 1px solid var(--sd-color-neutral-3);
+  border: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
   transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-closable, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-closable {
-  padding-right: 12px;
+  padding-right: var(--component-tabs-tabs-card-padding-title-right-editable, var(--component-tabs-card-padding-title-right-editable, var(--spacing-6, 12px)));
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-closable:not(.sd-tabs-tab-active):hover .sd-icon-hover:hover::before, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-closable:not(.sd-tabs-tab-active):hover .sd-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-4);
-}
-.sd-tabs-nav-type-card .sd-tabs-tab:focus-visible::before, .sd-tabs-nav-type-card-gutter .sd-tabs-tab:focus-visible::before {
-  position: absolute;
-  inset: -1px 0 -1px -1px;
-  border: 2px solid rgb(var(--sd-primary-6));
-  content: "";
-}
-.sd-tabs-nav-type-card .sd-tabs-tab:last-child:focus-visible::before, .sd-tabs-nav-type-card-gutter .sd-tabs-tab:last-child:focus-visible::before {
-  right: -1px;
+  background-color: var(--component-tabs-tabs-card-color-close-icon-bg-hover, var(--component-tabs-card-color-close-icon-bg-hover, var(--sd-color-fill-4)));
 }
 .sd-tabs-nav-type-card .sd-tabs-nav-add-btn, .sd-tabs-nav-type-card-gutter .sd-tabs-nav-add-btn {
   height: 32px;
 }
 .sd-tabs-nav-type-card .sd-tabs-tab {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-card-color-title-bg, var(--component-tabs-card-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-right: none;
 }
 .sd-tabs-nav-type-card .sd-tabs-tab:last-child {
-  border-right: 1px solid var(--sd-color-neutral-3);
-  border-top-right-radius: var(--sd-border-radius-small);
+  border-right: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
+  border-top-right-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
 .sd-tabs-nav-type-card .sd-tabs-tab:first-child {
-  border-top-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
-.sd-tabs-nav-type-card .sd-tabs-tab:hover {
-  background-color: var(--sd-color-fill-3);
+.sd-tabs-nav-type-card .sd-tabs-tab:hover, .sd-tabs-nav-type-card .sd-tabs-tab:focus-visible {
+  background-color: var(--component-tabs-tabs-card-color-title-bg-hover, var(--component-tabs-card-color-title-bg-hover, var(--sd-color-fill-3)));
+  outline: none;
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-disabled, .sd-tabs-nav-type-card .sd-tabs-tab-disabled:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-card-color-title-bg-disabled, var(--component-tabs-card-color-title-bg-disabled, var(--component-tabs-tabs-card-color-title-bg, var(--component-tabs-card-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))))));
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-active, .sd-tabs-nav-type-card .sd-tabs-tab-active:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-card-color-title-bg-active, var(--component-tabs-card-color-title-bg-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-bottom-color: var(--sd-color-bg-2);
 }
 .sd-tabs-nav-type-card-gutter .sd-tabs-tab {
-  margin-left: 4px;
-  background-color: var(--sd-color-fill-1);
-  border-right: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-small) var(--sd-border-radius-small) 0 0;
+  margin-left: var(--component-tabs-tabs-card-gutter-spacing-horizontal, var(--component-tabs-card-gutter-spacing-horizontal, var(--spacing-2, 4px)));
+  background-color: var(--component-tabs-tabs-card-gutter-color-title-bg, var(--component-tabs-card-gutter-color-title-bg, var(--sd-color-fill-1)));
+  border-right: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small))) var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small))) 0 0;
 }
-.sd-tabs-nav-type-card-gutter .sd-tabs-tab:hover {
-  background-color: var(--sd-color-fill-3);
+.sd-tabs-nav-type-card-gutter .sd-tabs-tab:hover, .sd-tabs-nav-type-card-gutter .sd-tabs-tab:focus-visible {
+  background-color: var(--component-tabs-tabs-card-gutter-color-title-bg-hover, var(--component-tabs-card-gutter-color-title-bg-hover, var(--sd-color-fill-3)));
+  outline: none;
 }
 .sd-tabs-nav-type-card-gutter .sd-tabs-tab-disabled, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-disabled:hover {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-tabs-tabs-card-gutter-color-title-bg-disabled, var(--component-tabs-card-gutter-color-title-bg-disabled, var(--component-tabs-tabs-card-gutter-color-title-bg, var(--component-tabs-card-gutter-color-title-bg, var(--sd-color-fill-1)))));
 }
 .sd-tabs-nav-type-card-gutter .sd-tabs-tab-active, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-active:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-card-gutter-color-title-bg-active, var(--component-tabs-card-gutter-color-title-bg-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-bottom-color: var(--sd-color-bg-2);
 }
 .sd-tabs-nav-type-card-gutter .sd-tabs-tab:first-child {
@@ -277,8 +273,8 @@
 .sd-tabs-nav-type-text .sd-tabs-tab {
   position: relative;
   margin: 0 9px;
-  padding: 5px 0;
-  font-size: 14px;
+  padding: max(0px, (var(--component-tabs-tabs-size-default-header-height-text, var(--component-tabs-size-default-header-height-text, var(--size-8, 32px))) - 1.5715 * var(--component-tabs-tabs-size-default-font-size, var(--component-tabs-size-default-font-size, var(--font-size-body-3, 14px)))) / 2 - 0px) 0;
+  font-size: var(--component-tabs-tabs-size-default-font-size-text, var(--component-tabs-size-default-font-size-text, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
 }
 .sd-tabs-nav-type-text .sd-tabs-tab:not(:first-of-type)::before {
@@ -287,55 +283,61 @@
   left: -9px;
   display: block;
   width: 2px;
-  height: 12px;
-  background-color: var(--sd-color-fill-3);
+  height: var(--component-tabs-tabs-text-size-separator-height, var(--component-tabs-text-size-separator-height, var(--size-3, 12px)));
+  background-color: var(--component-tabs-tabs-text-color-separator-bg, var(--component-tabs-text-color-separator-bg, var(--sd-color-fill-3)));
   transform: translateY(-50%);
   content: "";
 }
 .sd-tabs-nav-type-text .sd-tabs-tab-title {
   padding-right: 8px;
   padding-left: 8px;
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-text-color-title-bg, var(--component-tabs-text-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-text .sd-tabs-tab-title:hover {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-tabs-tabs-text-color-title-bg-hover, var(--component-tabs-text-color-title-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-tabs-nav-type-text .sd-tabs-tab-active .sd-tabs-tab-title,
 .sd-tabs-nav-type-text .sd-tabs-tab-active .sd-tabs-tab-title:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-text-color-title-bg-active, var(--component-tabs-text-color-title-bg-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-text .sd-tabs-tab-disabled .sd-tabs-tab-title,
 .sd-tabs-nav-type-text .sd-tabs-tab-disabled .sd-tabs-tab-title:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-text-color-title-bg-disabled, var(--component-tabs-text-color-title-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-text .sd-tabs-tab-active.sd-tabs-nav-type-text .sd-tabs-tab-disabled .sd-tabs-tab-title,
 .sd-tabs-nav-type-text .sd-tabs-tab-active.sd-tabs-nav-type-text .sd-tabs-tab-disabled .sd-tabs-tab-title:hover {
-  background-color: var(--sd-color-primary-light-3);
+  background-color: var(--component-tabs-tabs-text-color-title-bg-disabled-active, var(--component-tabs-text-color-title-bg-disabled-active, var(--sd-color-primary-light-3)));
+}
+.sd-tabs-nav-type-text .sd-tabs-tab:focus-visible {
+  outline: none;
 }
 .sd-tabs-nav-type-text .sd-tabs-tab:focus-visible .sd-tabs-tab-title {
-  margin: -2px;
-  border: 2px solid rgb(var(--sd-primary-6));
+  background-color: var(--component-tabs-tabs-text-color-title-bg-hover, var(--component-tabs-text-color-title-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-tabs-nav-type-rounded::before {
   display: none;
 }
 .sd-tabs-nav-type-rounded .sd-tabs-tab {
   margin: 0 6px;
-  padding: 5px 0;
-  padding-right: 16px;
-  padding-left: 16px;
-  font-size: 14px;
-  background-color: transparent;
-  border-radius: 32px;
+  padding: max(0px, (var(--component-tabs-tabs-size-default-header-height-rounded, var(--component-tabs-size-default-header-height-rounded, var(--size-8, var(--component-tabs-tabs-size-default-header-height-rounded, var(--component-tabs-size-default-header-height-rounded, var(--size-8, 32px)))))) - 1.5715 * var(--component-tabs-tabs-size-default-font-size-rounded, var(--component-tabs-size-default-font-size-rounded, var(--font-size-body-3, var(--component-tabs-tabs-size-default-font-size-rounded, var(--component-tabs-size-default-font-size-rounded, var(--font-size-body-3, 14px))))))) / 2 - 0px) 0;
+  padding-right: var(--component-tabs-tabs-rounded-padding-title-horizontal, var(--component-tabs-rounded-padding-title-horizontal, var(--spacing-7, 16px)));
+  padding-left: var(--component-tabs-tabs-rounded-padding-title-horizontal, var(--component-tabs-rounded-padding-title-horizontal, var(--spacing-7, 16px)));
+  font-size: var(--component-tabs-tabs-size-default-font-size-rounded, var(--component-tabs-size-default-font-size-rounded, var(--font-size-body-3, var(--component-tabs-tabs-size-default-font-size-rounded, var(--component-tabs-size-default-font-size-rounded, var(--font-size-body-3, 14px))))));
+  background-color: var(--component-tabs-tabs-rounded-color-title-bg, var(--component-tabs-rounded-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-tabs-tabs-size-default-header-height-rounded, var(--component-tabs-size-default-header-height-rounded, var(--size-8, var(--component-tabs-tabs-size-default-header-height-rounded, var(--component-tabs-size-default-header-height-rounded, var(--size-8, 32px))))));
 }
 .sd-tabs-nav-type-rounded .sd-tabs-tab:hover {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-tabs-tabs-rounded-color-title-bg-hover, var(--component-tabs-rounded-color-title-bg-hover, var(--component-tabs-tabs-rounded-color-title-bg-active, var(--component-tabs-rounded-color-title-bg-active, var(--sd-color-fill-2)))));
+}
+.sd-tabs-nav-type-rounded .sd-tabs-tab:focus-visible {
+  background-color: var(--component-tabs-tabs-rounded-color-title-bg-hover, var(--component-tabs-rounded-color-title-bg-hover, var(--component-tabs-tabs-rounded-color-title-bg-active, var(--component-tabs-rounded-color-title-bg-active, var(--sd-color-fill-2)))));
+  outline: none;
 }
 .sd-tabs-nav-type-rounded .sd-tabs-tab-disabled:hover {
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-rounded-color-title-bg-disabled, var(--component-tabs-rounded-color-title-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-rounded .sd-tabs-tab-active, .sd-tabs-nav-type-rounded .sd-tabs-tab-active:hover {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-tabs-tabs-rounded-color-title-bg-active, var(--component-tabs-rounded-color-title-bg-active, var(--sd-color-fill-2)));
 }
 .sd-tabs-nav-type-rounded .sd-tabs-tab:focus-visible {
   border-color: rgb(var(--sd-primary-6));
@@ -347,26 +349,30 @@
   justify-content: flex-end;
 }
 .sd-tabs-nav-type-capsule .sd-tabs-nav-tab-list {
-  padding: 3px 3px;
+  padding: 3px var(--component-tabs-tabs-capsule-padding-header-horizontal, var(--component-tabs-capsule-padding-header-horizontal, 3px));
   line-height: 1;
-  background-color: var(--sd-color-fill-2);
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-tabs-tabs-capsule-color-header-bg, var(--component-tabs-capsule-color-header-bg, var(--sd-color-fill-2)));
+  border-radius: var(--component-tabs-tabs-capsule-border-header-radius, var(--component-tabs-capsule-border-header-radius, var(--sd-border-radius-small)));
 }
 .sd-tabs-nav-type-capsule .sd-tabs-tab {
   position: relative;
   padding: 0 10px;
-  font-size: 14px;
+  font-size: var(--component-tabs-tabs-size-default-font-size-capsule, var(--component-tabs-size-default-font-size-capsule, var(--font-size-body-3, 14px)));
   line-height: 26px;
-  background-color: transparent;
+  background-color: var(--component-tabs-tabs-capsule-color-title-bg, var(--component-tabs-capsule-color-title-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tabs-nav-type-capsule .sd-tabs-tab:hover {
-  background-color: var(--sd-color-bg-2);
+  background-color: var(--component-tabs-tabs-capsule-color-title-bg-hover, var(--component-tabs-capsule-color-title-bg-hover, var(--component-tabs-tabs-capsule-color-title-bg-active, var(--component-tabs-capsule-color-title-bg-active, var(--sd-color-bg-2)))));
+}
+.sd-tabs-nav-type-capsule .sd-tabs-tab:focus-visible {
+  background-color: var(--component-tabs-tabs-capsule-color-title-bg-hover, var(--component-tabs-capsule-color-title-bg-hover, var(--component-tabs-tabs-capsule-color-title-bg-active, var(--component-tabs-capsule-color-title-bg-active, var(--sd-color-bg-2)))));
+  outline: none;
 }
 .sd-tabs-nav-type-capsule .sd-tabs-tab-disabled:hover {
   background-color: unset;
 }
 .sd-tabs-nav-type-capsule .sd-tabs-tab-active, .sd-tabs-nav-type-capsule .sd-tabs-tab-active:hover {
-  background-color: var(--sd-color-bg-2);
+  background-color: var(--component-tabs-tabs-capsule-color-title-bg-active, var(--component-tabs-capsule-color-title-bg-active, var(--sd-color-bg-2)));
 }
 .sd-tabs-nav-type-capsule .sd-tabs-tab-active::before, .sd-tabs-nav-type-capsule .sd-tabs-tab-active + .sd-tabs-tab::before, .sd-tabs-nav-type-capsule .sd-tabs-tab-active:hover::before, .sd-tabs-nav-type-capsule .sd-tabs-tab-active:hover + .sd-tabs-tab::before {
   opacity: 0;
@@ -383,8 +389,8 @@
   left: -4px;
   display: block;
   width: 1px;
-  height: 14px;
-  background-color: var(--sd-color-fill-3);
+  height: var(--component-tabs-tabs-capsule-size-separator-height, var(--component-tabs-capsule-size-separator-height, 14px));
+  background-color: var(--component-tabs-tabs-capsule-color-separator-bg, var(--component-tabs-capsule-color-separator-bg, var(--sd-color-fill-3)));
   transform: translateY(-50%);
   transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
@@ -399,7 +405,7 @@
 .sd-tabs-content {
   box-sizing: border-box;
   width: 100%;
-  padding-top: 16px;
+  padding-top: var(--component-tabs-tabs-content-padding, var(--component-tabs-content-padding, var(--spacing-7, 16px)));
   overflow: hidden;
 }
 .sd-tabs-content-hide {
@@ -419,7 +425,7 @@
   height: auto;
 }
 .sd-tabs-type-card > .sd-tabs-content, .sd-tabs-type-card-gutter > .sd-tabs-content {
-  border: 1px solid var(--sd-color-neutral-3);
+  border: var(--component-tabs-tabs-card-border-content-width, var(--component-tabs-card-border-content-width, var(--border-1, 1px))) solid var(--component-tabs-tabs-line-color-header-border, var(--component-tabs-line-color-header-border, var(--sd-color-neutral-3)));
   border-top: none;
 }
 .sd-tabs-content-animation {
@@ -466,132 +472,132 @@
 }
 
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 12px;
-  line-height: 32px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size, var(--component-tabs-size-mini-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height-line, var(--component-tabs-size-mini-header-height-line, var(--size-8, 32px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-line .sd-tabs-tab {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  font-size: 12px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-mini-header-height-line, var(--component-tabs-size-mini-header-height-line, var(--size-8, 32px))) - 1.5715 * var(--component-tabs-tabs-size-mini-font-size, var(--component-tabs-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-mini-header-height-line, var(--component-tabs-size-mini-header-height-line, var(--size-8, 32px))) - 1.5715 * var(--component-tabs-tabs-size-mini-font-size, var(--component-tabs-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-mini-font-size, var(--component-tabs-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 12px;
-  line-height: 32px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size, var(--component-tabs-size-mini-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height-line, var(--component-tabs-size-mini-header-height-line, var(--size-8, 32px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-card .sd-tabs-tab, .sd-tabs-nav-size-mini.sd-tabs-nav-type-card-gutter .sd-tabs-tab {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  font-size: 12px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-mini-header-height, var(--component-tabs-size-mini-header-height, var(--size-6, 24px)))-2px - 1.5715 * var(--component-tabs-tabs-size-mini-font-size-card, var(--component-tabs-size-mini-font-size-card, var(--font-size-body-1, 12px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-mini-header-height, var(--component-tabs-size-mini-header-height, var(--size-6, 24px)))-2px - 1.5715 * var(--component-tabs-tabs-size-mini-font-size-card, var(--component-tabs-size-mini-font-size-card, var(--font-size-body-1, 12px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-mini-font-size-card, var(--component-tabs-size-mini-font-size-card, var(--font-size-body-1, 12px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-card .sd-tabs-nav-extra, .sd-tabs-nav-size-mini.sd-tabs-nav-type-card-gutter .sd-tabs-nav-extra {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size-card, var(--component-tabs-size-mini-font-size-card, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height, var(--component-tabs-size-mini-header-height, var(--size-6, 24px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-card .sd-tabs-nav-add-btn, .sd-tabs-nav-size-mini.sd-tabs-nav-type-card-gutter .sd-tabs-nav-add-btn {
-  height: 24px;
+  height: var(--component-tabs-tabs-size-mini-header-height, var(--component-tabs-size-mini-header-height, var(--size-6, 24px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-capsule .sd-tabs-tab {
-  font-size: 12px;
-  line-height: 18px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size-capsule, var(--component-tabs-size-mini-font-size-capsule, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height-capsule, var(--component-tabs-size-mini-header-height-capsule, var(--size-6, 24px)))-6px;
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-capsule .sd-tabs-nav-extra {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size-capsule, var(--component-tabs-size-mini-font-size-capsule, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height-capsule, var(--component-tabs-size-mini-header-height-capsule, var(--size-6, 24px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-rounded .sd-tabs-tab {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-mini-header-height-rounded, var(--component-tabs-size-mini-header-height-rounded, var(--size-6, 24px))) - 1.5715 * var(--component-tabs-tabs-size-mini-font-size-rounded, var(--component-tabs-size-mini-font-size-rounded, var(--font-size-body-1, 12px)))) / 2 - 0px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-mini-header-height-rounded, var(--component-tabs-size-mini-header-height-rounded, var(--size-6, 24px))) - 1.5715 * var(--component-tabs-tabs-size-mini-font-size-rounded, var(--component-tabs-size-mini-font-size-rounded, var(--font-size-body-1, 12px)))) / 2 - 0px);
+  font-size: var(--component-tabs-tabs-size-mini-font-size-rounded, var(--component-tabs-size-mini-font-size-rounded, var(--font-size-body-1, 12px)));
 }
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-rounded .sd-tabs-nav-extra {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: var(--component-tabs-tabs-size-mini-font-size-rounded, var(--component-tabs-size-mini-font-size-rounded, var(--font-size-body-1, 12px)));
+  line-height: var(--component-tabs-tabs-size-mini-header-height-rounded, var(--component-tabs-size-mini-header-height-rounded, var(--size-6, 24px)));
 }
 
 .sd-tabs-nav-size-small.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-tabs-tabs-size-small-font-size, var(--component-tabs-size-small-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height-line, var(--component-tabs-size-small-header-height-line, var(--size-9, 36px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-line .sd-tabs-tab {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-small-header-height-line, var(--component-tabs-size-small-header-height-line, var(--size-9, 36px))) - 1.5715 * var(--component-tabs-tabs-size-small-font-size, var(--component-tabs-size-small-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-small-header-height-line, var(--component-tabs-size-small-header-height-line, var(--size-9, 36px))) - 1.5715 * var(--component-tabs-tabs-size-small-font-size, var(--component-tabs-size-small-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-small-font-size, var(--component-tabs-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-tabs-tabs-size-small-font-size, var(--component-tabs-size-small-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height-line, var(--component-tabs-size-small-header-height-line, var(--size-9, 36px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-card .sd-tabs-tab, .sd-tabs-nav-size-small.sd-tabs-nav-type-card-gutter .sd-tabs-tab {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-small-header-height, var(--component-tabs-size-small-header-height, var(--size-7, 28px)))-2px - 1.5715 * var(--component-tabs-tabs-size-small-font-size-card, var(--component-tabs-size-small-font-size-card, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-small-header-height, var(--component-tabs-size-small-header-height, var(--size-7, 28px)))-2px - 1.5715 * var(--component-tabs-tabs-size-small-font-size-card, var(--component-tabs-size-small-font-size-card, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-small-font-size-card, var(--component-tabs-size-small-font-size-card, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-card .sd-tabs-nav-extra, .sd-tabs-nav-size-small.sd-tabs-nav-type-card-gutter .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 28px;
+  font-size: var(--component-tabs-tabs-size-small-font-size-card, var(--component-tabs-size-small-font-size-card, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height, var(--component-tabs-size-small-header-height, var(--size-7, 28px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-card .sd-tabs-nav-add-btn, .sd-tabs-nav-size-small.sd-tabs-nav-type-card-gutter .sd-tabs-nav-add-btn {
-  height: 28px;
+  height: var(--component-tabs-tabs-size-small-header-height, var(--component-tabs-size-small-header-height, var(--size-7, 28px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-capsule .sd-tabs-tab {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--component-tabs-tabs-size-small-font-size-capsule, var(--component-tabs-size-small-font-size-capsule, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height-capsule, var(--component-tabs-size-small-header-height-capsule, var(--size-7, 28px)))-6px;
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-capsule .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 28px;
+  font-size: var(--component-tabs-tabs-size-small-font-size-capsule, var(--component-tabs-size-small-font-size-capsule, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height-capsule, var(--component-tabs-size-small-header-height-capsule, var(--size-7, 28px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-rounded .sd-tabs-tab {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-small-header-height-rounded, var(--component-tabs-size-small-header-height-rounded, var(--size-7, 28px))) - 1.5715 * var(--component-tabs-tabs-size-small-font-size-rounded, var(--component-tabs-size-small-font-size-rounded, var(--font-size-body-3, 14px)))) / 2 - 0px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-small-header-height-rounded, var(--component-tabs-size-small-header-height-rounded, var(--size-7, 28px))) - 1.5715 * var(--component-tabs-tabs-size-small-font-size-rounded, var(--component-tabs-size-small-font-size-rounded, var(--font-size-body-3, 14px)))) / 2 - 0px);
+  font-size: var(--component-tabs-tabs-size-small-font-size-rounded, var(--component-tabs-size-small-font-size-rounded, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-small.sd-tabs-nav-type-rounded .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 28px;
+  font-size: var(--component-tabs-tabs-size-small-font-size-rounded, var(--component-tabs-size-small-font-size-rounded, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-small-header-height-rounded, var(--component-tabs-size-small-header-height-rounded, var(--size-7, 28px)));
 }
 
 .sd-tabs-nav-size-large.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 44px;
+  font-size: var(--component-tabs-tabs-size-large-font-size, var(--component-tabs-size-large-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height-line, var(--component-tabs-size-large-header-height-line, var(--size-11, 44px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-line .sd-tabs-tab {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-large-header-height-line, var(--component-tabs-size-large-header-height-line, var(--size-11, 44px))) - 1.5715 * var(--component-tabs-tabs-size-large-font-size, var(--component-tabs-size-large-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-large-header-height-line, var(--component-tabs-size-large-header-height-line, var(--size-11, 44px))) - 1.5715 * var(--component-tabs-tabs-size-large-font-size, var(--component-tabs-size-large-font-size, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-large-font-size, var(--component-tabs-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-line .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 44px;
+  font-size: var(--component-tabs-tabs-size-large-font-size, var(--component-tabs-size-large-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height-line, var(--component-tabs-size-large-header-height-line, var(--size-11, 44px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-card .sd-tabs-tab, .sd-tabs-nav-size-large.sd-tabs-nav-type-card-gutter .sd-tabs-tab {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-large-header-height, var(--component-tabs-size-large-header-height, var(--size-9, 36px)))-2px - 1.5715 * var(--component-tabs-tabs-size-large-font-size-card, var(--component-tabs-size-large-font-size-card, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-large-header-height, var(--component-tabs-size-large-header-height, var(--size-9, 36px)))-2px - 1.5715 * var(--component-tabs-tabs-size-large-font-size-card, var(--component-tabs-size-large-font-size-card, var(--font-size-body-3, 14px)))) / 2 - 1px);
+  font-size: var(--component-tabs-tabs-size-large-font-size-card, var(--component-tabs-size-large-font-size-card, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-card .sd-tabs-nav-extra, .sd-tabs-nav-size-large.sd-tabs-nav-type-card-gutter .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-tabs-tabs-size-large-font-size-card, var(--component-tabs-size-large-font-size-card, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height, var(--component-tabs-size-large-header-height, var(--size-9, 36px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-card .sd-tabs-nav-add-btn, .sd-tabs-nav-size-large.sd-tabs-nav-type-card-gutter .sd-tabs-nav-add-btn {
-  height: 36px;
+  height: var(--component-tabs-tabs-size-large-header-height, var(--component-tabs-size-large-header-height, var(--size-9, 36px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-capsule .sd-tabs-tab {
-  font-size: 14px;
-  line-height: 30px;
+  font-size: var(--component-tabs-tabs-size-large-font-size-capsule, var(--component-tabs-size-large-font-size-capsule, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height-capsule, var(--component-tabs-size-large-header-height-capsule, var(--size-9, 36px)))-6px;
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-capsule .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-tabs-tabs-size-large-font-size-capsule, var(--component-tabs-size-large-font-size-capsule, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height-capsule, var(--component-tabs-size-large-header-height-capsule, var(--size-9, 36px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-rounded .sd-tabs-tab {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  font-size: 14px;
+  padding-top: max(0px, (var(--component-tabs-tabs-size-large-header-height-rounded, var(--component-tabs-size-large-header-height-rounded, var(--size-9, 36px))) - 1.5715 * var(--component-tabs-tabs-size-large-font-size-rounded, var(--component-tabs-size-large-font-size-rounded, var(--font-size-body-3, 14px)))) / 2 - 0px);
+  padding-bottom: max(0px, (var(--component-tabs-tabs-size-large-header-height-rounded, var(--component-tabs-size-large-header-height-rounded, var(--size-9, 36px))) - 1.5715 * var(--component-tabs-tabs-size-large-font-size-rounded, var(--component-tabs-size-large-font-size-rounded, var(--font-size-body-3, 14px)))) / 2 - 0px);
+  font-size: var(--component-tabs-tabs-size-large-font-size-rounded, var(--component-tabs-size-large-font-size-rounded, var(--font-size-body-3, 14px)));
 }
 .sd-tabs-nav-size-large.sd-tabs-nav-type-rounded .sd-tabs-nav-extra {
-  font-size: 14px;
-  line-height: 36px;
+  font-size: var(--component-tabs-tabs-size-large-font-size-rounded, var(--component-tabs-size-large-font-size-rounded, var(--font-size-body-3, 14px)));
+  line-height: var(--component-tabs-tabs-size-large-header-height-rounded, var(--component-tabs-size-large-header-height-rounded, var(--size-9, 36px)));
 }
 
 /******** borderSize *******/
@@ -624,13 +630,13 @@
   bottom: 0;
   left: initial;
   clear: both;
-  width: 1px;
+  width: var(--component-tabs-tabs-line-size-header-border, var(--component-tabs-line-size-header-border, var(--border-1, 1px)));
   height: 100%;
 }
 
 .sd-tabs-nav-vertical .sd-tabs-nav-add-btn {
   height: auto;
-  margin-top: 8px;
+  margin-top: var(--component-tabs-tabs-margin-add-icon-left, var(--component-tabs-margin-add-icon-left, var(--spacing-4, 8px)));
   margin-left: 0;
   padding: 0 16px;
 }
@@ -653,7 +659,7 @@
   right: 0;
   bottom: initial;
   left: initial;
-  width: 2px;
+  width: var(--component-tabs-tabs-line-size-ink-stroke, var(--component-tabs-line-size-ink-stroke, 2px));
   transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 
@@ -662,13 +668,13 @@
 }
 
 .sd-tabs-nav-vertical .sd-tabs-nav-tab-list-overflow-scroll {
-  padding: 6px 0;
+  padding: var(--component-tabs-tabs-padding-header-wrapper-vertical, var(--component-tabs-padding-header-wrapper-vertical, var(--spacing-3, 6px))) 0;
 }
 
 .sd-tabs-nav-vertical .sd-tabs-tab {
   display: block;
   margin: 0;
-  margin-top: 12px;
+  margin-top: var(--component-tabs-tabs-line-margin-title-vertical, var(--component-tabs-line-margin-title-vertical, var(--spacing-6, 12px)));
   white-space: nowrap;
 }
 
@@ -693,18 +699,18 @@
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-line .sd-tabs-tab {
-  padding: 0 20px;
+  padding: 0 var(--component-tabs-tabs-line-padding-title-horizontal-vertical, var(--component-tabs-line-padding-title-horizontal-vertical, var(--spacing-8, 20px)));
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card .sd-tabs-tab {
   position: relative;
   margin: 0;
-  border: 1px solid var(--sd-color-neutral-3);
+  border: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
   border-bottom-color: transparent;
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card .sd-tabs-tab:first-child {
-  border-top-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card .sd-tabs-tab-active, .sd-tabs-nav-vertical.sd-tabs-nav-type-card .sd-tabs-tab-active:hover {
@@ -713,14 +719,14 @@
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card .sd-tabs-tab:last-child {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  border-bottom: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
+  border-bottom-left-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card-gutter .sd-tabs-tab {
   position: relative;
   margin-left: 0;
-  border-radius: var(--sd-border-radius-small) 0 0 var(--sd-border-radius-small);
+  border-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small))) 0 0 var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card-gutter .sd-tabs-tab:not(:first-of-type) {
@@ -729,7 +735,7 @@
 
 .sd-tabs-nav-vertical.sd-tabs-nav-type-card-gutter .sd-tabs-tab-active, .sd-tabs-nav-vertical.sd-tabs-nav-type-card-gutter .sd-tabs-tab-active:hover {
   border-right-color: var(--sd-color-bg-2);
-  border-bottom-color: var(--sd-color-neutral-3);
+  border-bottom-color: var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
 }
 
 .sd-tabs-vertical .sd-tabs-content {
@@ -739,15 +745,15 @@
 }
 
 .sd-tabs-right.sd-tabs-vertical .sd-tabs-content {
-  padding-right: 16px;
+  padding-right: var(--component-tabs-tabs-content-padding, var(--component-tabs-content-padding, var(--spacing-7, 16px)));
 }
 
 .sd-tabs-left.sd-tabs-vertical .sd-tabs-content {
-  padding-left: 16px;
+  padding-left: var(--component-tabs-tabs-content-padding, var(--component-tabs-content-padding, var(--spacing-7, 16px)));
 }
 
 .sd-tabs-vertical.sd-tabs-type-card > .sd-tabs-content, .sd-tabs-vertical.sd-tabs-type-card-gutter > .sd-tabs-content {
-  border: 1px solid var(--sd-color-neutral-3);
+  border: var(--component-tabs-tabs-card-border-content-width, var(--component-tabs-card-border-content-width, var(--border-1, 1px))) solid var(--component-tabs-tabs-line-color-header-border, var(--component-tabs-line-color-header-border, var(--sd-color-neutral-3)));
   border-left: none;
 }
 
@@ -781,13 +787,13 @@
 }
 
 .sd-tabs-rtl .sd-tabs-close-icon {
-  margin-right: 8px;
+  margin-right: var(--component-tabs-tabs-margin-close-icon-left, var(--component-tabs-margin-close-icon-left, var(--spacing-4, 8px)));
   margin-left: 0;
 }
 
 .sd-tabs-rtl .sd-tabs-left-icon, .sd-tabs-rtl .sd-tabs-right-icon {
-  margin-right: 10px;
-  margin-left: 6px;
+  margin-right: var(--component-tabs-tabs-padding-header-wrapper-horizontal, var(--component-tabs-padding-header-wrapper-horizontal, var(--spacing-5, 10px)));
+  margin-left: var(--component-tabs-tabs-spacing-nav-icon-header, var(--component-tabs-spacing-nav-icon-header, var(--spacing-3, 6px)));
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-line > .sd-tabs-nav-type-horizontal .sd-tabs-header-scroll > .sd-tabs-header-title:first-of-type {
@@ -802,27 +808,27 @@
 .sd-tabs-rtl .sd-tabs-nav-type-card .sd-tabs-header-title-editable,
 .sd-tabs-rtl .sd-tabs-nav-type-card-gutter .sd-tabs-header-title-editable {
   padding-right: 16px;
-  padding-left: 12px;
+  padding-left: var(--component-tabs-tabs-card-padding-title-right-editable, var(--component-tabs-card-padding-title-right-editable, var(--spacing-6, 12px)));
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-card .sd-tabs-header-title {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
   border-left: none;
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-card .sd-tabs-header-title:last-child {
-  border-left: 1px solid var(--sd-color-neutral-3);
-  border-top-left-radius: var(--sd-border-radius-small);
+  border-left: 1px solid var(--component-tabs-tabs-card-color-title-border, var(--component-tabs-card-color-title-border, var(--sd-color-neutral-3)));
+  border-top-left-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
   border-top-right-radius: 0;
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-card .sd-tabs-header-title:first-child {
   border-top-left-radius: 0;
-  border-top-right-radius: var(--sd-border-radius-small);
+  border-top-right-radius: var(--component-tabs-tabs-card-border-radius, var(--component-tabs-card-border-radius, var(--sd-border-radius-small)));
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-card-gutter .sd-tabs-header-title {
-  margin-right: 4px;
+  margin-right: var(--component-tabs-tabs-card-gutter-spacing-horizontal, var(--component-tabs-card-gutter-spacing-horizontal, var(--spacing-2, 4px)));
 }
 
 .sd-tabs-rtl .sd-tabs-nav-type-card-gutter .sd-tabs-header-title:first-child {
@@ -844,9 +850,9 @@
   left: initial;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-tabs-nav-type-capsule .sd-tabs-tab-active {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tabs-nav-type-capsule .sd-tabs-tab-active {
   background-color: var(--sd-color-fill-3);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tabs-nav-type-capsule .sd-tabs-tab:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tabs-nav-type-capsule .sd-tabs-tab:hover {
   background-color: var(--sd-color-fill-3);
 }