diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-dark.png b/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-dark.png
index cb0d60e..b946854 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-dark.png and b/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-dark.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-light.png
index be60f97..5bce54e 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/column-menu-opened-light.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-dark.png b/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-dark.png
index 43751ad..96b8d27 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-dark.png and b/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-dark.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-light.png
index 9b436b8..4a31864 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/infinite-selection-light.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/row-group-dark.png b/dev/ag-grid-angular/src/tests/__screenshots__/row-group-dark.png
index 413a88b..01db842 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/row-group-dark.png and b/dev/ag-grid-angular/src/tests/__screenshots__/row-group-dark.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/row-group-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/row-group-light.png
index ef8e1a4..35f214c 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/row-group-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/row-group-light.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/status-bar-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/status-bar-light.png
index 852a436..79a1614 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/status-bar-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/status-bar-light.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-dark.png b/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-dark.png
index 065d0d6..4affb10 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-dark.png and b/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-dark.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-light.png
index 4028c71..2e6704a 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/theme-default-light.png differ
diff --git a/dev/ag-grid-angular/src/tests/__screenshots__/theme-pinned-columns-light.png b/dev/ag-grid-angular/src/tests/__screenshots__/theme-pinned-columns-light.png
index 933a101..a00056f 100644
Binary files a/dev/ag-grid-angular/src/tests/__screenshots__/theme-pinned-columns-light.png and b/dev/ag-grid-angular/src/tests/__screenshots__/theme-pinned-columns-light.png differ
diff --git a/packages/ag-grid-angular-theme/src/theme.scss b/packages/ag-grid-angular-theme/src/theme.scss
index d059e36..15759f4 100644
--- a/packages/ag-grid-angular-theme/src/theme.scss
+++ b/packages/ag-grid-angular-theme/src/theme.scss
@@ -389,23 +389,36 @@
@mixin _ag-svg-icons() {
.ag-checkbox-input-wrapper {
--ag-theme-koobiq-checkbox-svg: url('data:image/svg+xml;utf8,');
- --ag-theme-koobiq-checkbox-fill: var(--ag-checkbox-unchecked-color);
+ --ag-theme-koobiq-checkbox-background: var(--ag-checkbox-background-color);
+ --ag-theme-koobiq-checkbox-icon-fill: var(--ag-checkbox-unchecked-color);
+
+ background-color: var(--ag-theme-koobiq-checkbox-background);
&::after {
mask: var(--ag-theme-koobiq-checkbox-svg) center / contain no-repeat;
width: var(--ag-icon-size);
height: var(--ag-icon-size);
- background-color: var(--ag-theme-koobiq-checkbox-fill);
+ background-color: var(--ag-theme-koobiq-checkbox-icon-fill);
}
&.ag-checked {
- --ag-theme-koobiq-checkbox-svg: url('data:image/svg+xml;utf8,');
- --ag-theme-koobiq-checkbox-fill: var(--ag-checkbox-checked-color);
+ --ag-theme-koobiq-checkbox-svg: url('data:image/svg+xml;utf8,');
+ --ag-theme-koobiq-checkbox-background: var(--ag-checkbox-checked-color);
+ --ag-theme-koobiq-checkbox-icon-fill: var(--kbq-icon-white);
}
&.ag-indeterminate {
- --ag-theme-koobiq-checkbox-svg: url('data:image/svg+xml;utf8,');
- --ag-theme-koobiq-checkbox-fill: var(--ag-checkbox-indeterminate-color);
+ --ag-theme-koobiq-checkbox-svg: url('data:image/svg+xml;utf8,');
+ --ag-theme-koobiq-checkbox-background: var(--ag-checkbox-indeterminate-color);
+ --ag-theme-koobiq-checkbox-icon-fill: var(--kbq-icon-white);
+ }
+
+ &.ag-disabled {
+ --ag-theme-koobiq-checkbox-background: var(--kbq-states-background-disabled);
+ --ag-theme-koobiq-checkbox-icon-fill: var(--kbq-states-icon-disabled);
+
+ opacity: 1;
+ box-shadow: inset 0 0 0 1px var(--kbq-states-line-disabled);
}
}
@@ -1244,12 +1257,15 @@
.kbq-column-menu-checkbox {
// stylelint-disable-next-line scss/operator-no-newline-after
--kbq-column-menu-checkbox-svg: url('data:image/svg+xml;utf8,');
- --kbq-column-menu-checkbox-fill: var(--ag-checkbox-unchecked-color, var(--kbq-line-contrast-fade));
+ --kbq-column-menu-checkbox-background: transparent;
+ --kbq-column-menu-checkbox-icon-fill: var(--ag-checkbox-unchecked-color, var(--kbq-line-contrast-fade));
width: var(--ag-icon-size, var(--kbq-size-l));
height: var(--ag-icon-size, var(--kbq-size-l));
flex-shrink: 0;
position: relative;
+ border-radius: var(--ag-checkbox-border-radius, var(--kbq-size-xxs));
+ background-color: var(--kbq-column-menu-checkbox-background);
&::after {
content: '';
@@ -1260,18 +1276,22 @@
width: 100%;
height: 100%;
mask: var(--kbq-column-menu-checkbox-svg) center / contain no-repeat;
- background-color: var(--kbq-column-menu-checkbox-fill);
+ background-color: var(--kbq-column-menu-checkbox-icon-fill);
}
&.kbq-column-menu-checkbox--checked {
// stylelint-disable-next-line scss/operator-no-newline-after
- --kbq-column-menu-checkbox-svg: url('data:image/svg+xml;utf8,');
- --kbq-column-menu-checkbox-fill: var(--ag-checkbox-checked-color, var(--kbq-background-theme));
+ --kbq-column-menu-checkbox-svg: url('data:image/svg+xml;utf8,');
+ --kbq-column-menu-checkbox-background: var(--ag-checkbox-checked-color, var(--kbq-background-theme));
+ --kbq-column-menu-checkbox-icon-fill: var(--kbq-icon-white);
}
&.kbq-column-menu-checkbox--disabled {
- opacity: 0.4;
+ --kbq-column-menu-checkbox-background: var(--kbq-states-background-disabled);
+ --kbq-column-menu-checkbox-icon-fill: var(--kbq-states-icon-disabled);
+
cursor: not-allowed;
+ box-shadow: inset 0 0 0 1px var(--kbq-states-line-disabled);
}
}