@astrouxds/ag-grid-theme

ag-grid-theme

AG 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.css and the astro ag-grid theme sources so you will only need to import one file.

Installation

Import the Astro AG-grid theme

Run npm install @astrouxds/ag-grid-theme while in your project directory.

Usage

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:

<ag-grid class="ag-theme-astro" ...></ag-grid>

Themes

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.

<section class="light-theme">
  <ag-grid- class="ag-theme-astro" ...></ag-grid->
</section>

Contributing

Preview

cd /demo npm i npm run dev

VRT

npm run reference.dark npm run reference.light npm run test.dark npm run test.light