ids-enterprise-wc 1.4.1 → 1.5.0

package/components/ids-data-grid/ids-data-grid.css

@@ -4,6 +4,11 @@
   --ids-button-formatter-color-background-hover: var(--ids-data-grid-filter-icon-color-background-hover);
   --ids-button-formatter-color-text-hover: var(--ids-data-grid-filter-icon-color-hover);
   --ids-menu-item-width-min: 190px;
+  --ids-trigger-field-button-inset-inline-start: 0;
+}
+.ids-data-grid ids-dropdown {
+  --ids-trigger-field-button-inset-inline-start: 2px;
+  padding-top: 3px;
 }
 .ids-data-grid ::slotted([slot^=filter-]) {
   align-items: center;
@@ -34,11 +39,19 @@
 .ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-input::part(input) {
   text-transform: uppercase;
 }
+.ids-data-grid [data-filter-conditions-button] {
+  --ids-button-icon-height: 32px;
+  --ids-button-icon-width: 38px;
+  margin-inline-end: 2px;
+}
+.ids-data-grid [data-filter-conditions-button] ids-icon-button {
+  padding-inline-start: 0;
+}
 
 /* Ids Data Grid Component - Header */
 .ids-data-grid-header {
   position: sticky;
-  top: 0;
+  top: var(--ids-space-none);
   z-index: 4;
   --ids-button-formatter-size: 28px;
 }
@@ -59,7 +72,7 @@
   position: relative;
 }
 .ids-data-grid-header-cell:first-child {
-  border-inline-start-width: 0;
+  border-inline-start-width: var(--ids-border-width-none);
 }
 .ids-data-grid-header-cell:hover.is-actionable {
   background-color: var(--ids-data-grid-header-color-background-hover);
@@ -75,7 +88,7 @@
   padding-inline-start: 5px;
 }
 .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper ids-menu-button {
-  margin-inline-start: 2px;
+  margin-inline-start: var(--ids-space-3xs);
 }
 .ids-data-grid-header-cell .resizer {
   cursor: var(--ids-cursor-resize);
@@ -83,7 +96,7 @@
   height: 100%;
   position: absolute;
   margin-inline-start: calc(100% - 4px);
-  top: 0;
+  top: var(--ids-space-none);
   width: 6px;
   z-index: 2;
 }
@@ -94,8 +107,8 @@
   opacity: 0;
   position: absolute;
   inset-inline-start: var(--ids-space-xs);
-  top: 0;
-  width: 4px;
+  top: var(--ids-space-none);
+  width: var(--ids-space-2xs);
 }
 .ids-data-grid-header-cell .reorderer ids-icon {
   position: absolute;
@@ -113,11 +126,11 @@
 }
 .ids-data-grid-header-cell.dragging {
   background-color: var(--ids-data-grid-header-drag-background-color) !important;
-  border-inline-start: 0;
+  border-inline-start: var(--ids-space-none);
   display: block;
   left: -1000px;
   position: absolute;
-  top: 0;
+  top: var(--ids-space-none);
   width: 110px;
 }
 .ids-data-grid-header-cell.active-drag-column {
@@ -138,11 +151,11 @@
   border-inline-end: 1px solid var(--ids-data-grid-header-color-border);
 }
 .ids-data-grid-header-cell.frozen-last + .ids-data-grid-header-cell {
-  border-inline-start-width: 0;
+  border-inline-start-width: var(--ids-border-width-none);
 }
 .ids-data-grid-header-cell.frozen-left {
   position: sticky;
-  left: 0;
+  left: var(--ids-space-none);
 }
 .ids-data-grid-header-cell.frozen-left:nth-of-type(2) {
   left: var(--ids-data-grid-frozen-column-left-width-2);
@@ -173,7 +186,7 @@
 }
 .ids-data-grid-header-cell.frozen-right {
   position: sticky;
-  right: 0;
+  right: var(--ids-space-none);
 }
 .ids-data-grid-header-cell.frozen-right .ids-data-grid-header-cell-content {
   display: inline-flex;
@@ -203,14 +216,14 @@
 .ids-data-grid-header-icon {
   align-self: center;
   color: var(--ids-data-grid-header-color-text);
-  margin-inline-start: var(--ids-space-xxs);
-  margin-block-start: var(--ids-space-xxs);
+  margin-inline-start: var(--ids-space-2xs);
+  margin-block-start: var(--ids-space-2xs);
 }
 
 .sort-indicator {
   position: relative;
   overflow: hidden;
-  height: 32px;
+  height: var(--ids-space-lg);
   margin-inline-start: 5px;
   width: 18px;
 }
@@ -222,7 +235,7 @@
 }
 .is-sortable .sort-indicator ids-icon:first-child {
   position: relative;
-  top: 4px;
+  top: var(--ids-space-2xs);
   transform: rotate(180deg);
 }
 .is-sortable .sort-indicator ids-icon:last-child {
@@ -248,7 +261,7 @@
 }
 
 [data-row-height=xxs] .header-expander {
-  top: 2px;
+  top: var(--ids-space-3xs);
 }
 
 :host([show-header-expander]) .header-expander,
@@ -257,13 +270,13 @@
 }
 
 .has-selectioncheckbox .ids-data-grid-header-text {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
+  padding-inline-start: var(--ids-space-none);
+  padding-inline-end: var(--ids-space-none);
 }
 
 .is-sortable .ids-data-grid-header-text,
 .has-headericon .ids-data-grid-header-text {
-  padding-inline-end: 0;
+  padding-inline-end: var(--ids-space-none);
 }
 
 [aria-sort=ascending] .is-sortable .sort-indicator ids-icon:first-child {
@@ -370,7 +383,7 @@ th.ids-data-grid-header-cell {
   margin-block-start: -3px;
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-checkbox-container {
-  padding-top: 2px;
+  padding-top: var(--ids-space-3xs);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-header-cell.align-right .is-sortable .ids-data-grid-header-text {
   padding-inline-end: var(--ids-data-grid-padding-xs);
@@ -383,7 +396,7 @@ th.ids-data-grid-header-cell {
   display: none;
 }
 .ids-data-grid[data-row-height=xxs] .sort-indicator {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
   margin-block-start: -1px;
   height: 22px;
 }
@@ -394,7 +407,7 @@ th.ids-data-grid-header-cell {
   top: -11px;
 }
 .ids-data-grid[data-row-height=xxs] .align-right .sort-indicator {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-header-text .ids-data-grid-checkbox-container {
   padding-top: 3px;
@@ -417,7 +430,7 @@ th.ids-data-grid-header-cell {
   direction: ltr;
 }
 :host([dir=rtl]) .ids-data-grid-header-cell:last-child {
-  border-inline-end-width: 0;
+  border-inline-end-width: var(--ids-border-width-none);
 }
 
 /* Ids Data Grid Component - Rows */
@@ -532,7 +545,7 @@ th.ids-data-grid-header-cell {
 .ids-data-grid-expandable-row {
   border-bottom: 1px solid var(--ids-data-grid-cell-color-border);
   grid-column: 1/-1;
-  padding: 8px;
+  padding: var(--ids-space-xs);
 }
 
 tr.ids-data-grid-row {
@@ -574,7 +587,7 @@ tr.ids-data-grid-row {
   white-space: nowrap;
 }
 .ids-data-grid-cell:first-child {
-  border-inline-start-width: 0;
+  border-inline-start-width: var(--ids-border-width-none);
 }
 .ids-data-grid-cell ids-badge::part(badge) {
   margin-block-end: var(--ids-space-none);
@@ -602,15 +615,15 @@ tr.ids-data-grid-row {
 .ids-data-grid-cell ids-icon + span {
   vertical-align: middle;
   line-height: 25px;
-  padding-inline: 4px;
+  padding-inline: var(--ids-space-2xs);
 }
 .ids-data-grid-cell.align-center > *:first-child {
   display: inline-flex;
-  margin: 0 auto;
+  margin: var(--ids-space-none) auto;
 }
 .ids-data-grid-cell.align-right > *:first-child {
   margin-inline-start: auto;
-  margin-inline-end: 0;
+  margin-inline-end: var(--ids-space-none);
 }
 .ids-data-grid-cell.align-right ids-input {
   text-align: right;
@@ -660,11 +673,11 @@ tr.ids-data-grid-row {
   justify-content: space-between;
 }
 .ids-data-grid-cell.is-editable.is-lookup .text-ellipsis, .ids-data-grid-cell.is-editable.is-datepicker .text-ellipsis, .ids-data-grid-cell.is-editable.is-timepicker .text-ellipsis {
-  padding-inline-end: 0;
+  padding-inline-end: var(--ids-space-none);
 }
 .ids-data-grid-cell.is-editable .editor-cell-icon {
   margin-inline-end: 10px;
-  margin-block-start: 2px;
+  margin-block-start: var(--ids-space-3xs);
   display: none;
 }
 .ids-data-grid-cell.is-editable ids-trigger-button::part(button) {
@@ -688,7 +701,7 @@ tr.ids-data-grid-row {
   width: 100%;
   position: relative;
   left: 6px;
-  top: 4px;
+  top: var(--ids-space-2xs);
 }
 .ids-data-grid-cell.is-editing.is-lookup, .ids-data-grid-cell.is-editing.is-datepicker, .ids-data-grid-cell.is-editing.is-timepicker {
   overflow: visible;
@@ -706,7 +719,7 @@ tr.ids-data-grid-row {
   box-shadow: none;
 }
 .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
-  padding: 0 4px;
+  padding: 0 var(--ids-space-2xs);
 }
 .ids-data-grid-cell.is-editing.is-uppercase {
   text-transform: uppercase;
@@ -724,12 +737,12 @@ tr.ids-data-grid-row {
   border-inline-end: 1px solid var(--ids-data-grid-cell-color-border);
 }
 .ids-data-grid-cell.frozen-last + .ids-data-grid-cell {
-  border-inline-start-width: 0;
+  border-inline-start-width: var(--ids-border-width-none);
 }
 .ids-data-grid-cell.frozen-left {
   background-color: var(--ids-data-grid-color-background);
   position: sticky;
-  left: 0;
+  left: var(--ids-space-none);
 }
 .ids-data-grid-cell.frozen-left:nth-of-type(2) {
   left: var(--ids-data-grid-frozen-column-left-width-2);
@@ -760,7 +773,7 @@ tr.ids-data-grid-row {
 }
 .ids-data-grid-cell.frozen-right {
   position: sticky;
-  right: 0;
+  right: var(--ids-space-none);
 }
 .ids-data-grid-cell.is-dirty::before {
   border-color: var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent var(--ids-input-dirty-indicator-color-background-dirty);
@@ -768,9 +781,9 @@ tr.ids-data-grid-row {
   border-width: 5px;
   content: "";
   display: inline-block;
-  margin-inline: 2px;
+  margin-inline: var(--ids-space-3xs);
   position: absolute;
-  inset-block-start: 2px;
+  inset-block-start: var(--ids-space-3xs);
   z-index: 1;
 }
 .ids-data-grid-cell.is-dirty.is-inline.formatter-tree::before {
@@ -786,9 +799,9 @@ tr.ids-data-grid-row {
   border-width: 5px;
   content: "";
   display: inline-block;
-  margin-inline: 2px;
+  margin-inline: var(--ids-space-3xs);
   position: absolute;
-  inset-block-start: 2px;
+  inset-block-start: var(--ids-space-3xs);
   z-index: 1;
 }
 .ids-data-grid-cell.is-dirty.is-inline.is-dropdown::before {
@@ -813,14 +826,14 @@ tr.ids-data-grid-row {
   top: 3px;
 }
 [data-row-height=xxs] ids-button {
-  --ids-button-icon-padding: 2px;
+  --ids-button-icon-padding: var(--ids-space-3xs);
 }
 [data-row-height=xxs] ids-badge {
   --ids-badge-font-line-height: calc(var(--ids-data-grid-row-height-xxs) - 8px);
 }
 [data-row-height=xxs] ids-input,
 [data-row-height=xxs] ids-trigger-field {
-  --ids-space-xxxs: 0;
+  --ids-space-3xs: 0;
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
 [data-row-height=xxs] ids-input::part(dirty-tracker-icon) {
@@ -831,24 +844,24 @@ tr.ids-data-grid-row {
   height: calc(var(--ids-input-height-10) - 4px);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable .editor-cell-icon {
-  margin-inline-end: 2px;
+  margin-inline-end: var(--ids-space-3xs);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
-  margin-inline-end: 4px;
+  margin-inline-end: var(--ids-space-2xs);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -2px;
-  --ids-button-tertiary-color-background-hover: transparent;
+  --ids-button-tertiary-color-background-hover: var(--ids-color-transparent);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
-  padding: 0 1px;
+  padding: var(--ids-space-none) var(--ids-space-4xs);
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
 [data-row-height=xxs] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
   padding-inline: var(--ids-data-grid-padding-xxs);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable.is-editable.is-invalid ids-alert {
-  margin-inline-end: var(--ids-space-xxxxs);
+  margin-inline-end: var(--ids-space-4xs);
 }
 
 [data-row-height=xs] .ids-data-grid-cell.is-dirty::before {
@@ -872,25 +885,25 @@ tr.ids-data-grid-row {
   --ids-icon-width-default: 12px !important;
 }
 [data-row-height=xs] .ids-data-grid-cell.is-editable .editor-cell-icon {
-  margin-inline-end: 2px;
+  margin-inline-end: var(--ids-space-3xs);
 }
 [data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
-  margin-inline-end: 4px;
+  margin-inline-end: var(--ids-space-2xs);
 }
 [data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -2px;
-  --ids-button-tertiary-color-background-hover: transparent;
+  --ids-button-tertiary-color-background-hover: var(--ids-color-transparent);
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
 [data-row-height=xs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
-  padding: 0 2px;
+  padding: var(--ids-space-none) var(--ids-space-3xs);
 }
 [data-row-height=xs] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
   padding-inline: var(--ids-data-grid-padding-xs);
 }
 
 [data-row-height=sm] ids-button {
-  --ids-button-icon-padding: 4px;
+  --ids-button-icon-padding: var(--ids-space-2xs);
 }
 [data-row-height=sm] .ids-data-grid-cell.is-editable .editor-cell-icon {
   margin-inline-end: 6px;
@@ -900,7 +913,7 @@ tr.ids-data-grid-row {
 }
 [data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -1px;
-  --ids-button-tertiary-color-background-hover: transparent;
+  --ids-button-tertiary-color-background-hover: var(--ids-color-transparent);
 }
 [data-row-height=sm] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
   padding-inline: var(--ids-data-grid-padding-sm);
@@ -911,7 +924,7 @@ tr.ids-data-grid-row {
 }
 [data-row-height=md] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -3px;
-  --ids-button-tertiary-color-background-hover: transparent;
+  --ids-button-tertiary-color-background-hover: var(--ids-color-transparent);
 }
 [data-row-height=md] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
   padding-inline: var(--ids-data-grid-padding-md);
@@ -922,7 +935,7 @@ tr.ids-data-grid-row {
 }
 
 .ids-data-grid.is-list-style .ids-data-grid-cell {
-  border-inline-start-width: 0;
+  border-inline-start-width: var(--ids-border-width-none);
   border-bottom: 1px solid var(--ids-data-grid-list-cell-color-border);
 }
 .ids-data-grid.is-list-style .ids-data-grid-cell.is-readonly {
@@ -942,17 +955,17 @@ td.ids-data-grid-cell {
 }
 
 :host([dir=rtl]) .ids-data-grid.is-list-style .ids-data-grid-cell {
-  border-inline-end-width: 0;
+  border-inline-end-width: var(--ids-border-width-none);
 }
 :host([dir=rtl]) .ids-data-grid-cell:last-child {
-  border-inline-end-width: 0;
+  border-inline-end-width: var(--ids-border-width-none);
 }
 :host([dir=rtl]) .ids-data-grid-cell.is-dirty .ids-data-grid-tree-field-container::before, :host([dir=rtl]) .ids-data-grid-cell.is-dirty::before {
   border-color: var(--ids-input-dirty-indicator-color-background-dirty) var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent;
 }
 
 .ids-trigger-field-slot-trigger-end {
-  margin-inline-end: 0;
+  margin-inline-end: var(--ids-space-none);
 }
 
 .hide {
@@ -1073,7 +1086,7 @@ td.ids-data-grid-cell {
 .ids-data-grid {
   background-color: var(--ids-data-grid-color-background);
   border: 1px solid var(--ids-data-grid-cell-color-border);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   border-collapse: collapse;
   box-sizing: border-box;
   overflow: auto;
@@ -1082,8 +1095,8 @@ td.ids-data-grid-cell {
   align-content: flex-start;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: var(--ids-font-family-default);
-  font-size: var(--ids-font-size-40);
+  font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
+  font-size: var(--ids-font-size-sm);
 }
 .ids-data-grid .ids-data-grid-checkbox-container {
   cursor: var(--ids-cursor-pointer);
@@ -1109,8 +1122,8 @@ td.ids-data-grid-cell {
   top: 3px;
   border-color: var(--ids-data-grid-cell-checkbox-color-border);
   position: relative;
-  left: 0;
-  top: 0;
+  left: var(--ids-space-none);
+  top: var(--ids-space-none);
 }
 .ids-data-grid .ids-data-grid-checkbox.editable {
   cursor: var(--ids-cursor-pointer);
@@ -1127,7 +1140,7 @@ td.ids-data-grid-cell {
 .ids-data-grid .ids-data-grid-checkbox.checked::after {
   position: absolute;
   display: block;
-  border: var(--ids-font-size-20) solid var(--ids-checkbox-color-border-selected-after);
+  border: var(--ids-font-size-2xs) solid var(--ids-checkbox-color-border-selected-after);
   border-width: var(--ids-checkbox-border-width-selected-after);
   animation: check 0.15s;
   transform: rotate(45deg);
@@ -1176,8 +1189,8 @@ td.ids-data-grid-cell {
   width: 14px;
   cursor: var(--ids-cursor-pointer);
   position: relative;
-  left: 0;
-  top: 0;
+  left: var(--ids-space-none);
+  top: var(--ids-space-none);
 }
 .ids-data-grid .ids-data-grid-radio::after {
   position: absolute;
@@ -1221,23 +1234,23 @@ td.ids-data-grid-cell {
   align-items: center;
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .ids-data-grid-tree-field-container .text-ellipsis {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 4px;
-  padding-inline-end: 0;
+  padding-inline-start: var(--ids-space-2xs);
+  padding-inline-end: var(--ids-space-none);
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button.expand-button {
-  --ids-button-tertiary-color-background-hover: transparent;
-  --ids-button-tertiary-color-border-hover: transparent;
-  --ids-button-tertiary-color-background-pressed: transparent;
-  --ids-button-tertiary-color-border-pressed: transparent;
+  --ids-button-tertiary-color-background-hover: var(--ids-color-transparent);
+  --ids-button-tertiary-color-border-hover: var(--ids-color-transparent);
+  --ids-button-tertiary-color-background-pressed: var(--ids-color-transparent);
+  --ids-button-tertiary-color-border-pressed: var(--ids-color-transparent);
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
   overflow: initial;
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis ids-hyperlink {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-field-container {
   display: flex;
@@ -1257,7 +1270,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1271,7 +1284,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1284,16 +1297,16 @@ td.ids-data-grid-cell {
   margin-inline-end: -2px;
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-tree-field-container .text-ellipsis {
-  padding-inline-start: 0;
+  padding-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
   margin-inline-start: 30px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell ids-button {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1306,7 +1319,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 24px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1319,7 +1332,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 36px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1332,7 +1345,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 48px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1345,7 +1358,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 60px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1358,7 +1371,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 72px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1371,7 +1384,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 84px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1384,7 +1397,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 96px;
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 3px;
@@ -1403,7 +1416,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1417,7 +1430,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1430,16 +1443,16 @@ td.ids-data-grid-cell {
   margin-inline-end: -2px;
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-tree-field-container .text-ellipsis {
-  padding-inline-start: 0;
+  padding-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
   margin-inline-start: 32px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell ids-button {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1452,7 +1465,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 23px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1465,7 +1478,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 36px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1478,7 +1491,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 49px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1491,7 +1504,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 62px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1504,7 +1517,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 75px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1517,7 +1530,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 88px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1530,7 +1543,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 101px;
 }
 .ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 4px;
@@ -1549,7 +1562,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1563,7 +1576,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1576,16 +1589,16 @@ td.ids-data-grid-cell {
   margin-inline-end: -5px;
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-tree-field-container .text-ellipsis {
-  padding-inline-start: 0;
+  padding-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
   margin-inline-start: 34px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell ids-button {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1598,7 +1611,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 23px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1611,7 +1624,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 38px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1624,7 +1637,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 53px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1637,7 +1650,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 68px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1650,7 +1663,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 83px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1663,7 +1676,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 98px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1676,7 +1689,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 113px;
 }
 .ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 5px;
@@ -1695,7 +1708,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1709,7 +1722,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1722,16 +1735,16 @@ td.ids-data-grid-cell {
   margin-inline-end: -8px;
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-tree-field-container .text-ellipsis {
-  padding-inline-start: 0;
+  padding-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
   margin-inline-start: 40px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell ids-button {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1744,7 +1757,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 20px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1757,7 +1770,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 37px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1770,7 +1783,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 54px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1783,7 +1796,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 71px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1796,7 +1809,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 88px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1809,7 +1822,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 105px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1822,7 +1835,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 122px;
 }
 .ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1841,7 +1854,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1855,7 +1868,7 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
   border: 1px solid var(--ids-input-color-border-default);
-  border-radius: var(--ids-border-radius-xxs);
+  border-radius: var(--ids-border-radius-2xs);
   box-sizing: border-box;
   display: block;
   content: "";
@@ -1868,16 +1881,16 @@ td.ids-data-grid-cell {
   margin-inline-end: -12px;
 }
 .ids-data-grid[data-row-height=lg] .ids-data-grid-tree-field-container .text-ellipsis {
-  padding-inline-start: 0;
+  padding-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
   margin-inline-start: 40px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell ids-button {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1890,7 +1903,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 20px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1903,7 +1916,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 37px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1916,7 +1929,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 54px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1929,7 +1942,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 71px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1942,7 +1955,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 88px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1955,7 +1968,7 @@ td.ids-data-grid-cell {
   margin-inline-start: 105px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
@@ -1968,14 +1981,14 @@ td.ids-data-grid-cell {
   margin-inline-start: 122px;
 }
 .ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
-  margin-inline-start: 0;
+  margin-inline-start: var(--ids-space-none);
 }
 .ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
   inset-block-start: 6px;
   margin-inline-start: 6px;
 }
 .ids-data-grid.is-list-style {
-  border-width: 0;
+  border-width: var(--ids-border-width-none);
 }
 .ids-data-grid.waiting-load {
   overflow: hidden;
@@ -2000,7 +2013,7 @@ table.ids-data-grid {
 .ids-data-grid-wrapper .ids-data-grid-toolbar {
   display: flex;
   width: 100%;
-  margin: 6px 0;
+  margin: 6px var(--ids-space-none);
   align-items: center;
   justify-content: end;
 }
@@ -2013,9 +2026,9 @@ ids-empty-message:not([hidden]),
   position: absolute;
   justify-content: center;
   align-items: center;
-  top: 0;
+  top: var(--ids-space-none);
   pointer-events: none;
-  margin-top: 16px;
+  margin-top: var(--ids-space-sm);
 }
 
 ids-empty-message.has-filter-row:not([hidden]),
@@ -2034,7 +2047,7 @@ ids-loading-indicator {
   position: absolute;
   justify-content: center;
   align-items: center;
-  top: 0;
+  top: var(--ids-space-none);
 }
 ids-loading-indicator[stopped] {
   display: none;
@@ -2046,8 +2059,8 @@ ids-loading-indicator[stopped] {
 }
 
 #datagrid-modal {
-  --ids-modal-content-padding: 0;
-  --ids-modal-header-padding: 16px 16px 8px 16px;
+  --ids-modal-content-padding: var(--ids-space-none);
+  --ids-modal-header-padding: var(--ids-space-sm) var(--ids-space-sm) var(--ids-space-xs) var(--ids-space-sm);
   --ids-popup-fit-height: 400px;
 }
 #datagrid-modal ids-swappable-item {
@@ -2061,19 +2074,19 @@ ids-loading-indicator[stopped] {
   top: calc(var(--ids-space-04) * -1);
 }
 #datagrid-modal ids-search-field {
-  --ids-input-color-background-default: var(--ids-color-accent-gray-weakest);
-  --ids-search-field-color-background-default: var(--ids-color-accent-gray-weakest);
-  --ids-input-color-border-default: var(--ids-color-accent-gray-weak);
-  --ids-input-color-border-hover: var(--ids-color-accent-gray-weak);
-  --ids-input-color-border-focus: var(--ids-color-accent-gray-weak);
+  --ids-input-color-background-default: var(--ids-color-accent-neutral-weakest);
+  --ids-search-field-color-background-default: var(--ids-color-accent-neutral-weakest);
+  --ids-input-color-border-default: var(--ids-color-accent-neutral-weak);
+  --ids-input-color-border-hover: var(--ids-color-accent-neutral-weak);
+  --ids-input-color-border-focus: var(--ids-color-accent-neutral-weak);
   --ids-input-color-border-shadow: none;
-  --ids-search-field-border-radius: 0;
-  --ids-search-field-border-width: 1px 0;
+  --ids-search-field-border-radius: var(--ids-border-radius-none);
+  --ids-search-field-border-width: var(--ids-border-width-sm) var(--ids-border-width-none);
   margin-bottom: -8px;
   margin-top: calc(var(--ids-space-08) * -1);
   min-width: 330px;
   position: sticky;
-  top: 0;
+  top: var(--ids-space-none);
   z-index: 1;
 }
 #datagrid-modal ids-text {
@@ -2081,7 +2094,7 @@ ids-loading-indicator[stopped] {
 }
 #datagrid-modal ids-switch {
   position: relative;
-  top: 2px;
+  top: var(--ids-space-3xs);
 }
 #datagrid-modal ids-swappable {
   width: 100%;