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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
- @layer adaptable.reset, adaptable.theming, adaptable.components, adaptable.utilities, adaptable.theme;
3
+ @layer adaptable.reset, adaptable.components, adaptable.utilities, adaptable.theming;
4
4
  @property --tw-animation-delay {
5
5
  syntax: "*";
6
6
  inherits: false;
@@ -107,6 +107,7 @@
107
107
  --twa-font-weight-semibold: 600;
108
108
  --twa-font-weight-bold: 700;
109
109
  --twa-tracking-widest: 0.1em;
110
+ --twa-leading-tight: 1.25;
110
111
  --twa-leading-normal: 1.5;
111
112
  --twa-leading-relaxed: 1.625;
112
113
  --twa-radius-sm: 0.25rem;
@@ -292,6 +293,9 @@
292
293
  .twa\:top-0 {
293
294
  top: calc(var(--ab-base-space) * 0);
294
295
  }
296
+ .twa\:top-1\/2 {
297
+ top: calc(1 / 2 * 100%);
298
+ }
295
299
  .twa\:top-\[6px\] {
296
300
  top: 6px;
297
301
  }
@@ -304,6 +308,9 @@
304
308
  .twa\:bottom-0 {
305
309
  bottom: calc(var(--ab-base-space) * 0);
306
310
  }
311
+ .twa\:left-0 {
312
+ left: calc(var(--ab-base-space) * 0);
313
+ }
307
314
  .twa\:isolate {
308
315
  isolation: isolate;
309
316
  }
@@ -460,9 +467,6 @@
460
467
  .twa\:mr-3 {
461
468
  margin-right: calc(var(--ab-base-space) * 3);
462
469
  }
463
- .twa\:mr-4 {
464
- margin-right: calc(var(--ab-base-space) * 4);
465
- }
466
470
  .twa\:mr-6 {
467
471
  margin-right: calc(var(--ab-base-space) * 6);
468
472
  }
@@ -607,9 +611,6 @@
607
611
  .twa\:h-\(--cell-size\) {
608
612
  height: var(--cell-size);
609
613
  }
610
- .twa\:h-2 {
611
- height: calc(var(--ab-base-space) * 2);
612
- }
613
614
  .twa\:h-6 {
614
615
  height: calc(var(--ab-base-space) * 6);
615
616
  }
@@ -628,15 +629,9 @@
628
629
  .twa\:h-\[1rem\] {
629
630
  height: 1rem;
630
631
  }
631
- .twa\:h-\[8px\] {
632
- height: 8px;
633
- }
634
632
  .twa\:h-\[10px\] {
635
633
  height: 10px;
636
634
  }
637
- .twa\:h-\[18px\] {
638
- height: 18px;
639
- }
640
635
  .twa\:h-\[33px\] {
641
636
  height: 33px;
642
637
  }
@@ -703,12 +698,21 @@
703
698
  .twa\:min-h-\[1rem\] {
704
699
  min-height: 1rem;
705
700
  }
701
+ .twa\:min-h-\[6px\] {
702
+ min-height: 6px;
703
+ }
706
704
  .twa\:min-h-\[15px\] {
707
705
  min-height: 15px;
708
706
  }
709
707
  .twa\:min-h-\[20px\] {
710
708
  min-height: 20px;
711
709
  }
710
+ .twa\:min-h-\[32px\] {
711
+ min-height: 32px;
712
+ }
713
+ .twa\:min-h-\[36px\] {
714
+ min-height: 36px;
715
+ }
712
716
  .twa\:min-h-\[48px\] {
713
717
  min-height: 48px;
714
718
  }
@@ -718,6 +722,15 @@
718
722
  .twa\:min-h-\[120px\] {
719
723
  min-height: 120px;
720
724
  }
725
+ .twa\:min-h-\[200px\] {
726
+ min-height: 200px;
727
+ }
728
+ .twa\:min-h-\[280px\] {
729
+ min-height: 280px;
730
+ }
731
+ .twa\:min-h-\[300px\] {
732
+ min-height: 300px;
733
+ }
721
734
  .twa\:min-h-auto {
722
735
  min-height: auto;
723
736
  }
@@ -757,9 +770,6 @@
757
770
  .twa\:w-24 {
758
771
  width: calc(var(--ab-base-space) * 24);
759
772
  }
760
- .twa\:w-30 {
761
- width: calc(var(--ab-base-space) * 30);
762
- }
763
773
  .twa\:w-32 {
764
774
  width: calc(var(--ab-base-space) * 32);
765
775
  }
@@ -796,12 +806,12 @@
796
806
  .twa\:w-\[70px\] {
797
807
  width: 70px;
798
808
  }
809
+ .twa\:w-\[72px\] {
810
+ width: 72px;
811
+ }
799
812
  .twa\:w-\[77px\] {
800
813
  width: 77px;
801
814
  }
802
- .twa\:w-\[80px\] {
803
- width: 80px;
804
- }
805
815
  .twa\:w-\[90vw\] {
806
816
  width: 90vw;
807
817
  }
@@ -820,9 +830,6 @@
820
830
  .twa\:w-\[150px\] {
821
831
  width: 150px;
822
832
  }
823
- .twa\:w-\[160px\] {
824
- width: 160px;
825
- }
826
833
  .twa\:w-\[180px\] {
827
834
  width: 180px;
828
835
  }
@@ -859,9 +866,6 @@
859
866
  .twa\:max-w-3xl {
860
867
  max-width: var(--twa-container-3xl);
861
868
  }
862
- .twa\:max-w-30 {
863
- max-width: calc(var(--ab-base-space) * 30);
864
- }
865
869
  .twa\:max-w-50 {
866
870
  max-width: calc(var(--ab-base-space) * 50);
867
871
  }
@@ -1003,6 +1007,9 @@
1003
1007
  .twa\:min-w-\[50px\] {
1004
1008
  min-width: 50px;
1005
1009
  }
1010
+ .twa\:min-w-\[56px\] {
1011
+ min-width: 56px;
1012
+ }
1006
1013
  .twa\:min-w-\[60px\] {
1007
1014
  min-width: 60px;
1008
1015
  }
@@ -1096,18 +1103,16 @@
1096
1103
  .twa\:shrink-0 {
1097
1104
  flex-shrink: 0;
1098
1105
  }
1099
- .twa\:basis-\[50\%\] {
1100
- flex-basis: 50%;
1101
- }
1102
- .twa\:basis-\[120px\] {
1103
- flex-basis: 120px;
1104
- }
1105
1106
  .twa\:border-collapse {
1106
1107
  border-collapse: collapse;
1107
1108
  }
1108
1109
  .twa\:origin-\(--transform-origin\) {
1109
1110
  transform-origin: var(--transform-origin);
1110
1111
  }
1112
+ .twa\:-translate-y-1\/2 {
1113
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
1114
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1115
+ }
1111
1116
  .twa\:translate-y-\[calc\(-50\%-2px\)\] {
1112
1117
  --tw-translate-y: calc(-50% - 2px);
1113
1118
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1265,6 +1270,12 @@
1265
1270
  .twa\:gap-8 {
1266
1271
  gap: calc(var(--ab-base-space) * 8);
1267
1272
  }
1273
+ .twa\:gap-x-4 {
1274
+ column-gap: calc(var(--ab-base-space) * 4);
1275
+ }
1276
+ .twa\:gap-y-2 {
1277
+ row-gap: calc(var(--ab-base-space) * 2);
1278
+ }
1268
1279
  .twa\:self-center {
1269
1280
  align-self: center;
1270
1281
  }
@@ -1813,6 +1824,10 @@
1813
1824
  --tw-leading: var(--twa-leading-relaxed);
1814
1825
  line-height: var(--twa-leading-relaxed);
1815
1826
  }
1827
+ .twa\:leading-tight {
1828
+ --tw-leading: var(--twa-leading-tight);
1829
+ line-height: var(--twa-leading-tight);
1830
+ }
1816
1831
  .twa\:font-bold {
1817
1832
  --tw-font-weight: var(--twa-font-weight-bold);
1818
1833
  font-weight: var(--twa-font-weight-bold);
@@ -1932,9 +1947,6 @@
1932
1947
  .twa\:text-text-on-info {
1933
1948
  color: var(--ab-color-text-on-info);
1934
1949
  }
1935
- .twa\:text-text-on-primary {
1936
- color: var(--ab-color-text-on-primary);
1937
- }
1938
1950
  .twa\:text-text-on-share {
1939
1951
  color: var(--ab-color-text-on-share);
1940
1952
  }
@@ -1954,9 +1966,6 @@
1954
1966
  --tw-numeric-spacing: tabular-nums;
1955
1967
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1956
1968
  }
1957
- .twa\:underline {
1958
- text-decoration-line: underline;
1959
- }
1960
1969
  .twa\:underline-offset-4 {
1961
1970
  text-underline-offset: 4px;
1962
1971
  }
@@ -2572,8 +2581,8 @@
2572
2581
  }
2573
2582
  }
2574
2583
  @media (hover: hover) {
2575
- .twa\:hover\:text-text-on-primary:hover {
2576
- color: var(--ab-color-text-on-primary);
2584
+ .twa\:hover\:text-primary-foreground:hover {
2585
+ color: var(--ab-color-primary-foreground);
2577
2586
  }
2578
2587
  }
2579
2588
  @media (hover: hover) {
@@ -5487,9 +5496,8 @@
5487
5496
  --ab-color-text-on-share: white;
5488
5497
  --ab-color-text-on-delete: white;
5489
5498
  --ab-color-text-on-clone: white;
5490
- --ab-color-text-on-primary: #656565;
5491
5499
  --ab-color-primary: #e9e9e9;
5492
- --ab-color-primary-foreground: var(--ab-color-text-on-primary, #656565);
5500
+ --ab-color-primary-foreground: #656565;
5493
5501
  --ab-color-primarydark: #b7b7b7;
5494
5502
  --ab-color-primarylight: #f5f5f5;
5495
5503
  --ab-color-shadow: rgb(0 0 0 / 0.2);
@@ -5675,10 +5683,10 @@
5675
5683
  --ab-cmp-dropdownbutton-list__background: var(--ab-color-primarylight);
5676
5684
  --ab-cmp-dropdownbutton-list-item__padding: calc(var(--ab-base-space) * 2);
5677
5685
  --ab-cmp-dropdownbutton-list-item-hover__background: var(--ab-color-primary);
5678
- --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-text-on-primary);
5686
+ --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-primary-foreground);
5679
5687
  --ab-cmp-dropdownbutton-list-item-active__background: var(--ab-color-primarydark);
5680
5688
  --ab-cmp-dropdownbutton-list-item-active__color: var(--ab-color-on-primarydark);
5681
- --ab-cmp-dropdownbutton-list-item__color: var(--ab-color-text-on-primary);
5689
+ --ab-cmp-dropdownbutton-list-item__color: var(--ab-color-primary-foreground);
5682
5690
  --ab-cmp-dropdownbutton-list__z-index: 1000;
5683
5691
  --ab-cmp-dropdownbutton-list__border-radius: var(--ab-border-radius);
5684
5692
  --ab-cmp-dropdownbutton-list__box-shadow: 4px 5px 11px -5px rgba(0, 0, 0, 0.2),
@@ -5721,12 +5729,12 @@
5721
5729
  --ab-cmp-panel__border: 1px solid var(--ab-color-input-border);
5722
5730
  --ab-cmp-panel-icon__fill: var(--ab-icon-fill);
5723
5731
  --ab-cmp-panel_header__padding: calc(var(--ab-base-space) * 2);
5724
- --ab-cmp-panel_header__color: var(--ab-color-text-on-primary);
5732
+ --ab-cmp-panel_header__color: var(--ab-color-primary-foreground);
5725
5733
  --ab-cmp-panel_header--variant-primary__background: var(--ab-color-accent);
5726
5734
  --ab-cmp-panel_header--variant-primary__color: var(--ab-color-accent-foreground);
5727
5735
  --ab-cmp-panel_header--variant-modern__background: var(--ab-color-primary);
5728
5736
  --ab-cmp-panel_header--variant-minimal__background: var(--ab-color-background);
5729
- --ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
5737
+ --ab-cmp-panel_header--variant-modern__color: var(--ab-color-primary-foreground);
5730
5738
  }
5731
5739
  :root {
5732
5740
  --ab-cmp-simple-button__box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -5748,7 +5756,7 @@
5748
5756
  :root {
5749
5757
  --ab-cmp-tooltip__opacity: 0.96;
5750
5758
  --ab-cmp-tooltip__background: var(--ab-color-primary);
5751
- --ab-cmp-tooltip__color: var(--ab-color-text-on-primary);
5759
+ --ab-cmp-tooltip__color: var(--ab-color-primary-foreground);
5752
5760
  --ab-cmp-tooltip__border: solid 1px var(--ab-color-input-border);
5753
5761
  --ab-cmp-tooltip__font-size: var(--ab-font-size-2);
5754
5762
  }
@@ -5756,7 +5764,7 @@
5756
5764
  --ab-cmp-file-droppable__padding: calc(var(--ab-base-space) * 16);
5757
5765
  --ab-cmp-file-droppable__margin: var(--ab-base-space);
5758
5766
  --ab-cmp-file-droppable__background: var(--ab-color-primary);
5759
- --ab-cmp-file-droppable__color: var(--ab-color-text-on-primary);
5767
+ --ab-cmp-file-droppable__color: var(--ab-color-primary-foreground);
5760
5768
  --ab-cmp-file-droppable__outline: 2px dashed var(--ab-cmp-file-droppable__color);
5761
5769
  --ab-cmp-file-droppable__outline-offset: -10px;
5762
5770
  --ab-cmp-file-droppable--drag-over__background: var(--ab-color-accent);
@@ -5771,7 +5779,7 @@
5771
5779
  --ab-dashboard-wrap: nowrap;
5772
5780
  --ab-dashboard-gap-size: 3px;
5773
5781
  --ab-dashboard-gap__background: var(--ab-color-primarylight);
5774
- --ab-dashboard__color: var(--ab-color-text-on-primary);
5782
+ --ab-dashboard__color: var(--ab-color-primary-foreground);
5775
5783
  --ab-dashboard__border: var(--ab-color-primarydark);
5776
5784
  --ab-dashboard-header__background: var(--ab-color-accent);
5777
5785
  --ab-dashboard-header__color: var(--ab-color-accent-foreground);
@@ -5807,12 +5815,12 @@
5807
5815
  --ab-cmp-module-module-selector__tab-item__border: 1px solid var(--ab-color-primarydark);
5808
5816
  --ab-cmp-module-module-selector__tab-item__border-radius: var(--ab-border-radius);
5809
5817
  --ab-cmp-module-module-selector__tab-item__width: 160px;
5810
- --ab-cmp-module-module-selector__tab-item__header-input__color: var(--ab-color-text-on-primary);
5818
+ --ab-cmp-module-module-selector__tab-item__header-input__color: var(--ab-color-primary-foreground);
5811
5819
  --ab-cmp-module-module-selector__toolbar-item__border: 1px solid var(--ab-color-primary);
5812
5820
  }
5813
5821
  :root {
5814
5822
  --ab-cmp-loader__background: var(--ab-color-primarydark);
5815
- --ab-cmp-loader__border: var(--ab-color-text-on-primary);
5823
+ --ab-cmp-loader__border: var(--ab-color-primary-foreground);
5816
5824
  --ab-cmp-loader__font-size: var(--ab-font-size-2);
5817
5825
  }
5818
5826
  :root {
@@ -5823,7 +5831,7 @@
5823
5831
  --ab-cmp-progress-indicator__font-family: var(--ab__font-family);
5824
5832
  --ab-cmp-progress-indicator__padding: calc(var(--ab-base-space) * 4);
5825
5833
  --ab-cmp-progress-indicator__background: var(--ab-color-primary);
5826
- --ab-cmp-progress-indicator__color: var(--ab-color-text-on-primary);
5834
+ --ab-cmp-progress-indicator__color: var(--ab-color-primary-foreground);
5827
5835
  }
5828
5836
  :root {
5829
5837
  --ab-cmp-badge__padding: 3px 8px;
@@ -5865,7 +5873,7 @@
5865
5873
  --ab-cmp-wizard__padding: calc(var(--ab-base-space) * 16);
5866
5874
  --ab-cmp-wizard__margin: var(--ab-base-space);
5867
5875
  --ab-cmp-wizard__background: var(--ab-color-primary);
5868
- --ab-cmp-wizard__color: var(--ab-color-text-on-primary);
5876
+ --ab-cmp-wizard__color: var(--ab-color-primary-foreground);
5869
5877
  }
5870
5878
  :root {
5871
5879
  --ab-cmp-button-border-radius: 0px;
@@ -5878,7 +5886,7 @@
5878
5886
  --ab-cmp-dashboardpanel_header__background: var(--ab-color-primary);
5879
5887
  --ab-cmp-dashboardpanel_header__fill: currentColor;
5880
5888
  --ab-cmp-dashboardpanel_header__color: var(--ab-color-muted-foreground);
5881
- --ab-cmp-dashboardpanel__fill: var(--ab-color-text-on-primary);
5889
+ --ab-cmp-dashboardpanel__fill: var(--ab-color-primary-foreground);
5882
5890
  --ab-cmp-dashboardpanel__color: currentColor;
5883
5891
  --ab-cmp-dashboardpanel_header__padding: 0px;
5884
5892
  --ab-cmp-dashboardpanel_body__padding: var(--ab-base-space);
@@ -5982,7 +5990,7 @@
5982
5990
  :root {
5983
5991
  --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
5984
5992
  --ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover: var(--ab-color-primary);
5985
- --ab-cmp-adaptable-statusbar__color: var(--ab-color-text-on-primary);
5993
+ --ab-cmp-adaptable-statusbar__color: var(--ab-color-primary-foreground);
5986
5994
  --ab-cmp-adaptable-statusbar__font-weight: 400;
5987
5995
  --ab-cmp-adaptable-statusbar__border: 1px solid var(--ab-color-primary);
5988
5996
  }
@@ -6219,7 +6227,7 @@
6219
6227
  :root {
6220
6228
  --ab-cmp-query-builder__border: 1px dotted var(--ab-color-foreground);
6221
6229
  --ab-cmp-query-builder-expression__background: var(--ab-color-primary);
6222
- --ab-cmp-query-builder-expression__color: var(--ab-color-text-on-primary);
6230
+ --ab-cmp-query-builder-expression__color: var(--ab-color-primary-foreground);
6223
6231
  --ab-cmp-query-builder-expression__font-size: var(--ab-font-size-3);
6224
6232
  }
6225
6233
  .ab-Dropdown {
@@ -7054,7 +7062,7 @@
7054
7062
  font-size: 90%;
7055
7063
  }
7056
7064
  :is(.ab-Datepicker-Overlay .rdp-root) .rdp-nav_button {
7057
- color: var(--ab-color-text-on-primary);
7065
+ color: var(--ab-color-primary-foreground);
7058
7066
  }
7059
7067
  :is(.ab-Datepicker-Overlay .rdp-root) .rdp-table {
7060
7068
  width: 100%;
@@ -7655,7 +7663,7 @@
7655
7663
  }
7656
7664
  }
7657
7665
  .ab-FloatingFilter-label {
7658
- color: var(--ab-color-text-on-primary);
7666
+ color: var(--ab-color-primary-foreground);
7659
7667
  }
7660
7668
  .ab-ColumnFilter {
7661
7669
  --ab-cmp-select-min-height: 32px;
@@ -8330,15 +8338,15 @@
8330
8338
  .Toastify__toast {
8331
8339
  padding: 0;
8332
8340
  padding-bottom: 5px;
8333
- color: var(--ab-color-text-on-primary);
8341
+ color: var(--ab-color-primary-foreground);
8334
8342
  border-style: none;
8335
8343
  --ab-toast-cmp__shadow-color: var(--ab-color-accent);
8336
8344
  box-shadow: 0 0 7px 2px var(--ab-toast-cmp__shadow-color);
8337
8345
  background: var(--ab-toast-cmp__shadow-color);
8338
- --toastify-text-color-info: var(--ab-color-text-on-primary);
8339
- --toastify-text-color-success: var(--ab-color-text-on-primary);
8340
- --toastify-text-color-warning: var(--ab-color-text-on-primary);
8341
- --toastify-text-color-error: var(--ab-color-text-on-primary);
8346
+ --toastify-text-color-info: var(--ab-color-primary-foreground);
8347
+ --toastify-text-color-success: var(--ab-color-primary-foreground);
8348
+ --toastify-text-color-warning: var(--ab-color-primary-foreground);
8349
+ --toastify-text-color-error: var(--ab-color-primary-foreground);
8342
8350
  --toastify-color-info: var(--ab-color-info);
8343
8351
  --toastify-color-success: var(--ab-color-success);
8344
8352
  --toastify-color-warning: var(--ab-color-warn);
@@ -8433,6 +8441,53 @@
8433
8441
  --ab-theme-loaded: light;
8434
8442
  }
8435
8443
  }
8444
+ @layer adaptable.theming {
8445
+ .ab--theme-dark {
8446
+ --ab-color-secondary: oklch(0.269 0 0);
8447
+ --ab-color-secondary-foreground: oklch(0.985 0 0);
8448
+ --ab-color-destructive: oklch(0.396 0.141 25.723);
8449
+ --ab-color-destructive-foreground: oklch(0.637 0.237 25.331);
8450
+ --ab-color-border: oklch(0.269 0 0);
8451
+ --ab-theme-loaded: dark;
8452
+ --ab-color-input-background: var(--ab-color-background);
8453
+ }
8454
+ @supports (color: color-mix(in lab, red, red)) {
8455
+ .ab--theme-dark {
8456
+ --ab-color-input-background: color-mix(in srgb, var(--ab-color-background) 95%, black);
8457
+ }
8458
+ }
8459
+ .ab--theme-dark {
8460
+ --ab-cmp-input--disabled__background: #232323;
8461
+ --ab-color-background: var(--ab-color-defaultbackground, #474c52);
8462
+ --ab-color-foreground: var(--ab-color-text-on-defaultbackground, #e2e2e2);
8463
+ --ab-color-primary: #262d2f;
8464
+ --ab-color-primary-foreground: #e2e2e2;
8465
+ --ab-color-primarylight: #3d3e3f;
8466
+ --ab-color-primarydark: #1c2021;
8467
+ --ab-color-palette-1: #5c1a1a;
8468
+ --ab-color-palette-2: #ffb4b4;
8469
+ --ab-color-palette-3: #4a3b00;
8470
+ --ab-color-palette-4: #ffd966;
8471
+ --ab-color-palette-5: #1b4332;
8472
+ --ab-color-palette-6: #95d5b2;
8473
+ --ab-color-palette-7: #1a365d;
8474
+ --ab-color-palette-8: #90cdf4;
8475
+ --ab-color-palette-9: #2d3748;
8476
+ --ab-color-palette-10: #e2e8f0;
8477
+ --ab-color-palette-11: #44337a;
8478
+ --ab-color-palette-12: #d6bcfa;
8479
+ --ab-color-shadow: rgb(255 255 255 / 0.45);
8480
+ --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
8481
+ --ab-dashboard__border: #555;
8482
+ --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
8483
+ --ab-cmp-checkbox__border-color: var(--ab-color-primary-foreground);
8484
+ --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
8485
+ --ab-cmp-tabs-inactive__opacity: 0.78;
8486
+ }
8487
+ .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
8488
+ 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;
8489
+ }
8490
+ }
8436
8491
  @property --tw-translate-x {
8437
8492
  syntax: "*";
8438
8493
  inherits: false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adaptabletools/adaptable-vue3-aggrid",
3
- "version": "23.0.0-canary.4",
3
+ "version": "23.0.0-canary.6",
4
4
  "type": "module",
5
5
  "typings": "lib/index.d.ts",
6
6
  "peerDependencies": {
@@ -9,7 +9,7 @@
9
9
  "vue": "^3.0.0"
10
10
  },
11
11
  "dependencies": {
12
- "@adaptabletools/adaptable": "23.0.0-canary.4"
12
+ "@adaptabletools/adaptable": "23.0.0-canary.6"
13
13
  },
14
14
  "module": "lib/index.js"
15
15
  }
package/themes/dark.css CHANGED
@@ -1,68 +1 @@
1
- @layer adaptable.theme {
2
- .ab--theme-dark {
3
- --ab-color-secondary: oklch(0.269 0 0);
4
- --ab-color-secondary-foreground: oklch(0.985 0 0);
5
- --ab-color-destructive: oklch(0.396 0.141 25.723);
6
- --ab-color-destructive-foreground: oklch(0.637 0.237 25.331);
7
- --ab-color-border: oklch(0.269 0 0);
8
-
9
- --ab-theme-loaded: dark;
10
-
11
- --ab-color-input-background: color-mix(in srgb, var(--ab-color-background) 95%, black);
12
- --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
13
-
14
- --ab-color-background: var(--ab-color-defaultbackground, #474c52); /*old color was: #3e444c*/
15
- --ab-color-foreground: var(--ab-color-text-on-defaultbackground, #e2e2e2);
16
-
17
- --ab-color-primary: #262d2f;
18
- --ab-color-primary-foreground: var(--ab-color-text-on-primary, #e2e2e2);
19
- --ab-color-primarylight: #3d3e3f;
20
- --ab-color-primarydark: #1c2021;
21
- --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
22
-
23
- --ab-color-palette-1: #5c1a1a;
24
- --ab-color-palette-2: #ffb4b4;
25
- --ab-color-palette-3: #4a3b00;
26
- --ab-color-palette-4: #ffd966;
27
- --ab-color-palette-5: #1b4332;
28
- --ab-color-palette-6: #95d5b2;
29
- --ab-color-palette-7: #1a365d;
30
- --ab-color-palette-8: #90cdf4;
31
- --ab-color-palette-9: #2d3748;
32
- --ab-color-palette-10: #e2e8f0;
33
- --ab-color-palette-11: #44337a;
34
- --ab-color-palette-12: #d6bcfa;
35
-
36
- --ab-color-shadow: rgb(255 255 255 / 0.45);
37
- --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
38
-
39
- --ab-dashboard__border: #555;
40
- --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
41
-
42
- --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
43
- --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
44
-
45
- --ab-cmp-tabs-inactive__opacity: 0.78;
46
- }
47
-
48
- .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
49
- 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>')
50
- no-repeat center center;
51
- }
52
-
53
- /*
54
- The following are only redefined here so that the DARK theme in Storybook
55
- can be previewed correctly as that relies on an element (not the document element)
56
- to have the class ab--theme-dark.
57
-
58
- For our production release those are not needed and could be removed
59
- as our dark theme is anyways applied on the document element.
60
-
61
- */
62
- /* .ab--theme-dark {
63
- --ab-color-input-foreground: var(--ab-color-text-on-primary);
64
- --ab-cmp-input__color: var(--ab-color-input-foreground);
65
- --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
66
- --ab-cmp-field-wrap__background: var(--ab-color-background);
67
- }*/
68
- }
1
+ /* 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 CHANGED
@@ -1,5 +1 @@
1
- @layer adaptable.theming {
2
- html.ab--theme-light {
3
- --ab-theme-loaded: light;
4
- }
5
- }
1
+ /* you no longer need to import this file, as both the light and dark themes are in the index.css file */