From ba9886beb417596df7de392707a7222bcfc46351 Mon Sep 17 00:00:00 2001 From: Roberto Redradix Date: Fri, 15 Sep 2023 17:58:24 +0200 Subject: [PATCH] feat(demo): split demos per output format Adds a SCSS-specific demo --- package.json | 2 +- packages/demo/package.json | 14 -- packages/demo/penpot-export.config.js | 61 ------ packages/demo/src/styles/ui.css | 47 ----- packages/demo/src/styles/ui.json | 68 ------- packages/{demo => demos}/.env.template | 0 packages/{demo => demos}/.gitignore | 0 .../{demo/src => demos/demo-css}/index.html | 2 +- .../demos/demo-css/penpot-export.config.js | 33 +++ .../src => demos/demo-css}/styles/colors.css | 0 .../demo-css}/styles/typographies.css | 0 .../demo-json/design-tokens}/colors.json | 0 .../design-tokens}/typographies.json | 0 .../demos/demo-json/penpot-export.config.js | 33 +++ packages/demos/demo-scss/index.html | 62 ++++++ packages/demos/demo-scss/main.scss | 79 +++++++ .../demos/demo-scss/penpot-export.config.js | 33 +++ packages/demos/demo-scss/styles/styles.css | 192 ++++++++++++++++++ .../demos/demo-scss/styles/styles.css.map | 1 + .../demo-scss/variables}/colors.scss | 0 .../demo-scss/variables}/typographies.scss | 0 packages/demos/package.json | 18 ++ yarn.lock | 121 +++++++++++ 23 files changed, 574 insertions(+), 192 deletions(-) delete mode 100644 packages/demo/package.json delete mode 100644 packages/demo/penpot-export.config.js delete mode 100644 packages/demo/src/styles/ui.css delete mode 100644 packages/demo/src/styles/ui.json rename packages/{demo => demos}/.env.template (100%) rename packages/{demo => demos}/.gitignore (100%) rename packages/{demo/src => demos/demo-css}/index.html (99%) create mode 100644 packages/demos/demo-css/penpot-export.config.js rename packages/{demo/src => demos/demo-css}/styles/colors.css (100%) rename packages/{demo/src => demos/demo-css}/styles/typographies.css (100%) rename packages/{demo/src/styles => demos/demo-json/design-tokens}/colors.json (100%) rename packages/{demo/src/styles => demos/demo-json/design-tokens}/typographies.json (100%) create mode 100644 packages/demos/demo-json/penpot-export.config.js create mode 100644 packages/demos/demo-scss/index.html create mode 100644 packages/demos/demo-scss/main.scss create mode 100644 packages/demos/demo-scss/penpot-export.config.js create mode 100644 packages/demos/demo-scss/styles/styles.css create mode 100644 packages/demos/demo-scss/styles/styles.css.map rename packages/{demo/src/styles => demos/demo-scss/variables}/colors.scss (100%) rename packages/{demo/src/styles => demos/demo-scss/variables}/typographies.scss (100%) create mode 100644 packages/demos/package.json 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"