diff --git a/browser/package-lock.json b/browser/package-lock.json index 39f3b03683..39ae745c05 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -32,6 +32,7 @@ "igniteui-react-maps": "19.3.1", "igniteui-react-spreadsheet": "19.3.1", "igniteui-react-spreadsheet-chart-adapter": "19.3.1", + "igniteui-theming": "^24.0.2", "igniteui-webcomponents": "^6.3.0", "lit-html": "^3.2.0", "marked": "^16.4.1", @@ -88,6 +89,7 @@ "remark": "^14.0.2", "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", + "sass-embedded": "^1.84.0", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", @@ -526,6 +528,13 @@ "node": ">=6.9.0" } }, + "node_modules/@bufbuild/protobuf": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.1.tgz", + "integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==", + "dev": true, + "license": "(Apache-2.0 AND BSD-3-Clause)" + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -1274,6 +1283,316 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz", + "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.1", + "@parcel/watcher-darwin-arm64": "2.5.1", + "@parcel/watcher-darwin-x64": "2.5.1", + "@parcel/watcher-freebsd-x64": "2.5.1", + "@parcel/watcher-linux-arm-glibc": "2.5.1", + "@parcel/watcher-linux-arm-musl": "2.5.1", + "@parcel/watcher-linux-arm64-glibc": "2.5.1", + "@parcel/watcher-linux-arm64-musl": "2.5.1", + "@parcel/watcher-linux-x64-glibc": "2.5.1", + "@parcel/watcher-linux-x64-musl": "2.5.1", + "@parcel/watcher-win32-arm64": "2.5.1", + "@parcel/watcher-win32-ia32": "2.5.1", + "@parcel/watcher-win32-x64": "2.5.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", + "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", + "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", + "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", + "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", + "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", + "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", + "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", + "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", + "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", + "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", + "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", + "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", + "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@polka/url": { "version": "1.0.0-next.29", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz", @@ -3731,6 +4050,13 @@ "integrity": "sha512-BXvDkqhDNxXEjeGM8LFkSbR+jzmP/CYpCiVKYn+soB1dDldeU15EBNDkwVXndKuX35wnNUaPd0qSoQEAkmQtMw==", "dev": true }, + "node_modules/buffer-builder": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", + "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", + "dev": true, + "license": "MIT/X11" + }, "node_modules/buffer-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.1.tgz", @@ -4164,6 +4490,13 @@ "color-support": "bin.js" } }, + "node_modules/colorjs.io": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", + "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", + "dev": true, + "license": "MIT" + }, "node_modules/comma-separated-tokens": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", @@ -4644,6 +4977,20 @@ "node": ">=0.10.0" } }, + "node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/detect-port-alt": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", @@ -8249,6 +8596,12 @@ "igniteui-react-spreadsheet": "19.3.1" } }, + "node_modules/igniteui-theming": { + "version": "24.0.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.0.2.tgz", + "integrity": "sha512-ZDiL4NxatT84AzwOeFavld8ygz1C13OE/Szn+PsM8GiHYgijyLk9GRzTuF8Mof7ChYEKZK53JF46SLGLjkzebw==", + "license": "MIT" + }, "node_modules/igniteui-trial-watermark": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/igniteui-trial-watermark/-/igniteui-trial-watermark-1.0.3.tgz", @@ -10929,6 +11282,14 @@ "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==", "dev": true }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/node-releases": { "version": "2.0.27", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", @@ -13001,6 +13362,16 @@ "integrity": "sha512-CiaiuN6gapkdl+cZUr67W6I8jquN4lkak3vtIsIWCl4XIPP8ffsoyN6/+PuGXnQy8Cu8W2y9Xxh31Rq4M6wUug==", "dev": true }, + "node_modules/rxjs": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", + "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/sade": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", @@ -13112,13 +13483,447 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "node_modules/scheduler": { - "version": "0.27.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", - "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==" - }, - "node_modules/schema-utils": { - "version": "2.7.0", + "node_modules/sass": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz", + "integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.0.2", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass-embedded": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.96.0.tgz", + "integrity": "sha512-z9PQ7owvdhn7UuZGrpPccdkcH9xJd9iCv+UQhcPqppBslYEp0R9LRQVyyPTZg7jfA77bGxz/I8V48LXJR5LjXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@bufbuild/protobuf": "^2.5.0", + "buffer-builder": "^0.2.0", + "colorjs.io": "^0.5.0", + "immutable": "^5.0.2", + "rxjs": "^7.4.0", + "supports-color": "^8.1.1", + "sync-child-process": "^1.0.2", + "varint": "^6.0.0" + }, + "bin": { + "sass": "dist/bin/sass.js" + }, + "engines": { + "node": ">=16.0.0" + }, + "optionalDependencies": { + "sass-embedded-all-unknown": "1.96.0", + "sass-embedded-android-arm": "1.96.0", + "sass-embedded-android-arm64": "1.96.0", + "sass-embedded-android-riscv64": "1.96.0", + "sass-embedded-android-x64": "1.96.0", + "sass-embedded-darwin-arm64": "1.96.0", + "sass-embedded-darwin-x64": "1.96.0", + "sass-embedded-linux-arm": "1.96.0", + "sass-embedded-linux-arm64": "1.96.0", + "sass-embedded-linux-musl-arm": "1.96.0", + "sass-embedded-linux-musl-arm64": "1.96.0", + "sass-embedded-linux-musl-riscv64": "1.96.0", + "sass-embedded-linux-musl-x64": "1.96.0", + "sass-embedded-linux-riscv64": "1.96.0", + "sass-embedded-linux-x64": "1.96.0", + "sass-embedded-unknown-all": "1.96.0", + "sass-embedded-win32-arm64": "1.96.0", + "sass-embedded-win32-x64": "1.96.0" + } + }, + "node_modules/sass-embedded-all-unknown": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.96.0.tgz", + "integrity": "sha512-UfUHoWZtxmsDjDfK+fKCy0aJe6zThu7oaIQx0c/vnHgvprcddEPIay01qTXhiUa3cFcsMmvlBvPTVw0gjKVtVQ==", + "cpu": [ + "!arm", + "!arm64", + "!riscv64", + "!x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "sass": "1.96.0" + } + }, + "node_modules/sass-embedded-android-arm": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.96.0.tgz", + "integrity": "sha512-0mwVRBFig9hH8vFcRExBuBoR+CfUOcWdwarZwbxIFGI1IyH4BLBGiX85vVn6ssSCVNydpE6lFGm45CN8O0tQig==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-android-arm64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.96.0.tgz", + "integrity": "sha512-TJiebTo4TBF5Wrn+lFkUfSN3wazvl8kkFm9a1nA9ZtRdaE0nsJLGnMM6KLQLP2Vl+IOf6ovetZseISkClRoGXw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-android-riscv64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.96.0.tgz", + "integrity": "sha512-7AVu/EeJqKN3BGNhm+tc1XzmoqbOtCwHG2VgN6j6Lyqh1JZlx0dglRtyQuKDZ7odTKiWmotEIuYZ6OxLmr2Ejg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-android-x64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.96.0.tgz", + "integrity": "sha512-ei/UsT0q8rF5JzWhn1A7B0M1y/IiWVY3l4zibQrXk5MGaOXHlCM6ffZD+2j7C613Jm9/KAQ7yX1NIIu72LPgDQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-darwin-arm64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.96.0.tgz", + "integrity": "sha512-OMvN5NWcrrisC24ZR3GyaWJ1uFxw25qLnUkpEso9TSlaMWiomjU82/uQ/AkQvIMl+EMlJqeYLxZWvq/byLH5Xg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-darwin-x64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.96.0.tgz", + "integrity": "sha512-J/R5sv0eW+/DU98rccHPO1f3lsTFjVTpdkU9d3P1yB7BFmQjw5PYde9BVRlXeOawPwfgT3p/hvY4RELScICdww==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-arm": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.96.0.tgz", + "integrity": "sha512-XuQvV6gNld5Bz3rX0SFLtKPGMu4UQdXNp//9A+bDmtVGZ6yu8REIqphQBxOMpgkAKsA4JZLKKk1N97woeVsIlA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-arm64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.96.0.tgz", + "integrity": "sha512-VcbVjK0/O/mru0h0FC1WSUWIzMqRrzuJ8eZNMXTs4vApfkh28pxNaUodwU81f1L1nngJ3vpFDBniUKpW6NwJhw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-musl-arm": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.96.0.tgz", + "integrity": "sha512-qK7FrnczCVECZXtyYOoI3azFlMDZn70GI1yJPPuZLpWvwIPYoZOLv3u6JSec5o3wT6KeKyWG3ZpGIpigLUjPig==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-musl-arm64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.96.0.tgz", + "integrity": "sha512-lVyLObEeu8Wgw8riC6dSMlkF7jVNAjdZ1jIBhvX1yDsrQwwaI60pM21YXmnZSFyCE6KVFkKAgwRQNO/IkoCwMA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-musl-riscv64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.96.0.tgz", + "integrity": "sha512-Y+DuGVRsM2zGl268QN5aF/Y6OFYTILb3f+6huEXKlGL6FK2MXadsmeoVbmKVrTamQHzyA2bWWMU1C0jhVFtlzg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-musl-x64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.96.0.tgz", + "integrity": "sha512-sAQtUQ8fFNxnxSf3fncOh892Hfxa4PW4e5qrnSE0Y1IGV/wsTzk7m5Z6IeT7sa3BsvXh5TFN6+JGbUoOJ5RigA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-riscv64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.96.0.tgz", + "integrity": "sha512-Bf6bAjuUm6sfGHo0XoZEstjVkEWwmmtOSomGoPuAwXFS9GQnFcqDz9EXKNkZEOsQi2D+aDeDxs8HcU9/OLMT9g==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-linux-x64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.96.0.tgz", + "integrity": "sha512-U4GROkS0XM6ekqs/ubroWwFAGY9N35wqrt5q6Y+MJCpTK5bHPHlgFo7J75ZUSaEObL+UrDqvMDQkCdYEFiiQbg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-unknown-all": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.96.0.tgz", + "integrity": "sha512-OHzGEr2VElK2SaQdkkTX0O0KwTbiv1N/EhnHgzXYaZWOTvv0gxEfR7q7x/oScCBIZc2x8dSfvThfBnohIClo/w==", + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "!android", + "!darwin", + "!linux", + "!win32" + ], + "dependencies": { + "sass": "1.96.0" + } + }, + "node_modules/sass-embedded-win32-arm64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.96.0.tgz", + "integrity": "sha512-KKz1h5pr45fwrKcxrxHsujo3f/HgVkX64YNJ9PRPuOuX7lU8g18IEgDxoTGQ64PPBQ5RXOt6jxpT+x2OLPVnCw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded-win32-x64": { + "version": "1.96.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.96.0.tgz", + "integrity": "sha512-MDreKaWcgiyKD5YPShaRvUBoe5dC2y8IPJK49G7iQjoMfw9INDCBkDdLcz00Mn0eJq4nJJp5UEE98M6ljIrBRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-embedded/node_modules/immutable": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", + "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", + "dev": true, + "license": "MIT" + }, + "node_modules/sass-embedded/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/immutable": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", + "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", + "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==" + }, + "node_modules/schema-utils": { + "version": "2.7.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz", "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==", "dev": true, @@ -14450,6 +15255,29 @@ "es6-symbol": "^3.1.1" } }, + "node_modules/sync-child-process": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz", + "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "sync-message-port": "^1.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/sync-message-port": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz", + "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -15597,6 +16425,13 @@ "node": ">= 0.10" } }, + "node_modules/varint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", + "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", + "dev": true, + "license": "MIT" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/browser/package.json b/browser/package.json index eb8f135ed7..44a3ff2b87 100644 --- a/browser/package.json +++ b/browser/package.json @@ -27,6 +27,7 @@ "igniteui-grid-lite": "^0.0.1", "igniteui-react": "^19.4.0", "igniteui-react-charts": "19.3.1", + "igniteui-theming": "^24.0.2", "igniteui-react-core": "19.3.1", "igniteui-react-dashboards": "19.3.1", "igniteui-react-data-grids": "19.3.1", @@ -96,6 +97,7 @@ "remark": "^14.0.2", "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", + "sass-embedded": "^1.84.0", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", diff --git a/browser/vite.config.js b/browser/vite.config.js index 272f31b891..3ce3fdd697 100644 --- a/browser/vite.config.js +++ b/browser/vite.config.js @@ -30,6 +30,14 @@ export default defineConfig(({ mode }) => ({ 'jszip/dist/jszip' ], }, + css: { + preprocessorOptions: { + scss: { + includePaths: ['node_modules'], + loadPaths: [resolve(__dirname, 'node_modules')] + } + } + }, build: { outDir: 'build', commonjsOptions: { diff --git a/samples/grids/grid-lite/styling-config-themes/.eslintrc.js b/samples/grids/grid-lite/styling-config-themes/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/.eslintrc.js @@ -0,0 +1,78 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "no-mixed-spaces-and-tabs": 0, + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-var": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-mixed-spaces-and-tabs": 0, + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/grid-lite/styling-config-themes/ReadMe.md b/samples/grids/grid-lite/styling-config-themes/ReadMe.md new file mode 100644 index 0000000000..420c6cfed8 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling Config Themes feature using [Grid Lite](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/grids/grid-lite/styling-config-themes +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/grids/grid-lite/styling-config-themes/index.html b/samples/grids/grid-lite/styling-config-themes/index.html new file mode 100644 index 0000000000..272184ef96 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + diff --git a/samples/grids/grid-lite/styling-config-themes/package.json b/samples/grids/grid-lite/styling-config-themes/package.json new file mode 100644 index 0000000000..8c431949c5 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/package.json @@ -0,0 +1,49 @@ +{ + "name": "example-ignite-ui-react", + "description": "This project provides example of using Ignite UI for React components", + "author": "Infragistics", + "version": "1.4.0", + "license": "", + "homepage": ".", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-grid-lite": "^0.0.1", + "igniteui-react": "^19.4.0", + "igniteui-theming": "^24.0.2", + "igniteui-webcomponents": "^6.3.0", + "lit-html": "^3.2.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "eslint": "^8.33.0", + "sass": "^1.83.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/grid-lite/styling-config-themes/sandbox.config.json b/samples/grids/grid-lite/styling-config-themes/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts b/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts new file mode 100644 index 0000000000..4f1b40d1cd --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts @@ -0,0 +1,136 @@ +export type UserSimple = { + id: string; + username: string; + email: string; + subscribed: boolean; +}; + +export type ProductInfo = { + id: string; + name: string; + price: number; + sold: number; + rating: number; + total: number; +}; + +export type User = { + id: string; + firstName: string; + lastName: string; + age: number; + email: string; + avatar: string; + active: boolean; + priority: 'Low' | 'Standard' | 'High'; + satisfaction: number; + registeredAt: Date; +}; + +export class GridLiteDataService { + private counter = 0; + + private namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew']; + private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy']; + private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney']; + private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment']; + private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite']; + private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High']; + + private randomInt(min: number, max: number): number { + const array = new Uint32Array(1); + window.crypto.getRandomValues(array); + const random01 = array[0] / 2 ** 32; + return Math.floor(random01 * (max - min + 1)) + min; + } + + private randomFloat(min: number, max: number, precision = 2): number { + const array = new Uint32Array(1); + window.crypto.getRandomValues(array); + const random01 = array[0] / 2 ** 32; + return parseFloat((random01 * (max - min) + min).toFixed(precision)); + } + + private randomElement(array: T[]): T { + return array[this.randomInt(0, array.length - 1)]; + } + + private randomBoolean(): boolean { + const array = new Uint8Array(1); + window.crypto.getRandomValues(array); + return (array[0] & 1) === 0; + } + + private generateId(): string { + return `1000-${this.counter++}-${this.randomInt(1000, 9999)}`; + } + + createProductInfo(): ProductInfo { + const price = this.randomFloat(50, 500, 2); + const sold = this.randomInt(10, 100); + const total = parseFloat((price * sold).toFixed(2)); + const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels); + + return { + price, + sold, + total, + id: this.generateId(), + name: product, + rating: this.randomFloat(0, 5, 1) + }; + } + + createUserSimple(): UserSimple { + const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase(); + const lastName = this.randomElement(this.lastNames).toLowerCase(); + const email = firstName + '.' + lastName + '@example.com'; + const username = firstName + '.' + lastName + this.randomInt(1, 99); + return { + id: this.generateId(), + username: username, + email: email, + subscribed: this.randomBoolean() + }; + } + + createUser(): User { + let imagePath: string = ""; + let firstName: string = ""; + const gender = this.randomInt(0, 1); + if (gender === 0) { + imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesMen); + } else { + imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesWomen); + } + const lastName = this.randomElement(this.lastNames); + const email = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@example.com'; + + return { + id: this.generateId(), + firstName, + lastName, + age: this.randomInt(18, 90), + email, + avatar: imagePath, + active: this.randomBoolean(), + priority: this.randomElement(this.priorities), + satisfaction: this.randomInt(0, 5), + registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)) + }; + } + + generateUsers(count: number): User[] { + return Array.from({ length: count }, () => this.createUser()); + } + + generateProducts(count: number): ProductInfo[] { + return Array.from({ length: count }, () => this.createProductInfo()); + } + + generateSimpleUsers(count: number): UserSimple[] { + return Array.from({ length: count }, () => this.createUserSimple()); + } +} \ No newline at end of file diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.scss b/samples/grids/grid-lite/styling-config-themes/src/index.scss new file mode 100644 index 0000000000..28258bfed0 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/index.scss @@ -0,0 +1,40 @@ +@use 'sass:list'; +@use 'igniteui-theming' as *; +@use 'igniteui-theming/sass/color/presets' as *; +@use 'igniteui-theming/sass/typography/presets' as *; + +.container { + padding: rem(20px); +} + +.options { + background: var(--ig-gray-100); + gap: rem(10px); + padding: rem(20px); + margin-bottom: rem(20px); + border-radius: rem(6px); +} + +.grid-lite-wrapper { + height: 100vh; +} + +// Theme configurations +$themes: ( + 'bootstrap-light': ($light-bootstrap-palette, $bootstrap-typeface, $bootstrap-type-scale), + 'material-light': ($light-material-palette, $material-typeface, $material-type-scale), + 'fluent-light': ($light-fluent-palette, $fluent-typeface, $fluent-type-scale), + 'indigo-light': ($light-indigo-palette, $indigo-typeface, $indigo-type-scale), + 'bootstrap-dark': ($dark-bootstrap-palette, $bootstrap-typeface, $bootstrap-type-scale), + 'material-dark': ($dark-material-palette, $material-typeface, $material-type-scale), + 'fluent-dark': ($dark-fluent-palette, $fluent-typeface, $fluent-type-scale), + 'indigo-dark': ($dark-indigo-palette, $indigo-typeface, $indigo-type-scale) +); + +// Generate theme classes +@each $name, $config in $themes { + .grid-lite-wrapper[data-theme="#{$name}"] { + @include palette(list.nth($config, 1)); + @include typography(list.nth($config, 2), list.nth($config, 3)); + } +} diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.tsx b/samples/grids/grid-lite/styling-config-themes/src/index.tsx new file mode 100644 index 0000000000..f5a4a36e31 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/index.tsx @@ -0,0 +1,167 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { GridLiteDataService, ProductInfo } from './GridLiteDataService'; + +// Import the web component +import { IgcGridLite } from 'igniteui-grid-lite'; +import { + defineComponents, + IgcRatingComponent, + IgcSelectComponent +} from 'igniteui-webcomponents'; + +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.scss"; + +// Add custom elements to JSX namespace for TypeScript +declare global { + namespace JSX { + interface IntrinsicElements { + 'igc-select': React.DetailedHTMLProps, HTMLElement>; + 'igc-select-item': React.DetailedHTMLProps, HTMLElement>; + 'igc-grid-lite': React.DetailedHTMLProps, HTMLElement>; + 'igc-rating': React.DetailedHTMLProps, HTMLElement>; + } + } +} + +// Register components +IgcGridLite.register(); +defineComponents(IgcRatingComponent, IgcSelectComponent); + +export default class Sample extends React.Component { + private dataService: GridLiteDataService; + private gridRef: React.RefObject; + private wrapperRef: React.RefObject; + private selectRef: React.RefObject; + + constructor(props: any) { + super(props); + this.dataService = new GridLiteDataService(); + this.gridRef = React.createRef(); + this.wrapperRef = React.createRef(); + this.selectRef = React.createRef(); + this.state = { + currentTheme: 'bootstrap-light' + }; + } + + componentDidMount() { + if (this.gridRef.current) { + const data: ProductInfo[] = this.dataService.generateProducts(50); + + const columns = [ + { + key: 'name', + headerText: 'Product', + sort: true, + filter: true + }, + { + key: 'price', + headerText: 'Price', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'sold', + headerText: 'Sold', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'total', + headerText: 'Total', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'rating', + headerText: 'Rating', + type: 'number', + sort: true, + filter: true, + cellTemplate: (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; + } + } + ]; + + this.gridRef.current.columns = columns; + this.gridRef.current.data = data; + } + + // Set up theme select listener + if (this.selectRef.current) { + this.selectRef.current.addEventListener('igcChange', (event: any) => { + const selectedValue = event.detail.value; + this.changeTheme(selectedValue); + }); + } + + // Apply initial theme + this.changeTheme(this.state.currentTheme); + } + + private changeTheme = (theme: string) => { + this.setState({ currentTheme: theme }); + if (this.wrapperRef.current) { + this.wrapperRef.current.setAttribute('data-theme', theme); + } + // Force grid refresh by reassigning data + if (this.gridRef.current) { + const currentData = this.gridRef.current.data; + this.gridRef.current.data = [...currentData]; + } + } + + public render(): JSX.Element { + return ( +
+
+ + + + Light Bootstrap + + + Light Material + + + Light Fluent + + + Light Indigo + + + Dark Bootstrap + + + Dark Material + + + Dark Fluent + + + Dark Indigo + + +
+ +
+ +
+
+ ); + } +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/grids/grid-lite/styling-config-themes/tsconfig.json b/samples/grids/grid-lite/styling-config-themes/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/grids/grid-lite/styling-config-themes/vite.config.js b/samples/grids/grid-lite/styling-config-themes/vite.config.js new file mode 100644 index 0000000000..a5f23b02e9 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/vite.config.js @@ -0,0 +1,20 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { resolve } from 'path'; + +export default defineConfig({ + plugins: [react()], + css: { + preprocessorOptions: { + scss: { + loadPaths: [resolve(__dirname, 'node_modules')] + } + } + }, + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/grids/grid-lite/styling-custom-theme/package.json b/samples/grids/grid-lite/styling-custom-theme/package.json index bcef229119..8c431949c5 100644 --- a/samples/grids/grid-lite/styling-custom-theme/package.json +++ b/samples/grids/grid-lite/styling-custom-theme/package.json @@ -16,6 +16,7 @@ "dependencies": { "igniteui-grid-lite": "^0.0.1", "igniteui-react": "^19.4.0", + "igniteui-theming": "^24.0.2", "igniteui-webcomponents": "^6.3.0", "lit-html": "^3.2.0", "react": "^19.2.0", @@ -30,6 +31,7 @@ "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", "eslint": "^8.33.0", + "sass": "^1.83.0", "eslint-config-react": "^1.1.7", "eslint-plugin-react": "^7.20.0", "typescript": "^4.8.4", diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.css b/samples/grids/grid-lite/styling-custom-theme/src/index.css deleted file mode 100644 index 5532f1303b..0000000000 --- a/samples/grids/grid-lite/styling-custom-theme/src/index.css +++ /dev/null @@ -1,405 +0,0 @@ -.grid-lite-wrapper { - width: 100%; - height: 100%; -} - -.custom-styled { - --content-background: hsla(var(--ig-gray-50), var(--ig-gray-a)); - --content-text-color: var(--ig-gray-50-contrast); - --header-background: hsla(var(--ig-surface-500), var(--ig-surface-a)); - --header-text-color: var(--ig-surface-500-contrast); - --header-border-width: 0.0625rem; - --header-border-style: solid; - --header-border-color: hsla(var(--ig-gray-400), 0.38); - --filtering-header-background: hsla(var(--ig-gray-50) 205deg, 92%, 13%, var(--ig-gray-a)); - --filtering-row-background: hsla(var(--ig-gray-50), var(--ig-gray-a)); - --filtering-row-text-color: var(--ig-gray-50-contrast); - --sorted-header-icon-color: hsla(var(--ig-primary-500), var(--ig-primary-a)); - --icon-color: "currentColor"; - --row-hover-background: hsla(var(--ig-gray-200), var(--ig-gray-a)); - --row-hover-text-color: var(--ig-gray-200-contrast); - --row-even-background: hsla(var(--ig-gray-50), var(--ig-gray-a)); - --row-even-text-color: var(--ig-gray-50-contrast); - --row-odd-background: hsla(var(--ig-gray-50), var(--ig-gray-a)); - --row-odd-text-color: var(--ig-gray-50-contrast); - --row-border-color: hsla(var(--ig-gray-300), 0.38); - --row-border-style: solid; - --row-border-width: 0.0625rem; - --cell-active-border-color: hsla(var(--ig-primary-500), var(--ig-primary-a)); - --grid-resize-line-color: hsla(var(--ig-primary-500), var(--ig-primary-a)); - --ig-font-family: "Merriweather Sans", sans-serif; - --ig-h1-font-family: var(--ig-font-family); - --ig-h1-font-size: 2.5rem; - --ig-h1-font-weight: 500; - --ig-h1-font-style: normal; - --ig-h1-line-height: 3rem; - --ig-h1-letter-spacing: -0.09375rem; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0.5rem; - --ig-h2-font-family: var(--ig-font-family); - --ig-h2-font-size: 2rem; - --ig-h2-font-weight: 500; - --ig-h2-font-style: normal; - --ig-h2-line-height: 2.4rem; - --ig-h2-letter-spacing: -0.03125rem; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0.5rem; - --ig-h3-font-family: var(--ig-font-family); - --ig-h3-font-size: 1.75rem; - --ig-h3-font-weight: 500; - --ig-h3-font-style: normal; - --ig-h3-line-height: 2.1rem; - --ig-h3-letter-spacing: 0; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0.5rem; - --ig-h4-font-family: var(--ig-font-family); - --ig-h4-font-size: 1.5rem; - --ig-h4-font-weight: 500; - --ig-h4-font-style: normal; - --ig-h4-line-height: 1.8rem; - --ig-h4-letter-spacing: 0.015625rem; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0.5rem; - --ig-h5-font-family: var(--ig-font-family); - --ig-h5-font-size: 1.25rem; - --ig-h5-font-weight: 500; - --ig-h5-font-style: normal; - --ig-h5-line-height: 1.5rem; - --ig-h5-letter-spacing: 0; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0.5rem; - --ig-h6-font-family: var(--ig-font-family); - --ig-h6-font-size: 1rem; - --ig-h6-font-weight: 500; - --ig-h6-font-style: normal; - --ig-h6-line-height: 1.2rem; - --ig-h6-letter-spacing: 0.009375rem; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0.5rem; - --ig-subtitle-1-font-family: var(--ig-font-family); - --ig-subtitle-1-font-size: 0.875rem; - --ig-subtitle-1-font-weight: 400; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: 1.5rem; - --ig-subtitle-1-letter-spacing: 0.009375rem; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-family: var(--ig-font-family); - --ig-subtitle-2-font-size: 0.9rem; - --ig-subtitle-2-font-weight: 400; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: 1.35rem; - --ig-subtitle-2-letter-spacing: 0.00625rem; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-family: var(--ig-font-family); - --ig-body-1-font-size: 1rem; - --ig-body-1-font-weight: 400; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: 1.5rem; - --ig-body-1-letter-spacing: 0.03125rem; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-family: var(--ig-font-family); - --ig-body-2-font-size: 0.9rem; - --ig-body-2-font-weight: 400; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: 1.5rem; - --ig-body-2-letter-spacing: 0.015625rem; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-family: var(--ig-font-family); - --ig-button-font-size: 1rem; - --ig-button-font-weight: 500; - --ig-button-font-style: normal; - --ig-button-line-height: 1.5rem; - --ig-button-letter-spacing: 0.046875rem; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-family: var(--ig-font-family); - --ig-caption-font-size: 0.75rem; - --ig-caption-font-weight: 400; - --ig-caption-font-style: normal; - --ig-caption-line-height: 1rem; - --ig-caption-letter-spacing: 0.025rem; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-family: var(--ig-font-family); - --ig-overline-font-size: 0.625rem; - --ig-overline-font-weight: 400; - --ig-overline-font-style: normal; - --ig-overline-line-height: 1rem; - --ig-overline-letter-spacing: 0.09375rem; - --ig-overline-text-transform: uppercase; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; - --ig-calendar-labels-font-family: var(--ig-font-family); - --ig-calendar-labels-font-size: 0.8125rem; - --ig-calendar-labels-font-weight: 400; - --ig-calendar-labels-font-style: normal; - --ig-calendar-labels-line-height: normal; - --ig-calendar-labels-letter-spacing: normal; - --ig-calendar-labels-text-transform: none; - --ig-calendar-labels-margin-top: 0; - --ig-calendar-labels-margin-bottom: 0; - --ig-primary-50-contrast: black; - --ig-primary-50: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.78); - --ig-primary-100-contrast: black; - --ig-primary-100: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.8), calc(var(--ig-primary-l) * 1.66); - --ig-primary-200-contrast: black; - --ig-primary-200: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.64), calc(var(--ig-primary-l) * 1.43); - --ig-primary-300-contrast: black; - --ig-primary-300: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.73), calc(var(--ig-primary-l) * 1.19); - --ig-primary-400-contrast: black; - --ig-primary-400: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.875), calc(var(--ig-primary-l) * 1.08); - --ig-primary-h: 56deg; - --ig-primary-s: 75%; - --ig-primary-l: 50%; - --ig-primary-a: 1; - --ig-primary-500-contrast: black; - --ig-primary-500: var(--ig-primary-h), calc(var(--ig-primary-s) * 1), calc(var(--ig-primary-l) * 1); - --ig-primary-600-contrast: black; - --ig-primary-600: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * 0.89); - --ig-primary-700-contrast: black; - --ig-primary-700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.52), calc(var(--ig-primary-l) * 0.81); - --ig-primary-800-contrast: black; - --ig-primary-800: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.5), calc(var(--ig-primary-l) * 0.73); - --ig-primary-900-contrast: black; - --ig-primary-900: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.34), calc(var(--ig-primary-l) * 0.64); - --ig-primary-A100-contrast: black; - --ig-primary-A100: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.34); - --ig-primary-A200-contrast: black; - --ig-primary-A200: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.22), calc(var(--ig-primary-l) * 1.16); - --ig-primary-A400-contrast: black; - --ig-primary-A400: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.91); - --ig-primary-A700-contrast: black; - --ig-primary-A700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.65); - --ig-secondary-50-contrast: black; - --ig-secondary-50: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.78); - --ig-secondary-100-contrast: black; - --ig-secondary-100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.8), calc(var(--ig-secondary-l) * 1.66); - --ig-secondary-200-contrast: black; - --ig-secondary-200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.64), calc(var(--ig-secondary-l) * 1.43); - --ig-secondary-300-contrast: black; - --ig-secondary-300: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.73), calc(var(--ig-secondary-l) * 1.19); - --ig-secondary-400-contrast: black; - --ig-secondary-400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.875), calc(var(--ig-secondary-l) * 1.08); - --ig-secondary-h: 15deg; - --ig-secondary-s: 55%; - --ig-secondary-l: 64%; - --ig-secondary-a: 1; - --ig-secondary-500-contrast: black; - --ig-secondary-500: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1), calc(var(--ig-secondary-l) * 1); - --ig-secondary-600-contrast: black; - --ig-secondary-600: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.26), calc(var(--ig-secondary-l) * 0.89); - --ig-secondary-700-contrast: black; - --ig-secondary-700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.52), calc(var(--ig-secondary-l) * 0.81); - --ig-secondary-800-contrast: black; - --ig-secondary-800: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.5), calc(var(--ig-secondary-l) * 0.73); - --ig-secondary-900-contrast: white; - --ig-secondary-900: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.34), calc(var(--ig-secondary-l) * 0.64); - --ig-secondary-A100-contrast: black; - --ig-secondary-A100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.34); - --ig-secondary-A200-contrast: black; - --ig-secondary-A200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.22), calc(var(--ig-secondary-l) * 1.16); - --ig-secondary-A400-contrast: black; - --ig-secondary-A400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.91); - --ig-secondary-A700-contrast: white; - --ig-secondary-A700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.65); - --ig-gray-50-contrast: white; - --ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%; - --ig-gray-100-contrast: white; - --ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%; - --ig-gray-200-contrast: white; - --ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%; - --ig-gray-300-contrast: black; - --ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%; - --ig-gray-400-contrast: black; - --ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%; - --ig-gray-h: 205deg; - --ig-gray-s: 92%; - --ig-gray-l: 74%; - --ig-gray-a: 1; - --ig-gray-500-contrast: black; - --ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%; - --ig-gray-600-contrast: black; - --ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%; - --ig-gray-700-contrast: black; - --ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%; - --ig-gray-800-contrast: black; - --ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%; - --ig-gray-900-contrast: black; - --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%; - --ig-surface-50-contrast: white; - --ig-surface-50: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.78); - --ig-surface-100-contrast: white; - --ig-surface-100: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.8), calc(var(--ig-surface-l) * 1.66); - --ig-surface-200-contrast: white; - --ig-surface-200: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.64), calc(var(--ig-surface-l) * 1.43); - --ig-surface-300-contrast: white; - --ig-surface-300: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.73), calc(var(--ig-surface-l) * 1.19); - --ig-surface-400-contrast: white; - --ig-surface-400: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.875), calc(var(--ig-surface-l) * 1.08); - --ig-surface-h: 216deg; - --ig-surface-s: 92%; - --ig-surface-l: 14%; - --ig-surface-a: 1; - --ig-surface-500-contrast: white; - --ig-surface-500: var(--ig-surface-h), calc(var(--ig-surface-s) * 1), calc(var(--ig-surface-l) * 1); - --ig-surface-600-contrast: white; - --ig-surface-600: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.26), calc(var(--ig-surface-l) * 0.89); - --ig-surface-700-contrast: white; - --ig-surface-700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.52), calc(var(--ig-surface-l) * 0.81); - --ig-surface-800-contrast: white; - --ig-surface-800: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.5), calc(var(--ig-surface-l) * 0.73); - --ig-surface-900-contrast: white; - --ig-surface-900: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.34), calc(var(--ig-surface-l) * 0.64); - --ig-surface-A100-contrast: white; - --ig-surface-A100: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.34); - --ig-surface-A200-contrast: white; - --ig-surface-A200: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.22), calc(var(--ig-surface-l) * 1.16); - --ig-surface-A400-contrast: white; - --ig-surface-A400: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.91); - --ig-surface-A700-contrast: white; - --ig-surface-A700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.65); - --ig-info-50-contrast: black; - --ig-info-50: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.78); - --ig-info-100-contrast: black; - --ig-info-100: var(--ig-info-h), calc(var(--ig-info-s) * 0.8), calc(var(--ig-info-l) * 1.66); - --ig-info-200-contrast: black; - --ig-info-200: var(--ig-info-h), calc(var(--ig-info-s) * 0.64), calc(var(--ig-info-l) * 1.43); - --ig-info-300-contrast: black; - --ig-info-300: var(--ig-info-h), calc(var(--ig-info-s) * 0.73), calc(var(--ig-info-l) * 1.19); - --ig-info-400-contrast: black; - --ig-info-400: var(--ig-info-h), calc(var(--ig-info-s) * 0.875), calc(var(--ig-info-l) * 1.08); - --ig-info-h: 209deg; - --ig-info-s: 84%; - --ig-info-l: 45%; - --ig-info-a: 1; - --ig-info-500-contrast: black; - --ig-info-500: var(--ig-info-h), calc(var(--ig-info-s) * 1), calc(var(--ig-info-l) * 1); - --ig-info-600-contrast: white; - --ig-info-600: var(--ig-info-h), calc(var(--ig-info-s) * 1.26), calc(var(--ig-info-l) * 0.89); - --ig-info-700-contrast: white; - --ig-info-700: var(--ig-info-h), calc(var(--ig-info-s) * 1.52), calc(var(--ig-info-l) * 0.81); - --ig-info-800-contrast: white; - --ig-info-800: var(--ig-info-h), calc(var(--ig-info-s) * 1.5), calc(var(--ig-info-l) * 0.73); - --ig-info-900-contrast: white; - --ig-info-900: var(--ig-info-h), calc(var(--ig-info-s) * 1.34), calc(var(--ig-info-l) * 0.64); - --ig-info-A100-contrast: black; - --ig-info-A100: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.34); - --ig-info-A200-contrast: black; - --ig-info-A200: var(--ig-info-h), calc(var(--ig-info-s) * 1.22), calc(var(--ig-info-l) * 1.16); - --ig-info-A400-contrast: white; - --ig-info-A400: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.91); - --ig-info-A700-contrast: white; - --ig-info-A700: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.65); - --ig-success-50-contrast: black; - --ig-success-50: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.78); - --ig-success-100-contrast: black; - --ig-success-100: var(--ig-success-h), calc(var(--ig-success-s) * 0.8), calc(var(--ig-success-l) * 1.66); - --ig-success-200-contrast: black; - --ig-success-200: var(--ig-success-h), calc(var(--ig-success-s) * 0.64), calc(var(--ig-success-l) * 1.43); - --ig-success-300-contrast: black; - --ig-success-300: var(--ig-success-h), calc(var(--ig-success-s) * 0.73), calc(var(--ig-success-l) * 1.19); - --ig-success-400-contrast: black; - --ig-success-400: var(--ig-success-h), calc(var(--ig-success-s) * 0.875), calc(var(--ig-success-l) * 1.08); - --ig-success-h: 131deg; - --ig-success-s: 43%; - --ig-success-l: 51%; - --ig-success-a: 1; - --ig-success-500-contrast: black; - --ig-success-500: var(--ig-success-h), calc(var(--ig-success-s) * 1), calc(var(--ig-success-l) * 1); - --ig-success-600-contrast: black; - --ig-success-600: var(--ig-success-h), calc(var(--ig-success-s) * 1.26), calc(var(--ig-success-l) * 0.89); - --ig-success-700-contrast: black; - --ig-success-700: var(--ig-success-h), calc(var(--ig-success-s) * 1.52), calc(var(--ig-success-l) * 0.81); - --ig-success-800-contrast: black; - --ig-success-800: var(--ig-success-h), calc(var(--ig-success-s) * 1.5), calc(var(--ig-success-l) * 0.73); - --ig-success-900-contrast: white; - --ig-success-900: var(--ig-success-h), calc(var(--ig-success-s) * 1.34), calc(var(--ig-success-l) * 0.64); - --ig-success-A100-contrast: black; - --ig-success-A100: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.34); - --ig-success-A200-contrast: black; - --ig-success-A200: var(--ig-success-h), calc(var(--ig-success-s) * 1.22), calc(var(--ig-success-l) * 1.16); - --ig-success-A400-contrast: black; - --ig-success-A400: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.91); - --ig-success-A700-contrast: white; - --ig-success-A700: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.65); - --ig-warn-50-contrast: black; - --ig-warn-50: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.78); - --ig-warn-100-contrast: black; - --ig-warn-100: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.8), calc(var(--ig-warn-l) * 1.66); - --ig-warn-200-contrast: black; - --ig-warn-200: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.64), calc(var(--ig-warn-l) * 1.43); - --ig-warn-300-contrast: black; - --ig-warn-300: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.73), calc(var(--ig-warn-l) * 1.19); - --ig-warn-400-contrast: black; - --ig-warn-400: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.875), calc(var(--ig-warn-l) * 1.08); - --ig-warn-h: 37deg; - --ig-warn-s: 96%; - --ig-warn-l: 54%; - --ig-warn-a: 1; - --ig-warn-500-contrast: black; - --ig-warn-500: var(--ig-warn-h), calc(var(--ig-warn-s) * 1), calc(var(--ig-warn-l) * 1); - --ig-warn-600-contrast: black; - --ig-warn-600: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.26), calc(var(--ig-warn-l) * 0.89); - --ig-warn-700-contrast: black; - --ig-warn-700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.52), calc(var(--ig-warn-l) * 0.81); - --ig-warn-800-contrast: black; - --ig-warn-800: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.5), calc(var(--ig-warn-l) * 0.73); - --ig-warn-900-contrast: black; - --ig-warn-900: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.34), calc(var(--ig-warn-l) * 0.64); - --ig-warn-A100-contrast: black; - --ig-warn-A100: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.34); - --ig-warn-A200-contrast: black; - --ig-warn-A200: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.22), calc(var(--ig-warn-l) * 1.16); - --ig-warn-A400-contrast: black; - --ig-warn-A400: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.91); - --ig-warn-A700-contrast: black; - --ig-warn-A700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.65); - --ig-error-50-contrast: black; - --ig-error-50: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.78); - --ig-error-100-contrast: black; - --ig-error-100: var(--ig-error-h), calc(var(--ig-error-s) * 0.8), calc(var(--ig-error-l) * 1.66); - --ig-error-200-contrast: black; - --ig-error-200: var(--ig-error-h), calc(var(--ig-error-s) * 0.64), calc(var(--ig-error-l) * 1.43); - --ig-error-300-contrast: black; - --ig-error-300: var(--ig-error-h), calc(var(--ig-error-s) * 0.73), calc(var(--ig-error-l) * 1.19); - --ig-error-400-contrast: black; - --ig-error-400: var(--ig-error-h), calc(var(--ig-error-s) * 0.875), calc(var(--ig-error-l) * 1.08); - --ig-error-h: 346deg; - --ig-error-s: 100%; - --ig-error-l: 54%; - --ig-error-a: 1; - --ig-error-500-contrast: black; - --ig-error-500: var(--ig-error-h), calc(var(--ig-error-s) * 1), calc(var(--ig-error-l) * 1); - --ig-error-600-contrast: black; - --ig-error-600: var(--ig-error-h), calc(var(--ig-error-s) * 1.26), calc(var(--ig-error-l) * 0.89); - --ig-error-700-contrast: white; - --ig-error-700: var(--ig-error-h), calc(var(--ig-error-s) * 1.52), calc(var(--ig-error-l) * 0.81); - --ig-error-800-contrast: white; - --ig-error-800: var(--ig-error-h), calc(var(--ig-error-s) * 1.5), calc(var(--ig-error-l) * 0.73); - --ig-error-900-contrast: white; - --ig-error-900: var(--ig-error-h), calc(var(--ig-error-s) * 1.34), calc(var(--ig-error-l) * 0.64); - --ig-error-A100-contrast: black; - --ig-error-A100: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.34); - --ig-error-A200-contrast: black; - --ig-error-A200: var(--ig-error-h), calc(var(--ig-error-s) * 1.22), calc(var(--ig-error-l) * 1.16); - --ig-error-A400-contrast: black; - --ig-error-A400: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.91); - --ig-error-A700-contrast: white; - --ig-error-A700: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.65); -} diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.scss b/samples/grids/grid-lite/styling-custom-theme/src/index.scss new file mode 100644 index 0000000000..05f2e065e4 --- /dev/null +++ b/samples/grids/grid-lite/styling-custom-theme/src/index.scss @@ -0,0 +1,19 @@ +@use 'igniteui-theming' as *; +@import 'igniteui-theming/sass/typography/presets'; + +$custom-palette: palette( + $primary: #ddd020, + $secondary: #d5896f, + $surface: #031d44, + $gray: #04395e, +); + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +.custom-styled { + @include palette($custom-palette); + @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale); +} diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx index f5aa476491..e947abd237 100644 --- a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx +++ b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx @@ -10,7 +10,7 @@ import { } from 'igniteui-webcomponents'; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./index.css"; +import "./index.scss"; // Register components IgcGridLite.register(); diff --git a/samples/grids/grid-lite/styling-custom-theme/vite.config.js b/samples/grids/grid-lite/styling-custom-theme/vite.config.js index 1744dbc719..a15042b14a 100644 --- a/samples/grids/grid-lite/styling-custom-theme/vite.config.js +++ b/samples/grids/grid-lite/styling-custom-theme/vite.config.js @@ -1,8 +1,16 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import { resolve } from 'path'; export default defineConfig({ plugins: [react()], + css: { + preprocessorOptions: { + scss: { + loadPaths: [resolve(__dirname, 'node_modules')] + } + } + }, build: { outDir: 'build' },