AG Grid theme using Astro UXDS styling
npm install @astrouxds/ag-grid-themeAG Grid theme using Astro UXDS styling.
The Astro AG-Grid theme follows the Astro theming guidelines and the AG-Grid theme development guidelines.
There are three parts to the Astro AG-Grid theme:
1. Astro UXDS Design tokens which are already imported and consumed in @astrouxds/ag-grid-theme.
2. The AG-Grid community alpine-dark theme that the Astro AG-Grid theme builds off of, which is imported from the ag-grid-community repository.
3. The Astro AG-Grid theme itself, which is defined in @astrouxds/ag-grid-theme/dist/main.css and consumes the imported design tokens above.
The @astrouxds/ag-grid-theme/dist/main.css file merges the ag-grid.css, ag-theme-alpine-dark.css and the astro ag-grid theme sources so you will only need to import one file.
Import the Astro AG-grid theme
Run npm install @astrouxds/ag-grid-theme while in your project directory.
In your main css entrypoint (for Angular src/styles.scss):
@import "~@astrouxds/ag-grid-theme/dist/main.css"
> If you are already importing ag-grid-community/dist/styles/ag-grid.css or ag-grid-community/dist/styles/ag-theme-alpine.css you can remove them as they are already bundled in our ag-grid-theme css.
Apply the class "ag-theme-astro" to your ag-grid element:
``html`
The Astro Dark variant is the default theme. The Light variant can be assigned by wrapping the grid in an element with the "light-theme" class, and using the "ag-theme-astro-light" class on the ag-grid element.
`html`
cd /demo
npm run reference.dark