{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/global-style-customisation-sass-legacy/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In v28, the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/global-style-customisation-sass"},"children":[{"type":"text","value":"Sass Styling API"}]},{"type":"text","value":" was introduced as the preferred way for Sass users to control themes and design customisations. The Legacy Sass API is deprecated and will be removed from the Grid in a future major release."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note","warning"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This page describes the Legacy Sass API. New applications should not use it. This page is for applications that have not yet upgraded to the new Sass API, and need to make changes to code using the Legacy API."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"loading-the-legacy-sass-api","style":"position:relative;"},"children":[{"type":"text","value":"Loading the Legacy Sass API"},{"type":"element","tagName":"a","properties":{"href":"#loading-the-legacy-sass-api","ariaLabel":"loading the legacy sass api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to opt in to the Legacy Sass API, set your project up to compile Sass and then use the legacy paths when importing the grid Sass files:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" the structural styles from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community/src/styles/ag-grid.scss"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" the theme mixin from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community/src/styles/ag-theme-{themename}/sass/ag-theme-{themename}-mixin.scss"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Both stylesheets need to be included with the structural styles ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid.css"}]},{"type":"text","value":") loaded before theme styles ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-{theme-name}.css"}]},{"type":"text","value":")."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's up to you how to integrate Sass into your project build, but we like to use webpack, since it provides various loaders that optimise and reduce the final size of the bundle. We provide a "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/ag-grid/ag-grid-customise-theme/tree/master/src/legacy/vanilla"},"children":[{"type":"text","value":"general webpack example"}]},{"type":"text","value":" appropriate for Vanilla JS and React projects, and an "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/ag-grid/ag-grid-customise-theme/tree/master/src/legacy/angular"},"children":[{"type":"text","value":"angular example"}]},{"type":"text","value":" using Angular CLI."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"loading-the-roboto-font-for-material-theme","style":"position:relative;"},"children":[{"type":"text","value":"Loading the Roboto font for Material theme"},{"type":"element","tagName":"a","properties":{"href":"#loading-the-roboto-font-for-material-theme","ariaLabel":"loading the roboto font for material theme permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Material theme requires the Roboto font, and this is not bundled in the material CSS. The easiest way to load Roboto is through Google's CDN:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"link"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"href"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"https://fonts.googleapis.com/css?family=Roboto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"rel"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"stylesheet"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"myGrid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"ag-theme-material"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"</"}]},{"type":"text","value":"div"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"using-the-legacy-sass-api","style":"position:relative;"},"children":[{"type":"text","value":"Using the Legacy Sass API"},{"type":"element","tagName":"a","properties":{"href":"#using-the-legacy-sass-api","ariaLabel":"using the legacy sass api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After importing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/src/styles/ag-grid.scss\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ the name of your theme here."}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ call the mixin provided by the theme you're extending"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" deeppink\n        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ pass theme parameters"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// or write CSS selectors to make customisations beyond what the parameters support"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note how this example includes the structural styles ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-gris.scss"}]},{"type":"text","value":") before the theme mixin. Doing this means that both structural and theme styles will be included in the compiled CSS file. Alternatively, you could leave out the first "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" and then embed the structural stylesheet separately in your HTML page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"legacy-sass-api-parameters","style":"position:relative;"},"children":[{"type":"text","value":"Legacy Sass API Parameters"},{"type":"element","tagName":"a","properties":{"href":"#legacy-sass-api-parameters","ariaLabel":"legacy sass api parameters permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Theme Parameters are arguments to a theme that change its appearance. Some parameters have effects that would be very hard to achieve using CSS rules. Parameters can be set through the Sass API, and colour parameters can additionally be set with CSS variables."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here are some of the most important theme parameters. There is a "},{"type":"element","tagName":"a","properties":{"href":"#base-theme-parameters"},"children":[{"type":"text","value":"full list"}]},{"type":"text","value":" further down this page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"grid-size"}]},{"type":"text","value":" is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"borders"}]},{"type":"text","value":" controls whether borders are drawn around the grid. There are more "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"border-*"}]},{"type":"text","value":" parameters to provide fine-grained control over which borders are drawn and their colour."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"row-height"}]},{"type":"text","value":" height in pixels of a grid row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"header-height"}]},{"type":"text","value":" height in pixels of a header row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"background-color"}]},{"type":"text","value":" set the text colour and background colour for the grid - there are more colour parameters available for more fine-grained control over the colour scheme."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The provided themes have theme-specific parameters to set the colour of many elements at once. These are shortcuts for setting several other parameters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"text","value":" (Alpine only) sets the colour of checked checkboxes, range selections, row selections, selected tab underlines, and input focus outlines."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"balham-active-color"}]},{"type":"text","value":" (Balham only) sets the colour of checked checkboxes, range selections, row selections, and input focus outlines."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"material-primary-color"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"material-accent-color"}]},{"type":"text","value":" (Material only) set the colours used for the primary and accent colour roles specified in the "},{"type":"element","tagName":"a","properties":{"href":"https://material.io/design/color/"},"children":[{"type":"text","value":"Material Design colour system"}]},{"type":"text","value":". Currently primary colour is used for buttons, range selections, selected tab underlines and input focus underlines, and accent colour is used for checked checkboxes."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"customising-row-and-header-heights","style":"position:relative;"},"children":[{"type":"text","value":"Customising row and header heights"},{"type":"element","tagName":"a","properties":{"href":"#customising-row-and-header-heights","ariaLabel":"customising row and header heights permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid uses "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/dom-virtualisation/"},"children":[{"type":"text","value":"DOM virtualisation"}]},{"type":"text","value":" for rendering large amounts of data,\nwhich means that it needs to know the size of various elements like columns and grid rows in order to calculate their\nlayout. The grid uses several strategies to work out the right size:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Firstly, the grid will attempt to measure the size of an element. This works when styles have loaded, but will not work if the grid initialises before the theme loads. Our "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/ag-grid/ag-grid-customise-theme/tree/master/src/legacy/vanilla/grid.js"},"children":[{"type":"text","value":"theme customisation examples"}]},{"type":"text","value":" demonstrate how to wait for CSS to load before initialising the grid (see the cssHasLoaded function)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If CSS has not loaded and one of the provided themes is in use, the grid contains hard-coded fallback values for these themes. For this reason we recommend that if you are extending a provided theme like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"text","value":" and have not changed the row and header heights, you keep the same theme name so that the grid knows what fallback sizes to apply."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If neither of the above methods will work for your app (you do not want to delay app initialisation until after CSS has loaded, and are not using a provided theme with heights unchanged) then you should inform the grid about your custom element heights using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/grid-options/"},"children":[{"type":"text","value":"grid properties"}]},{"type":"text","value":". The minimal set of properties you need to set to ensure correct functioning are: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowHeight"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerHeight"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"setting-colour-parameters-using-css-variables","style":"position:relative;"},"children":[{"type":"text","value":"Setting colour parameters using CSS variables"},{"type":"element","tagName":"a","properties":{"href":"#setting-colour-parameters-using-css-variables","ariaLabel":"setting colour parameters using css variables permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using the Legacy Sass API means that only color parameters can be overridden using CSS variables, instead of the full set of variables supported when using CSS themes or the new Sass Styling API.."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS variables (officially known to as \"CSS Custom Properties\") allow a named property to be set in one place and used in many places. Any parameter whose name ends with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"-color"}]},{"type":"text","value":" is available as a CSS variable with the prefix "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-"}]},{"type":"text","value":". For example the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":" parameter can be set as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* use theme parameters where possible */"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--ag-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" deeppink"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your app already defines a colour scheme using CSS variables and you want to use those existing variable names rather than the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-{parameter-name}"}]},{"type":"text","value":"\nprovided by the grid, you can do this by passing a css "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"var()"}]},{"type":"text","value":" value to a theme parameter in Sass. For example, if your application defines a CSS variable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--appMainTextColor"}]},{"type":"text","value":" and you want to set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":" parameter at runtime using this variable, you can do so like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--appMainTextColor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will cause the text in grid cells to be set at runtime to the value of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--myDataColorVar"}]},{"type":"text","value":". If both a custom variable ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--myDataColorVar"}]},{"type":"text","value":")\nand a built in variable ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-foreground-color"}]},{"type":"text","value":") are set at runtime, the built in variable will take priority. If you don't want this to happen then you\ncan disable built in variables for your theme by setting the parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppress-css-var-overrides: false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We have created an example that demonstrates both methods of CSS variable use in our\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/ag-grid/ag-grid-customise-theme/tree/master/src/legacy/vanilla-css-variables"},"children":[{"type":"text","value":"theme examples GitHub repo"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"customising-themes-using-css-rules","style":"position:relative;"},"children":[{"type":"text","value":"Customising themes using CSS rules"},{"type":"element","tagName":"a","properties":{"href":"#customising-themes-using-css-rules","ariaLabel":"customising themes using css rules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Whether you're using Sass or CSS variables to set theme parameters, you will find that some design effects can't be achieved through\nparameters alone. For example, there is no parameter to set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"font-style: italic"}]},{"type":"text","value":" on header cells. If you want your column headers to be italic, use regular CSS:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine .ag-header-cell-label"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is important to include the name of the theme in the rule: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".ag-theme-alpine .ag-header-cell-label { ... }"}]},{"type":"text","value":".\nWithout the theme name, your styles will not override the theme's built-in styles due to CSS selector specificity rules."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The best way to find the right class name to use in a CSS rule is using the browser's developer tools. You will notice that components often have multiple class names, some more general than others. For example, the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/tool-panel-columns/#column-tool-panel-example"},"children":[{"type":"text","value":"row grouping panel"}]},{"type":"text","value":" is a component onto which you can drag columns to group them. The internal name for this is the \"column drop\" component, and there are two kinds - a horizontal one at the top of the header and a vertical one in the columns tool panel. You can use the class name "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-column-drop"}]},{"type":"text","value":" to target either kind, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-column-drop-vertical"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-column-drop-horizontal"}]},{"type":"text","value":" to target one only."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"referencing-parameter-values-in-css-rules","style":"position:relative;"},"children":[{"type":"text","value":"Referencing parameter values in CSS rules"},{"type":"element","tagName":"a","properties":{"href":"#referencing-parameter-values-in-css-rules","ariaLabel":"referencing parameter values in css rules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're using Sass, you can reference theme parameters in your own CSS rules using the "},{"type":"element","tagName":"a","properties":{"href":"#ag-param"},"children":[{"type":"text","value":"ag-param function"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"#ag-color-property"},"children":[{"type":"text","value":"ag-color-property mixin"}]},{"type":"text","value":". These will be replaced at compile time with the value of the parameter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"understanding-css-rule-maintenance-and-breaking-changes","style":"position:relative;"},"children":[{"type":"text","value":"Understanding CSS rule maintenance and breaking changes"},{"type":"element","tagName":"a","properties":{"href":"#understanding-css-rule-maintenance-and-breaking-changes","ariaLabel":"understanding css rule maintenance and breaking changes permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With each release of the grid we add features and improve existing ones, and as a result the DOM structure changes with every release - even minor and patch releases. Of course we test and update the CSS rules in our themes to make sure they still work, and this includes ensuring that\ncustomisations made via theme parameters does not break between releases. But if you have written your own CSS rules, you will need to test and update them."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The simpler your CSS rules are, the less likely they are to break between releases. Prefer selectors that target a single class name where possible."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"avoiding-breaking-the-grid-with-css-rules","style":"position:relative;"},"children":[{"type":"text","value":"Avoiding breaking the grid with CSS rules"},{"type":"element","tagName":"a","properties":{"href":"#avoiding-breaking-the-grid-with-css-rules","ariaLabel":"avoiding breaking the grid with css rules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Browsers use the same mechanism - CSS - for controlling how elements work (e.g. scrolling and whether they respond to mouse events), where elements appear, and how elements look. Our \"structural stylesheet\" (ag-grid.scss) sets CSS rules that control how the grid works, and the code depends on those rules not being overridden. There is nothing that we can do to prevent themes overriding critical rules, so as a theme author you need to be careful not to break the grid. Here's a guide:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Visual styles including margins, paddings, sizes, colours, fonts, borders etc are all fine to change in a theme."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Setting a component to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"display: flex"}]},{"type":"text","value":" and changing flex child layout properties like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"align-items"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"align-self"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex-direction"}]},{"type":"text","value":" is probably OK if you're trying to change how something looks on a small scale, e.g. to change the align of some text or icons within a container; but if you're trying to change the layout of the grid on a larger scale e.g.  turning a vertical scrolling list into a horizontal one, you are likely to break Grid features."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The style properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"overflow"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pointer-events"}]},{"type":"text","value":" are intrinsic to how the grid works. Changing these values will change how the grid operates, and may break functionality now or in future minor releases."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"full-list-of-theme-parameters","style":"position:relative;"},"children":[{"type":"text","value":"Full list of theme parameters"},{"type":"element","tagName":"a","properties":{"href":"#full-list-of-theme-parameters","ariaLabel":"full list of theme parameters permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here is a list of parameters accepted by the base theme and all themes that extend it, including our provided\nthemes Alpine, Balham and Material."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default values in this list demonstrate the kind of value that is expected (a colour, pixel value, percentage value etc) but bear in mind that if you are using a provided theme then the theme will have changed most of the default values - you can\nfind the default values for your theme by inspecting its source code in the grid distribution - look for a file called "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"_ag-theme-{theme-name}-default-params.scss"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that some values are defined relative to other values using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-derived"}]},{"type":"text","value":" helper function, so\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data-color: ag-derived(foreground-color)"}]},{"type":"text","value":" means that if you don't set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data-color"}]},{"type":"text","value":" property it\nwill default to the value of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":". See the "},{"type":"element","tagName":"a","properties":{"href":"#ag-derived"},"children":[{"type":"text","value":"ag-derived docs"}]},{"type":"text","value":" for more information."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour of text and icons in primary UI elements like menus"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour of text in grid cells"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"data-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"secondary-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour of text and icons in the header"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"secondary-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Color of elements that can't be interacted with because they are in a disabled state"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"disabled-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour of the grid"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour for all headers, including the grid header, panels etc"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour for second level headings within UI components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"subheader-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour for toolbars directly under subheadings (as used in the chart settings menu)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"subheader-toolbar-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"control-panel-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background color of selected rows in the grid and in dropdown menus"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"selected-row-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$mix"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" foreground-color 25%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour applied to every other row or null to use background-color for all rows"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"odd-row-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background color of the overlay shown over the grid when it is covered by an overlay, e.g. a data loading indicator."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"modal-overlay-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.66"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background color when hovering over rows in the grid and in dropdown menus, or null for no rollover effect (note - if you want a rollover on one but not the other, set to null and use CSS to achieve the rollover)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"row-hover-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background color when hovering over columns"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"column-hover-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Color to draw around selected cell ranges"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour of selected cell ranges. By default, setting this to a semi-transparent color (opacity of 0.1 to 0.5 works well) will generate appropriate values for the range-selection-background-color-{1..4} colours used when multiple ranges overlap."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// NOTE: if setting this value to a CSS variable, and your app supports overlapping range selections, also set range-selection-background-color-{1..4}."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// These 4 parameters are used for fine-grained control over the background color used when 1, 2, 3 or 4 ranges overlap."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-background-color-1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-background-color-2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$self-overlay"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-background-color-3"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$self-overlay"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-background-color-4"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$self-overlay"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 4"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour to apply to a cell range when it is copied from or pasted into"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-highlight-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour and thickness of the border drawn under selected tabs, including menus and tool panels"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"selected-tab-underline-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"range-selection-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"selected-tab-underline-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"selected-tab-underline-transition-speed"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour for cells that provide categories to the current range chart"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-chart-category-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"#00FF84"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Background colour for cells that provide data to the current range chart"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"range-selection-chart-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"#0058FF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Rollover colour for header cells"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-cell-hover-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour applied to header cells when the column is being dragged to a new position"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-cell-moving-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"header-cell-hover-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour to apply when a cell value changes and enableCellChangeFlash is enabled"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"value-change-value-highlight-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"#16A085"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colours to apply when a value increases or decreases in an agAnimateShowChangeCellRenderer cell"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"value-change-delta-up-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #43a047"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"value-change-delta-down-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #e53935"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour for the \"chip\" that repersents a column that has been dragged onto a drop zone"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"chip-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// By default, color variables can be overridden at runtime by CSS variables, e.g."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// background-color can be overridden with the CSS var --ag-background-color. Pass true"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// to disable this behaviour."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"suppress-css-var-overrides"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// BORDERS"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Draw borders around most UI elements"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"borders"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Draw the few borders that are critical to UX, e.g. between headers and rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"borders-critical"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"borders"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Draw decorative borders separating UI elements within components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"borders-secondary"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"borders"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Draw borders around sidebar tabs so that the active tab appears connected to the current tool panel"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"borders-side-button"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"borders"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"side-bar-panel-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 200px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour for border around major UI components like the grid itself, headers, footers and tool panels"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$mix"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" foreground-color 25%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour for borders used to separate elements within a major UI component"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"secondary-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Colour of the border between grid rows, or null to display no border"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"row-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"secondary-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cell-horizontal-border"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" solid transparent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Separator between columns in the header. Displays between all header cells For best UX, use either this or header-column-resize-handle but not both"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-separator"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-separator-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-separator-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-separator-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Visible marker for resizeable columns. Displays in the same position as the column separator, but only when the column is resizeable. For best UX, use either this or header-column-separator but not both"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-resize-handle"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-resize-handle-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-resize-handle-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-column-resize-handle-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// INPUTS"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Suppress styling of checkbox/radio/range input elements. If you want to style these yourself, set this to true. If you only want to disable styling for some kinds of input, you can set this to true and e.g. @include ag-native-inputs((checkbox: false)) which will emit styles for all kinds of input except checkboxes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"suppress-native-widget-styling"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"input-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"input-disabled-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"input-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"input-disabled-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"checkbox-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"checkbox-border-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"border-radius"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"checkbox-checked-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"checkbox-unchecked-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"checkbox-indeterminate-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-unchecked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-off-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-unchecked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-off-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-unchecked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-on-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-checked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-on-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-checked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-switch-background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-switch-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"toggle-button-off-border-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-border-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"icon-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"toggle-button-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"toggle-button-height"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"input-focus-box-shadow"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"input-focus-border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// CHART SETTINGS"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Color of border around selected chart style"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"minichart-selected-chart-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-checked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Color of dot representing selected page of chart styles"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"minichart-selected-page-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"checkbox-checked-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// SIZING / PADDING / SPACING"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// grid-size is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 4px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// The size of square icons and icon-buttons"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"icon-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 12px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// These 4 variables set the padding around and spacing between widgets in \"widget containers\" which are parts of the UI that contain many related widgets, like the set filter menu, charts settings tabs etc."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"widget-container-horizontal-padding"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"widget-container-vertical-padding"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"widget-horizontal-spacing"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"widget-vertical-spacing"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cell-horizontal-padding"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cell-widget-spacing"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"cell-horizontal-padding"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Height of grid rows"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"row-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 6"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$plus"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Height of header rows"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"row-height"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Height of items in lists (example of lists are dropdown select inputs and column menu set filters)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"list-item-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$times"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// How much to indent child columns in the column tool panel relative to their parent"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"column-select-indent-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$plus"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" icon-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// How much to indent child filter items in the Set Filter List relative to their parent"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"set-filter-indent-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"grid-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$plus"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" icon-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// How much to indent child rows in the grid relative to their parent row"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"row-group-indent-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"cell-widget-spacing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$plus"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" icon-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// How much to indent child columns in the filters tool panel relative to their parent"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"filter-tool-panel-group-indent"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 16px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Cause tabs to stretch across the full width of the tab panel header"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"full-width-tabs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Fonts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-family"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Helvetica Neue\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sans-serif"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 14px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// The name of the font family you're using"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"icon-font-family"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$ag-theme-base-icon-font-family"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// this var exported by ag-theme-base-font-vars.scss"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// A URI (data: URI or web URL) to load the icon font from. NOTE: if your icon font is already loaded in the app's HTML page, set this to null to avoid embedding unnecessry font data in the compiled theme."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"icons-data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$ag-theme-base-icons-data"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"             "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// this var exported by ag-theme-base-font-vars.scss"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"icons-font-codes"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$ag-theme-base-icons-font-codes"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// this var exported by ag-theme-base-font-vars.scss"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// cards are elements that float above the UI"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"card-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"border-radius"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// the default card shadow applies to simple cards like column drag indicators and text editors"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"card-shadow"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" none"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// override the shadow for popups - cards that contain complex UI, like menus and charts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"popup-shadow"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px 5px 10px "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"parameter-cascading","style":"position:relative;"},"children":[{"type":"text","value":"Parameter cascading"},{"type":"element","tagName":"a","properties":{"href":"#parameter-cascading","ariaLabel":"parameter cascading permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A parameter cascade is when one parameter defaults to another, which may itself default to a different parameter. In this way we can have very general purpose parameters like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":" which changes the colour of all text in the grid, and more specific parameters like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data-color"}]},{"type":"text","value":" which only change the colour of text in grid cells. Consider the following parameters, all of which derive their value directly or indirectly from the foreground colour:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"data-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"secondary-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"header-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"secondary-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"disabled-foreground-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note how "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"disabled-foreground-color"}]},{"type":"text","value":" alters the opacity of the default foreground colour, so setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color"}]},{"type":"text","value":"\nto red ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"#FF0000"}]},{"type":"text","value":") will automatically generate a semi-transparent red ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rgba(255,0,0,0.5)"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"parameter-cascading-and-css-variables","style":"position:relative;"},"children":[{"type":"text","value":"Parameter cascading and CSS variables"},{"type":"element","tagName":"a","properties":{"href":"#parameter-cascading-and-css-variables","ariaLabel":"parameter cascading and css variables permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There is a limitation of parameter cascading when used in combination with CSS variables. Sometimes, one parameter in the cascade alters the\nvalue of the parameter that it derives from, as in the case of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"disabled-foreground-color"}]},{"type":"text","value":" above. This requires the value to be\nknown at compile time, and it is not possible to achieve this effect at runtime using CSS variables."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are setting parameters using the built in CSS variables, defining "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-foreground-color: red"}]},{"type":"text","value":"\nwill not automatically set the disabled foreground colour to semi-transparent red - if you want this effect, you must explicitly define "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-disabled-foreground-color: rgba(255,0,0,0.5)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are passing CSS custom property values to colour parameters, e.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"foreground-color: var(--myForegroundColor, red)"}]},{"type":"text","value":"\nthen again it will not be possible to automatically calculate the disabled foreground colour, and you will need to specify a value e.g.\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"disabled-foreground-color: var(--myDisabledForegroundColor, rgba(255,0,0,0.5))"}]},{"type":"text","value":". In this case there will be a warning emitted\nby the Sass build process describing the issue."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"sass-mixins-and-functions","style":"position:relative;"},"children":[{"type":"text","value":"Sass mixins and functions"},{"type":"element","tagName":"a","properties":{"href":"#sass-mixins-and-functions","ariaLabel":"sass mixins and functions permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following theme functions and mixins are available if you are include a theme mixin file like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-alpine-mixin.scss"}]},{"type":"text","value":", or can be used in isolation\nby importing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"styles/mixins/_ag-theme-params.scss"}]},{"type":"text","value":" from the grid distribution."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"function-ag-param","style":"position:relative;"},"children":[{"type":"text","value":"@function ag-param"},{"type":"element","tagName":"a","properties":{"href":"#function-ag-param","ariaLabel":"function ag param permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're using Sass, you can write CSS rules that reference the value of a theme parameter. For example, this rule would invert\nthe foreground and background colours in the header:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"ag-param simply returns the correct value into the emitted CSS, it does not add any support for CSS variables. The above example emits the following CSS:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"mixin-ag-color-property","style":"position:relative;"},"children":[{"type":"text","value":"@mixin ag-color-property"},{"type":"element","tagName":"a","properties":{"href":"#mixin-ag-color-property","ariaLabel":"mixin ag color property permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-color-property"}]},{"type":"text","value":" mixin takes 3 arguments: a CSS property name, a parameter name, and an optional boolean indicating whether the rule\nshould be marked as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"!important"}]},{"type":"text","value":". Like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-param"}]},{"type":"text","value":" it can be used to reference the value of a parameter, but it additionally adds\nsupport for CSS variables."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","atrule"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","rule"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-color-property"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","atrule"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","rule"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-color-property"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here is the CSS emitted by the above code:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--ag-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" #000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--ag-background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" #fff"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each rule is emitted twice, the first rule ensures that the default colour is visible in older browsers that do not support CSS variables."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"function-ag-derived","style":"position:relative;"},"children":[{"type":"text","value":"@function ag-derived"},{"type":"element","tagName":"a","properties":{"href":"#function-ag-derived","ariaLabel":"function ag derived permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As the user of a theme you do not need to write code including the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-derived"}]},{"type":"text","value":" function, but it's still useful to know about it so that you can understand your theme's default parameters. Our provided themes make extensive use of this function to implement "},{"type":"element","tagName":"a","properties":{"href":"#parameter-cascading"},"children":[{"type":"text","value":"parameter cascading"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're writing a theme that is intended to be extended and used by other developers, you may use this function to implement your own parameter cascades."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Parent themes define a Sass map of supported parameter names and their default values, which can optionally be overridden by child themes by passing params to the parent theme mixin:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$my-theme-default-params"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"animal-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cat-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"animal-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The theme can then use the parameters in CSS rules:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".cat "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// outputs the value passed to \"cat-color\", or \"red\" if"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// no \"cat-color\" parameter was supplied"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"cat-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-derived"}]},{"type":"text","value":" function supports modifiers - named arguments that can be used to modify the value of the parameter being derived from. In this case, if the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cat-color"}]},{"type":"text","value":" parameter is not overridden, it will default to a semitransparent version of animal-color:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$my-theme-default-params"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"animal-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cat-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"animal-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of passing a value to a modifier, it is also possible to pass a parameter name. In this case, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cat-color"}]},{"type":"text","value":" parameter defaults to a semitransparent version of animal-color with the exact amount of opacity depending on the value of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cat-opacity"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$my-theme-default-params"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"animal-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cat-opacity"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 0.5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"cat-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-derived"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"animal-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","variable"]},"children":[{"type":"text","value":"$opacity"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cat-opacity"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following modifiers are available:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Available for numeric parameters:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$times: number"}]},{"type":"text","value":" - equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$value * $number"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$divide: number"}]},{"type":"text","value":" - equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$value / $number"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$plus: number"}]},{"type":"text","value":" - equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$value + $number"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$minus: number"}]},{"type":"text","value":" - equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$value - $number"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Available for colour parameters:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$opacity: percentage"}]},{"type":"text","value":" - amount should be from 0 to 1, equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rgba($value, $amount)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$mix: color percentage"}]},{"type":"text","value":" - mixes in an amount of another colour, e.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$mix: red 10%"}]},{"type":"text","value":" produce a colour made from 90% the parameter value and 10% red."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$lighten: percentage"}]},{"type":"text","value":" - amount should be a percentage from 0% to 100%, equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lighten($value, $amount)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$darken: percentage"}]},{"type":"text","value":" - amount should be a percentage from 0% to 100%, equivalent to Sass "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"darken($value, $amount)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$self-overlay: times"}]},{"type":"text","value":" - takes a semi-transparent colour and overlays it on top of itself multiple times. For example, if the value of the parameter is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rgba(0, 0, 0, 0.5)"}]},{"type":"text","value":" then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$self-overlay: 2"}]},{"type":"text","value":" will produce "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rgba(0, 0, 0, 0.75)"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Legacy Sass API","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"loading-the-legacy-sass-api","depth":2,"value":"Loading the Legacy Sass API"},{"id":"loading-the-roboto-font-for-material-theme","depth":3,"value":"Loading the Roboto font for Material theme"},{"id":"using-the-legacy-sass-api","depth":2,"value":"Using the Legacy Sass API"},{"id":"legacy-sass-api-parameters","depth":2,"value":"Legacy Sass API Parameters"},{"id":"customising-row-and-header-heights","depth":3,"value":"Customising row and header heights"},{"id":"setting-colour-parameters-using-css-variables","depth":2,"value":"Setting colour parameters using CSS variables"},{"id":"customising-themes-using-css-rules","depth":2,"value":"Customising themes using CSS rules"},{"id":"referencing-parameter-values-in-css-rules","depth":3,"value":"Referencing parameter values in CSS rules"},{"id":"understanding-css-rule-maintenance-and-breaking-changes","depth":3,"value":"Understanding CSS rule maintenance and breaking changes"},{"id":"avoiding-breaking-the-grid-with-css-rules","depth":3,"value":"Avoiding breaking the grid with CSS rules"},{"id":"full-list-of-theme-parameters","depth":2,"value":"Full list of theme parameters"},{"id":"parameter-cascading","depth":2,"value":"Parameter cascading"},{"id":"parameter-cascading-and-css-variables","depth":3,"value":"Parameter cascading and CSS variables"},{"id":"sass-mixins-and-functions","depth":2,"value":"Sass mixins and functions"},{"id":"function-ag-param","depth":3,"value":"@function ag-param"},{"id":"mixin-ag-color-property","depth":3,"value":"@mixin ag-color-property"},{"id":"function-ag-derived","depth":3,"value":"@function ag-derived"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/global-style-customisation-sass-legacy","pageName":"global-style-customisation-sass-legacy"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}