2.0.0 • Published 3 years ago
stylebook-token-generator v2.0.0
stylebook-token-generator
A CLI to help generate the stylebook token for Liferay DXP 7.3.
Generator use
- Install generator:
npm i stylebook-token-generator -g. - Run
stylebookto start stylebook generator and follow prompts and configure stylebook tokens for your theme.
Note: Define theme name-theme module directory path and the genereator will create a frontend-token-definition.json inside theme name-theme\src\WEB-INF\ directory.
Defination of Tokens
- Token Categories
frontendTokenCategories
Token categories will crate grouped of categorie's options in the drop-down menu for your stylebook.
| Token | Defination |
|---|---|
| label | label's value displayed as a options inside the stylebook drop-down menu. |
| name | Filed required unique name for each Token categories. |
? Define Label for "frontendTokenCategories". buttons
? Define Name for "frontendTokenCategories". buttons
----------------------------------------------------------------------------------------
> frontend-token-definition jSON Status:
----------------------------------------------------------------------------------------
{
"frontendTokenCategories": [
{
"frontendTokenSets": [],
"label": "buttons",
"name": "buttons"
}
]
}- Token Sets
frontendTokenSets
Token Sets will create collapsible options menu for each Token Categories.
| Token | Defination |
|---|---|
| label | label's value displayed as a collapsible options inside the stylebook. |
| name | Required unique name for each Token Sets. |
? Would you like to add new frontendTokenSets for "buttons" frontendTokenCategories? Yes
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
? Define Label for "frontendTokenSets". primary-buttons
? Define Name for "frontendTokenSets". primary-buttons
----------------------------------------------------------------------------------------
> frontend-token-definition jSON Status:
----------------------------------------------------------------------------------------
{
"frontendTokenCategories": [
{
"frontendTokenSets": [
{
"frontendTokens": [],
"name": "primary-buttons",
"label": "primary-buttons"
}
],
"label": "buttons",
"name": "buttons"
}
]
}
----------------------------------------------------------------------------------------- Tokens
frontendTokens
Token of each Token Sets will provided set of configurable properties for stylebook.
| Token | Defination |
|---|---|
| editorType | Define the filed type. Options: ColorPicker, Checkbox, Text or Select |
| type | Define the data type of filed. Options: Integer, Float, String or Boolean |
| defaultValue | Define the default value based on the data type. |
| mappings | To create mapping between CSS variable name and token. define type is equal to "cssVariable" and value as a mapping variable name. |
| label | Create the label of the field. |
| name | Required unique name for each Token. |
| validValues | It will create options for drop-down menu of Selectable editorType. |
? Would you like to add new "frontendTokens" for "primary-buttons" "frontendTokenSets"? Yes
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
? Choose editorType. ColorPicker
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
? Define defaultValue. #5B443E
? Define label. Primary
? Define name. primaryColor
? Choose field type. String
? Define mappings cssVariable name. --bg-primary
----------------------------------------------------------------------------------------
> frontend-token-definition jSON Status:
----------------------------------------------------------------------------------------
{
"frontendTokenCategories": [
{
"frontendTokenSets": [
{
"frontendTokens": [
{
"defaultValue": "#5B443E",
"editorType": "ColorPicker",
"label": "Primary",
"mappings": [
{
"type": "cssVariable",
"value": "--bg-primary"
}
],
"name": "primaryColor",
"type": "String"
}
],
"name": "primary-buttons",
"label": "primary-buttons"
}
],
"label": "buttons",
"name": "buttons"
}
]
}
----------------------------------------------------------------------------------------
? Would you like to add new "frontendTokens"? Yes
? Choose editorType. Select
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
? Define Label of Option. 16px
? Define Value for Option. --fs-1
? Add More Option. Yes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
? Define Label of Option. 32px
? Define Value for Option. --fs-2
? Add More Option. No
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
? Define defaultValue. --fs-1
? Define label. Font Size
? Define name. fontSize
? Choose field type. String
? Define mappings cssVariable name. --pb-fs
----------------------------------------------------------------------------------------
> frontend-token-definition jSON Status:
----------------------------------------------------------------------------------------
{
"frontendTokenCategories": [
{
"frontendTokenSets": [
{
"frontendTokens": [
{
"defaultValue": "#5B443E",
"editorType": "ColorPicker",
"label": "Primary",
"mappings": [
{
"type": "cssVariable",
"value": "--bg-primary"
}
],
"name": "primaryColor",
"type": "String"
},
{
"defaultValue": "--fs-1",
"label": "Font Size",
"mappings": [
{
"type": "cssVariable",
"value": "--pb-fs"
}
],
"name": "fontSize",
"type": "String",
"validValues": [
{
"label": "16px",
"value": "--fs-1"
},
{
"label": "32px",
"value": "--fs-2"
}
]
}
],
"name": "primary-buttons",
"label": "primary-buttons"
}
],
"label": "buttons",
"name": "buttons"
}
]
}
----------------------------------------------------------------------------------------