@sdata/web-vue 4.7.1 → 5.0.0

package/es/table/style/index.css

@@ -17,14 +17,14 @@
 /********* icon hover *********/
 .sd-table-filters-content {
   box-sizing: border-box;
-  min-width: 100px;
-  background: var(--sd-color-bg-5);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  min-width: var(--component-table-table-popup-min-width, var(--component-table-popup-min-width, 100px));
+  background: var(--component-table-table-color-bg-filters-popup, var(--component-table-color-bg-filters-popup, var(--sd-color-bg-5)));
+  border: 1px solid var(--component-table-table-color-border-filters-popup, var(--component-table-color-border-filters-popup, var(--sd-color-neutral-3)));
+  border-radius: var(--component-table-table-popup-border-radius, var(--component-table-popup-border-radius, var(--sd-border-radius-medium)));
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 .sd-table-filters-list {
-  max-height: 200px;
+  max-height: var(--component-table-table-popup-max-height, var(--component-table-popup-max-height, 200px));
   padding: 4px 0;
   overflow-y: auto;
 }
@@ -102,16 +102,16 @@
   z-index: 2;
 }
 .sd-table-footer {
-  border-radius: 0 0 var(--sd-border-radius-medium) var(--sd-border-radius-medium);
+  border-radius: 0 0 var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium))) var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-table-append {
-  background-color: var(--sd-color-bg-2);
+  background-color: var(--component-table-table-color-body-background, var(--component-table-color-body-background, var(--sd-color-bg-2)));
 }
 .sd-table-scroll-position-right .sd-table-col-fixed-left-last::after, .sd-table-scroll-position-middle .sd-table-col-fixed-left-last::after {
-  box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--component-table-table-shadow-left, var(--component-table-shadow-left, inset 6px 0 8px -3px rgba(0, 0, 0, 0.15)));
 }
 .sd-table-scroll-position-left .sd-table-col-fixed-right-first::after, .sd-table-scroll-position-middle .sd-table-col-fixed-right-first::after {
-  box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--component-table-table-shadow-right, var(--component-table-shadow-right, inset -6px 0 8px -3px rgba(0, 0, 0, 0.15)));
 }
 .sd-table .sd-table-element {
   display: flex;
@@ -142,17 +142,17 @@
   width: 100%;
 }
 .sd-table-virtual-row-table {
-  background-color: var(--sd-color-bg-2);
+  background-color: var(--component-table-table-color-body-background, var(--component-table-color-body-background, var(--sd-color-bg-2)));
 }
 .sd-table-th {
   position: relative;
   box-sizing: border-box;
   min-width: 0;
-  color: rgb(var(--sd-gray-10));
-  font-weight: 500;
+  color: var(--component-table-table-color-text-header-cell, var(--component-table-color-text-header-cell, rgb(var(--sd-gray-10))));
+  font-weight: var(--component-table-table-font-weight-header-text, var(--component-table-font-weight-header-text, var(--font-weight-500, 500)));
   line-height: 1.5715;
   text-align: left;
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-table-table-color-bg-header-cell, var(--component-table-color-bg-header-cell, var(--sd-color-neutral-2)));
 }
 .sd-table-th[colspan] {
   text-align: center;
@@ -172,12 +172,12 @@
 .sd-table-td {
   box-sizing: border-box;
   min-width: 0;
-  color: rgb(var(--sd-gray-10));
+  color: var(--component-table-table-color-text-body-cell, var(--component-table-color-text-body-cell, rgb(var(--sd-gray-10))));
   line-height: 1.5715;
   text-align: left;
   word-break: break-all;
-  background-color: var(--sd-color-bg-2);
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  background-color: var(--component-table-table-color-bg-body-cell, var(--component-table-color-bg-body-cell, var(--sd-color-bg-2)));
+  border-bottom: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-td-align-right {
   text-align: right;
@@ -213,10 +213,10 @@
   width: 100%;
 }
 .sd-table .sd-table-th.sd-table-col-sorted {
-  background-color: var(--sd-color-neutral-3);
+  background-color: var(--component-table-table-color-bg-header-sorted-cell, var(--component-table-color-bg-header-sorted-cell, var(--sd-color-neutral-3)));
 }
 .sd-table .sd-table-td.sd-table-col-sorted {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-sorted-cell, var(--component-table-color-bg-body-sorted-cell, var(--sd-color-fill-1)));
 }
 .sd-table-col-fixed-left, .sd-table-col-fixed-right {
   position: sticky;
@@ -227,7 +227,7 @@
   top: 0;
   bottom: -1px;
   left: 0;
-  width: 10px;
+  width: var(--component-table-table-size-shadow-wrapper-width, var(--component-table-size-shadow-wrapper-width, 10px));
   box-shadow: none;
   transform: translateX(-100%);
   transition: box-shadow 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -245,8 +245,8 @@
   text-overflow: ellipsis;
 }
 .sd-table-editable-row .sd-table-cell-wrap-value {
-  border: 1px solid var(--sd-color-white);
-  border-radius: var(--sd-border-radius-medium);
+  border: 1px solid var(--component-table-table-color-editable-body-cell-border, var(--component-table-color-editable-body-cell-border, var(--sd-color-white)));
+  border-radius: var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium)));
   cursor: pointer;
   transition: border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -257,23 +257,23 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
+  width: var(--component-table-table-size-expand-button, var(--component-table-size-expand-button, 14px));
+  height: var(--component-table-table-size-expand-button, var(--component-table-size-expand-button, 14px));
   padding: 0;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
-  line-height: 14px;
-  background-color: var(--sd-color-neutral-3);
-  border: 1px solid transparent;
-  border-radius: 2px;
+  color: var(--component-table-table-color-expand-icon, var(--component-table-color-expand-icon, var(--sd-color-text-2)));
+  font-size: var(--component-table-table-font-size-expand-button, var(--component-table-font-size-expand-button, 12px));
+  line-height: var(--component-table-table-size-expand-button, var(--component-table-size-expand-button, 14px));
+  background-color: var(--component-table-table-color-bg-expand-icon, var(--component-table-color-bg-expand-icon, var(--sd-color-neutral-3)));
+  border: var(--component-table-table-border-expand-icon-width, var(--component-table-border-expand-icon-width, var(--border-1, 1px))) solid var(--component-table-table-color-expand-icon-border, var(--component-table-color-expand-icon-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-table-table-border-radius-expand-button, var(--component-table-border-radius-expand-button, 2px));
   outline: none;
   cursor: pointer;
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-table .sd-table-expand-btn:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-neutral-4);
-  border-color: transparent;
+  color: var(--component-table-table-color-expand-icon-hover, var(--component-table-color-expand-icon-hover, var(--sd-color-text-1)));
+  background-color: var(--component-table-table-color-bg-expand-icon-hover, var(--component-table-color-bg-expand-icon-hover, var(--sd-color-neutral-4)));
+  border-color: var(--component-table-table-color-expand-icon-border-hover, var(--component-table-color-expand-icon-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-table-cell-expand-icon {
   display: flex;
@@ -281,7 +281,7 @@
 }
 .sd-table-cell-expand-icon .sd-table-cell-inline-icon {
   display: inline-flex;
-  margin-right: 4px;
+  margin-right: var(--component-table-table-spacing-expand-button-margin-right, var(--component-table-spacing-expand-button-margin-right, var(--spacing-2, 4px)));
   padding: 0;
   background: transparent;
   border: 0;
@@ -291,12 +291,12 @@
 }
 .sd-table-cell-expand-icon-hidden {
   display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 4px;
+  width: var(--component-table-table-size-expand-button, var(--component-table-size-expand-button, 14px));
+  height: var(--component-table-table-size-expand-button, var(--component-table-size-expand-button, 14px));
+  margin-right: var(--component-table-table-spacing-expand-button-margin-right, var(--component-table-spacing-expand-button-margin-right, var(--spacing-2, 4px)));
 }
 .sd-table-tr-expand .sd-table-td {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-expand-content, var(--component-table-color-bg-expand-content, var(--sd-color-fill-1)));
 }
 .sd-table-cell-fixed-expand {
   position: sticky;
@@ -307,14 +307,14 @@
   border: none;
 }
 .sd-table-tr-expand .sd-table-td .sd-table .sd-table-th {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-tr-expand .sd-table-td .sd-table .sd-table-th,
 .sd-table-tr-expand .sd-table-td .sd-table .sd-table-td {
   background-color: transparent;
 }
 .sd-table-tr-expand .sd-table-td .sd-table .sd-table-pagination {
-  margin-bottom: 12px;
+  margin-bottom: var(--component-table-table-spacing-pagination-margin, var(--component-table-spacing-pagination-margin, var(--spacing-6, 12px)));
 }
 .sd-table-th.sd-table-operation, .sd-table-td.sd-table-operation {
   text-align: center;
@@ -330,19 +330,19 @@
   padding-left: 0;
 }
 .sd-table-selection-checkbox-col, .sd-table-selection-radio-col {
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
+  width: var(--component-table-table-size-selection-col-width, var(--component-table-size-selection-col-width, 40px));
+  min-width: var(--component-table-table-size-selection-col-width, var(--component-table-size-selection-col-width, 40px));
+  max-width: var(--component-table-table-size-selection-col-width, var(--component-table-size-selection-col-width, 40px));
 }
 .sd-table-expand-col {
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
+  width: var(--component-table-table-size-expand-icon-col-width, var(--component-table-size-expand-icon-col-width, 40px));
+  min-width: var(--component-table-table-size-expand-icon-col-width, var(--component-table-size-expand-icon-col-width, 40px));
+  max-width: var(--component-table-table-size-expand-icon-col-width, var(--component-table-size-expand-icon-col-width, 40px));
 }
 .sd-table-drag-handle-col {
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
+  width: var(--component-table-table-size-drag-handle-col-width, var(--component-table-size-drag-handle-col-width, 40px));
+  min-width: var(--component-table-table-size-drag-handle-col-width, var(--component-table-size-drag-handle-col-width, 40px));
+  max-width: var(--component-table-table-size-drag-handle-col-width, var(--component-table-size-drag-handle-col-width, 40px));
 }
 .sd-table-th {
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -359,21 +359,21 @@
   cursor: pointer;
 }
 .sd-table-cell-with-sorter:hover {
-  background-color: rgb(var(--sd-gray-4), 0.5);
+  background-color: var(--component-table-table-color-bg-header-sorted-cell-hover, var(--component-table-color-bg-header-sorted-cell-hover, rgb(var(--sd-gray-4), 0.5)));
 }
 .sd-table-cell-with-filter {
   display: flex;
   align-items: center;
 }
 .sd-table-cell-next-ascend .sd-table-sorter-icon .sd-icon-caret-up {
-  color: var(--sd-color-neutral-6);
+  color: var(--component-table-table-color-header-sorter-icon-next, var(--component-table-color-header-sorter-icon-next, var(--sd-color-neutral-6)));
 }
 .sd-table-cell-next-descend .sd-table-sorter-icon .sd-icon-caret-down {
-  color: var(--sd-color-neutral-6);
+  color: var(--component-table-table-color-header-sorter-icon-next, var(--component-table-color-header-sorter-icon-next, var(--sd-color-neutral-6)));
 }
 .sd-table-sorter {
   display: inline-block;
-  margin-left: 8px;
+  margin-left: var(--component-table-table-spacing-header-sorter-icon-margin-left, var(--component-table-spacing-header-sorter-icon-margin-left, var(--spacing-4, 8px)));
   vertical-align: -3px;
 }
 .sd-table-sorter.sd-table-sorter-direction-one {
@@ -381,29 +381,29 @@
 }
 .sd-table-sorter-icon {
   position: relative;
-  width: 14px;
-  height: 8px;
+  width: var(--component-table-table-size-header-sorter-icon-width, var(--component-table-size-header-sorter-icon-width, 14px));
+  height: var(--component-table-table-size-header-sorter-icon-height, var(--component-table-size-header-sorter-icon-height, 8px));
   overflow: hidden;
-  line-height: 8px;
+  line-height: var(--component-table-table-size-header-sorter-icon-height, var(--component-table-size-header-sorter-icon-height, 8px));
 }
 .sd-table-sorter-icon .sd-icon-caret-up,
 .sd-table-sorter-icon .sd-icon-caret-down {
   position: absolute;
   top: 50%;
-  color: var(--sd-color-neutral-5);
-  font-size: 12px;
+  color: var(--component-table-table-color-header-sorter-icon, var(--component-table-color-header-sorter-icon, var(--sd-color-neutral-5)));
+  font-size: var(--component-table-table-font-size-header-sorter-icon, var(--component-table-font-size-header-sorter-icon, 12px));
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-table-sorter-icon .sd-icon-caret-up {
-  top: -2px;
-  left: 1px;
+  top: var(--component-table-table-position-header-sorter-icon-up-top, var(--component-table-position-header-sorter-icon-up-top, -2px));
+  left: var(--component-table-table-position-header-sorter-icon-left, var(--component-table-position-header-sorter-icon-left, 1px));
 }
 .sd-table-sorter-icon .sd-icon-caret-down {
-  top: -3px;
-  left: 1px;
+  top: var(--component-table-table-position-header-sorter-icon-down-top, var(--component-table-position-header-sorter-icon-down-top, -3px));
+  left: var(--component-table-table-position-header-sorter-icon-left, var(--component-table-position-header-sorter-icon-left, 1px));
 }
 .sd-table-sorter-icon.sd-table-sorter-icon-active svg {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-table-table-color-header-sorter-icon-active, var(--component-table-color-header-sorter-icon-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-table-filters {
   position: absolute;
@@ -412,7 +412,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
+  width: var(--component-table-table-size-filters-width, var(--component-table-size-filters-width, 24px));
   height: 100%;
   line-height: 1;
   vertical-align: 0;
@@ -421,40 +421,40 @@
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-table-filters:hover, .sd-table-filters-open {
-  background-color: var(--sd-color-neutral-4);
+  background-color: var(--component-table-table-color-bg-header-filters-icon-hover, var(--component-table-color-bg-header-filters-icon-hover, var(--sd-color-neutral-4)));
 }
 .sd-table-filters svg {
-  color: var(--sd-color-text-2);
-  font-size: 16px;
+  color: var(--component-table-table-color-header-filters-icon, var(--component-table-color-header-filters-icon, var(--sd-color-text-2)));
+  font-size: var(--component-table-table-font-size-filters-icon, var(--component-table-font-size-filters-icon, 16px));
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-table-filters-active svg {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-table-table-color-header-filters-icon-active, var(--component-table-color-header-filters-icon-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-table-filters-align-left {
   position: relative;
   width: auto;
-  margin-left: 8px;
+  margin-left: var(--component-table-table-spacing-header-sorter-icon-margin-left, var(--component-table-spacing-header-sorter-icon-margin-left, var(--spacing-4, 8px)));
 }
 .sd-table-filters-align-left svg {
-  font-size: 12px;
+  font-size: var(--component-table-table-font-size-header-sorter-icon, var(--component-table-font-size-header-sorter-icon, 12px));
 }
 .sd-table-filters-align-left:hover, .sd-table-filters-align-left-open {
   background: none;
 }
 .sd-table-filters-align-left:hover::before, .sd-table-filters-align-left.sd-table-filters-open::before {
-  background: var(--sd-color-fill-4);
+  background: var(--component-table-table-filters-icon-bg-hover, var(--component-table-filters-icon-bg-hover, var(--sd-color-fill-4)));
 }
 .sd-table {
   /* ---- Table sorter, filter, checkbox, radio (End) ---- */
 }
 .sd-table-container {
   position: relative;
-  border-radius: var(--sd-border-radius-medium) var(--sd-border-radius-medium) 0 0;
+  border-radius: var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium))) var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium))) 0 0;
 }
 .sd-table-header {
   flex-shrink: 0;
-  border-radius: var(--sd-border-radius-medium) var(--sd-border-radius-medium) 0 0;
+  border-radius: var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium))) var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium))) 0 0;
 }
 .sd-table-container {
   box-sizing: border-box;
@@ -477,7 +477,7 @@
 .sd-table-container::before, .sd-table-container::after {
   position: absolute;
   z-index: 1;
-  width: 10px;
+  width: var(--component-table-table-size-shadow-wrapper-width, var(--component-table-size-shadow-wrapper-width, 10px));
   height: 100%;
   box-shadow: none;
   transition: box-shadow 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -487,25 +487,25 @@
 .sd-table-container::before {
   top: 0;
   left: 0;
-  border-top-left-radius: var(--sd-border-radius-medium);
+  border-top-left-radius: var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-table-container::after {
   top: 0;
   right: 0;
-  border-top-right-radius: var(--sd-border-radius-medium);
+  border-top-right-radius: var(--component-table-table-border-radius, var(--component-table-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-table-container:not(.sd-table-has-fixed-col-left).sd-table-scroll-position-right::before, .sd-table-container:not(.sd-table-has-fixed-col-left).sd-table-scroll-position-middle::before {
-  box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--component-table-table-shadow-left, var(--component-table-shadow-left, inset 6px 0 8px -3px rgba(0, 0, 0, 0.15)));
 }
 .sd-table-container:not(.sd-table-has-fixed-col-right).sd-table-scroll-position-left::after, .sd-table-container:not(.sd-table-has-fixed-col-right).sd-table-scroll-position-middle::after {
-  box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--component-table-table-shadow-right, var(--component-table-shadow-right, inset -6px 0 8px -3px rgba(0, 0, 0, 0.15)));
 }
 .sd-table-header {
   flex: 0 0 auto;
   width: 100%;
   min-width: 100%;
   overflow: hidden;
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-table-table-color-bg-header-cell, var(--component-table-color-bg-header-cell, var(--sd-color-neutral-2)));
   scrollbar-color: transparent transparent;
 }
 .sd-table-header > .sd-table-element {
@@ -535,14 +535,14 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background-color: var(--sd-color-bg-2);
+  background-color: var(--component-table-table-color-body-background, var(--component-table-color-body-background, var(--sd-color-bg-2)));
 }
 .sd-table-border .sd-table-container {
-  border-top: 1px solid var(--sd-color-neutral-3);
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
+  border-left: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border .sd-table-scroll-y {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td,
 .sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td {
@@ -554,40 +554,40 @@
   bottom: 0;
 }
 .sd-table-border .sd-table-tr .sd-table-th {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border .sd-table-footer {
-  border: 1px solid var(--sd-color-neutral-3);
+  border: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
   border-top: 0;
 }
 .sd-table-border:not(.sd-table-border-cell) .sd-table-container {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border-cell .sd-table-th,
 .sd-table-border-cell .sd-table-td:not(.sd-table-tr-expand) {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border-cell .sd-table-th-resizing,
 .sd-table-border-cell .sd-table-td-resizing:not(.sd-table-tr-expand) {
-  border-right-color: rgb(var(--sd-primary-6));
+  border-right-color: var(--component-table-table-color-border-resizing, var(--component-table-color-border-resizing, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-table-border-header-cell .sd-table-th {
-  border-right: 1px solid var(--sd-color-neutral-3);
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
+  border-bottom: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-border-header-cell .sd-table-th-resizing,
 .sd-table-border-header-cell .sd-table-td-resizing:not(.sd-table-tr-expand) {
-  border-right-color: rgb(var(--sd-primary-6));
+  border-right-color: var(--component-table-table-color-border-resizing, var(--component-table-color-border-resizing, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-table-border.sd-table-border-header-cell .sd-table-thead .sd-table-tr:first-child .sd-table-th:last-child {
   border-right: 0;
 }
 .sd-table-border-body-cell .sd-table-td:not(:last-child):not(.sd-table-tr-expand) {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px var(--component-table-table-border-style, var(--component-table-border-style, solid)) var(--sd-color-neutral-3);
 }
 .sd-table-stripe:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):nth-child(even) .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right),
 .sd-table-stripe .sd-table-tr-drag .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-stripe-row, var(--component-table-color-bg-body-stripe-row, var(--sd-color-fill-1)));
 }
 .sd-table-stripe:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):nth-child(even) .sd-table-td.sd-table-col-fixed-left::before,
 .sd-table-stripe:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):nth-child(even) .sd-table-td.sd-table-col-fixed-right::before,
@@ -599,7 +599,7 @@
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-stripe-row, var(--component-table-color-bg-body-stripe-row, var(--sd-color-fill-1)));
   content: "";
 }
 .sd-table .sd-table-tr-draggable .sd-table-td {
@@ -624,7 +624,7 @@
 }
 .sd-table-hover:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):hover .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right),
 .sd-table-hover .sd-table-tr-drag .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-row-hover, var(--component-table-color-bg-body-row-hover, var(--sd-color-fill-1)));
 }
 .sd-table-hover:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):hover .sd-table-td.sd-table-col-fixed-left::before,
 .sd-table-hover:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):hover .sd-table-td.sd-table-col-fixed-right::before,
@@ -636,11 +636,11 @@
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-row-hover, var(--component-table-color-bg-body-row-hover, var(--sd-color-fill-1)));
   content: "";
 }
 .sd-table-hover .sd-table-tr-expand:not(.sd-table-tr-empty):hover .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-expand-content-hover, var(--component-table-color-bg-expand-content-hover, var(--sd-color-fill-1)));
 }
 .sd-table-tr-expand .sd-table-td .sd-table-hover .sd-table-tr:not(.sd-table-tr-empty) .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
   background-color: transparent;
@@ -655,7 +655,7 @@
   flex-shrink: 0;
   width: 100%;
   overflow-x: hidden;
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-table-table-color-bg-tfoot, var(--component-table-color-bg-tfoot, var(--sd-color-neutral-2)));
   box-shadow: 0 -1px 0 var(--sd-color-neutral-3);
   scrollbar-color: transparent transparent;
 }
@@ -664,82 +664,82 @@
   background-color: transparent;
 }
 .sd-table .sd-table-tfoot-content .sd-table-td {
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-table-table-color-bg-tfoot, var(--component-table-color-bg-tfoot, var(--sd-color-neutral-2)));
 }
 .sd-table-tr-checked .sd-table-td {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-table-table-color-bg-body-row-active, var(--component-table-color-bg-body-row-active, var(--sd-color-fill-1)));
 }
 .sd-table .sd-table-cell {
-  padding: 9px 16px;
+  padding: var(--component-table-table-size-large-padding-vertical, var(--component-table-size-large-padding-vertical, var(--component-table-table-size-default-padding-vertical, var(--component-table-size-default-padding-vertical, 9px)))) var(--component-table-table-size-large-padding-horizontal, var(--component-table-size-large-padding-horizontal, var(--component-table-table-size-default-padding-horizontal, var(--component-table-size-default-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table .sd-table-th {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-large-font-header-size, var(--component-table-size-large-font-header-size, var(--component-table-table-size-default-font-header-size, var(--component-table-size-default-font-header-size, var(--font-size-body-3, 14px)))));
 }
 .sd-table .sd-table-td {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-large-font-size, var(--component-table-size-large-font-size, var(--component-table-table-size-default-font-size, var(--component-table-size-default-font-size, var(--font-size-body-3, 14px)))));
 }
 .sd-table .sd-table-footer {
-  padding: 9px 16px;
+  padding: var(--component-table-table-size-large-padding-vertical, var(--component-table-size-large-padding-vertical, var(--component-table-table-size-default-padding-vertical, var(--component-table-size-default-padding-vertical, 9px)))) var(--component-table-table-size-large-padding-horizontal, var(--component-table-size-large-padding-horizontal, var(--component-table-table-size-default-padding-horizontal, var(--component-table-size-default-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table .sd-table-tr-expand .sd-table-td .sd-table {
-  margin: calc(-1 * 9px) calc(-1 * 16px) calc(-1 * (9px + 1px)) calc(-1 * 16px);
+  margin: calc(-1 * var(--component-table-table-size-large-padding-vertical, var(--component-table-size-large-padding-vertical, var(--component-table-table-size-default-padding-vertical, var(--component-table-size-default-padding-vertical, 9px))))) calc(-1 * var(--component-table-table-size-large-padding-horizontal, var(--component-table-size-large-padding-horizontal, var(--component-table-table-size-default-padding-horizontal, var(--component-table-size-default-padding-horizontal, var(--spacing-7, 16px)))))) calc(-1 * (var(--component-table-table-size-large-padding-vertical, var(--component-table-size-large-padding-vertical, var(--component-table-table-size-default-padding-vertical, var(--component-table-size-default-padding-vertical, 9px)))) + 1px)) calc(-1 * var(--component-table-table-size-large-padding-horizontal, var(--component-table-size-large-padding-horizontal, var(--component-table-table-size-default-padding-horizontal, var(--component-table-size-default-padding-horizontal, var(--spacing-7, 16px))))));
 }
 .sd-table .sd-table-editable-row .sd-table-cell-wrap-value {
-  padding: 9px 16px;
+  padding: var(--component-table-table-size-large-padding-vertical, var(--component-table-size-large-padding-vertical, var(--component-table-table-size-default-padding-vertical, var(--component-table-size-default-padding-vertical, 9px)))) var(--component-table-table-size-large-padding-horizontal, var(--component-table-size-large-padding-horizontal, var(--component-table-table-size-default-padding-horizontal, var(--component-table-size-default-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table-size-medium .sd-table-cell {
-  padding: 7px 16px;
+  padding: var(--component-table-table-size-medium-padding-vertical, var(--component-table-size-medium-padding-vertical, var(--component-table-table-size-middle-padding-vertical, var(--component-table-size-middle-padding-vertical, 7px)))) var(--component-table-table-size-medium-padding-horizontal, var(--component-table-size-medium-padding-horizontal, var(--component-table-table-size-middle-padding-horizontal, var(--component-table-size-middle-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table-size-medium .sd-table-th {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-medium-font-header-size, var(--component-table-size-medium-font-header-size, var(--component-table-table-size-middle-font-header-size, var(--component-table-size-middle-font-header-size, var(--font-size-body-3, 14px)))));
 }
 .sd-table-size-medium .sd-table-td {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-medium-font-size, var(--component-table-size-medium-font-size, var(--component-table-table-size-middle-font-size, var(--component-table-size-middle-font-size, var(--font-size-body-3, 14px)))));
 }
 .sd-table-size-medium .sd-table-footer {
-  padding: 7px 16px;
+  padding: var(--component-table-table-size-medium-padding-vertical, var(--component-table-size-medium-padding-vertical, var(--component-table-table-size-middle-padding-vertical, var(--component-table-size-middle-padding-vertical, 7px)))) var(--component-table-table-size-medium-padding-horizontal, var(--component-table-size-medium-padding-horizontal, var(--component-table-table-size-middle-padding-horizontal, var(--component-table-size-middle-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table-size-medium .sd-table-tr-expand .sd-table-td .sd-table {
-  margin: calc(-1 * 7px) calc(-1 * 16px) calc(-1 * (7px + 1px)) calc(-1 * 16px);
+  margin: calc(-1 * var(--component-table-table-size-medium-padding-vertical, var(--component-table-size-medium-padding-vertical, var(--component-table-table-size-middle-padding-vertical, var(--component-table-size-middle-padding-vertical, 7px))))) calc(-1 * var(--component-table-table-size-medium-padding-horizontal, var(--component-table-size-medium-padding-horizontal, var(--component-table-table-size-middle-padding-horizontal, var(--component-table-size-middle-padding-horizontal, var(--spacing-7, 16px)))))) calc(-1 * (var(--component-table-table-size-medium-padding-vertical, var(--component-table-size-medium-padding-vertical, var(--component-table-table-size-middle-padding-vertical, var(--component-table-size-middle-padding-vertical, 7px)))) + 1px)) calc(-1 * var(--component-table-table-size-medium-padding-horizontal, var(--component-table-size-medium-padding-horizontal, var(--component-table-table-size-middle-padding-horizontal, var(--component-table-size-middle-padding-horizontal, var(--spacing-7, 16px))))));
 }
 .sd-table-size-medium .sd-table-editable-row .sd-table-cell-wrap-value {
-  padding: 7px 16px;
+  padding: var(--component-table-table-size-medium-padding-vertical, var(--component-table-size-medium-padding-vertical, var(--component-table-table-size-middle-padding-vertical, var(--component-table-size-middle-padding-vertical, 7px)))) var(--component-table-table-size-medium-padding-horizontal, var(--component-table-size-medium-padding-horizontal, var(--component-table-table-size-middle-padding-horizontal, var(--component-table-size-middle-padding-horizontal, var(--spacing-7, 16px)))));
 }
 .sd-table-size-small .sd-table-cell {
-  padding: 5px 16px;
+  padding: var(--component-table-table-size-small-padding-vertical, var(--component-table-size-small-padding-vertical, 5px)) var(--component-table-table-size-small-padding-horizontal, var(--component-table-size-small-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-size-small .sd-table-th {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-small-font-header-size, var(--component-table-size-small-font-header-size, var(--font-size-body-3, 14px)));
 }
 .sd-table-size-small .sd-table-td {
-  font-size: 14px;
+  font-size: var(--component-table-table-size-small-font-size, var(--component-table-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-table-size-small .sd-table-footer {
-  padding: 5px 16px;
+  padding: var(--component-table-table-size-small-padding-vertical, var(--component-table-size-small-padding-vertical, 5px)) var(--component-table-table-size-small-padding-horizontal, var(--component-table-size-small-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-size-small .sd-table-tr-expand .sd-table-td .sd-table {
-  margin: calc(-1 * 5px) calc(-1 * 16px) calc(-1 * (5px + 1px)) calc(-1 * 16px);
+  margin: calc(-1 * var(--component-table-table-size-small-padding-vertical, var(--component-table-size-small-padding-vertical, 5px))) calc(-1 * var(--component-table-table-size-small-padding-horizontal, var(--component-table-size-small-padding-horizontal, var(--spacing-7, 16px)))) calc(-1 * (var(--component-table-table-size-small-padding-vertical, var(--component-table-size-small-padding-vertical, 5px)) + 1px)) calc(-1 * var(--component-table-table-size-small-padding-horizontal, var(--component-table-size-small-padding-horizontal, var(--spacing-7, 16px))));
 }
 .sd-table-size-small .sd-table-editable-row .sd-table-cell-wrap-value {
-  padding: 5px 16px;
+  padding: var(--component-table-table-size-small-padding-vertical, var(--component-table-size-small-padding-vertical, 5px)) var(--component-table-table-size-small-padding-horizontal, var(--component-table-size-small-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-size-mini .sd-table-cell {
-  padding: 2px 16px;
+  padding: var(--component-table-table-size-mini-padding-vertical, var(--component-table-size-mini-padding-vertical, 2px)) var(--component-table-table-size-mini-padding-horizontal, var(--component-table-size-mini-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-size-mini .sd-table-th {
-  font-size: 12px;
+  font-size: var(--component-table-table-size-mini-font-header-size, var(--component-table-size-mini-font-header-size, var(--font-size-body-1, 12px)));
 }
 .sd-table-size-mini .sd-table-td {
-  font-size: 12px;
+  font-size: var(--component-table-table-size-mini-font-size, var(--component-table-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-table-size-mini .sd-table-footer {
-  padding: 2px 16px;
+  padding: var(--component-table-table-size-mini-padding-vertical, var(--component-table-size-mini-padding-vertical, 2px)) var(--component-table-table-size-mini-padding-horizontal, var(--component-table-size-mini-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-size-mini .sd-table-tr-expand .sd-table-td .sd-table {
-  margin: calc(-1 * 2px) calc(-1 * 16px) calc(-1 * (2px + 1px)) calc(-1 * 16px);
+  margin: calc(-1 * var(--component-table-table-size-mini-padding-vertical, var(--component-table-size-mini-padding-vertical, 2px))) calc(-1 * var(--component-table-table-size-mini-padding-horizontal, var(--component-table-size-mini-padding-horizontal, var(--spacing-7, 16px)))) calc(-1 * (var(--component-table-table-size-mini-padding-vertical, var(--component-table-size-mini-padding-vertical, 2px)) + 1px)) calc(-1 * var(--component-table-table-size-mini-padding-horizontal, var(--component-table-size-mini-padding-horizontal, var(--spacing-7, 16px))));
 }
 .sd-table-size-mini .sd-table-editable-row .sd-table-cell-wrap-value {
-  padding: 2px 16px;
+  padding: var(--component-table-table-size-mini-padding-vertical, var(--component-table-size-mini-padding-vertical, 2px)) var(--component-table-table-size-mini-padding-horizontal, var(--component-table-size-mini-padding-horizontal, var(--spacing-7, 16px)));
 }
 .sd-table-virtualized div.sd-table-body div.sd-table-td {
   align-items: center;
@@ -749,7 +749,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: 12px;
+  margin-top: var(--component-table-table-spacing-pagination-margin, var(--component-table-spacing-pagination-margin, var(--spacing-6, 12px)));
 }
 .sd-table-pagination-left {
   justify-content: flex-start;
@@ -759,13 +759,13 @@
 }
 .sd-table-pagination-top {
   margin-top: 0;
-  margin-bottom: 12px;
+  margin-bottom: var(--component-table-table-spacing-pagination-margin, var(--component-table-spacing-pagination-margin, var(--spacing-6, 12px)));
 }
 
 .sd-virtual-list > .sd-table-element, .sd-virtual-list > .sd-virtual-list-scroller > .sd-table-element {
   width: auto;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-table-tr-checked .sd-table-td {
-  background-color: var(--sd-color-neutral-2);
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-table-tr-checked .sd-table-td {
+  background-color: var(--component-table-table-color-bg-body-row-active-dark, var(--component-table-color-bg-body-row-active-dark, var(--sd-color-neutral-2)));
 }