mirror of
https://github.com/penpot/penpot-export.git
synced 2025-01-02 04:40:05 -05:00
feat(demo): split demos per output format
Adds a SCSS-specific demo
This commit is contained in:
parent
ec3e1b52e9
commit
ba9886beb4
23 changed files with 574 additions and 192 deletions
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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
|
|
@ -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";
|
||||
}
|
|
@ -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\""
|
||||
}
|
||||
}
|
||||
]
|
|
@ -1,6 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>penpot-export demo</title>
|
||||
<title>penpot-export CSS demo</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work%20Sans:400,700' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="./styles/typographies.css">
|
||||
<link rel="stylesheet" href="./styles/colors.css">
|
33
packages/demos/demo-css/penpot-export.config.js
Normal file
33
packages/demos/demo-css/penpot-export.config.js
Normal file
|
@ -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
|
33
packages/demos/demo-json/penpot-export.config.js
Normal file
33
packages/demos/demo-json/penpot-export.config.js
Normal file
|
@ -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
|
62
packages/demos/demo-scss/index.html
Normal file
62
packages/demos/demo-scss/index.html
Normal file
|
@ -0,0 +1,62 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>penpot-export SCSS demo</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Work%20Sans:400,700' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="./styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Responsive Typography</h1>
|
||||
<h2>(Resize your 🖥 browser to < 768px to emulate a 📱)</h2>
|
||||
<div>
|
||||
<span class="Title_Large">Title Large</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Title_Medium">Title Medium</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Title_Small">Title Small</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Body_Large">Body Large</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Body_Medium">Body Medium</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Body_Small">Body Small</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Body_Small_Uppercase">Body Small Uppercase</span>
|
||||
</div>
|
||||
<h1>Colors</h1>
|
||||
<ul>
|
||||
<li><output class="patch bg-Neutral_100"></output><label>Neutral 100</label></li>
|
||||
<li><output class="patch bg-Neutral_200"></output><label>Neutral 200</label></li>
|
||||
<li><output class="patch bg-Neutral_300"></output><label>Neutral 300</label></li>
|
||||
<li><output class="patch bg-Neutral_400"></output><label>Neutral 400</label></li>
|
||||
<li><output class="patch bg-Neutral_500"></output><label>Neutral 500</label></li>
|
||||
<li><output class="patch bg-Neutral_600"></output><label>Neutral 600</label></li>
|
||||
<li><output class="patch bg-Neutral_700"></output><label>Neutral 700</label></li>
|
||||
<li><output class="patch bg-Neutral_800"></output><label>Neutral 800</label></li>
|
||||
<li><output class="patch bg-Neutral_900"></output><label>Neutral 900</label></li>
|
||||
<li><output class="patch bg-Primary_100"></output><label>Primary 100</label></li>
|
||||
<li><output class="patch bg-Primary_200"></output><label>Primary 200</label></li>
|
||||
<li><output class="patch bg-Primary_300"></output><label>Primary 300</label></li>
|
||||
<li><output class="patch bg-Primary_400"></output><label>Primary 400</label></li>
|
||||
<li><output class="patch bg-Primary_500"></output><label>Primary 500</label></li>
|
||||
<li><output class="patch bg-Primary_600"></output><label>Primary 600</label></li>
|
||||
<li><output class="patch bg-Primary_700"></output><label>Primary 700</label></li>
|
||||
<li><output class="patch bg-Primary_800"></output><label>Primary 800</label></li>
|
||||
<li><output class="patch bg-Primary_900"></output><label>Primary 900</label></li>
|
||||
<li><output class="patch bg-Secondary_100"></output><label>Secondary 100</label></li>
|
||||
<li><output class="patch bg-Secondary_200"></output><label>Secondary 200</label></li>
|
||||
<li><output class="patch bg-Secondary_300"></output><label>Secondary 300</label></li>
|
||||
<li><output class="patch bg-Secondary_400"></output><label>Secondary 400</label></li>
|
||||
<li><output class="patch bg-Secondary_500"></output><label>Secondary 500</label></li>
|
||||
<li><output class="patch bg-Secondary_600"></output><label>Secondary 600</label></li>
|
||||
<li><output class="patch bg-Secondary_700"></output><label>Secondary 700</label></li>
|
||||
<li><output class="patch bg-Secondary_800"></output><label>Secondary 800</label></li>
|
||||
<li><output class="patch bg-Secondary_900"></output><label>Secondary 900</label></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
79
packages/demos/demo-scss/main.scss
Normal file
79
packages/demos/demo-scss/main.scss
Normal file
|
@ -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);
|
||||
}
|
33
packages/demos/demo-scss/penpot-export.config.js
Normal file
33
packages/demos/demo-scss/penpot-export.config.js
Normal file
|
@ -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
|
192
packages/demos/demo-scss/styles/styles.css
Normal file
192
packages/demos/demo-scss/styles/styles.css
Normal file
|
@ -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 */
|
1
packages/demos/demo-scss/styles/styles.css.map
Normal file
1
packages/demos/demo-scss/styles/styles.css.map
Normal file
|
@ -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"}
|
18
packages/demos/package.json
Normal file
18
packages/demos/package.json
Normal file
|
@ -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"
|
||||
}
|
||||
}
|
121
yarn.lock
121
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"
|
||||
|
|
Loading…
Reference in a new issue