No documentation

[sc-atompower]

What is the intent of this project? Is it to replace the theme designer product? The previous theme designer product contained an angular application and thorough documentation on how to use the project in the readme file.

[SoyDiego]

What is your question @sc-atompower maybe I can help you. I'm using this and works perfectly.

[sc-atompower]

@SoyDiego How are you using this?

the previous angular theme designer was a very in depth tool. This was the readme:

##Getting Started
###Current Version
####Angular 12 and PrimeNG 12

#Overview
PrimeNG Designer is a sass based theme api for developing PrimeNG themes. The tool can be used in two ways; first approach is the visual ui theme editor and other one is editing the sass variables directly from the code within your IDE. Designer is provided as an angular-cli application containing the visual editor, sass api, all pre-built themes and a sample page with various components to test while designing your theme.

#Visual Editor
Visual editor offers an easy way for rapid prototyping so that a theme can be designed on the fly using UI elements such as color pickers. Once the theme is ready, the download option generates a theme.css file that can be included in your project. Note that visual editor uses a small subset of the actual sass api, for more advanced cases such as implementing a style guide code editor should be preferred.

To begin with extract the contents of the distribution and install the dependencies.

`npm install`
`ng serve`

Then navigate to http://localhost:4200 to access the application in your local environment, now it is time to create your own theme visually.

#Code Editor
Code editor mode enables working with the sass api directly within your editor. Run the application with the code configuration for this mode.

`ng serve --configuration code`

####Issues?
https://stackoverflow.com/questions/70925649/angular-12-error-from-css-minimizer-transform-failer-with-1-error-invalid/70925650

A built-in base theme named **_mytheme_** is available to get started with your own theme. To begin with navigate to the src/sass/themes/mytheme/ folder which includes the following artifacts;

- _variables.scss: List of variables to create your own theme.
- /fonts Folder of the font files
- _fonts.scss: Definition of the @font-face of the theme
- _extensions.scss: Customizations to the theme in case a behavior is not supported by the variables
- theme.scss: Main theme file that imports the scss files required for the theme
You may now start designing your own theme by changing the variables now, for example change the $primaryColor variable and save the _variables.scss file. Your new theme will be generated and browser will update the page automatically.

#Full List of SASS Variables
A wide range of variables are available to customize different aspects of the components such as colors, margins and paddings. Refer to the API documentation for details on each variable.

#Customization
SASS API is located inside the src/sass/designer folder and themes import the main _components.scss from this location. In case you need to make extend the API, add these changes to the _extensions.scss file in the theme folder instead of editing the .scss files inside the designer folder to avoid any maintenance issues. Designer is updated periodically for improvements and updating is done by replacing the designer folder only so for seamless updates, never edit the designer folder as src/sass/themes/mytheme/_extensions.scss file is created for this purpose.

#Optimize Bundle Size
Every component is styled within its own file and then imported to the _components.scss, you may comment or remove the components that you are not using to keep the size of your theme as small as possible.

#Prebuilt Themes
PrimeNG ships with the css of Bootstrap, Material, FluentUI, Saga, Vela, Arya and the legacy themes. SCSS structure and variables of these themes are also available inside the src/sass folder as well in case you'd like to customize them for your own requirements or see how these themes are built.

#Exclusive Themes
Designer also provides exclusive premium themes that requires a license. These are Soho-Light, Soho-Dark, Viva-Light, Viva-Dark, Mira and Nano themes with full SASS code included in src/sass/ folder.

#Font Family
Font of the theme is configured with the following steps.

- Place the font artifacts such as eot, woff files inside the fonts folder.
- Define the font-face at _fonts.scss.
- Change the $fontFamily at _variables.scss.
Example theme with Roboto font as used in Material Design.

<b>_fonts.scss</b>

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('./fonts/roboto-v18-latin-300.eot'); / IE9 Compat Modes / src: local('Roboto Light'), local('Roboto-Light'), url('./fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('./fonts/roboto-v18-latin-300.woff2') format('woff2'), / Super Modern Browsers / url('./fonts/roboto-v18-latin-300.woff') format('woff'), / Modern Browsers / url('./fonts/roboto-v18-latin-300.ttf') format('truetype'), / Safari, Android, iOS / url('./fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); / Legacy iOS / }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('./fonts/roboto-v18-latin-regular.eot'); / IE9 Compat Modes / src: local('Roboto'), local('Roboto-Regular'), url('./fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('./fonts/roboto-v18-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('./fonts/roboto-v18-latin-regular.woff') format('woff'), / Modern Browsers / url('./fonts/roboto-v18-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('./fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); / Legacy iOS / }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('./fonts/roboto-v18-latin-700.eot'); / IE9 Compat Modes / src: local('Roboto Bold'), local('Roboto-Bold'), url('./fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('./fonts/roboto-v18-latin-700.woff2') format('woff2'), / Super Modern Browsers / url('./fonts/roboto-v18-latin-700.woff') format('woff'), / Modern Browsers / url('./fonts/roboto-v18-latin-700.ttf') format('truetype'), / Safari, Android, iOS / url('./fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); / Legacy iOS / }

#_variables.scss

`$fontFamily:"Roboto","Helvetica Neue",sans-serif;`

#Scaling
Component sizes including the font size, margins and paddings are defined with relative units (rem) that allows scalability based on the font-size of the document. This also helps PrimeNG components to blend-in perfectly within the rest of your application.

#Build
Once the theme is designed and ready for use, it needs to be included in your application. If you have used the visual editor, you may just download it as a css file by clicking the download button. Second alternative is including the sass api inside your application so that angular-cli can build and include it in your bundle which is exactly the approach used in code editor mode by importing mytheme.scss in main.js. Another alternative would be compiling the sass yourself with the command below and use in your application via a link tag or an import statement e.g. in your main.js entry file to have it bundled. Choice is depending on your requirements.

`sass --update src/assets/mytheme:src/assets/mytheme`

this project readme is blank and there is no deps in the package. Its certainly not an angular project. are you just changing mytheme and running sass update ?

[SoyDiego]

I use only to compile my SCSS and then the generated file I put in my angular project. Works like always except now you cannot running unless you install Angular inside. But in my case I always use like that only for compile. I edit the variables and then compile.

Here you have another video, maybe can help you: https://youtu.be/JAapJf6q1cw

Or the simple way, replace this new files for your old files in your project. If you have your own customizations in EXTENSIONS.SCSS remember DON'T REPLACE THIS FILES, the rest of files replace it. And for prevention prepare a backup first.

[cetincakiroglu]

Hi @sc-atompower,

Could you please open this issue in https://github.com/orgs/primefaces/discussions if you have any further questions?