{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/global-style-upgrading-to-v28/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With the release of v28, we have ported our grid layout system to use CSS variables. v27 and below used Sass. The key benefits are:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Much easier to perform simple modifications to themes such as "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/global-style-customisation-compactness/"},"children":[{"type":"text","value":"changing the compactness"}]},{"type":"text","value":" - projects that previously had to integrate a Sass compiler in order to make simple changes to our provided themes can now do so with a few lines of CSS."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Reduced CSS download size for apps using multiple themes - apps with a light and dark version of the same theme will see a 50% reduction."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Projects using Sass are still fully supported with our new Sass API that is largely backwards-compatible with the old one and provides better performance and validation."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to ease the upgrade to v28, we have continued to include the legacy Sass API and CSS stylesheets at their old file paths. They will be removed in v29."}]},{"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":"If you upgrade an app from v27 to v29+ without changing the import paths for CSS and Sass (.scss) files then the paths will be invalid and the themes won't work."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We recommend that all users upgrade to the new styles."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See the instructions "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/global-style-upgrading-to-v28-css/"},"children":[{"type":"text","value":"for CSS users"}]},{"type":"text","value":" and the instructions "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/global-style-upgrading-to-v28-sass/"},"children":[{"type":"text","value":"for Sass users"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Upgrading Styles to v28+","version":null,"enterprise":null,"description":null},"headings":[]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/global-style-upgrading-to-v28","pageName":"global-style-upgrading-to-v28"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}