diff --git a/.gitignore b/.gitignore index e9d1d37..043e4ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ theme.css -.DS_STORE \ No newline at end of file +.DS_STORE +node_modules/ +build/ \ No newline at end of file diff --git a/README.md b/README.md index e98be10..70635ff 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,44 @@ +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) + # PrimeReact Theming with SASS Visit the [official documentation](https://primereact.org/theming/#customtheme) for more information. + +SASS Logo + +## Usage + +To compile the CSS once: + +```shell +npm install +npm run sass +``` + +To watch the SASS files for changes and re-compile: + +```shell +npm install +npm run sass-watch +``` + +## Compile and copy CSS files to the PrimeReact repository + +Usually you want to update the CSS files in the PrimeReact repository, located in the +`/primereact/public/themes` folder. To do so you can use the following scripts. + +These scripts asume that the PrimeReact repository is located next to this repository, so at `../primereact`. +They will compile the CSS files and copy the resulting CSS files to the correct resources folders. + +### Unix + +```shell +./build.sh +``` + +### Windows + +```shell +build.bat +``` + diff --git a/build.bat b/build.bat new file mode 100644 index 0000000..9e47f19 --- /dev/null +++ b/build.bat @@ -0,0 +1,63 @@ +@echo on +set "RESOURCES=..\primereact\public\themes" + +rmdir /s /q build + +call npm run sass + +copy build\themes\arya\arya-blue\theme.css %RESOURCES%\arya-blue +copy build\themes\arya\arya-green\theme.css %RESOURCES%\arya-green +copy build\themes\arya\arya-orange\theme.css %RESOURCES%\arya-orange +copy build\themes\arya\arya-purple\theme.css %RESOURCES%\arya-purple +copy build\themes\bootstrap4\bootstrap4-dark\blue\theme.css %RESOURCES%\bootstrap4-dark-blue +copy build\themes\bootstrap4\bootstrap4-dark\purple\theme.css %RESOURCES%\bootstrap4-dark-purple +copy build\themes\bootstrap4\bootstrap4-light\blue\theme.css %RESOURCES%\bootstrap4-light-blue +copy build\themes\bootstrap4\bootstrap4-light\purple\theme.css %RESOURCES%\bootstrap4-light-purple +copy build\themes\fluent\fluent-light\theme.css %RESOURCES%\fluent-light +copy build\themes\lara\lara-dark\amber\theme.css %RESOURCES%\lara-dark-amber +copy build\themes\lara\lara-dark\blue\theme.css %RESOURCES%\lara-dark-blue +copy build\themes\lara\lara-dark\cyan\theme.css %RESOURCES%\lara-dark-cyan +copy build\themes\lara\lara-dark\green\theme.css %RESOURCES%\lara-dark-green +copy build\themes\lara\lara-dark\indigo\theme.css %RESOURCES%\lara-dark-indigo +copy build\themes\lara\lara-dark\pink\theme.css %RESOURCES%\lara-dark-pink +copy build\themes\lara\lara-dark\purple\theme.css %RESOURCES%\lara-dark-purple +copy build\themes\lara\lara-dark\teal\theme.css %RESOURCES%\lara-dark-teal +copy build\themes\lara\lara-light\amber\theme.css %RESOURCES%\lara-light-amber +copy build\themes\lara\lara-light\blue\theme.css %RESOURCES%\lara-light-blue +copy build\themes\lara\lara-light\cyan\theme.css %RESOURCES%\lara-light-cyan +copy build\themes\lara\lara-light\green\theme.css %RESOURCES%\lara-light-green +copy build\themes\lara\lara-light\indigo\theme.css %RESOURCES%\lara-light-indigo +copy build\themes\lara\lara-light\pink\theme.css %RESOURCES%\lara-light-pink +copy build\themes\lara\lara-light\purple\theme.css %RESOURCES%\lara-light-purple +copy build\themes\lara\lara-light\teal\theme.css %RESOURCES%\lara-light-teal +copy build\themes\luna\luna-amber\theme.css %RESOURCES%\luna-amber +copy build\themes\luna\luna-blue\theme.css %RESOURCES%\luna-blue +copy build\themes\luna\luna-green\theme.css %RESOURCES%\luna-green +copy build\themes\luna\luna-pink\theme.css %RESOURCES%\luna-pink +copy build\themes\material\material-dark\standard\deeppurple\theme.css %RESOURCES%\md-dark-deeppurple +copy build\themes\material\material-dark\standard\indigo\theme.css %RESOURCES%\md-dark-indigo +copy build\themes\material\material-light\standard\deeppurple\theme.css %RESOURCES%\md-light-deeppurple +copy build\themes\material\material-light\standard\deeppurple\theme.css %RESOURCES%\md-light-indigo +copy build\themes\material\material-dark\compact\deeppurple\theme.css %RESOURCES%\mdc-dark-deeppurple +copy build\themes\material\material-dark\compact\indigo\theme.css %RESOURCES%\mdc-dark-indigo +copy build\themes\material\material-light\compact\deeppurple\theme.css %RESOURCES%\mdc-light-deeppurple +copy build\themes\material\material-light\compact\deeppurple\theme.css %RESOURCES%\mdc-light-indigo +copy build\themes\mira\theme.css %RESOURCES%\mira +copy build\themes\nano\theme.css %RESOURCES%\nano +copy build\themes\nova\nova\theme.css %RESOURCES%\nova +copy build\themes\nova\nova-accent\theme.css %RESOURCES%\nova-accent +copy build\themes\nova\nova-alt\theme.css %RESOURCES%\nova-alt +copy build\themes\rhea\theme.css %RESOURCES%\rhea +copy build\themes\saga\saga-blue\theme.css %RESOURCES%\saga-blue +copy build\themes\saga\saga-green\theme.css %RESOURCES%\saga-green +copy build\themes\saga\saga-orange\theme.css %RESOURCES%\saga-orange +copy build\themes\saga\saga-purple\theme.css %RESOURCES%\saga-purple +copy build\themes\soho\soho-dark\theme.css %RESOURCES%\soho-dark +copy build\themes\soho\soho-light\theme.css %RESOURCES%\soho-light +copy build\themes\tailwind\tailwind-light\theme.css %RESOURCES%\tailwind-light +copy build\themes\vela\vela-blue\theme.css %RESOURCES%\vela-blue +copy build\themes\vela\vela-green\theme.css %RESOURCES%\vela-green +copy build\themes\vela\vela-orange\theme.css %RESOURCES%\vela-orange +copy build\themes\vela\vela-purple\theme.css %RESOURCES%\vela-purple +copy build\themes\viva\viva-dark\theme.css %RESOURCES%\viva-dark +copy build\themes\viva\viva-light\theme.css %RESOURCES%\viva-light diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..44a5c91 --- /dev/null +++ b/build.sh @@ -0,0 +1,63 @@ +#!/bin/sh +RESOURCES="../primereact/public/themes" + +rm -rf build + +npm run sass + +cp build\themes\arya\arya-blue\theme.css $RESOURCES\arya-blue +cp build\themes\arya\arya-green\theme.css $RESOURCES\arya-green +cp build\themes\arya\arya-orange\theme.css $RESOURCES\arya-orange +cp build\themes\arya\arya-purple\theme.css $RESOURCES\arya-purple +cp build\themes\bootstrap4\bootstrap4-dark\blue\theme.css $RESOURCES\bootstrap4-dark-blue +cp build\themes\bootstrap4\bootstrap4-dark\purple\theme.css $RESOURCES\bootstrap4-dark-purple +cp build\themes\bootstrap4\bootstrap4-light\blue\theme.css $RESOURCES\bootstrap4-light-blue +cp build\themes\bootstrap4\bootstrap4-light\purple\theme.css $RESOURCES\bootstrap4-light-purple +cp build\themes\fluent\fluent-light\theme.css $RESOURCES\fluent-light +cp build\themes\lara\lara-dark\amber\theme.css $RESOURCES\lara-dark-amber +cp build\themes\lara\lara-dark\blue\theme.css $RESOURCES\lara-dark-blue +cp build\themes\lara\lara-dark\cyan\theme.css $RESOURCES\lara-dark-cyan +cp build\themes\lara\lara-dark\green\theme.css $RESOURCES\lara-dark-green +cp build\themes\lara\lara-dark\indigo\theme.css $RESOURCES\lara-dark-indigo +cp build\themes\lara\lara-dark\pink\theme.css $RESOURCES\lara-dark-pink +cp build\themes\lara\lara-dark\purple\theme.css $RESOURCES\lara-dark-purple +cp build\themes\lara\lara-dark\teal\theme.css $RESOURCES\lara-dark-teal +cp build\themes\lara\lara-light\amber\theme.css $RESOURCES\lara-light-amber +cp build\themes\lara\lara-light\blue\theme.css $RESOURCES\lara-light-blue +cp build\themes\lara\lara-light\cyan\theme.css $RESOURCES\lara-light-cyan +cp build\themes\lara\lara-light\green\theme.css $RESOURCES\lara-light-green +cp build\themes\lara\lara-light\indigo\theme.css $RESOURCES\lara-light-indigo +cp build\themes\lara\lara-light\pink\theme.css $RESOURCES\lara-light-pink +cp build\themes\lara\lara-light\purple\theme.css $RESOURCES\lara-light-purple +cp build\themes\lara\lara-light\teal\theme.css $RESOURCES\lara-light-teal +cp build\themes\luna\luna-amber\theme.css $RESOURCES\luna-amber +cp build\themes\luna\luna-blue\theme.css $RESOURCES\luna-blue +cp build\themes\luna\luna-green\theme.css $RESOURCES\luna-green +cp build\themes\luna\luna-pink\theme.css $RESOURCES\luna-pink +cp build\themes\material\material-dark\standard\deeppurple\theme.css $RESOURCES\md-dark-deeppurple +cp build\themes\material\material-dark\standard\indigo\theme.css $RESOURCES\md-dark-indigo +cp build\themes\material\material-light\standard\deeppurple\theme.css $RESOURCES\md-light-deeppurple +cp build\themes\material\material-light\standard\deeppurple\theme.css $RESOURCES\md-light-indigo +cp build\themes\material\material-dark\compact\deeppurple\theme.css $RESOURCES\mdc-dark-deeppurple +cp build\themes\material\material-dark\compact\indigo\theme.css $RESOURCES\mdc-dark-indigo +cp build\themes\material\material-light\compact\deeppurple\theme.css $RESOURCES\mdc-light-deeppurple +cp build\themes\material\material-light\compact\deeppurple\theme.css $RESOURCES\mdc-light-indigo +cp build\themes\mira\theme.css $RESOURCES\mira +cp build\themes\nano\theme.css $RESOURCES\nano +cp build\themes\nova\nova\theme.css $RESOURCES\nova +cp build\themes\nova\nova-accent\theme.css $RESOURCES\nova-accent +cp build\themes\nova\nova-alt\theme.css $RESOURCES\nova-alt +cp build\themes\rhea\theme.css $RESOURCES\rhea +cp build\themes\saga\saga-blue\theme.css $RESOURCES\saga-blue +cp build\themes\saga\saga-green\theme.css $RESOURCES\saga-green +cp build\themes\saga\saga-orange\theme.css $RESOURCES\saga-orange +cp build\themes\saga\saga-purple\theme.css $RESOURCES\saga-purple +cp build\themes\soho\soho-dark\theme.css $RESOURCES\soho-dark +cp build\themes\soho\soho-light\theme.css $RESOURCES\soho-light +cp build\themes\tailwind\tailwind-light\theme.css $RESOURCES\tailwind-light +cp build\themes\vela\vela-blue\theme.css $RESOURCES\vela-blue +cp build\themes\vela\vela-green\theme.css $RESOURCES\vela-green +cp build\themes\vela\vela-orange\theme.css $RESOURCES\vela-orange +cp build\themes\vela\vela-purple\theme.css $RESOURCES\vela-purple +cp build\themes\viva\viva-dark\theme.css $RESOURCES\viva-dark +cp build\themes\viva\viva-light\theme.css $RESOURCES\viva-light \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..add0735 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,234 @@ +{ + "name": "primereact-sass-theme", + "version": "10.4.0-SNAPSHOT", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "primereact-sass-theme", + "version": "10.4.0-SNAPSHOT", + "license": "MIT", + "devDependencies": { + "sass": "latest" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", + "dev": true + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.63.6", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz", + "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + } +} diff --git a/package.json b/package.json index 98372ab..85bae03 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,14 @@ "license": "MIT", "bugs": { "url": "https://github.com/primefaces/primereact-sass-theme/issues" + }, + "scripts": { + "sass-watch": "sass src/assets:src/assets --watch --no-source-map", + "sass": "sass .:build --no-source-map", + "build": "npm run sass" + }, + "devDependencies": { + "sass": "latest" } }