Ag grid theme major - support v31

.changeset/stupid-coats-boil.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added new `--salt-overlayable-rangeSelection` token, which points to new `--salt-palette-neutral-selection` and resolves to black@15% in light mode and white@15% in dark mode.

.changeset/tasty-trains-cover.md

@@ -0,0 +1,53 @@
+---
+"@salt-ds/ag-grid-theme": major
+---
+
+Ag grid theme is updated to support ag grid version v31, and it's now driven by [AG grid variables](https://ag-grid.com/react-data-grid/global-style-customisation/) with a big reduction in bundle size. Follow below for upgrade instructions:
+
+1. Update stylesheet import
+
+```diff
+- import "ag-grid-community/dist/styles/ag-grid.css";
++ import "ag-grid-community/styles/ag-grid.css";
+```
+
+UITK theme is removed, migrate to Salt theme
+
+```diff
+- import "@salt-ds/ag-grid-theme/uitk-ag-theme.css";
++ import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
+```
+
+2. Update classnames used on the container around `AgGridReact`, which no longer has density portion. If you previously copied `useAgGridHelpers`, you'll need to copy a new version from [here](https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts).
+
+In light mode:
+
+```diff
+- .ag-theme-salt-high-light
+- .ag-theme-salt-medium-light
+- .ag-theme-salt-low-light
+- .ag-theme-salt-touch-light
++ .ag-theme-salt-light
+```
+
+```diff
+- .ag-theme-salt-high-compact-light
++ .ag-theme-salt-compact-light
+```
+
+In dark mode:
+
+```diff
+- .ag-theme-salt-high-dark
+- .ag-theme-salt-medium-dark
+- .ag-theme-salt-low-dark
+- .ag-theme-salt-touch-dark
++ .ag-theme-salt-dark
+```
+
+```diff
+- .ag-theme-salt-high-compact-dark
++ .ag-theme-salt-compact-dark
+```
+
+Closes #2972

.gitignore

@@ -44,7 +44,5 @@ yarn-error.log*
 *.iml
 
 # Autogenerated CSS
-/packages/ag-grid-theme/uitk-ag-theme.css
-/packages/ag-grid-theme/salt-ag-theme.css
 /docs/css/salt-core.css
 /docs/css/salt-lab.css

.stylelintrc.json

@@ -14,5 +14,14 @@
     "salt/custom-property-starts-with-component-name": {
       "logLevel": "default"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/ag-grid-theme/**/*.css"],
+      "rules": {
+        "salt/custom-property-attributes-kebab-case": null,
+        "salt/custom-property-starts-with-component-name": null
+      }
+    }
+  ]
 }

cypress.config.ts

@@ -87,6 +87,7 @@ export default defineConfig({
           return null;
         },
       });
+
       return config;
     },
     devServer: {

package.json

@@ -39,10 +39,11 @@
     "prettier": "pretty-quick --branch main",
     "prettier:all": "prettier --write .",
     "prettier:ci": "prettier --check .",
-    "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab",
+    "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme",
     "lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"",
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",
     "lint:style:lab": "yarn stylelint -f verbose \"packages/lab/src/**/*.css\"",
+    "lint:style:ag-theme": "yarn stylelint -f verbose \"packages/ag-grid-theme/css/**/*.css\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "yarn build:ag-grid-theme && yarn bundle:css && storybook build",
     "typecheck": "tsc --noEmit",
@@ -82,9 +83,9 @@
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "ag-grid-community": "^28.2.1",
-    "ag-grid-enterprise": "^28.2.1",
-    "ag-grid-react": "^28.2.1",
+    "ag-grid-community": "^31.3.0",
+    "ag-grid-enterprise": "^31.3.0",
+    "ag-grid-react": "^31.3.0",
     "axe-core": "^4.9.0",
     "chromatic": "^11.3.2",
     "ci-info": "^3.3.1",