ids-enterprise-wc 1.0.0-beta.12 → 1.0.0-beta.13

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

@@ -5,22 +5,22 @@
 }
 .ids-data-grid .ids-data-grid-header-cell-content.vertical-align-center {
   position: relative;
-  top: calc(50% - var(--ids-spacing-xxl));
+  top: calc(50% - var(--ids-space-60));
 }
 .ids-data-grid .ids-data-grid-header-cell-filter-wrapper {
   align-items: center;
   display: flex;
   position: relative;
-  padding-inline-start: var(--ids-spacing-lg);
-  padding-inline-end: var(--ids-spacing-lg);
-  padding-block-end: var(--ids-spacing-lg);
+  padding-inline-start: var(--ids-space-40);
+  padding-inline-end: var(--ids-space-40);
+  padding-block-end: var(--ids-space-40);
 }
 .ids-data-grid .ids-data-grid-header-cell-filter-wrapper.hidden {
   display: none;
 }
 .ids-data-grid .ids-data-grid-header-cell-filter-wrapper ids-dropdown[compact] ids-list-box-option {
   font-size: unset;
-  min-height: var(--ids-size-xs);
+  min-height: var(--ids-size-20);
 }
 .ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-list-box-option,
 .ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-dropdown::part(triggerfield-input),
@@ -39,17 +39,17 @@
   width: 20px;
 }
 .ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
-  background-color: var(--ids-data-grid-header-checkbox-background-color);
-  border-color: var(--ids-data-grid-header-checkbox-border-color);
+  background-color: var(--ids-data-grid-header-checkbox-color-background);
+  border-color: var(--ids-data-grid-header-checkbox-color-border);
 }
 
 .ids-data-grid-column-groups {
-  border-block-end: 1px solid var(--ids-data-grid-header-border-color);
+  border-block-end: 1px solid var(--ids-data-grid-header-color-border);
 }
 
 .ids-data-grid-header-cell {
-  border-inline-start: 1px solid var(--ids-data-grid-header-border-color);
-  background-color: var(--ids-data-grid-header-background-color);
+  border-inline-start: 1px solid var(--ids-data-grid-header-color-border);
+  background-color: var(--ids-data-grid-header-color-background-default);
   min-height: 28px;
   position: relative;
 }
@@ -84,14 +84,14 @@
   height: 34px;
   opacity: 0;
   position: absolute;
-  inset-inline-start: var(--ids-spacing-lg);
+  inset-inline-start: var(--ids-space-40);
   top: 0;
   width: 4px;
 }
 .ids-data-grid-header-cell .reorderer ids-icon {
   position: absolute;
-  color: var(--ids-data-grid-header-icon-color);
-  inset-inline-start: calc(-1 * var(--ids-spacing-lg));
+  color: var(--ids-data-grid-header-color-icon);
+  inset-inline-start: calc(-1 * var(--ids-space-40));
   text-align: center;
   top: calc(50% - 9px);
 }
@@ -112,7 +112,7 @@
   width: 110px;
 }
 .ids-data-grid-header-cell.active-drag-column {
-  background-color: var(--ids-data-grid-header-drag-placeholder-background-color);
+  background-color: var(--ids-data-grid-header-color-background-placeholder-dragging);
 }
 .ids-data-grid-header-cell.active-drag-column .sort-indicator {
   opacity: 0;
@@ -121,12 +121,12 @@
   opacity: 1;
 }
 .ids-data-grid-header-cell.frozen {
-  background-color: var(--ids-data-grid-header-background-color);
+  background-color: var(--ids-data-grid-header-color-background-default);
   position: sticky;
   z-index: 3;
 }
 .ids-data-grid-header-cell.frozen-last {
-  border-inline-end: 1px solid var(--ids-data-grid-header-border-color);
+  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;
@@ -177,9 +177,9 @@
 .ids-data-grid-header-text {
   display: block;
   padding: var(--ids-data-grid-header-lg-padding);
-  font-weight: var(--ids-font-weight-semi-bold);
+  font-weight: var(--ids-font-weight-semibold);
   font-size: var(--ids-data-grid-font-size-sm);
-  color: var(--ids-data-grid-header-text-color);
+  color: var(--ids-data-grid-header-color-text);
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;
@@ -189,9 +189,9 @@
 
 .ids-data-grid-header-icon {
   align-self: center;
-  color: var(--ids-data-grid-header-text-color);
-  margin-inline-start: var(--ids-spacing-md);
-  margin-block-start: var(--ids-spacing-md);
+  color: var(--ids-data-grid-header-color-text);
+  margin-inline-start: var(--ids-space-30);
+  margin-block-start: var(--ids-space-30);
 }
 
 .sort-indicator {
@@ -203,9 +203,9 @@
 }
 
 .is-sortable .sort-indicator ids-icon {
-  color: var(--ids-data-grid-header-unsorted-icon-color);
+  color: var(--ids-data-grid-header-color-icon-unsorted);
   opacity: 0;
-  transition: opacity 0.3s var(--ids-transition-ease) 0s;
+  transition: opacity 0.3s var(--ids-motion-ease) 0s;
 }
 .is-sortable .sort-indicator ids-icon:first-child {
   position: relative;
@@ -228,7 +228,7 @@
   max-height: 18px;
   cursor: var(--ids-cursor-pointer);
   color: var(--ids-data-grid-header-expander-color);
-  margin-inline-start: var(--ids-spacing-xl);
+  margin-inline-start: var(--ids-space-50);
 }
 .header-expander:hover {
   color: var(--ids-data-grid-header-expander-active-color);
@@ -249,7 +249,7 @@
 }
 
 [aria-sort=ascending] .is-sortable .sort-indicator ids-icon:first-child {
-  color: var(--ids-data-grid-header-sorted-icon-color);
+  color: var(--ids-data-grid-header-color-icon-sorted);
   opacity: 1;
 }
 [aria-sort=ascending] .is-sortable .sort-indicator ids-icon:last-child {
@@ -260,7 +260,7 @@
   opacity: 1;
 }
 [aria-sort=descending] .is-sortable .sort-indicator ids-icon:last-child {
-  color: var(--ids-data-grid-header-sorted-icon-color);
+  color: var(--ids-data-grid-header-color-icon-sorted);
   opacity: 1;
 }
 
@@ -281,11 +281,11 @@
   width: 0;
 }
 .ids-data-grid-sort-arrows::before {
-  border-top: 5px solid var(--ids-data-grid-header-background-color);
+  border-top: 5px solid var(--ids-data-grid-header-color-background-default);
   top: -6px;
 }
 .ids-data-grid-sort-arrows::after {
-  border-bottom: 5px solid var(--ids-data-grid-header-background-color);
+  border-bottom: 5px solid var(--ids-data-grid-header-color-background-default);
   bottom: -9px;
 }
 
@@ -298,21 +298,21 @@ th.ids-data-grid-header-cell {
 }
 
 .ids-data-grid.is-list-style .ids-data-grid-header-cell {
-  background-color: var(--ids-data-grid-list-header-background-color);
-  border-color: var(--ids-data-grid-list-header-border-color);
+  background-color: var(--ids-data-grid-list-header-color-background);
+  border-color: var(--ids-data-grid-list-header-color-border);
 }
 .ids-data-grid.is-list-style .ids-data-grid-header-text {
-  color: var(--ids-data-grid-list-header-text-color);
+  color: var(--ids-data-grid-list-header-color-text);
 }
 .ids-data-grid.is-list-style .is-sortable ids-icon {
-  color: var(--ids-data-grid-header-unsorted-icon-color);
+  color: var(--ids-data-grid-header-color-icon-unsorted);
 }
 .ids-data-grid.is-list-style [aria-sort=descending] .is-sortable ids-icon:last-child,
 .ids-data-grid.is-list-style [aria-sort=ascending] .is-sortable ids-icon:first-child {
-  color: var(--ids-data-grid-list-header-unsorted-icon-color);
+  color: var(--ids-data-grid-list-header-color-icon-unsorted);
 }
 .ids-data-grid.is-list-style .ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
-  border-color: var(--ids-data-grid-list-header-checkbox-background-color);
+  border-color: var(--ids-data-grid-list-header-checkbox-color-background);
 }
 
 .ids-data-grid-body {
@@ -370,12 +370,12 @@ th.ids-data-grid-header-cell {
   padding-top: 1px;
 }
 .ids-data-grid[data-row-height=xxs] ids-input {
-  --ids-input-height-xs: 24px;
+  --ids-input-height-10: 24px;
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-header-cell-filter-wrapper {
-  padding-inline-start: calc(var(--ids-data-grid-xxs-padding) + 1px);
-  padding-inline-end: calc(var(--ids-data-grid-xxs-padding) + 1px);
-  padding-block-end: calc(var(--ids-data-grid-xxs-padding) + 2px);
+  padding-inline-start: calc(var(--ids-data-grid-padding-xxs) + 1px);
+  padding-inline-end: calc(var(--ids-data-grid-padding-xxs) + 1px);
+  padding-block-end: calc(var(--ids-data-grid-padding-xxs) + 2px);
 }
 
 :host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-content, :host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper {
@@ -392,104 +392,104 @@ th.ids-data-grid-header-cell {
   width: 100%;
 }
 .ids-data-grid-row.selected:not(.mixed) .ids-data-grid-cell, .ids-data-grid-row.activated .ids-data-grid-cell {
-  background-color: var(--ids-data-grid-row-selected-background-color);
+  background-color: var(--ids-data-grid-row-color-background-selected);
 }
 .ids-data-grid-row[hidden] {
   display: none;
 }
 
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell {
-  height: var(--ids-data-grid-md-row-height);
+  height: var(--ids-data-grid-row-height-md);
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell .text-ellipsis,
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-md-padding);
-  padding-inline-end: var(--ids-data-grid-md-padding);
+  padding-inline-start: var(--ids-data-grid-padding-md);
+  padding-inline-end: var(--ids-data-grid-padding-md);
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-md-padding);
+  margin: var(--ids-data-grid-padding-md);
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-md-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
+  padding-inline-start: var(--ids-data-grid-padding-md);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-md-padding);
+  padding-inline-start: var(--ids-data-grid-padding-md);
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell {
-  height: var(--ids-data-grid-sm-row-height);
+  height: var(--ids-data-grid-row-height-sm);
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell .text-ellipsis,
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-sm-padding);
-  padding-inline-end: var(--ids-data-grid-sm-padding);
+  padding-inline-start: var(--ids-data-grid-padding-sm);
+  padding-inline-end: var(--ids-data-grid-padding-sm);
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-sm-padding);
+  margin: var(--ids-data-grid-padding-sm);
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-sm-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
+  padding-inline-start: var(--ids-data-grid-padding-sm);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-sm-padding);
+  padding-inline-start: var(--ids-data-grid-padding-sm);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell {
-  height: var(--ids-data-grid-xs-row-height);
+  height: var(--ids-data-grid-row-height-xs);
   font-size: var(--ids-data-grid-font-size-sm);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell .text-ellipsis,
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-xs-padding);
-  padding-inline-end: var(--ids-data-grid-xs-padding);
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+  padding-inline-end: var(--ids-data-grid-padding-xs);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-xs-padding);
+  margin: var(--ids-data-grid-padding-xs);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xs-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xs-padding);
+  padding-inline-start: var(--ids-data-grid-padding-xs);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell {
-  height: var(--ids-data-grid-xxs-row-height);
+  height: var(--ids-data-grid-row-height-xxs);
   font-size: var(--ids-data-grid-font-size-sm);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell .text-ellipsis,
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-xxs-padding);
-  padding-inline-end: var(--ids-data-grid-xxs-padding);
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
+  padding-inline-end: var(--ids-data-grid-padding-xxs);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-xxs-padding);
+  margin: var(--ids-data-grid-padding-xxs);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xxs-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xxs-padding);
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
 }
 
 .ids-data-grid.alt-row-shading ids-data-grid-row:nth-child(even) {
-  background-color: var(--ids-data-grid-row-alternate-background-color);
+  background-color: var(--ids-data-grid-row-alternating-color-background);
 }
 
 .ids-data-grid-expandable-row {
-  border-bottom: 1px solid var(--ids-data-grid-cell-border-color);
+  border-bottom: 1px solid var(--ids-data-grid-cell-color-border);
   grid-column: 1/-1;
   padding: 8px;
 }
 
 tr.ids-data-grid-row {
   display: table-row;
-  height: var(--ids-data-grid-lg-row-height);
+  height: var(--ids-data-grid-row-height-lg);
 }
 
 .ids-data-grid.row-navigation .ids-data-grid-row:focus-within {
-  box-shadow: var(--ids-data-grid-row-focus-box-shadow);
+  box-shadow: var(--ids-data-grid-row-shadow-focus);
 }
 .ids-data-grid.row-navigation .ids-data-grid-row .ids-data-grid-cell:focus {
   box-shadow: none;
@@ -501,9 +501,9 @@ tr.ids-data-grid-row {
   align-items: center;
   border-inline-start: 1px solid;
   border-block-end: 1px solid;
-  border-color: var(--ids-data-grid-cell-border-color);
+  border-color: var(--ids-data-grid-cell-color-border);
   display: inline-flex;
-  color: var(--ids-data-grid-cell-text-color);
+  color: var(--ids-data-grid-cell-color-text-default);
   height: 50px;
   overflow: hidden;
   position: relative;
@@ -513,21 +513,21 @@ tr.ids-data-grid-row {
   border-inline-start-width: 0;
 }
 .ids-data-grid-cell ids-badge::part(badge) {
-  margin-block-end: var(--ids-spacing-none);
-  margin-inline-end: var(--ids-spacing-none);
+  margin-block-end: var(--ids-space-none);
+  margin-inline-end: var(--ids-space-none);
 }
 .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
 }
 .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-spacing-xxl);
+  margin: var(--ids-space-60);
 }
 .ids-data-grid-cell .text-ellipsis {
   display: inline-block;
   vertical-align: middle;
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
   height: auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -549,10 +549,10 @@ tr.ids-data-grid-row {
   margin-inline-end: 0;
 }
 .ids-data-grid-cell.is-readonly {
-  background-color: var(--ids-data-grid-cell-readonly-background-color);
+  background-color: var(--ids-data-grid-cell-color-background-readonly);
 }
 .ids-data-grid-cell.is-disabled {
-  color: var(--ids-data-grid-cell-disabled-text-color);
+  color: var(--ids-data-grid-cell-color-text-disabled);
 }
 .ids-data-grid-cell.is-disabled .editor-cell-icon {
   display: none;
@@ -561,12 +561,12 @@ tr.ids-data-grid-row {
   text-transform: uppercase;
 }
 .ids-data-grid-cell:focus, .ids-data-grid-cell.is-editing:not(.is-inline):focus-within {
-  box-shadow: var(--ids-box-shadow-md);
-  outline: 1px solid var(--ids-focus-border-color);
+  box-shadow: var(--ids-shadow-20);
+  outline: 1px solid var(--ids-color-border-focus);
   outline-offset: -1px;
 }
 .ids-data-grid-cell.is-editable.is-inline {
-  box-shadow: inset 0 0 0 4px var(--ids-data-grid-cell-background-color), inset 0 0 0 5px var(--ids-input-border-color);
+  box-shadow: inset 0 0 0 4px var(--ids-data-grid-cell-color-background-default), inset 0 0 0 5px var(--ids-input-color-border-default);
 }
 .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
   --ids-trigger-field-button-margin: 0;
@@ -594,7 +594,7 @@ tr.ids-data-grid-row {
   justify-content: space-between;
 }
 .ids-data-grid-cell.is-editable.is-editable.is-invalid ids-alert {
-  margin-inline-end: var(--ids-spacing-lg);
+  margin-inline-end: var(--ids-space-40);
 }
 .ids-data-grid-cell.is-editing ids-checkbox {
   display: flex;
@@ -634,12 +634,12 @@ tr.ids-data-grid-row {
   text-transform: uppercase;
 }
 .ids-data-grid-cell.frozen {
-  background-color: var(--ids-data-grid-cell-background-color);
+  background-color: var(--ids-data-grid-cell-color-background-default);
   position: sticky;
   z-index: 3;
 }
 .ids-data-grid-cell.frozen-last {
-  border-inline-end: 1px solid var(--ids-data-grid-cell-border-color);
+  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;
@@ -680,7 +680,7 @@ tr.ids-data-grid-row {
   right: 0;
 }
 .ids-data-grid-cell.is-dirty::before {
-  border-color: var(--ids-dirty-indicator-background-color) transparent transparent var(--ids-dirty-indicator-background-color);
+  border-color: var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent var(--ids-input-dirty-indicator-color-background-dirty);
   border-style: solid;
   border-width: 5px;
   content: "";
@@ -695,7 +695,7 @@ tr.ids-data-grid-row {
   top: 6px;
 }
 .ids-data-grid-cell.is-invalid {
-  background-color: var(--ids-data-grid-cell-invalid-background-color);
+  background-color: var(--ids-data-grid-cell-color-background-error);
 }
 .ids-data-grid-cell ids-alert {
   margin-top: 3px;
@@ -709,17 +709,17 @@ tr.ids-data-grid-row {
   top: 3px;
 }
 [data-row-height=xxs] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 2px var(--ids-input-background-color), inset 0 0 0 3px var(--ids-input-border-color);
+  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
 }
 [data-row-height=xxs] ids-button {
   --ids-button-icon-padding: 2px;
 }
 [data-row-height=xxs] ids-badge {
-  --ids-badge-line-height: calc(var(--ids-data-grid-xxs-row-height) - 8px);
+  --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-spacing-sm: 0;
+  --ids-space-20: 0;
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable .editor-cell-icon {
@@ -730,7 +730,7 @@ tr.ids-data-grid-row {
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -2px;
-  --ids-button-tertiary-hover-background-color: transparent;
+  --ids-button-tertiary-color-background-hover: transparent;
 }
 [data-row-height=xxs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
   padding: 0 1px;
@@ -745,13 +745,13 @@ tr.ids-data-grid-row {
   top: 3px;
 }
 [data-row-height=xs] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 2px var(--ids-input-background-color), inset 0 0 0 3px var(--ids-input-border-color);
+  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
 }
 [data-row-height=xs] ids-button {
   --ids-button-icon-padding: 3px;
 }
 [data-row-height=xs] ids-badge {
-  --ids-badge-line-height: calc(var(--ids-data-grid-xs-row-height) - 12px);
+  --ids-badge-font-line-height: calc(var(--ids-data-grid-row-height-xs) - 12px);
 }
 [data-row-height=xs] ids-input {
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
@@ -764,7 +764,7 @@ tr.ids-data-grid-row {
 }
 [data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -2px;
-  --ids-button-tertiary-hover-background-color: transparent;
+  --ids-button-tertiary-color-background-hover: 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 {
@@ -772,7 +772,7 @@ tr.ids-data-grid-row {
 }
 
 [data-row-height=sm] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 3px var(--ids-input-background-color), inset 0 0 0 4px var(--ids-input-border-color);
+  box-shadow: inset 0 0 0 3px var(--ids-input-color-background-default), inset 0 0 0 4px var(--ids-input-color-border-default);
 }
 [data-row-height=sm] .ids-data-grid-cell.is-dirty.is-inline::before {
   margin-inline: 5px;
@@ -789,26 +789,26 @@ 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-hover-background-color: transparent;
+  --ids-button-tertiary-color-background-hover: transparent;
 }
 
 [data-row-height=md] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
-  margin-inline-end: var(--ids-data-grid-sm-padding);
+  margin-inline-end: var(--ids-data-grid-padding-sm);
 }
 [data-row-height=md] .ids-data-grid-cell.is-editable.is-inline {
   --ids-trigger-field-button-margin: -3px;
-  --ids-button-tertiary-hover-background-color: transparent;
+  --ids-button-tertiary-color-background-hover: transparent;
 }
 
 .ids-data-grid.is-list-style .ids-data-grid-cell {
   border-inline-start-width: 0;
-  border-bottom: 1px solid var(--ids-data-grid-list-cell-border-color);
+  border-bottom: 1px solid var(--ids-data-grid-list-cell-color-border);
 }
 .ids-data-grid.is-list-style .ids-data-grid-cell.is-readonly {
-  background-color: var(--ids-data-grid-cell-readonly-background-color);
+  background-color: var(--ids-data-grid-cell-color-background-readonly);
 }
 .ids-data-grid.is-list-style .ids-data-grid-cell.is-disabled {
-  color: var(--ids-data-grid-cell-disabled-text-color);
+  color: var(--ids-data-grid-cell-color-text-disabled);
 }
 .ids-data-grid.is-list-style .ids-data-grid-body .ids-data-grid-row:first-child .ids-data-grid-cell {
   border-top: 0;
@@ -816,8 +816,8 @@ tr.ids-data-grid-row {
 
 td.ids-data-grid-cell {
   display: table-cell;
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
 }
 
 :host([dir=rtl]) .ids-data-grid.is-list-style .ids-data-grid-cell {
@@ -827,7 +827,7 @@ td.ids-data-grid-cell {
   border-inline-end-width: 0;
 }
 :host([dir=rtl]) .ids-data-grid-cell.is-dirty::before {
-  border-color: var(--ids-dirty-indicator-background-color) var(--ids-dirty-indicator-background-color) transparent transparent;
+  border-color: var(--ids-input-dirty-indicator-color-background-dirty) var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent;
 }
 
 .hide {
@@ -902,7 +902,7 @@ td.ids-data-grid-cell {
 
 .ids-popup-menu:not([hidden]) {
   display: block;
-  z-index: var(--ids-z-index-popup);
+  z-index: var(--ids-z-index-60);
 }
 
 /**
@@ -944,9 +944,9 @@ td.ids-data-grid-cell {
 }
 
 .ids-data-grid {
-  background-color: var(--ids-data-grid-background-color);
-  border: 1px solid var(--ids-data-grid-cell-border-color);
-  border-radius: var(--ids-border-radius-xs);
+  background-color: var(--ids-data-grid-color-background);
+  border: 1px solid var(--ids-data-grid-cell-color-border);
+  border-radius: var(--ids-border-radius-01);
   border-collapse: collapse;
   box-sizing: border-box;
   contain: content;
@@ -956,8 +956,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);
-  font-size: var(--ids-font-size-md);
+  font-family: var(--ids-font-family-default);
+  font-size: var(--ids-font-size-40);
 }
 .ids-data-grid .ids-data-grid-checkbox-container {
   cursor: var(--ids-cursor-pointer);
@@ -967,13 +967,13 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid .ids-data-grid-checkbox {
   position: absolute;
-  border: var(--ids-checkbox-unchecked-border);
-  border-radius: var(--ids-checkbox-unchecked-border-radius);
+  border: var(--ids-checkbox-border);
+  border-radius: var(--ids-checkbox-border-radius);
   height: 14px;
   width: 14px;
   left: 0;
   top: 2px;
-  border-color: var(--ids-data-grid-cell-checkbox-border-color);
+  border-color: var(--ids-data-grid-cell-checkbox-color-border);
   position: relative;
   left: 0;
   top: 0;
@@ -982,19 +982,19 @@ td.ids-data-grid-cell {
   cursor: var(--ids-cursor-pointer);
 }
 .ids-data-grid .ids-data-grid-checkbox.disabled {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
+  background-color: var(--ids-checkbox-color-background-disabled);
+  border-color: var(--ids-checkbox-color-border-disabled);
   cursor: var(--ids-cursor-default);
 }
 .ids-data-grid .ids-data-grid-checkbox.checked {
-  background-color: var(--ids-checkbox-checked-background-color);
-  border-color: var(--ids-checkbox-checked-border-color);
+  background-color: var(--ids-checkbox-color-background-selected);
+  border-color: var(--ids-checkbox-color-border-selected);
 }
 .ids-data-grid .ids-data-grid-checkbox.checked::after {
   position: absolute;
   display: block;
-  border: var(--ids-font-size-xs) solid var(--ids-checkbox-checked-after-border-color);
-  border-width: var(--ids-checkbox-checked-after-border-width);
+  border: var(--ids-font-size-20) solid var(--ids-checkbox-color-border-selected-after);
+  border-width: var(--ids-checkbox-border-width-selected-after);
   animation: check 0.15s;
   transform: rotate(45deg);
   content: "";
@@ -1005,19 +1005,19 @@ td.ids-data-grid-cell {
   animation: none;
 }
 .ids-data-grid .ids-data-grid-checkbox.checked.disabled {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
+  background-color: var(--ids-checkbox-color-background-selected-disabled);
+  border-color: var(--ids-checkbox-color-border-selected-disabled);
 }
 .ids-data-grid .ids-data-grid-checkbox.indeterminate {
-  background-color: var(--ids-checkbox-indeterminate-background-color);
-  border-color: var(--ids-checkbox-indeterminate-border-color);
+  background-color: var(--ids-checkbox-color-background-indeterminate);
+  border-color: var(--ids-checkbox-color-border-indeterminate);
 }
 .ids-data-grid .ids-data-grid-checkbox.indeterminate::after {
   position: absolute;
   animation: checkindeterminate 0.15s;
   display: block;
-  border: 1px solid var(--ids-checkbox-indeterminate-after-border-color);
-  border-width: var(--ids-checkbox-indeterminate-after-border-width);
+  border: 1px solid var(--ids-checkbox-color-border-indeterminate-after);
+  border-width: var(--ids-checkbox-border-width-indeterminate);
   content: "";
   height: 6px;
   left: 2px;
@@ -1033,12 +1033,12 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid .ids-data-grid-radio {
   position: absolute;
-  border: 1px solid var(--ids-radio-unchecked-border-color);
-  border-radius: var(--ids-radio-border-radius);
+  border: 1px solid var(--ids-radio-button-color-border-default);
+  border-radius: var(--ids-radio-button-border-radius);
   height: 14px;
   left: 0;
   top: 3px;
-  transition: border-color var(--ids-transition-length) var(--ids-transition-ease);
+  transition: border-color var(--ids-motion-duration) var(--ids-motion-ease);
   width: 14px;
   cursor: var(--ids-cursor-pointer);
   position: relative;
@@ -1047,28 +1047,28 @@ td.ids-data-grid-cell {
 }
 .ids-data-grid .ids-data-grid-radio::after {
   position: absolute;
-  background-color: var(--ids-radio-unchecked-background-color);
-  border: 1px solid var(--ids-radio-unchecked-background-color);
-  border-radius: var(--ids-radio-border-radius);
+  background-color: var(--ids-radio-button-color-background);
+  border: 1px solid var(--ids-radio-button-color-background);
+  border-radius: var(--ids-radio-button-border-radius);
   content: "";
   height: 0;
   left: 6px;
   top: 6px;
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
+  transition: all var(--ids-motion-duration) var(--ids-motion-ease);
   width: 0;
 }
 .ids-data-grid .ids-data-grid-radio.disabled {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
+  border-color: var(--ids-radio-button-color-border-disabled);
   cursor: var(--ids-cursor-default);
   box-shadow: none;
 }
 .ids-data-grid .ids-data-grid-radio.checked {
-  background-color: var(--ids-radio-checked-background-color);
-  border-color: var(--ids-radio-checked-border-color);
+  background-color: var(--ids-radio-button-color-background-selected);
+  border-color: var(--ids-radio-button-color-border-selected);
 }
 .ids-data-grid .ids-data-grid-radio.checked::after {
-  background-color: var(--ids-radio-checked-inner-background-color);
-  border-color: var(--ids-radio-checked-inner-background-color);
+  background-color: var(--ids-radio-button-inner-color-background-selected);
+  border-color: var(--ids-radio-button-inner-color-background-selected);
   border-width: 2px;
   height: 4px;
   left: 3px;
@@ -1076,8 +1076,8 @@ td.ids-data-grid-cell {
   width: 4px;
 }
 .ids-data-grid .ids-data-grid-radio.checked.disabled {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
+  background-color: var(--ids-radio-button-color-background-selected-disabled);
+  border-color: var(--ids-radio-button-color-border-selected-disabled);
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container {
   display: flex;
@@ -1170,7 +1170,7 @@ td.ids-data-grid-cell {
 
 table.ids-data-grid {
   display: table;
-  outline: 1px solid var(--ids-data-grid-cell-border-color);
+  outline: 1px solid var(--ids-data-grid-cell-color-border);
   outline-offset: -1px;
 }
 
@@ -1188,5 +1188,5 @@ table.ids-data-grid {
   bottom: 20px;
 }
 .ids-data-grid-wrapper.has-empty-message .ids-data-grid {
-  min-height: var(--ids-data-grid-min-height);
+  min-height: var(--ids-data-grid-height-min);
 }