Skip to content

Commit f3b5189

Browse files
roberto-redroberto-red
committed
chore: integrate design tokens right from Penpot
1 parent ad20f5a commit f3b5189

9 files changed

+317
-12
lines changed

‎frontend/.env.example

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,12 @@ VITE_API_URL="http://localhost:1337/api"
1717
# With optional port and path but without trailing slash
1818
# In local development, this is exactly the same as the CMS origin
1919
VITE_STORAGE_URL="http://localhost:1337"
20+
21+
# CONFIG [optional] Base URL of the Penpot instance to be used with penpot-export
22+
# With scheme, optional port and path but without trailing slash
23+
PENPOT_BASE_URL="https://design.penpot.app"
24+
25+
# SECRET Personal access token to synchronize design tokens with penpot-export
26+
# Generate a new one from the Penpot webapp at Your account -> Access Tokens
27+
# It only needs read-only permissions
28+
PENPOT_ACCESS_TOKEN="<generate a new one>"

‎frontend/package-lock.json

Lines changed: 107 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"node": "18.x.x"
77
},
88
"scripts": {
9+
"sync-penpot": "penpot-export",
910
"dev": "vite dev",
1011
"build": "vite build",
1112
"preview": "vite preview",
@@ -39,8 +40,10 @@
3940
},
4041
"type": "module",
4142
"dependencies": {
43+
"@penpot-export/cli": "^0.1.0-beta.0",
4244
"axios": "^1.4.0",
4345
"bulma-list": "^1.2.0",
46+
"dotenv": "^16.3.1",
4447
"svelte-markdown": "https://github.com/nwaughachukwuma/svelte-markdown/tarball/upgrade-to-svelte-4",
4548
"svelte-modals": "^1.3.0",
4649
"underscore": "^1.13.6"

‎frontend/penpot-export.config.cjs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// eslint-disable-next-line
2+
const dotenv = require('dotenv');
3+
dotenv.config();
4+
5+
if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
6+
throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable');
7+
}
8+
9+
const config = {
10+
instance: process.env.PENPOT_BASE_URL || undefined,
11+
accessToken: process.env.PENPOT_ACCESS_TOKEN,
12+
files: [
13+
{
14+
fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
15+
colors: [
16+
{
17+
output: 'src/design-system/colors.scss',
18+
format: 'scss'
19+
}
20+
],
21+
typographies: [
22+
{
23+
output: 'src/design-system/typographies.scss',
24+
format: 'scss'
25+
}
26+
]
27+
}
28+
]
29+
};
30+
31+
module.exports = config;

‎frontend/penpot-export.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
penpot-export.config.cjs

‎frontend/src/app.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:700,400">
67
<meta name="viewport" content="width=device-width initial-scale=1" />
78
%sveltekit.head%
89

‎frontend/src/app.scss

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,45 @@
1+
@use 'sass:map';
2+
@use 'design-system/colors.scss';
3+
@use 'design-system/typographies.scss';
4+
15
// Theme configuration is done by giving value to Bulma variables
26
// https://bulma.io/documentation/customize/variables
37

48
// -- Initial variables (with a literal value)
59

6-
$penpot-green: #53f5c3;
7-
$penpot-violet: #c19bff;
8-
$darkblue: #151132;
10+
$green: colors.$Primary_500;
11+
$purple: colors.$Secondary_500;
12+
$text: colors.$Neutral_900;
13+
$family-sans-serif: map.get(typographies.$🖥_Title_Large, "font-family"), sans-serif;
14+
15+
$size-1: map.get(typographies.$🖥_Title_Large , "font-size");
16+
$size-2: map.get(typographies.$🖥_Title_Medium, "font-size");
17+
$size-3: map.get(typographies.$🖥_Title_Small , "font-size");
18+
$size-4: map.get(typographies.$Body_Large , "font-size");
19+
$size-5: map.get(typographies.$Body_Medium, "font-size");
20+
$size-6: map.get(typographies.$Body_Small , "font-size");
21+
$size-7: map.get(typographies.$Body_Small_Uppercase, "font-size");
22+
23+
// -- -- Custom initial variables
24+
25+
$green-light: colors.$Primary_200;
26+
$purple-light: colors.$Secondary_300;
927

1028
// -- Derived variables (that take value from other variables)
1129

12-
$primary: $penpot-violet;
13-
$secondary: $penpot-violet;
14-
$dark: $darkblue;
15-
$dark-invert: $penpot-green;
16-
$link: $penpot-violet;
30+
$primary: $green;
31+
$primary-light: $green-light;
32+
$dark: colors.$Neutral_900;
33+
$info: $purple;
34+
$info-light: $purple-light;
35+
$text-light: $text;
36+
$text-strong: $text;
37+
$link: colors.$Primary_700;
38+
$white: colors.$Neutral_200;
39+
40+
// -- -- Custom derived variables
41+
42+
$secondary: $purple;
1743

1844
// -- Import all bulma styles
1945

‎frontend/src/design-system/colors.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
$Primary_900: #006e54ff;
2+
$Secondary_500: #bf98feff;
3+
$Secondary_400: #cfb3ffff;
4+
$Neutral_100: #f7f8f9ff;
5+
$Neutral_500: #8590a2ff;
6+
$Primary_200: #caffe9ff;
7+
$Secondary_800: #691fd1ff;
8+
$Primary_100: #e9fff7ff;
9+
$Secondary_200: #f0e8ffff;
10+
$Neutral_200: #f1f2f4ff;
11+
$Neutral_300: #dcdfe4ff;
12+
$Neutral_700: #626f86ff;
13+
$Neutral_400: #b3b9c4ff;
14+
$Neutral_600: #758195ff;
15+
$Secondary_600: #9453f9ff;
16+
$Primary_300: #9affd9ff;
17+
$Primary_400: #5afbc7ff;
18+
$Secondary_300: #e4d4ffff;
19+
$Primary_800: #008b69ff;
20+
$Neutral_900: #172b4dff;
21+
$Neutral_800: #44546fff;
22+
$Secondary_900: #5b1faaff;
23+
$Primary_700: #00ae7fff;
24+
$Secondary_700: #7d30edff;
25+
$Primary_500: #31efb8ff;
26+
$Secondary_100: #f9f5ffff;
27+
$Primary_600: #00d59aff;

0 commit comments

Comments
 (0)