Penpot/penpot-export
0
Fork 0
mirror of https://github.com/penpot/penpot-export.git synced 2025-01-08 07:50:21 -05:00
Code Issues Activity

docs: update configuration example

Browse source
This commit is contained in:
Roberto Redradix 2023-08-31 20:28:14 +02:00
parent 6fbc1adace
commit 899a8b6572
2 changed files with 25 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
README.md
View file

@ -26,16 +26,33 @@ Configuration example:
require('dotenv').config() require('dotenv').config()
/** /**
* @type {import('penpot-css-export').Config} * @type {import('penpot-css-export').UserConfig}
*/ */
const config = { const config = {
instance: process.env.PENPOT_BASE_URL || undefined, instance: process.env.PENPOT_BASE_URL || undefined,
accessToken: process.env.PENPOT_ACCESS_TOKEN, accessToken: process.env.PENPOT_ACCESS_TOKEN,
pages: [ files: [
{ {
output: 'src/styles/ui.css', // 👈🏻 Path where your css should be generated.
fileId: 'abea3ef6-4c19-808a-8003-01370d9cb586', fileId: 'abea3ef6-4c19-808a-8003-01370d9cb586',
pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088', pages: [
{
pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088',
output: 'src/styles/ui.css', // 👈 Path where your CSS file should be generated.
},
],
},
{
fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
colors: [
{
output: 'src/styles/colors.css', // 👈 Path where your CSS file should be generated.
},
],
typographies: [
{
output: 'src/styles/typographies.css', // 👈 Path where your CSS file should be generated.
},
],
}, },
], ],
} }
@ -51,59 +68,7 @@ Once you've set up the `penpot-css-export.config.js` file, simply run the follow
pce pce
``` ```
This will read your Penpot designs and generate CSS files in the directory specified in your configuration file. This will read your Penpot designs and generate CSS files in the places specified in your configuration file.
Based in the example a css file like this will be generated:
```css
.variables--body {
font-style: normal;
font-size: 14px;
font-weight: 400;
direction: ltr;
font-family: 'Source Code Pro';
}
.variables--h5 {
font-style: normal;
font-size: 18px;
font-weight: 800;
direction: ltr;
font-family: 'Source Code Pro';
}
.variables--h4 {
font-style: normal;
font-size: 24px;
font-weight: 800;
direction: ltr;
font-family: 'Source Code Pro';
}
.variables--h3 {
font-style: normal;
font-size: 36px;
font-weight: 800;
direction: ltr;
font-family: 'Source Code Pro';
}
.variables--h2 {
font-style: normal;
font-size: 48px;
font-weight: 800;
direction: ltr;
font-family: 'Source Code Pro';
}
.variables--h1 {
font-style: normal;
font-size: 72px;
font-weight: 900;
direction: ltr;
font-family: 'Source Code Pro';
}
```
## Development ## Development

6
packages/demo/penpot-css-export.config.js
View file

@ -16,7 +16,7 @@ const config = {
pages: [ pages: [
{ {
pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088', pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088',
output: 'src/styles/ui.css', // 👈🏻 Path where your css should be generated. output: 'src/styles/ui.css', // 👈 Path where your CSS file should be generated.
}, },
], ],
}, },
@ -24,12 +24,12 @@ const config = {
fileId: '4a499800-872e-80e1-8002-fc0b585dc061', fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
colors: [ colors: [
{ {
output: 'src/styles/colors.css', // 👈🏻 Path where your css should be generated. output: 'src/styles/colors.css', // 👈 Path where your CSS file should be generated.
}, },
], ],
typographies: [ typographies: [
{ {
output: 'src/styles/typographies.css', // 👈🏻 Path where your css should be generated. output: 'src/styles/typographies.css', // 👈 Path where your CSS file should be generated.
}, },
], ],
}, },