@adaptabletools/adaptable-vue3-aggrid 23.0.0-canary.2 → 23.0.0-canary.3

package/index.css

@@ -1265,6 +1265,9 @@
   .twa\:gap-8 {
     gap: calc(var(--ab-base-space) * 8);
   }
+  .twa\:self-center {
+    align-self: center;
+  }
   .twa\:self-end {
     align-self: flex-end;
   }
@@ -1426,6 +1429,9 @@
       border-color: color-mix(in oklab, var(--ab-color-primarydark) 30%, transparent);
     }
   }
+  .twa\:border-primarylight {
+    border-color: var(--ab-color-primarylight);
+  }
   .twa\:border-ring {
     border-color: var(--ab-color-ring);
   }
@@ -1443,20 +1449,9 @@
       border-bottom-color: color-mix(in oklab, var(--ab-color-foreground) 20%, transparent);
     }
   }
-  .twa\:border-b-text-on-defaultbackground\/20 {
-    border-bottom-color: var(--ab-color-text-on-defaultbackground);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .twa\:border-b-text-on-defaultbackground\/20 {
-      border-bottom-color: color-mix(in oklab, var(--ab-color-text-on-defaultbackground) 20%, transparent);
-    }
-  }
   .twa\:bg-\(--ab-cmp-input--disabled__background\) {
     background-color: var(--ab-cmp-input--disabled__background);
   }
-  .twa\:bg-\(--ab-cmp-input__background\) {
-    background-color: var(--ab-cmp-input__background);
-  }
   .twa\:bg-\(--ab-cmp-modal-backdrop__background\) {
     background-color: var(--ab-cmp-modal-backdrop__background);
   }
@@ -1516,9 +1511,6 @@
   .twa\:bg-current {
     background-color: currentcolor;
   }
-  .twa\:bg-defaultbackground {
-    background-color: var(--ab-color-defaultbackground);
-  }
   .twa\:bg-destructive\/10 {
     background-color: var(--ab-color-destructive);
   }
@@ -1686,6 +1678,9 @@
   .twa\:pt-0 {
     padding-top: calc(var(--ab-base-space) * 0);
   }
+  .twa\:pt-0\.5 {
+    padding-top: calc(var(--ab-base-space) * 0.5);
+  }
   .twa\:pt-1 {
     padding-top: calc(var(--ab-base-space) * 1);
   }
@@ -1940,9 +1935,6 @@
   .twa\:text-text-on-primary {
     color: var(--ab-color-text-on-primary);
   }
-  .twa\:text-text-on-primarydark {
-    color: var(--ab-color-text-on-primarydark);
-  }
   .twa\:text-text-on-share {
     color: var(--ab-color-text-on-share);
   }
@@ -3209,14 +3201,6 @@
       background-color: color-mix(in oklab, var(--ab-color-destructive) 20%, transparent);
     }
   }
-  .twa\:dark\:bg-input\/30:is(.ab--theme-dark *) {
-    background-color: var(--ab-color-input-border);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .twa\:dark\:bg-input\/30:is(.ab--theme-dark *) {
-      background-color: color-mix(in oklab, var(--ab-color-input-border) 30%, transparent);
-    }
-  }
   .twa\:dark\:bg-transparent:is(.ab--theme-dark *) {
     background-color: transparent;
   }
@@ -3335,6 +3319,9 @@
     border-top-left-radius: var(--ab-border-radius);
     border-bottom-left-radius: var(--ab-border-radius);
   }
+  .twa\:\[\.ab-FloatingFilter_\[data-slot\=combobox-trigger\]\]\:py-0:is(.ab-FloatingFilter [data-slot=combobox-trigger]) {
+    padding-block: calc(var(--ab-base-space) * 0);
+  }
   .twa\:\[\.border-b\]\:pb-2:is(.border-b) {
     padding-bottom: calc(var(--ab-base-space) * 2);
   }
@@ -3447,6 +3434,9 @@
     width: calc(var(--ab-base-space) * 4);
     height: calc(var(--ab-base-space) * 4);
   }
+  .ab-FloatingFilter .twa\:\[\.ab-FloatingFilter_\&\]\:\[container-type\:size\] {
+    container-type: size;
+  }
   .ab-FloatingFilter .twa\:\[\.ab-FloatingFilter_\&\]\:absolute {
     position: absolute;
   }
@@ -3463,6 +3453,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .ab-FloatingFilter .twa\:\[\.ab-FloatingFilter_\&\]\:\[line-height\:1\] {
+    line-height: 1;
+  }
   .ab-FloatingFilter .twa\:\[\.ab-FloatingFilter_\&\]\:shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5433,11 +5426,16 @@
     --ab-border-radius: var(--ab__border-radius, var(--ab-base-space));
     --ab-border-radius-input: var(--ab-border-radius);
     --ab-border-radius-button: var(--ab-border-radius);
-    --ab-color-defaultbackground: white;
-    --ab-color-text-on-defaultbackground: var(--ab-color-text-on-primary);
     --ab-color-input-border: var(--ab-color-inputborder, var(--ab-color-primarydark));
     --ab-color-input-background: var(--ab-color-background);
-    --ab-color-input-foreground: var(--ab-color-inputcolor, var(--ab-color-text-on-primary));
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :root {
+      --ab-color-input-background: color-mix(in srgb, var(--ab-color-background) 99%, black);
+    }
+  }
+  :root {
+    --ab-color-input-foreground: var(--ab-color-inputcolor, var(--ab-color-primary-foreground));
     --ab-color-error: #dc3545;
     --ab-color-warn: #eb9316;
     --ab-color-info: #17a2b8;
@@ -5489,28 +5487,27 @@
     --ab-color-text-on-share: white;
     --ab-color-text-on-delete: white;
     --ab-color-text-on-clone: white;
+    --ab-color-text-on-primary: #656565;
     --ab-color-primary: #e9e9e9;
-    --ab-color-primary-foreground: #656565;
+    --ab-color-primary-foreground: var(--ab-color-text-on-primary, #656565);
     --ab-color-primarydark: #b7b7b7;
     --ab-color-primarylight: #f5f5f5;
-    --ab-color-text-on-primary: var(--ab-color-primary-foreground);
-    --ab-color-text-on-primarydark: var(--ab-color-primary-foreground);
     --ab-color-shadow: rgb(0 0 0 / 0.2);
     --ab-shadow-sm: 0 0px 3px 0 var(--ab-color-shadow), 0 1px 2px -1px var(--ab-color-shadow);
     --ab-shadow-md: 0 -2px 6px -1px var(--ab-color-shadow), 0 2px 4px -2px var(--ab-color-shadow);
     --ab-focus__box-shadow: 0 0px 5px 0 var(--ab-color-ring), 0 1px 2px -1px var(--ab-color-ring);
     --ab-focus-light__box-shadow: 0 0px 5px 0 var(--ab-color-accentlight),
     0 1px 2px -1px var(--ab-color-accentlight);
-    --ab-focus-within__box-shadow: 0 0 5px 1px var(--ab-color-text-on-primary);
+    --ab-focus-within__box-shadow: 0 0 5px 1px var(--ab-color-primary-foreground);
     --ab-focus__outline: none;
-    --ab-color-background: var(--ab-color-defaultbackground, oklch(1 0 0));
-    --ab-color-foreground: var(--ab-color-text-on-defaultbackground);
-    --ab-color-popover: var(--ab-color-defaultbackground);
-    --ab-color-popover-foreground: var(--ab-color-text-on-defaultbackground);
+    --ab-color-background: var(--ab-color-defaultbackground, white);
+    --ab-color-foreground: var(--ab-color-primary-foreground, #656565);
+    --ab-color-popover: var(--ab-color-background);
+    --ab-color-popover-foreground: var(--ab-color-foreground);
     --ab-color-secondary: oklch(0.97 0 0);
     --ab-color-secondary-foreground: oklch(0.205 0 0);
     --ab-color-muted: var(--ab-color-primarylight);
-    --ab-color-muted-foreground: var(--ab-color-input-foreground);
+    --ab-color-muted-foreground: var(--ab-color-primary-foreground);
     --ab-color-destructive: oklch(0.577 0.245 27.325);
     --ab-color-destructive-foreground: oklch(0.577 0.245 27.325);
     --ab-color-border: oklch(0.922 0 0);
@@ -5528,13 +5525,13 @@
   .infinite-theme-name--default.infinite-theme-name--default.infinite-theme-name--default.infinite-theme-name--default {
     --infinite-cell-border-radius: 0px;
     --infinite-active-cell-border-width: 0px;
-    --infinite-background: var(--ab-color-defaultbackground);
-    --infinite-row-background: var(--ab-color-defaultbackground);
+    --infinite-background: var(--ab-color-background);
+    --infinite-row-background: var(--ab-color-background);
     --infinite-row-odd-background: var(--ab-color-primarylight);
     --infinite-row-selected-background: var(--ab-color-primary);
     --infinite-row-selected-hover-background: var(--ab-color-primarydark);
     --infinite-row-hover-background: var(--ab-color-primary);
-    --infinite-header-color: var(--ab-color-text-on-primarydark);
+    --infinite-header-color: var(--ab-color-muted-foreground);
     --infinite-header-cell-background: var(--ab-color-primary);
     --infinite-header-cell-hover-background: var(--ab-color-primarylight);
     --infinite-menu-background: var(--infinite-header-cell-background);
@@ -5696,7 +5693,6 @@
   :root {
     --ab-cmp-input__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-input__color: var(--ab-color-input-foreground);
-    --ab-cmp-input__background: var(--ab-color-input-background);
     --ab-cmp-input__border-radius: var(--ab-border-radius);
     --ab-cmp-input__border: 1px solid var(--ab-color-input-border);
     --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
@@ -5710,12 +5706,11 @@
   }
   :root {
     --ab-cmp-tabs__padding: calc(var(--ab-base-space) * 2);
-    --ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
+    --ab-cmp-tabs-strip__background: transparent;
     --ab-cmp-tabs-active__background: var(--ab-color-primarylight);
     --ab-cmp-tabs__font-weight: 400;
     --ab-cmp-tabs__color: inherit;
     --ab-cmp-tabs-inactive__opacity: 0.72;
-    --ab-cmp-tabs-inactive-separator__color: var(--ab-color-primarydark);
   }
   :root {
     --ab-cmp-panel_header__background: var(--ab-color-primary);
@@ -5730,7 +5725,7 @@
     --ab-cmp-panel_header--variant-primary__background: var(--ab-color-accent);
     --ab-cmp-panel_header--variant-primary__color: var(--ab-color-accent-foreground);
     --ab-cmp-panel_header--variant-modern__background: var(--ab-color-primary);
-    --ab-cmp-panel_header--variant-minimal__background: var(--ab-color-defaultbackground);
+    --ab-cmp-panel_header--variant-minimal__background: var(--ab-color-background);
     --ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
   }
   :root {
@@ -5784,9 +5779,9 @@
     --ab-dashboard-toolbar-drag__background: lightgreen;
   }
   :root {
-    --ab-cmp-datepicker__background: var(--ab-color-defaultbackground);
+    --ab-cmp-datepicker__background: var(--ab-color-background);
     --ab-cmp-datepicker__active-color: var(--ab-color-primarydark);
-    --ab-cmp-datepicker__active-text-color: var(--ab-color-text-on-primarydark);
+    --ab-cmp-datepicker__active-text-color: var(--ab-color-muted-foreground);
     --ab-cmp-datepicker__active-border-radius: 100%;
     --ab-cmp-datepicker__active-border: var(--ab-cmp-datepicker__day-border-width) solid
     var(--ab-cmp-datepicker__active-color);
@@ -5841,7 +5836,7 @@
   }
   :root {
     --ab-cmp-icon-selector__popup__color: var(--ab-color-input-foreground);
-    --ab-cmp-icon-selector__popup__background: var(--ab-color-defaultbackground);
+    --ab-cmp-icon-selector__popup__background: var(--ab-color-background);
     --ab-cmp-icon-selector__popup__border: 1px solid var(--ab-color-input-border);
     --ab-cmp-icon-selector__popup__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-icon-selector__popup__border-radius: var(--ab-border-radius);
@@ -5851,7 +5846,7 @@
     --adaptable-quick-search-floating-width: 200px;
   }
   :root {
-    --ab-cmp-note-popup-background-color: var(--ab-color-defaultbackground);
+    --ab-cmp-note-popup-background-color: var(--ab-color-background);
     --ab-cmp-note-popup-padding: calc(var(--ab-base-space) * 8);
     --ab-cmp-note-popup-border-radius: calc(var(--ab-base-space) * 2);
     --ab-cmp-note-popup-border: 1px solid var(--ab-color-primarydark);
@@ -5882,7 +5877,7 @@
     --ab-cmp-dashboardpanel_body__background: var(--ab-color-primarylight);
     --ab-cmp-dashboardpanel_header__background: var(--ab-color-primary);
     --ab-cmp-dashboardpanel_header__fill: currentColor;
-    --ab-cmp-dashboardpanel_header__color: var(--ab-color-text-on-primarydark);
+    --ab-cmp-dashboardpanel_header__color: var(--ab-color-muted-foreground);
     --ab-cmp-dashboardpanel__fill: var(--ab-color-text-on-primary);
     --ab-cmp-dashboardpanel__color: currentColor;
     --ab-cmp-dashboardpanel_header__padding: 0px;
@@ -5901,11 +5896,9 @@
     --ab-cmp-toolpanelpanel_body__padding: var(--ab-cmp-dashboardpanel_body__padding);
   }
   :root {
-    --ab-cmp-popover__border-radius: var(--ab-border-radius);
-    --ab-cmp-popover__background: var(--ab-color-defaultbackground);
+    --ab-cmp-popover__background: var(--ab-color-background);
     --ab-cmp-popover__color: var(--ab-color-foreground);
     --ab-cmp-popover__box-shadow: var(--ab-cmp-dropdownbutton-list__box-shadow);
-    --ab-cmp-popover__border: 1px solid var(--ab-color-primarydark);
   }
   .ab-OnePageWizard__section {
     background: var(--ab-cmp-one-page-wizard-content__background);
@@ -5949,13 +5942,13 @@
   :root {
     --ab-cmp-adaptable-object-list-tag__margin-right: calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-object-list-tag__margin-top: calc(var(--ab-base-space) * 2);
-    --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-defaultbackground);
+    --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-background);
     --ab-cmp-adaptable-object-list-item__padding: calc(var(--ab-base-space) * 4) calc(var(--ab-base-space) * 4);
     --ab-cmp-adaptable-object-list-item-label__width: 130px;
     --ab-cmp-adaptable-object-list-item-tag__padding: 6px 12px;
     --ab-cmp-adaptable-object-compact-list__background: var(--ab-color-primarylight);
     --ab-cmp-adaptable-object-compact-list__padding: calc(var(--ab-base-space) * 2);
-    --ab-cmp-adaptable-object-compact-list-item__background: var(--ab-color-defaultbackground);
+    --ab-cmp-adaptable-object-compact-list-item__background: var(--ab-color-background);
     --ab-cmp-adaptable-object-compact-list-item__padding: var(--ab-base-space);
     --ab-cmp-adaptable-object-compact-list-item__margin-bottom: calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-object-compact-list__header__padding: calc(var(--ab-base-space) * 2);
@@ -5967,12 +5960,12 @@
     --ab-cmp-adaptable-object-compact-list-item-name__font-size: var(--ab-font-size-4);
   }
   :root {
-    --ab-cmp-adaptable-options__background-color: var(--ab-color-defaultbackground);
-    --ab-cmp-grid-options__background-color: var(--ab-color-defaultbackground);
-    --ab-cmp-grid-summary__background-color: var(--ab-color-defaultbackground);
+    --ab-cmp-adaptable-options__background-color: var(--ab-color-background);
+    --ab-cmp-grid-options__background-color: var(--ab-color-background);
+    --ab-cmp-grid-summary__background-color: var(--ab-color-background);
   }
   :root {
-    --ab-cmp-system-status-list__background-color: var(--ab-color-defaultbackground);
+    --ab-cmp-system-status-list__background-color: var(--ab-color-background);
     --ab-cmp-system-status-list-text__border-radius: var(--ab-border-radius);
     --ab-cmp-system-status-list-text__font-weight: bold;
     --ab-cmp-system-status-list-text__font-size: var(--ab-font-size-2);
@@ -5980,7 +5973,7 @@
     --ab-cmp-system-status-list-text__padding: calc(var(--ab-base-space) * 2);
   }
   :root {
-    --ab-cmp-dashboard-module-selector-background: var(--ab-color-defaultbackground);
+    --ab-cmp-dashboard-module-selector-background: var(--ab-color-background);
     --ab-cmp-dashboard-pinned-toolbar-border: 1px solid var(--ab-color-primary);
   }
   html.ab--theme-dark {
@@ -5999,10 +5992,10 @@
   }
   :root {
     --ab-cmp-adaptable-layout-wizard-column-row-title__border-radius: var(--ab-border-radius);
-    --ab-cmp-adaptable-layout-wizard-column-row-title__background: var(--ab-color-defaultbackground);
+    --ab-cmp-adaptable-layout-wizard-column-row-title__background: var(--ab-color-background);
     --ab-cmp-adaptable-layout-wizard-column-row-title__color: var(--ab-color-foreground);
     --ab-cmp-adaptable-layout-wizard-column-row-expanded-container__background: var(
-    --ab-color-defaultbackground
+    --ab-color-background
   );
     --ab-cmp-adaptable-layout-wizard-column-row-expanded-container__border-radius: var(
     --ab-border-radius
@@ -6010,14 +6003,14 @@
     --ab-cmp-adaptable-layout-wizard-column-input__width: 100%;
   }
   :root {
-    --cmp-Badge-Definition-Editor__background: var(--ab-color-defaultbackground);
-    --cmp-Badge-Definition-Editor-header__background: var(--ab-color-defaultbackground);
+    --cmp-Badge-Definition-Editor__background: var(--ab-color-background);
+    --cmp-Badge-Definition-Editor-header__background: var(--ab-color-background);
   }
   @supports (color: color-mix(in lab, red, red)) {
     :root {
       --cmp-Badge-Definition-Editor-header__background: color-mix(
     in srgb,
-    var(--ab-color-defaultbackground) 92%,
+    var(--ab-color-background) 92%,
     var(--ab-color-foreground)
   );
     }
@@ -6036,10 +6029,10 @@
   :root {
     --ab-cmp-column-filter-input__font-size: var(--ab-font-size-2);
     --ab-cmp-column-filter-input__border: 1px solid var(--ab-color-primarydark);
-    --ab-cmp-column-filter-input__background: var(--ab-color-defaultbackground);
+    --ab-cmp-column-filter-input__background: var(--ab-color-background);
   }
   :root {
-    --ab-cmp-entity-rules-editor__background-color: var(--ab-color-defaultbackground);
+    --ab-cmp-entity-rules-editor__background-color: var(--ab-color-background);
   }
   .ab-Badge__wrapper {
     display: inline-flex;
@@ -6230,7 +6223,7 @@
     --ab-cmp-query-builder-expression__font-size: var(--ab-font-size-3);
   }
   .ab-Dropdown {
-    background: var(--ab-color-defaultbackground);
+    background: var(--ab-color-background);
     border: var(--ab-cmp-dropdown__border);
     border-radius: var(--ab-cmp-dropdown__border-radius);
     position: relative;
@@ -6417,9 +6410,6 @@
   .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) {
     opacity: var(--ab-cmp-tabs-inactive__opacity);
   }
-  .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) + .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) {
-    box-shadow: inset 1px 0 0 var(--ab-cmp-tabs-inactive-separator__color);
-  }
   .ab-Tabs__Tab--active + .ab-Tabs__Filler, .ab-Tabs__Tab--active + .ab-Tabs__Tab {
     border-bottom-left-radius: var(--ab-border-radius);
   }
@@ -7322,8 +7312,6 @@
     font-size: var(--ab-cmp-listgroupitem-cell__font-size);
   }
   .ab-Popover {
-    border-radius: var(--ab-cmp-popover__border-radius);
-    border: var(--ab-cmp-popover__border);
     background: var(--ab-cmp-popover__background);
     color: var(--ab-cmp-popover__color);
     box-shadow: var(--ab-cmp-popover__box-shadow);
@@ -7365,7 +7353,7 @@
   .ab-NocodeWizardFormBox {
     border: 1px solid var(--ab-color-primarydark);
     border-radius: var(--ab-border-radius);
-    background-color: var(--ab-color-defaultbackground);
+    background-color: var(--ab-color-background);
   }
   .ab-Button.ab-Button {
     border-radius: var(--ab-cmp-button-border-radius);
@@ -7660,6 +7648,12 @@
   .ab-FloatingFilter .ab-TreeDropdown .ab-Input {
     font-size: inherit;
   }
+  @container (height < 26px) {
+    .ab-FloatingFilter [data-slot='combobox-toggle'] {
+      width: calc(var(--ab-base-space) * 3) !important;
+      height: calc(var(--ab-base-space) * 3) !important;
+    }
+  }
   .ab-FloatingFilter-label {
     color: var(--ab-color-text-on-primary);
   }
@@ -8413,6 +8407,7 @@
   }
   .ag-floating-filter .ab-FloatingFilter {
     --ab-input-height: 100% !important;
+    --ab-color-input-background: transparent !important;
   }
   .ag-group-floating-filter:has(.ab-FloatingFilter) {
     height: 100% !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-vue3-aggrid",
-  "version": "23.0.0-canary.2",
+  "version": "23.0.0-canary.3",
   "type": "module",
   "typings": "lib/index.d.ts",
   "peerDependencies": {
@@ -9,7 +9,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@adaptabletools/adaptable": "23.0.0-canary.2"
+    "@adaptabletools/adaptable": "23.0.0-canary.3"
   },
   "module": "lib/index.js"
 }

package/themes/dark.css

@@ -1,26 +1,21 @@
 @layer adaptable.theme {
   .ab--theme-dark {
-    /****** Shadcn colors ******/
-    --ab-color-background: oklch(0.145 0 0);
-    --ab-color-foreground: oklch(0.985 0 0);
     --ab-color-secondary: oklch(0.269 0 0);
     --ab-color-secondary-foreground: oklch(0.985 0 0);
     --ab-color-destructive: oklch(0.396 0.141 25.723);
     --ab-color-destructive-foreground: oklch(0.637 0.237 25.331);
     --ab-color-border: oklch(0.269 0 0);
-    /******/
 
     --ab-theme-loaded: dark;
 
+    --ab-color-input-background: color-mix(in srgb, var(--ab-color-background) 95%, black);
     --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
 
-    --ab-color-defaultbackground: #3e444c;
-    --ab-color-text-on-defaultbackground: #e2e2e2;
-    /* Inputs/comboboxes: panel gray, not app chrome black */
-    --ab-color-input-background: var(--ab-color-defaultbackground);
+    --ab-color-background: var(--ab-color-defaultbackground, #474c52); /*old color was: #3e444c*/
+    --ab-color-foreground: var(--ab-color-text-on-defaultbackground, #e2e2e2);
 
     --ab-color-primary: #262d2f;
-    --ab-color-primary-foreground: var(--ab-color-text-on-primary);
+    --ab-color-primary-foreground: var(--ab-color-text-on-primary, #e2e2e2);
     --ab-color-primarylight: #3d3e3f;
     --ab-color-primarydark: #1c2021;
     --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
@@ -47,11 +42,7 @@
     --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
     --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
 
-    /* Tabs: darker strip, lighter active tab + panel (inactive vs active was too similar) */
-    --ab-cmp-tabs-strip__background: var(--ab-color-primary);
-    --ab-cmp-tabs-active__background: var(--ab-color-defaultbackground);
     --ab-cmp-tabs-inactive__opacity: 0.78;
-    --ab-cmp-tabs-inactive-separator__color: #555;
   }
 
     .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
@@ -68,11 +59,10 @@ For our production release those are not needed and could be removed
 as our dark theme is anyways applied on the document element.
 
 */
-  .ab--theme-dark {
+  /* .ab--theme-dark {
     --ab-color-input-foreground: var(--ab-color-text-on-primary);
     --ab-cmp-input__color: var(--ab-color-input-foreground);
-    --ab-cmp-input__background: var(--ab-color-defaultbackground);
     --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
-    --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
-  }
+    --ab-cmp-field-wrap__background: var(--ab-color-background);
+  }*/
 }