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); } }