@adaptabletools/adaptable-react-aggrid-cjs 23.0.0-canary.0 → 23.0.0-canary.1

package/index.css

@@ -1443,6 +1443,14 @@
       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);
   }
@@ -1509,7 +1517,7 @@
     background-color: currentcolor;
   }
   .twa\:bg-defaultbackground {
-    background-color: var(--ab-color-background);
+    background-color: var(--ab-color-defaultbackground);
   }
   .twa\:bg-destructive\/10 {
     background-color: var(--ab-color-destructive);
@@ -5497,8 +5505,8 @@
     --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-background);
-    --ab-color-popover-foreground: var(--ab-color-foreground);
+    --ab-color-popover: var(--ab-color-defaultbackground);
+    --ab-color-popover-foreground: var(--ab-color-text-on-defaultbackground);
     --ab-color-secondary: oklch(0.97 0 0);
     --ab-color-secondary-foreground: oklch(0.205 0 0);
     --ab-color-muted: var(--ab-color-primarylight);
@@ -5704,6 +5712,10 @@
     --ab-cmp-tabs__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
     --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);
@@ -6392,18 +6404,29 @@
     z-index: 10;
     overflow: visible;
   }
+  .ab-Tabs__Tab {
+    font-weight: var(--ab-cmp-tabs__font-weight);
+    color: var(--ab-cmp-tabs__color);
+  }
   .ab-Tabs__Tab:focus:after {
     box-shadow: var(--ab-focus__box-shadow);
   }
   .ab-Tabs__Tab:focus {
     outline: none;
   }
+  .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);
   }
   .ab-Tabs__Tab--active {
     position: relative;
     z-index: 30;
+    opacity: 1;
   }
   .ab-Tabs__Tab--active:after {
     content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid-cjs",
-  "version": "23.0.0-canary.0",
+  "version": "23.0.0-canary.1",
   "description": "React version of AdapTable - the powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [],
   "license": "contact sales@adaptabletools.com for details",
@@ -9,7 +9,7 @@
   "dependencies": {
     "tslib": "^2.8.1",
     "react-redux": "9.2.0",
-    "@adaptabletools/adaptable-cjs": "23.0.0-canary.0"
+    "@adaptabletools/adaptable-cjs": "23.0.0-canary.1"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">=35.3.0",

package/themes/dark.css

@@ -15,10 +15,12 @@
     --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
 
     --ab-color-defaultbackground: #3e444c;
-    --ab-color-background: var(--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-primary: #262d2f;
+    --ab-color-primary-foreground: var(--ab-color-text-on-primary);
     --ab-color-primarylight: #3d3e3f;
     --ab-color-primarydark: #1c2021;
     --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
@@ -44,6 +46,12 @@
 
     --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 {
@@ -63,7 +71,7 @@ as our dark theme is anyways applied on the document element.
   .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-input-background);
+    --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);
   }