diff --git a/package.json b/package.json
index 624faf8..f0c891d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,6 @@
"dev": "npm run dev -w @penpot-export/cli",
"build": "npm run build -w @penpot-export/core -w @penpot-export/cli",
"test": "npm run test --workspaces --if-present",
- "demo": "npm run generate-css -w demo"
+ "demo": "npm run generate-all -w demos"
}
}
diff --git a/packages/demo/package.json b/packages/demo/package.json
deleted file mode 100644
index ec606b3..0000000
--- a/packages/demo/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "demo",
- "private": true,
- "version": "0.0.0",
- "scripts": {
- "generate-css": "penpot-export"
- },
- "dependencies": {
- "@penpot-export/cli": "0.0.0"
- },
- "devDependencies": {
- "dotenv": "^16.3.1"
- }
-}
diff --git a/packages/demo/penpot-export.config.js b/packages/demo/penpot-export.config.js
deleted file mode 100644
index 3a9c193..0000000
--- a/packages/demo/penpot-export.config.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// @ts-check
-require('dotenv').config()
-
-if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
- throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
-}
-
-/**
- * @type {import('@penpot-export/core').UserConfig}
- */
-const config = {
- instance: process.env.PENPOT_BASE_URL || undefined,
- accessToken: process.env.PENPOT_ACCESS_TOKEN,
- files: [
- {
- fileId: 'abea3ef6-4c19-808a-8003-01370d9cb586',
- pages: [
- {
- pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088',
- output: 'src/styles/ui.css', // 👈 Path where your CSS file should be generated.
- },
- {
- pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088',
- output: 'src/styles/ui.json', // 👈 Path where your JSON file should be generated.
- format: 'json',
- },
- ],
- },
- {
- fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
- colors: [
- {
- output: 'src/styles/colors.css', // 👈 Path where your CSS file should be generated.
- },
- {
- output: 'src/styles/colors.scss', // 👈 Path where your SCSS file should be generated.
- format: 'scss',
- },
- {
- output: 'src/styles/colors.json', // 👈 Path where your JSON file should be generated.
- format: 'json',
- },
- ],
- typographies: [
- {
- output: 'src/styles/typographies.css', // 👈 Path where your CSS file should be generated.
- },
- {
- output: 'src/styles/typographies.scss', // 👈 Path where your SCSS file should be generated.
- format: 'scss',
- },
- {
- output: 'src/styles/typographies.json', // 👈 Path where your JSON file should be generated.
- format: 'json',
- },
- ],
- },
- ],
-}
-
-module.exports = config
diff --git a/packages/demo/src/styles/ui.css b/packages/demo/src/styles/ui.css
deleted file mode 100644
index 81ebab9..0000000
--- a/packages/demo/src/styles/ui.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.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--H1 {
- font-style: normal;
- font-size: 72px;
- font-weight: 900;
- direction: ltr;
- font-family: "Source Code Pro";
-}
-
-.Variables--H5 {
- font-style: normal;
- font-size: 48px;
- font-weight: 800;
- direction: ltr;
- font-family: "Source Code Pro";
-}
-
-.Variables--Body {
- font-style: normal;
- font-size: 14px;
- font-weight: 400;
- direction: ltr;
- font-family: "Source Code Pro";
-}
-
-.Variables--H4 {
- font-style: normal;
- font-size: 36px;
- font-weight: 800;
- direction: ltr;
- font-family: "Source Code Pro";
-}
\ No newline at end of file
diff --git a/packages/demo/src/styles/ui.json b/packages/demo/src/styles/ui.json
deleted file mode 100644
index 1727cc1..0000000
--- a/packages/demo/src/styles/ui.json
+++ /dev/null
@@ -1,68 +0,0 @@
-[
- {
- "scope": "Variables",
- "name": "H5",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "18px",
- "fontWeight": "800",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- },
- {
- "scope": "Variables",
- "name": "H4",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "24px",
- "fontWeight": "800",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- },
- {
- "scope": "Variables",
- "name": "H1",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "72px",
- "fontWeight": "900",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- },
- {
- "scope": "Variables",
- "name": "H5",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "48px",
- "fontWeight": "800",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- },
- {
- "scope": "Variables",
- "name": "Body",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "14px",
- "fontWeight": "400",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- },
- {
- "scope": "Variables",
- "name": "H4",
- "cssProps": {
- "fontStyle": "normal",
- "fontSize": "36px",
- "fontWeight": "800",
- "direction": "ltr",
- "fontFamily": "\"Source Code Pro\""
- }
- }
-]
\ No newline at end of file
diff --git a/packages/demo/.env.template b/packages/demos/.env.template
similarity index 100%
rename from packages/demo/.env.template
rename to packages/demos/.env.template
diff --git a/packages/demo/.gitignore b/packages/demos/.gitignore
similarity index 100%
rename from packages/demo/.gitignore
rename to packages/demos/.gitignore
diff --git a/packages/demo/src/index.html b/packages/demos/demo-css/index.html
similarity index 99%
rename from packages/demo/src/index.html
rename to packages/demos/demo-css/index.html
index 8dd6730..37d7f55 100644
--- a/packages/demo/src/index.html
+++ b/packages/demos/demo-css/index.html
@@ -1,6 +1,6 @@
- penpot-export demo
+ penpot-export CSS demo
diff --git a/packages/demos/demo-css/penpot-export.config.js b/packages/demos/demo-css/penpot-export.config.js
new file mode 100644
index 0000000..e355e08
--- /dev/null
+++ b/packages/demos/demo-css/penpot-export.config.js
@@ -0,0 +1,33 @@
+// @ts-check
+require('dotenv').config({ path: '../.env' })
+
+if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
+ throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
+}
+
+/**
+ * @type {import('@penpot-export/core').UserConfig}
+ */
+const config = {
+ instance: process.env.PENPOT_BASE_URL || undefined,
+ accessToken: process.env.PENPOT_ACCESS_TOKEN,
+ files: [
+ {
+ fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
+ colors: [
+ {
+ format: 'css',
+ output: 'styles/colors.css', // 👈 Path where your CSS file should be generated.
+ },
+ ],
+ typographies: [
+ {
+ format: 'css',
+ output: 'styles/typographies.css', // 👈 Path where your CSS file should be generated.
+ },
+ ],
+ },
+ ],
+}
+
+module.exports = config
diff --git a/packages/demo/src/styles/colors.css b/packages/demos/demo-css/styles/colors.css
similarity index 100%
rename from packages/demo/src/styles/colors.css
rename to packages/demos/demo-css/styles/colors.css
diff --git a/packages/demo/src/styles/typographies.css b/packages/demos/demo-css/styles/typographies.css
similarity index 100%
rename from packages/demo/src/styles/typographies.css
rename to packages/demos/demo-css/styles/typographies.css
diff --git a/packages/demo/src/styles/colors.json b/packages/demos/demo-json/design-tokens/colors.json
similarity index 100%
rename from packages/demo/src/styles/colors.json
rename to packages/demos/demo-json/design-tokens/colors.json
diff --git a/packages/demo/src/styles/typographies.json b/packages/demos/demo-json/design-tokens/typographies.json
similarity index 100%
rename from packages/demo/src/styles/typographies.json
rename to packages/demos/demo-json/design-tokens/typographies.json
diff --git a/packages/demos/demo-json/penpot-export.config.js b/packages/demos/demo-json/penpot-export.config.js
new file mode 100644
index 0000000..ecb9cd4
--- /dev/null
+++ b/packages/demos/demo-json/penpot-export.config.js
@@ -0,0 +1,33 @@
+// @ts-check
+require('dotenv').config({ path: '../.env' })
+
+if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
+ throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
+}
+
+/**
+ * @type {import('@penpot-export/core').UserConfig}
+ */
+const config = {
+ instance: process.env.PENPOT_BASE_URL || undefined,
+ accessToken: process.env.PENPOT_ACCESS_TOKEN,
+ files: [
+ {
+ fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
+ colors: [
+ {
+ format: 'json',
+ output: './design-tokens/colors.json', // 👈 Path where your JSON file should be generated.
+ },
+ ],
+ typographies: [
+ {
+ format: 'json',
+ output: './design-tokens/typographies.json', // 👈 Path where your JSON file should be generated.
+ },
+ ],
+ },
+ ],
+}
+
+module.exports = config
diff --git a/packages/demos/demo-scss/index.html b/packages/demos/demo-scss/index.html
new file mode 100644
index 0000000..d60dcd3
--- /dev/null
+++ b/packages/demos/demo-scss/index.html
@@ -0,0 +1,62 @@
+
+
+ penpot-export SCSS demo
+
+
+
+
+ Responsive Typography
+ (Resize your 🖥 browser to < 768px to emulate a 📱)
+
+ Title Large
+
+
+ Title Medium
+
+
+ Title Small
+
+
+ Body Large
+
+
+ Body Medium
+
+
+ Body Small
+
+
+ Body Small Uppercase
+
+ Colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/demos/demo-scss/main.scss b/packages/demos/demo-scss/main.scss
new file mode 100644
index 0000000..ae7187b
--- /dev/null
+++ b/packages/demos/demo-scss/main.scss
@@ -0,0 +1,79 @@
+@use "sass:list";
+@use "sass:map";
+@use './variables/colors.scss';
+@use './variables/typographies.scss';
+
+
+@mixin patchColor($name, $color) {
+ &.bg-#{$name} {
+ background-color: $color;
+ }
+}
+
+.patch {
+ display: inline-block;
+ vertical-align: bottom;
+ margin-right: .3em;
+ width: 1.5em;
+ height: 1.5em;
+ border-radius: 50%;
+ background-color: inherit;
+
+ @include patchColor('Primary_100', colors.$Primary_100);
+ @include patchColor('Primary_200', colors.$Primary_200);
+ @include patchColor('Primary_300', colors.$Primary_300);
+ @include patchColor('Primary_400', colors.$Primary_400);
+ @include patchColor('Primary_500', colors.$Primary_500);
+ @include patchColor('Primary_600', colors.$Primary_600);
+ @include patchColor('Primary_700', colors.$Primary_700);
+ @include patchColor('Primary_800', colors.$Primary_800);
+ @include patchColor('Primary_900', colors.$Primary_900);
+ @include patchColor('Secondary_100', colors.$Secondary_100);
+ @include patchColor('Secondary_200', colors.$Secondary_200);
+ @include patchColor('Secondary_300', colors.$Secondary_300);
+ @include patchColor('Secondary_400', colors.$Secondary_400);
+ @include patchColor('Secondary_500', colors.$Secondary_500);
+ @include patchColor('Secondary_600', colors.$Secondary_600);
+ @include patchColor('Secondary_700', colors.$Secondary_700);
+ @include patchColor('Secondary_800', colors.$Secondary_800);
+ @include patchColor('Secondary_900', colors.$Secondary_900);
+ @include patchColor('Neutral_100', colors.$Neutral_100);
+ @include patchColor('Neutral_200', colors.$Neutral_200);
+ @include patchColor('Neutral_300', colors.$Neutral_300);
+ @include patchColor('Neutral_400', colors.$Neutral_400);
+ @include patchColor('Neutral_500', colors.$Neutral_500);
+ @include patchColor('Neutral_600', colors.$Neutral_600);
+ @include patchColor('Neutral_700', colors.$Neutral_700);
+ @include patchColor('Neutral_800', colors.$Neutral_800);
+ @include patchColor('Neutral_900', colors.$Neutral_900);
+}
+
+
+$breakpoint: 768px;
+@mixin desktop() {
+ @media (min-width: $breakpoint) {
+ @content;
+ }
+}
+@mixin typographyClass($name, $typographyMap) {
+ .#{$name} {
+ @each $prop, $value in $typographyMap {
+ #{$prop}: $value;
+ }
+ }
+}
+
+@include typographyClass('Body_Large', typographies.$Body_Large);
+@include typographyClass('Body_Medium', typographies.$Body_Medium);
+@include typographyClass('Body_Small', typographies.$Body_Small);
+@include typographyClass('Body_Small_Uppercase', typographies.$Body_Small_Uppercase);
+
+@include typographyClass('Title_Large', typographies.$📱_Title_Large);
+@include typographyClass('Title_Medium', typographies.$📱_Title_Medium);
+@include typographyClass('Title_Small', typographies.$📱_Title_Small);
+
+@include desktop() {
+ @include typographyClass('Title_Large', typographies.$🖥_Title_Large);
+ @include typographyClass('Title_Medium', typographies.$🖥_Title_Medium);
+ @include typographyClass('Title_Small', typographies.$🖥_Title_Small);
+}
diff --git a/packages/demos/demo-scss/penpot-export.config.js b/packages/demos/demo-scss/penpot-export.config.js
new file mode 100644
index 0000000..cc8a086
--- /dev/null
+++ b/packages/demos/demo-scss/penpot-export.config.js
@@ -0,0 +1,33 @@
+// @ts-check
+require('dotenv').config({ path: '../.env' })
+
+if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
+ throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
+}
+
+/**
+ * @type {import('@penpot-export/core').UserConfig}
+ */
+const config = {
+ instance: process.env.PENPOT_BASE_URL || undefined,
+ accessToken: process.env.PENPOT_ACCESS_TOKEN,
+ files: [
+ {
+ fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
+ colors: [
+ {
+ format: 'scss',
+ output: './variables/colors.scss', // 👈 Path where your SCSS file should be generated.
+ },
+ ],
+ typographies: [
+ {
+ format: 'scss',
+ output: './variables/typographies.scss', // 👈 Path where your SCSS file should be generated.
+ },
+ ],
+ },
+ ],
+}
+
+module.exports = config
diff --git a/packages/demos/demo-scss/styles/styles.css b/packages/demos/demo-scss/styles/styles.css
new file mode 100644
index 0000000..6e17c7f
--- /dev/null
+++ b/packages/demos/demo-scss/styles/styles.css
@@ -0,0 +1,192 @@
+.patch {
+ display: inline-block;
+ vertical-align: bottom;
+ margin-right: 0.3em;
+ width: 1.5em;
+ height: 1.5em;
+ border-radius: 50%;
+ background-color: inherit;
+}
+.patch.bg-Primary_100 {
+ background-color: #e9fff7;
+}
+.patch.bg-Primary_200 {
+ background-color: #caffe9;
+}
+.patch.bg-Primary_300 {
+ background-color: #9affd9;
+}
+.patch.bg-Primary_400 {
+ background-color: #5afbc7;
+}
+.patch.bg-Primary_500 {
+ background-color: #31efb8;
+}
+.patch.bg-Primary_600 {
+ background-color: #00d59a;
+}
+.patch.bg-Primary_700 {
+ background-color: #00ae7f;
+}
+.patch.bg-Primary_800 {
+ background-color: #008b69;
+}
+.patch.bg-Primary_900 {
+ background-color: #006e54;
+}
+.patch.bg-Secondary_100 {
+ background-color: #f9f5ff;
+}
+.patch.bg-Secondary_200 {
+ background-color: #f0e8ff;
+}
+.patch.bg-Secondary_300 {
+ background-color: #e4d4ff;
+}
+.patch.bg-Secondary_400 {
+ background-color: #cfb3ff;
+}
+.patch.bg-Secondary_500 {
+ background-color: #bf98fe;
+}
+.patch.bg-Secondary_600 {
+ background-color: #9453f9;
+}
+.patch.bg-Secondary_700 {
+ background-color: #7d30ed;
+}
+.patch.bg-Secondary_800 {
+ background-color: #691fd1;
+}
+.patch.bg-Secondary_900 {
+ background-color: #5b1faa;
+}
+.patch.bg-Neutral_100 {
+ background-color: #f7f8f9;
+}
+.patch.bg-Neutral_200 {
+ background-color: #f1f2f4;
+}
+.patch.bg-Neutral_300 {
+ background-color: #dcdfe4;
+}
+.patch.bg-Neutral_400 {
+ background-color: #b3b9c4;
+}
+.patch.bg-Neutral_500 {
+ background-color: #8590a2;
+}
+.patch.bg-Neutral_600 {
+ background-color: #758195;
+}
+.patch.bg-Neutral_700 {
+ background-color: #626f86;
+}
+.patch.bg-Neutral_800 {
+ background-color: #44546f;
+}
+.patch.bg-Neutral_900 {
+ background-color: #172b4d;
+}
+
+.Body_Large {
+ line-height: 1.4;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 400;
+ font-size: 21px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+.Body_Medium {
+ line-height: 1.4;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 400;
+ font-size: 18px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+.Body_Small {
+ line-height: 1.4;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 400;
+ font-size: 15px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+.Body_Small_Uppercase {
+ line-height: 1.4;
+ font-style: normal;
+ text-transform: uppercase;
+ font-weight: 400;
+ font-size: 13px;
+ letter-spacing: 1px;
+ font-family: "Work Sans";
+}
+
+.Title_Large {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 45px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+.Title_Medium {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 37px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+.Title_Small {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 31px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+}
+
+@media (min-width: 768px) {
+ .Title_Large {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 77px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+ }
+ .Title_Medium {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 54px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+ }
+ .Title_Small {
+ line-height: 1.2;
+ font-style: normal;
+ text-transform: none;
+ font-weight: 700;
+ font-size: 31px;
+ letter-spacing: 0px;
+ font-family: "Work Sans";
+ }
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/packages/demos/demo-scss/styles/styles.css.map b/packages/demos/demo-scss/styles/styles.css.map
new file mode 100644
index 0000000..1fd5429
--- /dev/null
+++ b/packages/demos/demo-scss/styles/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../main.scss","../variables/colors.scss","../variables/typographies.scss"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAZA;EACE,kBCDU;;ADAZ;EACE,kBCHU;;ADEZ;EACE,kBCOU;;ADRZ;EACE,kBCQU;;ADTZ;EACE,kBCgBU;;ADjBZ;EACE,kBCkBU;;ADnBZ;EACE,kBCcU;;ADfZ;EACE,kBCUU;;ADXZ;EACE,kBCRU;;ADOZ;EACE,kBCiBY;;ADlBd;EACE;;AADF;EACE,kBCSY;;ADVd;EACE,kBCNY;;ADKd;EACE,kBCPY;;ADMd;EACE,kBCMY;;ADPd;EACE,kBCeY;;ADhBd;EACE,kBCFY;;ADCd;EACE,kBCaY;;ADdd;EACE,kBCLU;;ADIZ;EACE,kBCCU;;ADFZ;EACE,kBCEU;;ADHZ;EACE,kBCIU;;ADLZ;EACE,kBCJU;;ADGZ;EACE,kBCKU;;ADNZ;EACE,kBCGU;;ADJZ;EACE,kBCYU;;ADbZ;EACE,kBCWU;;;ADuCZ;EAEI,aEfO;EFeP,YEfO;EFeP,gBEfO;EFeP,aEfO;EFeP,WEfO;EFeP,gBEfO;EFeP,aEfO;;;AFaX;EAEI,aEmCQ;EFnCR,YEmCQ;EFnCR,gBEmCQ;EFnCR,aEmCQ;EFnCR,WEmCQ;EFnCR,gBEmCQ;EFnCR,aEmCQ;;;AFrCZ;EAEI,aEeO;EFfP,YEeO;EFfP,gBEeO;EFfP,aEeO;EFfP,WEeO;EFfP,gBEeO;EFfP,aEeO;;;AFjBX;EAEI,aEnCiB;EFmCjB,YEnCiB;EFmCjB,gBEnCiB;EFmCjB,aEnCiB;EFmCjB,WEnCiB;EFmCjB,gBEnCiB;EFmCjB,aEnCiB;;;AFiCrB;EAEI,aEyBW;EFzBX,YEyBW;EFzBX,gBEyBW;EFzBX,aEyBW;EFzBX,WEyBW;EFzBX,gBEyBW;EFzBX,aEyBW;;;AF3Bf;EAEI,aE7CY;EF6CZ,YE7CY;EF6CZ,gBE7CY;EF6CZ,aE7CY;EF6CZ,WE7CY;EF6CZ,gBE7CY;EF6CZ,aE7CY;;;AF2ChB;EAEI,aELW;EFKX,YELW;EFKX,gBELW;EFKX,aELW;EFKX,WELW;EFKX,gBELW;EFKX,aELW;;;AFFf;EAKA;IAEI,aEzBW;IFyBX,YEzBW;IFyBX,gBEzBW;IFyBX,aEzBW;IFyBX,WEzBW;IFyBX,gBEzBW;IFyBX,aEzBW;;EFuBf;IAEI,aEvDY;IFuDZ,YEvDY;IFuDZ,gBEvDY;IFuDZ,aEvDY;IFuDZ,WEvDY;IFuDZ,gBEvDY;IFuDZ,aEvDY;;EFqDhB;IAEI,aEKW;IFLX,YEKW;IFLX,gBEKW;IFLX,aEKW;IFLX,WEKW;IFLX,gBEKW;IFLX,aEKW","file":"styles.css"}
\ No newline at end of file
diff --git a/packages/demo/src/styles/colors.scss b/packages/demos/demo-scss/variables/colors.scss
similarity index 100%
rename from packages/demo/src/styles/colors.scss
rename to packages/demos/demo-scss/variables/colors.scss
diff --git a/packages/demo/src/styles/typographies.scss b/packages/demos/demo-scss/variables/typographies.scss
similarity index 100%
rename from packages/demo/src/styles/typographies.scss
rename to packages/demos/demo-scss/variables/typographies.scss
diff --git a/packages/demos/package.json b/packages/demos/package.json
new file mode 100644
index 0000000..2e80914
--- /dev/null
+++ b/packages/demos/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "demos",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "generate-css": "cd demo-css && penpot-export",
+ "generate-json": "cd demo-json && penpot-export",
+ "generate-scss": "cd demo-scss && penpot-export && sass main.scss styles/styles.css",
+ "generate-all": "npm run generate-css && npm run generate-json && npm run generate-scss"
+ },
+ "dependencies": {
+ "@penpot-export/cli": "0.0.0",
+ "sass": "^1.67.0"
+ },
+ "devDependencies": {
+ "dotenv": "^16.3.1"
+ }
+}
diff --git a/yarn.lock b/yarn.lock
index 5882991..176dc0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -70,6 +70,14 @@ acorn@^8.4.1:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+anymatch@~3.1.2:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+ integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
arg@^4.1.0:
version "4.1.3"
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
@@ -80,6 +88,33 @@ asynckit@^0.4.0:
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+binary-extensions@^2.0.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+ integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+braces@~3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+ integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+ dependencies:
+ fill-range "^7.0.1"
+
+"chokidar@>=3.0.0 <4.0.0":
+ version "3.5.3"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+ integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+ 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"
+ optionalDependencies:
+ fsevents "~2.3.2"
+
combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -134,6 +169,13 @@ event-stream@=3.3.4:
stream-combiner "~0.0.4"
through "~2.3.1"
+fill-range@^7.0.1:
+ version "7.0.1"
+ resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+ integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+ dependencies:
+ to-regex-range "^5.0.1"
+
form-data@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
@@ -148,6 +190,47 @@ from@~0:
resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
integrity sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==
+fsevents@~2.3.2:
+ version "2.3.3"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+ integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+glob-parent@~5.1.2:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+ integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+ dependencies:
+ is-glob "^4.0.1"
+
+immutable@^4.0.0:
+ version "4.3.4"
+ resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+ integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
+is-binary-path@~2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+ integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+ dependencies:
+ binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+ integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+ integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+ dependencies:
+ is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+ integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -187,6 +270,11 @@ node-fetch@2:
dependencies:
whatwg-url "^5.0.0"
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+ integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
path-key@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
@@ -199,6 +287,11 @@ pause-stream@0.0.11:
dependencies:
through "~2.3"
+picomatch@^2.0.4, picomatch@^2.2.1:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+ integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
prettier@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.2.tgz#78fcecd6d870551aa5547437cdae39d4701dca5b"
@@ -211,6 +304,22 @@ ps-tree@^1.2.0:
dependencies:
event-stream "=3.3.4"
+readdirp@~3.6.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+ integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+ dependencies:
+ picomatch "^2.2.1"
+
+sass@^1.67.0:
+ version "1.67.0"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.67.0.tgz#fed84d74b9cd708db603b1380d6dc1f71bb24f6f"
+ integrity sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==
+ dependencies:
+ chokidar ">=3.0.0 <4.0.0"
+ immutable "^4.0.0"
+ source-map-js ">=0.6.2 <2.0.0"
+
shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -223,6 +332,11 @@ shebang-regex@^3.0.0:
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+"source-map-js@>=0.6.2 <2.0.0":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+ integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
split@0.3:
version "0.3.3"
resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
@@ -247,6 +361,13 @@ through@2, through@~2.3, through@~2.3.1:
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+to-regex-range@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+ integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+ dependencies:
+ is-number "^7.0.0"
+
tr46@~0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"