@salt-ds/ag-grid-theme 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/ag-grid-theme",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -13,6 +13,9 @@
     "/fonts",
     "/salt-ag-theme.css"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "yarn node ./scripts/build.mjs",
     "build-watch": "yarn node ./scripts/build.mjs --watch"
@@ -25,7 +28,7 @@
     "del": "^7.0.0"
   },
   "peerDependencies": {
-    "@salt-ds/theme": "^1.23.3",
+    "@salt-ds/theme": "^1.24.0",
     "ag-grid-community": ">=28.0.0"
   }
 }

package/salt-ag-theme.css

@@ -27,6 +27,7 @@ div[class*=ag-theme-salt] {
   --ag-header-foreground-color: var(--salt-content-secondary-foreground);
   --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   --ag-icon-size: max(var(--salt-size-icon), 12px);
+  --ag-input-border-color: var(--salt-editable-borderColor);
   --ag-input-focus-border-color: var(--salt-editable-borderColor-hover);
   --ag-input-focus-box-shadow: none;
   --ag-invalid-color: var(--salt-status-error-foreground-informative);
@@ -45,6 +46,7 @@ div[class*=ag-theme-salt] {
   --ag-selected-tab-underline-color: var(--salt-navigable-indicator-active);
   --ag-selected-tab-underline-width: var(--salt-size-indicator);
   --ag-subheader-background-color: var(--salt-container-primary-background);
+  --ag-control-panel-background-color: var(--salt-container-primary-background);
   --ag-toggle-button-off-background-color: var(--salt-container-primary-background);
   --ag-toggle-button-off-border-color: var(--salt-selectable-borderColor);
   --ag-toggle-button-on-background-color: var(--salt-container-primary-background);
@@ -280,6 +282,10 @@ div[class*=ag-theme-salt] .ag-cell-inline-editing:focus-within {
 }
 div[class*=ag-theme-salt] .ag-cell-inline-editing {
   padding: 0;
+  border-radius: 0;
+}
+div[class*=ag-theme-salt] .ag-cell-inline-editing.editable-cell input[class^=ag-] {
+  padding: 0 var(--salt-spacing-100);
 }
 div[class*=ag-theme-salt] .editable-cell,
 div[class*=ag-theme-salt] .editable-numeric-cell {
@@ -305,11 +311,6 @@ div[class*=ag-theme-salt] .ag-cell-focus:not(.ag-cell-range-selected):focus-with
 div[class*=ag-theme-salt] .ag-cell-wrapper.ag-row-group {
   align-items: center;
 }
-div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus,
-div[class*=ag-theme-salt] .editable-numeric-cell.ag-cell-focus:focus,
-div[class*=ag-theme-salt] .editable-cell.ag-cell-focus:focus-within {
-  overflow: visible;
-}
 div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus:before,
 div[class*=ag-theme-salt] .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
 div[class*=ag-theme-salt] .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
@@ -333,6 +334,38 @@ div[class*=ag-theme-salt] .editable-numeric-cell input {
   border: none;
   background-color: transparent;
 }
+div[class*=ag-theme-salt] .ag-large-text-input {
+  padding: 0;
+}
+div[class*=ag-theme-salt] .editable-cell .ag-picker-field-wrapper {
+  background-color: transparent;
+  border: none;
+}
+div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
+  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
+  border-radius: 0;
+}
+div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
+div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-rich-select .ag-picker-field-wrapper {
+  padding: 0 var(--salt-spacing-100);
+  border-radius: 0;
+}
+div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before,
+div[class*=ag-theme-salt] .ag-ltr .editable-cell .ag-rich-select .ag-icon-small-down::before {
+  content: var(--ag-icon-font-code-contracted);
+}
+div[class*=ag-theme-salt] .ag-ltr .ag-select-list-item,
+div[class*=ag-theme-salt] .ag-ltr .ag-rich-select-row {
+  padding: 0 var(--salt-spacing-100);
+}
+div[class*=ag-theme-salt] .ag-select-list,
+div[class*=ag-theme-salt] .ag-rich-select-list {
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+}
+div[class*=ag-theme-salt] .ag-select-list-item[aria-selected=true],
+div[class*=ag-theme-salt] .ag-rich-select-row-selected {
+  box-shadow: inset 0px var(--salt-size-border) 0px var(--salt-selectable-borderColor-selected), inset 0px calc(var(--salt-size-border) * -1) 0px var(--salt-selectable-borderColor-selected);
+}
 div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after {
   content: "";
   top: 0;
@@ -394,6 +427,20 @@ div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus
   outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
   outline-offset: -2px;
 }
+div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
+  border-radius: var(--salt-palette-corner-weak, 0);
+  padding: var(--salt-spacing-100) var(--salt-spacing-100);
+}
+div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text,
+div[class*=ag-theme-salt] .ag-autocomplete-list-popup {
+  border: none;
+}
+div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-] {
+  border-color: var(--salt-selectable-borderColor-selected);
+}
+div[class*=ag-theme-salt] .ag-popup-editor .ag-large-text textarea[class^=ag-]:focus {
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
+}
 
 /* css/parts/ag-checkbox.css */
 div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
@@ -442,13 +489,6 @@ div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
   outline-color: var(--salt-focused-outlineColor);
   outline-offset: var(--salt-focused-outlineOffset);
 }
-div[class*=ag-theme-salt] .ag-select .ag-picker-field-wrapper {
-  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
-  border-radius: 0;
-}
-div[class*=ag-theme-salt] .ag-select .ag-picker-field-icon {
-  margin-right: var(--salt-spacing-100);
-}
 div[class*=ag-theme-salt] .ag-menu .ag-filter-body-wrapper {
   display: flex;
   flex-direction: column;