@adaptabletools/adaptable-vue3-aggrid 23.0.0-canary.4 → 23.0.0-canary.5

package/index.css

@@ -107,6 +107,7 @@
   --twa-font-weight-semibold: 600;
   --twa-font-weight-bold: 700;
   --twa-tracking-widest: 0.1em;
+  --twa-leading-tight: 1.25;
   --twa-leading-normal: 1.5;
   --twa-leading-relaxed: 1.625;
   --twa-radius-sm: 0.25rem;
@@ -292,6 +293,9 @@
   .twa\:top-0 {
     top: calc(var(--ab-base-space) * 0);
   }
+  .twa\:top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
   .twa\:top-\[6px\] {
     top: 6px;
   }
@@ -304,6 +308,9 @@
   .twa\:bottom-0 {
     bottom: calc(var(--ab-base-space) * 0);
   }
+  .twa\:left-0 {
+    left: calc(var(--ab-base-space) * 0);
+  }
   .twa\:isolate {
     isolation: isolate;
   }
@@ -460,9 +467,6 @@
   .twa\:mr-3 {
     margin-right: calc(var(--ab-base-space) * 3);
   }
-  .twa\:mr-4 {
-    margin-right: calc(var(--ab-base-space) * 4);
-  }
   .twa\:mr-6 {
     margin-right: calc(var(--ab-base-space) * 6);
   }
@@ -607,9 +611,6 @@
   .twa\:h-\(--cell-size\) {
     height: var(--cell-size);
   }
-  .twa\:h-2 {
-    height: calc(var(--ab-base-space) * 2);
-  }
   .twa\:h-6 {
     height: calc(var(--ab-base-space) * 6);
   }
@@ -628,15 +629,9 @@
   .twa\:h-\[1rem\] {
     height: 1rem;
   }
-  .twa\:h-\[8px\] {
-    height: 8px;
-  }
   .twa\:h-\[10px\] {
     height: 10px;
   }
-  .twa\:h-\[18px\] {
-    height: 18px;
-  }
   .twa\:h-\[33px\] {
     height: 33px;
   }
@@ -703,12 +698,21 @@
   .twa\:min-h-\[1rem\] {
     min-height: 1rem;
   }
+  .twa\:min-h-\[6px\] {
+    min-height: 6px;
+  }
   .twa\:min-h-\[15px\] {
     min-height: 15px;
   }
   .twa\:min-h-\[20px\] {
     min-height: 20px;
   }
+  .twa\:min-h-\[32px\] {
+    min-height: 32px;
+  }
+  .twa\:min-h-\[36px\] {
+    min-height: 36px;
+  }
   .twa\:min-h-\[48px\] {
     min-height: 48px;
   }
@@ -718,6 +722,15 @@
   .twa\:min-h-\[120px\] {
     min-height: 120px;
   }
+  .twa\:min-h-\[200px\] {
+    min-height: 200px;
+  }
+  .twa\:min-h-\[280px\] {
+    min-height: 280px;
+  }
+  .twa\:min-h-\[300px\] {
+    min-height: 300px;
+  }
   .twa\:min-h-auto {
     min-height: auto;
   }
@@ -757,9 +770,6 @@
   .twa\:w-24 {
     width: calc(var(--ab-base-space) * 24);
   }
-  .twa\:w-30 {
-    width: calc(var(--ab-base-space) * 30);
-  }
   .twa\:w-32 {
     width: calc(var(--ab-base-space) * 32);
   }
@@ -796,12 +806,12 @@
   .twa\:w-\[70px\] {
     width: 70px;
   }
+  .twa\:w-\[72px\] {
+    width: 72px;
+  }
   .twa\:w-\[77px\] {
     width: 77px;
   }
-  .twa\:w-\[80px\] {
-    width: 80px;
-  }
   .twa\:w-\[90vw\] {
     width: 90vw;
   }
@@ -820,9 +830,6 @@
   .twa\:w-\[150px\] {
     width: 150px;
   }
-  .twa\:w-\[160px\] {
-    width: 160px;
-  }
   .twa\:w-\[180px\] {
     width: 180px;
   }
@@ -859,9 +866,6 @@
   .twa\:max-w-3xl {
     max-width: var(--twa-container-3xl);
   }
-  .twa\:max-w-30 {
-    max-width: calc(var(--ab-base-space) * 30);
-  }
   .twa\:max-w-50 {
     max-width: calc(var(--ab-base-space) * 50);
   }
@@ -1003,6 +1007,9 @@
   .twa\:min-w-\[50px\] {
     min-width: 50px;
   }
+  .twa\:min-w-\[56px\] {
+    min-width: 56px;
+  }
   .twa\:min-w-\[60px\] {
     min-width: 60px;
   }
@@ -1096,18 +1103,16 @@
   .twa\:shrink-0 {
     flex-shrink: 0;
   }
-  .twa\:basis-\[50\%\] {
-    flex-basis: 50%;
-  }
-  .twa\:basis-\[120px\] {
-    flex-basis: 120px;
-  }
   .twa\:border-collapse {
     border-collapse: collapse;
   }
   .twa\:origin-\(--transform-origin\) {
     transform-origin: var(--transform-origin);
   }
+  .twa\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .twa\:translate-y-\[calc\(-50\%-2px\)\] {
     --tw-translate-y: calc(-50% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1265,6 +1270,12 @@
   .twa\:gap-8 {
     gap: calc(var(--ab-base-space) * 8);
   }
+  .twa\:gap-x-4 {
+    column-gap: calc(var(--ab-base-space) * 4);
+  }
+  .twa\:gap-y-2 {
+    row-gap: calc(var(--ab-base-space) * 2);
+  }
   .twa\:self-center {
     align-self: center;
   }
@@ -1813,6 +1824,10 @@
     --tw-leading: var(--twa-leading-relaxed);
     line-height: var(--twa-leading-relaxed);
   }
+  .twa\:leading-tight {
+    --tw-leading: var(--twa-leading-tight);
+    line-height: var(--twa-leading-tight);
+  }
   .twa\:font-bold {
     --tw-font-weight: var(--twa-font-weight-bold);
     font-weight: var(--twa-font-weight-bold);
@@ -1932,9 +1947,6 @@
   .twa\:text-text-on-info {
     color: var(--ab-color-text-on-info);
   }
-  .twa\:text-text-on-primary {
-    color: var(--ab-color-text-on-primary);
-  }
   .twa\:text-text-on-share {
     color: var(--ab-color-text-on-share);
   }
@@ -1954,9 +1966,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .twa\:underline {
-    text-decoration-line: underline;
-  }
   .twa\:underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -2572,8 +2581,8 @@
     }
   }
   @media (hover: hover) {
-    .twa\:hover\:text-text-on-primary:hover {
-      color: var(--ab-color-text-on-primary);
+    .twa\:hover\:text-primary-foreground:hover {
+      color: var(--ab-color-primary-foreground);
     }
   }
   @media (hover: hover) {
@@ -5487,9 +5496,8 @@
     --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: var(--ab-color-text-on-primary, #656565);
+    --ab-color-primary-foreground: #656565;
     --ab-color-primarydark: #b7b7b7;
     --ab-color-primarylight: #f5f5f5;
     --ab-color-shadow: rgb(0 0 0 / 0.2);
@@ -5675,10 +5683,10 @@
     --ab-cmp-dropdownbutton-list__background: var(--ab-color-primarylight);
     --ab-cmp-dropdownbutton-list-item__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-dropdownbutton-list-item-hover__background: var(--ab-color-primary);
-    --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-text-on-primary);
+    --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-primary-foreground);
     --ab-cmp-dropdownbutton-list-item-active__background: var(--ab-color-primarydark);
     --ab-cmp-dropdownbutton-list-item-active__color: var(--ab-color-on-primarydark);
-    --ab-cmp-dropdownbutton-list-item__color: var(--ab-color-text-on-primary);
+    --ab-cmp-dropdownbutton-list-item__color: var(--ab-color-primary-foreground);
     --ab-cmp-dropdownbutton-list__z-index: 1000;
     --ab-cmp-dropdownbutton-list__border-radius: var(--ab-border-radius);
     --ab-cmp-dropdownbutton-list__box-shadow: 4px 5px 11px -5px rgba(0, 0, 0, 0.2),
@@ -5721,12 +5729,12 @@
     --ab-cmp-panel__border: 1px solid var(--ab-color-input-border);
     --ab-cmp-panel-icon__fill: var(--ab-icon-fill);
     --ab-cmp-panel_header__padding: calc(var(--ab-base-space) * 2);
-    --ab-cmp-panel_header__color: var(--ab-color-text-on-primary);
+    --ab-cmp-panel_header__color: var(--ab-color-primary-foreground);
     --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-background);
-    --ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
+    --ab-cmp-panel_header--variant-modern__color: var(--ab-color-primary-foreground);
   }
   :root {
     --ab-cmp-simple-button__box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -5748,7 +5756,7 @@
   :root {
     --ab-cmp-tooltip__opacity: 0.96;
     --ab-cmp-tooltip__background: var(--ab-color-primary);
-    --ab-cmp-tooltip__color: var(--ab-color-text-on-primary);
+    --ab-cmp-tooltip__color: var(--ab-color-primary-foreground);
     --ab-cmp-tooltip__border: solid 1px var(--ab-color-input-border);
     --ab-cmp-tooltip__font-size: var(--ab-font-size-2);
   }
@@ -5756,7 +5764,7 @@
     --ab-cmp-file-droppable__padding: calc(var(--ab-base-space) * 16);
     --ab-cmp-file-droppable__margin: var(--ab-base-space);
     --ab-cmp-file-droppable__background: var(--ab-color-primary);
-    --ab-cmp-file-droppable__color: var(--ab-color-text-on-primary);
+    --ab-cmp-file-droppable__color: var(--ab-color-primary-foreground);
     --ab-cmp-file-droppable__outline: 2px dashed var(--ab-cmp-file-droppable__color);
     --ab-cmp-file-droppable__outline-offset: -10px;
     --ab-cmp-file-droppable--drag-over__background: var(--ab-color-accent);
@@ -5771,7 +5779,7 @@
     --ab-dashboard-wrap: nowrap;
     --ab-dashboard-gap-size: 3px;
     --ab-dashboard-gap__background: var(--ab-color-primarylight);
-    --ab-dashboard__color: var(--ab-color-text-on-primary);
+    --ab-dashboard__color: var(--ab-color-primary-foreground);
     --ab-dashboard__border: var(--ab-color-primarydark);
     --ab-dashboard-header__background: var(--ab-color-accent);
     --ab-dashboard-header__color: var(--ab-color-accent-foreground);
@@ -5807,12 +5815,12 @@
     --ab-cmp-module-module-selector__tab-item__border: 1px solid var(--ab-color-primarydark);
     --ab-cmp-module-module-selector__tab-item__border-radius: var(--ab-border-radius);
     --ab-cmp-module-module-selector__tab-item__width: 160px;
-    --ab-cmp-module-module-selector__tab-item__header-input__color: var(--ab-color-text-on-primary);
+    --ab-cmp-module-module-selector__tab-item__header-input__color: var(--ab-color-primary-foreground);
     --ab-cmp-module-module-selector__toolbar-item__border: 1px solid var(--ab-color-primary);
   }
   :root {
     --ab-cmp-loader__background: var(--ab-color-primarydark);
-    --ab-cmp-loader__border: var(--ab-color-text-on-primary);
+    --ab-cmp-loader__border: var(--ab-color-primary-foreground);
     --ab-cmp-loader__font-size: var(--ab-font-size-2);
   }
   :root {
@@ -5823,7 +5831,7 @@
     --ab-cmp-progress-indicator__font-family: var(--ab__font-family);
     --ab-cmp-progress-indicator__padding: calc(var(--ab-base-space) * 4);
     --ab-cmp-progress-indicator__background: var(--ab-color-primary);
-    --ab-cmp-progress-indicator__color: var(--ab-color-text-on-primary);
+    --ab-cmp-progress-indicator__color: var(--ab-color-primary-foreground);
   }
   :root {
     --ab-cmp-badge__padding: 3px 8px;
@@ -5865,7 +5873,7 @@
     --ab-cmp-wizard__padding: calc(var(--ab-base-space) * 16);
     --ab-cmp-wizard__margin: var(--ab-base-space);
     --ab-cmp-wizard__background: var(--ab-color-primary);
-    --ab-cmp-wizard__color: var(--ab-color-text-on-primary);
+    --ab-cmp-wizard__color: var(--ab-color-primary-foreground);
   }
   :root {
     --ab-cmp-button-border-radius: 0px;
@@ -5878,7 +5886,7 @@
     --ab-cmp-dashboardpanel_header__background: var(--ab-color-primary);
     --ab-cmp-dashboardpanel_header__fill: currentColor;
     --ab-cmp-dashboardpanel_header__color: var(--ab-color-muted-foreground);
-    --ab-cmp-dashboardpanel__fill: var(--ab-color-text-on-primary);
+    --ab-cmp-dashboardpanel__fill: var(--ab-color-primary-foreground);
     --ab-cmp-dashboardpanel__color: currentColor;
     --ab-cmp-dashboardpanel_header__padding: 0px;
     --ab-cmp-dashboardpanel_body__padding: var(--ab-base-space);
@@ -5982,7 +5990,7 @@
   :root {
     --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover: var(--ab-color-primary);
-    --ab-cmp-adaptable-statusbar__color: var(--ab-color-text-on-primary);
+    --ab-cmp-adaptable-statusbar__color: var(--ab-color-primary-foreground);
     --ab-cmp-adaptable-statusbar__font-weight: 400;
     --ab-cmp-adaptable-statusbar__border: 1px solid var(--ab-color-primary);
   }
@@ -6219,7 +6227,7 @@
   :root {
     --ab-cmp-query-builder__border: 1px dotted var(--ab-color-foreground);
     --ab-cmp-query-builder-expression__background: var(--ab-color-primary);
-    --ab-cmp-query-builder-expression__color: var(--ab-color-text-on-primary);
+    --ab-cmp-query-builder-expression__color: var(--ab-color-primary-foreground);
     --ab-cmp-query-builder-expression__font-size: var(--ab-font-size-3);
   }
   .ab-Dropdown {
@@ -7054,7 +7062,7 @@
     font-size: 90%;
   }
   :is(.ab-Datepicker-Overlay .rdp-root) .rdp-nav_button {
-    color: var(--ab-color-text-on-primary);
+    color: var(--ab-color-primary-foreground);
   }
   :is(.ab-Datepicker-Overlay .rdp-root) .rdp-table {
     width: 100%;
@@ -7655,7 +7663,7 @@
     }
   }
   .ab-FloatingFilter-label {
-    color: var(--ab-color-text-on-primary);
+    color: var(--ab-color-primary-foreground);
   }
   .ab-ColumnFilter {
     --ab-cmp-select-min-height: 32px;
@@ -8330,15 +8338,15 @@
   .Toastify__toast {
     padding: 0;
     padding-bottom: 5px;
-    color: var(--ab-color-text-on-primary);
+    color: var(--ab-color-primary-foreground);
     border-style: none;
     --ab-toast-cmp__shadow-color: var(--ab-color-accent);
     box-shadow: 0 0 7px 2px var(--ab-toast-cmp__shadow-color);
     background: var(--ab-toast-cmp__shadow-color);
-    --toastify-text-color-info: var(--ab-color-text-on-primary);
-    --toastify-text-color-success: var(--ab-color-text-on-primary);
-    --toastify-text-color-warning: var(--ab-color-text-on-primary);
-    --toastify-text-color-error: var(--ab-color-text-on-primary);
+    --toastify-text-color-info: var(--ab-color-primary-foreground);
+    --toastify-text-color-success: var(--ab-color-primary-foreground);
+    --toastify-text-color-warning: var(--ab-color-primary-foreground);
+    --toastify-text-color-error: var(--ab-color-primary-foreground);
     --toastify-color-info: var(--ab-color-info);
     --toastify-color-success: var(--ab-color-success);
     --toastify-color-warning: var(--ab-color-warn);
@@ -8433,6 +8441,53 @@
     --ab-theme-loaded: light;
   }
 }
+@layer adaptable.theming {
+  .ab--theme-dark {
+    --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: var(--ab-color-background);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ab--theme-dark {
+      --ab-color-input-background: color-mix(in srgb, var(--ab-color-background) 95%, black);
+    }
+  }
+  .ab--theme-dark {
+    --ab-cmp-input--disabled__background: #232323;
+    --ab-color-background: var(--ab-color-defaultbackground, #474c52);
+    --ab-color-foreground: var(--ab-color-text-on-defaultbackground, #e2e2e2);
+    --ab-color-primary: #262d2f;
+    --ab-color-primary-foreground: #e2e2e2;
+    --ab-color-primarylight: #3d3e3f;
+    --ab-color-primarydark: #1c2021;
+    --ab-color-palette-1: #5c1a1a;
+    --ab-color-palette-2: #ffb4b4;
+    --ab-color-palette-3: #4a3b00;
+    --ab-color-palette-4: #ffd966;
+    --ab-color-palette-5: #1b4332;
+    --ab-color-palette-6: #95d5b2;
+    --ab-color-palette-7: #1a365d;
+    --ab-color-palette-8: #90cdf4;
+    --ab-color-palette-9: #2d3748;
+    --ab-color-palette-10: #e2e8f0;
+    --ab-color-palette-11: #44337a;
+    --ab-color-palette-12: #d6bcfa;
+    --ab-color-shadow: rgb(255 255 255 / 0.45);
+    --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
+    --ab-dashboard__border: #555;
+    --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
+    --ab-cmp-checkbox__border-color: var(--ab-color-primary-foreground);
+    --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
+    --ab-cmp-tabs-inactive__opacity: 0.78;
+  }
+  .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/package.json

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

package/themes/dark.css

@@ -1,68 +1 @@
-@layer adaptable.theme {
-  .ab--theme-dark {
-    --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-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, #e2e2e2);
-    --ab-color-primarylight: #3d3e3f;
-    --ab-color-primarydark: #1c2021;
-    --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
-
-    --ab-color-palette-1: #5c1a1a;
-    --ab-color-palette-2: #ffb4b4;
-    --ab-color-palette-3: #4a3b00;
-    --ab-color-palette-4: #ffd966;
-    --ab-color-palette-5: #1b4332;
-    --ab-color-palette-6: #95d5b2;
-    --ab-color-palette-7: #1a365d;
-    --ab-color-palette-8: #90cdf4;
-    --ab-color-palette-9: #2d3748;
-    --ab-color-palette-10: #e2e8f0;
-    --ab-color-palette-11: #44337a;
-    --ab-color-palette-12: #d6bcfa;
-
-    --ab-color-shadow: rgb(255 255 255 / 0.45);
-    --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
-
-    --ab-dashboard__border: #555;
-    --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
-
-    --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
-    --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
-
-    --ab-cmp-tabs-inactive__opacity: 0.78;
-  }
-
-    .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
-        no-repeat center center;
-    }
-
-  /*
-The following are only redefined here so that the DARK theme in Storybook
-can be previewed correctly as that relies on an element (not the document element)
-to have the class ab--theme-dark.
-
-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-color-input-foreground: var(--ab-color-text-on-primary);
-    --ab-cmp-input__color: var(--ab-color-input-foreground);
-    --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
-    --ab-cmp-field-wrap__background: var(--ab-color-background);
-  }*/
-}
+/* you no longer need to import this file, as both the light and dark themes are in the index.css file */

package/themes/light.css

@@ -1,5 +1 @@
-@layer adaptable.theming {
-  html.ab--theme-light {
-    --ab-theme-loaded: light;
-  }
-}
+/* you no longer need to import this file, as both the light and dark themes are in the index.css file */