Skip to content
This repository was archived by the owner on Jan 7, 2026. It is now read-only.

Commit a9a5bc8

Browse files
hirunatanhirunatan
committed
feat: add tokens to plugins API
1 parent ebf4a13 commit a9a5bc8

24 files changed

+1942
-4
lines changed

‎apps/poc-tokens-plugin/eslint.config.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import baseConfig from '../../eslint.config.js';
2+
import { compat } from '../../eslint.base.config.js';
3+
4+
export default [
5+
...baseConfig,
6+
...compat
7+
.config({
8+
extends: [
9+
'plugin:@nx/angular',
10+
'plugin:@angular-eslint/template/process-inline-templates',
11+
],
12+
})
13+
.map((config) => ({
14+
...config,
15+
files: ['**/*.ts'],
16+
rules: {
17+
'@angular-eslint/directive-selector': [
18+
'error',
19+
{
20+
type: 'attribute',
21+
prefix: 'app',
22+
style: 'camelCase',
23+
},
24+
],
25+
'@angular-eslint/component-selector': [
26+
'error',
27+
{
28+
type: 'element',
29+
prefix: 'app',
30+
style: 'kebab-case',
31+
},
32+
],
33+
},
34+
})),
35+
...compat
36+
.config({ extends: ['plugin:@nx/angular-template'] })
37+
.map((config) => ({
38+
...config,
39+
files: ['**/*.html'],
40+
rules: {},
41+
})),
42+
{ ignores: ['**/assets/*.js'] },
43+
{
44+
languageOptions: {
45+
parserOptions: {
46+
project: './tsconfig.*?.json',
47+
tsconfigRootDir: import.meta.dirname,
48+
},
49+
},
50+
},
51+
];

‎apps/poc-tokens-plugin/project.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"name": "poc-tokens-plugin",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/poc-tokens-plugin/src",
7+
"tags": ["type:plugin"],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:application",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/poc-tokens-plugin",
14+
"index": "apps/poc-tokens-plugin/src/index.html",
15+
"browser": "apps/poc-tokens-plugin/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/poc-tokens-plugin/tsconfig.app.json",
18+
"assets": [
19+
"apps/poc-tokens-plugin/src/favicon.ico",
20+
"apps/poc-tokens-plugin/src/assets"
21+
],
22+
"styles": [
23+
"libs/plugins-styles/src/lib/styles.css",
24+
"apps/poc-tokens-plugin/src/styles.css"],
25+
"scripts": [],
26+
"optimization": {
27+
"scripts": true,
28+
"styles": true,
29+
"fonts": false
30+
}
31+
},
32+
"configurations": {
33+
"production": {
34+
"budgets": [
35+
{
36+
"type": "initial",
37+
"maximumWarning": "500kb",
38+
"maximumError": "1mb"
39+
},
40+
{
41+
"type": "anyComponentStyle",
42+
"maximumWarning": "2kb",
43+
"maximumError": "4kb"
44+
}
45+
],
46+
"outputHashing": "all"
47+
},
48+
"development": {
49+
"optimization": false,
50+
"extractLicenses": false,
51+
"sourceMap": true
52+
}
53+
},
54+
"defaultConfiguration": "production",
55+
"dependsOn": ["buildPlugin"]
56+
},
57+
"serve": {
58+
"executor": "@angular-devkit/build-angular:dev-server",
59+
"configurations": {
60+
"production": {
61+
"buildTarget": "poc-tokens-plugin:build:production"
62+
},
63+
"development": {
64+
"buildTarget": "poc-tokens-plugin:build:development",
65+
"port": 4309,
66+
"host": "0.0.0.0"
67+
}
68+
},
69+
"defaultConfiguration": "development"
70+
},
71+
"extract-i18n": {
72+
"executor": "@angular-devkit/build-angular:extract-i18n",
73+
"options": {
74+
"buildTarget": "poc-tokens-plugin:build"
75+
}
76+
}
77+
}
78+
}

‎apps/poc-tokens-plugin/src/app/app.component.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/* @import "@penpot/plugin-styles/styles.css"; */
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
height: 100%;
7+
}
8+
9+
.title-l {
10+
margin: var(--spacing-16) 0;
11+
}
12+
13+
.columns {
14+
display: grid;
15+
grid-template-columns: 50% 50%;
16+
flex-grow: 1;
17+
margin-block-end: var(--spacing-16);
18+
}
19+
20+
.panels {
21+
display: flex;
22+
flex-direction: column;
23+
flex-grow: 1;
24+
padding: 0 var(--spacing-8);
25+
}
26+
27+
.panel {
28+
padding: var(--spacing-8);
29+
display: flex;
30+
flex-basis: 0;
31+
flex-grow: 1;
32+
flex-direction: column;
33+
overflow: auto;
34+
}
35+
36+
.panel:not(:first-child) {
37+
border-block-start: 1px solid var(--df-secondary);
38+
padding-block-start: var(--spacing-16);
39+
}
40+
41+
.panel-heading,
42+
.token-group {
43+
display: flex;
44+
flex-direction: row;
45+
padding-inline-end: var(--spacing-8);
46+
}
47+
48+
.panel-heading p,
49+
.token-group span {
50+
flex-grow: 1;
51+
}
52+
53+
.panel-heading button,
54+
.token-group button {
55+
background: none;
56+
padding: var(--spacing-4) calc(var(--spacing-12) / 2);
57+
}
58+
59+
.panel-heading button:focus,
60+
.token-group button:focus {
61+
padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
62+
}
63+
64+
.panel-item button {
65+
opacity: 0;
66+
margin-inline-end: var(--spacing-8);
67+
padding: var(--spacing-4) calc(var(--spacing-12) / 2);
68+
}
69+
70+
.panel-item button:hover {
71+
opacity: 1;
72+
}
73+
74+
.panel-item button:focus {
75+
opacity: 1;
76+
padding: calc(var(--spacing-4) - 2px) calc(var(--spacing-12) / 2 - 2px);
77+
}
78+
79+
.panel ul {
80+
/* flex-grow: 1; */
81+
overflow-y: auto;
82+
padding-inline-end: var(--spacing-8);
83+
}
84+
85+
.panel-item {
86+
display: flex;
87+
flex-direction: row;
88+
}
89+
90+
.panel-item span {
91+
flex-grow: 1;
92+
}
93+
94+
.set-item {
95+
cursor: pointer;
96+
}
97+
98+
.set-item.selected {
99+
background-color: var(--db-quaternary);
100+
}
101+
102+
.set-item:hover {
103+
color: var(--da-primary);
104+
background-color: var(--db-secondary);
105+
}
106+
107+
.token-group:not(:first-child) {
108+
margin-top: var(--spacing-8);
109+
}
110+
111+
.token-group {
112+
border-block-end: 1px solid var(--df-secondary);
113+
text-transform: capitalize;
114+
}
115+
116+
.token-item {
117+
cursor: pointer;
118+
}
119+
120+
.token-item:hover {
121+
color: var(--da-primary);
122+
}
123+
124+
.buttons {
125+
display: flex;
126+
flex-direction: row-reverse;
127+
}
128+

‎apps/poc-tokens-plugin/src/app/app.component.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<div class="container">
2+
<p class="title-l">Design tokens plugin POC</p>
3+
4+
<div class="columns">
5+
<div class="panels">
6+
7+
<div class="panel">
8+
<div class="panel-heading">
9+
<p class="headline-m">THEMES</p>
10+
<button type="button" data-appearance="secondary"
11+
(click)="addTheme()">
12+
+
13+
</button>
14+
</div>
15+
16+
<ul data-handler="themes-list">
17+
@for (theme of themes; track theme.id) {
18+
<li class="body-m panel-item theme-item">
19+
<span>{{ theme.group }} / {{ theme.name }}</span>
20+
<button type="button" data-appearance="secondary"
21+
(click)="renameTheme(theme.id, theme.name)">
22+
🖊️
23+
</button>
24+
<button type="button" data-appearance="secondary"
25+
(click)="deleteTheme(theme.id)">
26+
❌
27+
</button>
28+
<div class="checkbox-container">
29+
<input class="checkbox-input" type="checkbox" id="checkbox1"
30+
[checked]="isThemeActive(theme.id)"
31+
(change)="toggleTheme(theme.id)">
32+
</div>
33+
</li>
34+
}
35+
</ul>
36+
</div>
37+
38+
<div class="panel">
39+
<div class="panel-heading">
40+
<p class="headline-m">SETS</p>
41+
<button type="button" data-appearance="secondary"
42+
(click)="addSet()">
43+
+
44+
</button>
45+
</div>
46+
47+
<ul data-handler="sets-list">
48+
@for (set of sets; track set.id) {
49+
<li class="body-m panel-item set-item"
50+
[class.selected]="set.id === currentSetId">
51+
<span (click)="loadTokens(set.id)">
52+
{{ set.name }}
53+
</span>
54+
<button type="button" data-appearance="secondary"
55+
(click)="renameSet(set.id, set.name)">
56+
🖊️
57+
</button>
58+
<button type="button" data-appearance="secondary"
59+
(click)="deleteSet(set.id)">
60+
❌
61+
</button>
62+
<div class="checkbox-container">
63+
<input class="checkbox-input" type="checkbox" id="checkbox1"
64+
[checked]="isSetActive(set.id)"
65+
(change)="toggleSet(set.id)">
66+
</div>
67+
</li>
68+
}
69+
</ul>
70+
</div>
71+
72+
</div>
73+
<div class="panels">
74+
75+
<div class="panel">
76+
<p class="headline-m">TOKENS</p>
77+
78+
<ul data-handler="tokens-list">
79+
@for (group of tokenGroups; track group[0]) {
80+
<li class="body-m token-group">
81+
<span>{{ group[0] }}</span>
82+
<button type="button" data-appearance="secondary"
83+
(click)="addToken(group[0])">
84+
+
85+
</button>
86+
</li>
87+
@for (token of group[1]; track token.id) {
88+
<li class="body-m panel-item token-item"
89+
(click)="applyToken(token.id)">
90+
<span>{{ token.name }}</span>
91+
<button type="button" data-appearance="secondary"
92+
(click)="renameToken(token.id, token.name)">
93+
🖊️
94+
</button>
95+
<button type="button" data-appearance="secondary"
96+
(click)="deleteToken(token.id)">
97+
❌
98+
</button>
99+
</li>
100+
}
101+
}
102+
</ul>
103+
</div>
104+
105+
</div>
106+
</div>
107+
108+
<div class="buttons">
109+
<button type="button" data-appearance="primary"
110+
(click)="loadLibrary()">
111+
Load
112+
</button>
113+
</div>
114+
115+
</div>
116+

0 commit comments

Comments
 (0)