@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-ag-grid.mjs

@@ -80,8 +80,8 @@ class AgDateInputComponent {
             this.params.onDateChanged();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AgDateInputComponent, isStandalone: true, selector: "si-ag-date-input", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AgDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AgDateInputComponent, isStandalone: true, selector: "si-ag-date-input", ngImport: i0, template: `
     <si-calendar-button class="w-100">
       <input
         type="text"
@@ -92,9 +92,9 @@ class AgDateInputComponent {
         (ngModelChange)="onDateChange()"
       />
     </si-calendar-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgDateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AgDateInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-ag-date-input',
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
       />
     </si-calendar-button>
   `,
-                    changeDetection: ChangeDetectionStrategy.Default
+                    changeDetection: ChangeDetectionStrategy.Eager
                 }]
         }] });
 
@@ -141,28 +141,31 @@ class AgNoRowsOverlayComponent {
      * Icon to display in the empty state.
      *
      */
-    icon = signal('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    icon = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /**
      * Heading text for the empty state.
      *
      */
-    heading = signal('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    heading = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Description text for the empty state.
      *
      */
-    content = signal(undefined, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    content = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     agInit(params) {
         this.icon.set(params.icon);
         this.heading.set(params.heading);
         this.content.set(params.content);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AgNoRowsOverlayComponent, isStandalone: true, selector: "si-ag-no-rows-overlay", ngImport: i0, template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: SiEmptyStateComponent, selector: "si-empty-state", inputs: ["icon", "heading", "content"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AgNoRowsOverlayComponent, isStandalone: true, selector: "si-ag-no-rows-overlay", ngImport: i0, template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: SiEmptyStateComponent, selector: "si-empty-state", inputs: ["icon", "heading", "content"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-ag-no-rows-overlay', imports: [SiEmptyStateComponent], template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, changeDetection: ChangeDetectionStrategy.Default, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"] }]
+            args: [{ selector: 'si-ag-no-rows-overlay', imports: [SiEmptyStateComponent], template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"] }]
         }] });
 
 /**
@@ -183,8 +186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 const elementCheckboxStyle = createPart({
     css: `
 .ag-checkbox-input-wrapper:not(.ag-checked):not(.ag-indeterminate):hover {
-  border-color: var(--element-action-secondary-border-hover);
-  background: var(--element-action-secondary-hover);
+  border-color: var(--si-sys-border-accent-hover);
+  background: var(--si-sys-background-accent-secondary-hover);
 }
 `
 });
@@ -230,192 +233,192 @@ const elementColorScheme = createPart({
         fontSize: '14px',
         headerFontWeight: '600',
         // Base colors:
-        accentColor: 'var(--element-focus-default)',
-        backgroundColor: 'var(--element-base-1)',
-        borderColor: 'var(--element-ui-4)',
-        foregroundColor: 'var(--element-text-primary)',
-        invalidColor: 'var(--element-status-danger)',
-        subtleTextColor: 'var(--element-text-secondary)',
+        accentColor: 'var(--si-sys-effects-focus)',
+        backgroundColor: 'var(--si-sys-background-1)',
+        borderColor: 'var(--si-sys-border-4)',
+        foregroundColor: 'var(--si-sys-text-primary)',
+        invalidColor: 'var(--si-sys-background-danger)',
+        subtleTextColor: 'var(--si-sys-text-secondary)',
         // Button styles
-        buttonActiveBackgroundColor: 'var(--element-action-secondary-hover)',
+        buttonActiveBackgroundColor: 'var(--si-sys-background-accent-secondary-hover)',
         buttonActiveBorder: {
-            color: 'var(--element-action-secondary-hover)'
+            color: 'var(--si-sys-background-accent-secondary-hover)'
         },
-        buttonActiveTextColor: 'var(--element-action-secondary-text-hover)',
-        buttonBackgroundColor: 'var(--element-action-secondary)',
+        buttonActiveTextColor: 'var(--si-sys-text-accent-hover)',
+        buttonBackgroundColor: 'var(--si-sys-background-accent-secondary)',
         buttonBorder: {
-            color: 'var(--element-action-secondary-border)'
+            color: 'var(--si-sys-border-accent)'
         },
-        buttonTextColor: 'var(--element-action-secondary-text)',
-        buttonHoverBackgroundColor: 'var(--element-action-secondary-hover)',
+        buttonTextColor: 'var(--si-sys-text-accent)',
+        buttonHoverBackgroundColor: 'var(--si-sys-background-accent-secondary-hover)',
         buttonHoverBorder: {
-            color: 'var(--element-action-secondary-border-hover)'
+            color: 'var(--si-sys-border-accent-hover)'
         },
-        buttonHoverTextColor: 'var(--element-action-secondary-text-hover)',
-        buttonDisabledBackgroundColor: 'var(--element-action-secondary)',
-        buttonDisabledTextColor: 'var(--element-text-disabled)',
+        buttonHoverTextColor: 'var(--si-sys-text-accent-hover)',
+        buttonDisabledBackgroundColor: 'var(--si-sys-background-accent-secondary)',
+        buttonDisabledTextColor: 'var(--si-sys-text-disabled)',
         buttonDisabledBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         // Advanced filter builder styles
         advancedFilterBuilderButtonBarBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
-        advancedFilterBuilderJoinPillColor: 'var(--element-base-danger)',
-        advancedFilterBuilderColumnPillColor: 'var(--element-base-success)',
-        advancedFilterBuilderOptionPillColor: 'var(--element-base-warning)',
-        advancedFilterBuilderValuePillColor: 'var(--element-base-information)',
+        advancedFilterBuilderJoinPillColor: 'var(--si-sys-background-danger-subtle)',
+        advancedFilterBuilderColumnPillColor: 'var(--si-sys-background-success-subtle)',
+        advancedFilterBuilderOptionPillColor: 'var(--si-sys-background-warning-subtle)',
+        advancedFilterBuilderValuePillColor: 'var(--si-sys-background-information-subtle)',
         // Cell styles
         cellEditingBorder: {
-            color: 'var(--element-action-primary)'
+            color: 'var(--si-sys-background-accent)'
         },
-        cellTextColor: 'var(--element-text-primary)',
+        cellTextColor: 'var(--si-sys-text-primary)',
         // Column styles
         columnBorder: {
-            color: 'var(--element-action-secondary)'
+            color: 'var(--si-sys-background-accent-secondary)'
         },
-        columnDropCellBackgroundColor: 'var(--element-base-1)',
+        columnDropCellBackgroundColor: 'var(--si-sys-background-1)',
         columnDropCellBorder: {
-            color: 'var(--element-action-secondary)'
+            color: 'var(--si-sys-background-accent-secondary)'
         },
-        columnDropCellDragHandleColor: 'var(--element-text-primary)',
-        columnDropCellTextColor: 'var(--element-text-primary)',
-        columnHoverColor: 'var(--element-base-1-hover)',
+        columnDropCellDragHandleColor: 'var(--si-sys-text-primary)',
+        columnDropCellTextColor: 'var(--si-sys-text-primary)',
+        columnHoverColor: 'var(--si-sys-background-hover)',
         // Row styles
-        oddRowBackgroundColor: 'var(--element-base-1)',
+        oddRowBackgroundColor: 'var(--si-sys-background-1)',
         rowBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
-        rowHoverColor: 'var(--element-base-1-hover)',
-        rowLoadingSkeletonEffectColor: 'var(--element-base-1)',
-        selectedRowBackgroundColor: 'var(--element-base-1-selected)',
+        rowHoverColor: 'var(--si-sys-background-hover)',
+        rowLoadingSkeletonEffectColor: 'var(--si-sys-background-1)',
+        selectedRowBackgroundColor: 'var(--si-sys-background-active)',
         // Dialog and footer styles
         footerRowBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         dialogBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         // Checkbox styles
         checkboxBorderRadius: '2px',
         checkboxBorderWidth: '1px',
-        checkboxCheckedBackgroundColor: 'var(--element-action-primary)',
-        checkboxCheckedBorderColor: 'var(--element-action-primary)',
-        checkboxCheckedShapeColor: 'var(--element-action-primary-text)',
+        checkboxCheckedBackgroundColor: 'var(--si-sys-background-accent)',
+        checkboxCheckedBorderColor: 'var(--si-sys-background-accent)',
+        checkboxCheckedShapeColor: 'var(--si-sys-text-on-accent)',
         checkboxCheckedShapeImage: {
             url: elementCheckedImageShape
         },
-        checkboxIndeterminateBackgroundColor: 'var(--element-action-primary)',
-        checkboxIndeterminateBorderColor: 'var(--element-action-primary)',
-        checkboxIndeterminateShapeColor: 'var(--element-base-1)',
-        checkboxUncheckedBackgroundColor: 'var(--element-base-1)',
-        checkboxUncheckedBorderColor: 'var(--element-ui-1)',
+        checkboxIndeterminateBackgroundColor: 'var(--si-sys-background-accent)',
+        checkboxIndeterminateBorderColor: 'var(--si-sys-background-accent)',
+        checkboxIndeterminateShapeColor: 'var(--si-sys-background-1)',
+        checkboxUncheckedBackgroundColor: 'var(--si-sys-background-1)',
+        checkboxUncheckedBorderColor: 'var(--si-sys-border-1)',
         // Header styles
-        headerBackgroundColor: 'var(--element-base-1)',
-        headerCellHoverBackgroundColor: 'var(--element-base-1-hover)',
+        headerBackgroundColor: 'var(--si-sys-background-1)',
+        headerCellHoverBackgroundColor: 'var(--si-sys-background-hover)',
         headerColumnBorder: {
-            color: 'var(--element-action-secondary)'
+            color: 'var(--si-sys-background-accent-secondary)'
         },
-        headerColumnResizeHandleColor: 'var(--element-ui-4)',
+        headerColumnResizeHandleColor: 'var(--si-sys-border-4)',
         headerRowBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         // Input styles
-        inputBackgroundColor: 'var(--element-base-1)',
+        inputBackgroundColor: 'var(--si-sys-background-1)',
         inputBorder: {
-            color: 'var(--element-ui-2)'
+            color: 'var(--si-sys-border-2)'
         },
         inputBorderRadius: '2px',
-        inputDisabledBackgroundColor: 'var(--element-base-1)',
+        inputDisabledBackgroundColor: 'var(--si-sys-background-1)',
         inputDisabledBorder: {
-            color: 'var(--element-ui-3)'
+            color: 'var(--si-sys-border-3)'
         },
-        inputDisabledTextColor: 'var(--element-text-disabled)',
+        inputDisabledTextColor: 'var(--si-sys-text-disabled)',
         inputFocusBorder: {
-            color: 'var(--element-focus-default)'
+            color: 'var(--si-sys-effects-focus)'
         },
         inputFocusShadow: false,
-        inputIconColor: 'var(--element-ui-1)',
+        inputIconColor: 'var(--si-sys-border-1)',
         inputInvalidBorder: {
-            color: 'var(--element-status-danger)'
+            color: 'var(--si-sys-background-danger)'
         },
-        inputTextColor: 'var(--element-text-primary)',
+        inputTextColor: 'var(--si-sys-text-primary)',
         // Icon styles
-        iconButtonActiveBackgroundColor: 'var(--element-base-1-selected)',
-        iconButtonActiveColor: 'var(--element-action-primary-hover)',
-        iconButtonActiveIndicatorColor: 'var(--element-action-primary-hover)',
-        iconButtonBackgroundColor: 'var(--element-action-secondary)',
-        iconButtonColor: 'var(--element-text-primary)',
-        iconButtonHoverBackgroundColor: 'var(--element-base-1-hover)',
-        iconButtonHoverColor: 'var(--element-text-primary)',
-        iconColor: 'var(--element-text-primary)',
+        iconButtonActiveBackgroundColor: 'var(--si-sys-background-active)',
+        iconButtonActiveColor: 'var(--si-sys-background-accent-hover)',
+        iconButtonActiveIndicatorColor: 'var(--si-sys-background-accent-hover)',
+        iconButtonBackgroundColor: 'var(--si-sys-background-accent-secondary)',
+        iconButtonColor: 'var(--si-sys-text-primary)',
+        iconButtonHoverBackgroundColor: 'var(--si-sys-background-hover)',
+        iconButtonHoverColor: 'var(--si-sys-text-primary)',
+        iconColor: 'var(--si-sys-text-primary)',
         iconSize: '18px',
         // Menu styles
-        menuBackgroundColor: 'var(--element-base-1)',
+        menuBackgroundColor: 'var(--si-sys-background-1)',
         menuBorder: false,
-        menuShadow: '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
+        menuShadow: 'var(--si-sys-effects-shadow-2)',
         // Pinning styles
         pinnedColumnBorder: {
-            color: 'var(--element-base-1-selected)'
+            color: 'var(--si-sys-background-active)'
         },
         pinnedRowBorder: {
-            color: 'var(--element-base-1-selected)'
+            color: 'var(--si-sys-background-active)'
         },
         // Drag and drop styles
-        dragAndDropImageBackgroundColor: 'var(--element-base-3)',
+        dragAndDropImageBackgroundColor: 'var(--si-sys-background-3)',
         dragAndDropImageBorder: false,
-        dragAndDropImageShadow: '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
-        dragHandleColor: 'var(--element-text-primary)',
+        dragAndDropImageShadow: 'var(--si-sys-effects-shadow-2)',
+        dragHandleColor: 'var(--si-sys-text-primary)',
         // Range selection styles
-        rangeHeaderHighlightColor: 'var(--element-base-1)',
-        rangeSelectionBackgroundColor: 'var(--element-base-1-selected)',
-        rangeSelectionBorderColor: 'var(--element-action-primary-hover)',
-        rangeSelectionHighlightColor: 'var(--element-base-1-selected)',
+        rangeHeaderHighlightColor: 'var(--si-sys-background-1)',
+        rangeSelectionBackgroundColor: 'var(--si-sys-background-active)',
+        rangeSelectionBorderColor: 'var(--si-sys-background-accent-hover)',
+        rangeSelectionHighlightColor: 'var(--si-sys-background-active)',
         // Sidebar styles
-        sideBarBackgroundColor: 'var(--element-base-1)',
+        sideBarBackgroundColor: 'var(--si-sys-background-1)',
         sidePanelBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         // Side button styles
-        sideButtonBackgroundColor: 'var(--element-action-secondary)',
-        sideButtonBarBackgroundColor: 'var(--element-base-1)',
-        sideButtonHoverBackgroundColor: 'var(--element-base-1-hover)',
-        sideButtonSelectedBackgroundColor: 'var(--element-base-1-selected)',
-        sideButtonSelectedBorder: 'var(--element-action-secondary-border)',
-        sideButtonSelectedUnderlineColor: 'var(--element-base-1-selected)',
+        sideButtonBackgroundColor: 'var(--si-sys-background-accent-secondary)',
+        sideButtonBarBackgroundColor: 'var(--si-sys-background-1)',
+        sideButtonHoverBackgroundColor: 'var(--si-sys-background-hover)',
+        sideButtonSelectedBackgroundColor: 'var(--si-sys-background-active)',
+        sideButtonSelectedBorder: 'var(--si-sys-border-accent)',
+        sideButtonSelectedUnderlineColor: 'var(--si-sys-background-active)',
         // Status bar styles
-        statusBarLabelColor: 'var(--element-text-primary)',
-        statusBarValueColor: 'var(--element-text-primary)',
+        statusBarLabelColor: 'var(--si-sys-text-primary)',
+        statusBarValueColor: 'var(--si-sys-text-primary)',
         // Select cell styles
         selectCellBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
         // Toggle button styles - matching Element switch design
         toggleButtonHeight: '20px',
-        toggleButtonOffBackgroundColor: 'var(--element-ui-4)',
-        toggleButtonOnBackgroundColor: 'var(--element-ui-0)',
-        toggleButtonSwitchBackgroundColor: 'var(--element-ui-2)',
+        toggleButtonOffBackgroundColor: 'var(--si-sys-background-neutral)',
+        toggleButtonOnBackgroundColor: 'var(--si-sys-background-accent)',
+        toggleButtonSwitchBackgroundColor: 'var(--si-sys-background-inverse)',
         toggleButtonSwitchInset: '4px',
         toggleButtonWidth: '40px',
         // Value change styles
-        valueChangeDeltaDownColor: 'var(--element-status-danger)',
-        valueChangeDeltaUpColor: 'var(--element-status-success)',
-        valueChangeValueHighlightBackgroundColor: 'var(--element-base-1-selected)',
+        valueChangeDeltaDownColor: 'var(--si-sys-background-danger)',
+        valueChangeDeltaUpColor: 'var(--si-sys-background-success)',
+        valueChangeValueHighlightBackgroundColor: 'var(--si-sys-background-active)',
         // Tooltip styles
-        tooltipBackgroundColor: 'var(--element-base-translucent-2)',
+        tooltipBackgroundColor: 'var(--si-sys-background-inverse)',
         tooltipBorder: false,
-        tooltipTextColor: 'var(--element-text-inverse)',
+        tooltipTextColor: 'var(--si-sys-text-inverse)',
         // Tab styles
-        tabBackgroundColor: 'var(--element-action-secondary)',
-        tabBarBackgroundColor: 'var(--element-base-1)',
+        tabBackgroundColor: 'var(--si-sys-background-accent-secondary)',
+        tabBarBackgroundColor: 'var(--si-sys-background-1)',
         tabBarBorder: {
-            color: 'var(--element-ui-4)'
+            color: 'var(--si-sys-border-4)'
         },
-        tabHoverBackgroundColor: 'var(--element-action-secondary)',
-        tabSelectedTextColor: 'var(--element-action-primary)',
-        tabSelectedUnderlineColor: 'var(--element-action-secondary)',
+        tabHoverBackgroundColor: 'var(--si-sys-background-accent-secondary)',
+        tabSelectedTextColor: 'var(--si-sys-background-accent)',
+        tabSelectedUnderlineColor: 'var(--si-sys-background-accent-secondary)',
         // Chart styles
-        chartMenuLabelColor: 'var(--element-text-primary)',
+        chartMenuLabelColor: 'var(--si-sys-text-primary)',
         // Misc styles
         focusShadow: false,
         wrapperBorder: false
@@ -521,26 +524,18 @@ const elementPaginationStyle = createPart({
  */
 /**
  * Creates a pinning style part for the Element AG Grid theme.
- * This part applies box shadow styling to floating top and bottom rows.
+ * This part applies box shadow styling to pinned top and bottom rows.
  *
  * @returns A part that defines pinning styles for the Element AG Grid theme.
  */
 const elementPinningStyle = createPart({
     css: `
-  .ag-floating-top {
-    box-shadow:
-      0 0 8px var(--element-box-shadow-color-1),
-      0 8px 8px var(--element-box-shadow-color-2);
-    z-index: 1;
-    position: relative;
+  .ag-grid-pinned-top-rows-container {
+    box-shadow: var(--si-sys-effects-shadow-2);
   }
 
-  .ag-floating-bottom {
-    box-shadow:
-      0 0 8px var(--element-box-shadow-color-1),
-      0 -8px 8px var(--element-box-shadow-color-2);
-    z-index: 1;
-    position: relative;
+  .ag-grid-pinned-bottom-rows-container {
+    box-shadow: var(--si-sys-effects-shadow-2);
   }
 `
 });
@@ -560,46 +555,46 @@ const elementRadioStyle = createPart({
     css: `
   .ag-radio-button-input-wrapper {
   background-color: var(--element-ui-5);
-  border: 1px solid var(--element-ui-1);
+  border: 1px solid var(--si-sys-border-1);
 }
 
 .ag-radio-button-input-wrapper:hover {
-  border-color: var(--element-action-secondary-border-hover);
-  background: var(--element-action-secondary-hover);
+  border-color: var(--si-sys-border-accent-hover);
+  background: var(--si-sys-background-accent-secondary-hover);
 }
 
 .ag-radio-button-input-wrapper.ag-checked {
-  border-color: var(--element-ui-0);
+  border-color: var(--si-sys-border-accent);
   background-color: var(--element-ui-5);
 }
 
 .ag-radio-button-input-wrapper.ag-checked::after {
-  background-color: var(--element-ui-0);
+  background-color: var(--si-sys-background-accent);
   mask-image: none;
   inset: 4px;
   border-radius: 50%;
 }
 
 .ag-radio-button-input-wrapper.ag-checked:hover {
-  border-color: var(--element-ui-0-hover);
+  border-color: var(--si-sys-border-accent-hover);
 }
 
 .ag-radio-button-input-wrapper.ag-checked:hover::after {
-  background-color: var(--element-ui-0-hover);
+  background-color: var(--si-sys-background-accent-hover);
 }
 
 .ag-radio-button-input-wrapper.ag-disabled {
-  border-color: var(--element-ui-3);
+  border-color: var(--si-sys-border-3);
   background-color: var(--element-ui-5);
   opacity: 1;
 }
 
 .ag-radio-button-input-wrapper.ag-checked.ag-disabled {
-  border-color: var(--element-ui-3);
+  border-color: var(--si-sys-border-3);
 }
 
 .ag-radio-button-input-wrapper.ag-checked.ag-disabled::after {
-  background-color: var(--element-ui-3);
+  background-color: var(--si-sys-border-3);
 }
 `
 });
@@ -626,9 +621,9 @@ const elementSkeletonStyle = createPart({
     .ag-skeleton-effect {
       background: linear-gradient(
         90deg,
-        var(--element-base-1-hover) 0%,
-        var(--element-base-1-selected) 25%,
-        var(--element-base-1-hover) 50%
+        var(--si-sys-background-hover) 0%,
+        var(--si-sys-background-active) 25%,
+        var(--si-sys-background-hover) 50%
       );
       background-size: 200% 100%;
       background-position-x: 100%;
@@ -657,7 +652,7 @@ const elementTextFilterStyle = createPart({
 .ag-filter-add-select {
   .ag-text-field-input[type='text'] {
     border-width: 0;
-    background-color: var(--element-base-4);
+    background-color: var(--si-sys-background-4);
   }
 }
 `
@@ -685,11 +680,11 @@ const elementToggleStyle = createPart({
     }
 
     .ag-toggle-button-input-wrapper:not(.ag-checked):hover {
-      background-color: var(--element-ui-4);
+      background-color: var(--si-sys-background-neutral);
     }
 
     .ag-toggle-button-input-wrapper.ag-checked:hover {
-      background-color: var(--element-ui-0-hover);
+      background-color: var(--si-sys-background-accent-hover);
     }
 
     .ag-toggle-button-input-wrapper.ag-checked::before {