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

Commit 9d4653c

Browse files
Alotorhirunatan
Alotor
authored and
hirunatan
committed
feat: add tokens to plugins API
1 parent 819a549 commit 9d4653c

25 files changed

Lines changed: 2000 additions & 4 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ A table listing the available plugins and their corresponding startup commands i
5757
| table-plugin | Create or import table | 4306 | npm run start:table-plugin | http://localhost:4306/assets/manifest.json |
5858
| rename-layers-plugin | Rename layers in bulk | 4307 | npm run start:plugin:renamelayers | http://localhost:4307/assets/manifest.json |
5959
| colors-to-tokens-plugin | Generate tokens JSON file | 4308 | npm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
60+
| poc-tokens-plugin | Sandbox plugin to test tokens functionality | 4309 | npm run start:plugin:poc-tokens | http://localhost:4309/assets/manifest.json |
6061

6162
## Web Apps
6263

‎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: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
],
26+
"scripts": [],
27+
"optimization": {
28+
"scripts": true,
29+
"styles": true,
30+
"fonts": false
31+
}
32+
},
33+
"configurations": {
34+
"production": {
35+
"budgets": [
36+
{
37+
"type": "initial",
38+
"maximumWarning": "500kb",
39+
"maximumError": "1mb"
40+
},
41+
{
42+
"type": "anyComponentStyle",
43+
"maximumWarning": "2kb",
44+
"maximumError": "4kb"
45+
}
46+
],
47+
"outputHashing": "all"
48+
},
49+
"development": {
50+
"optimization": false,
51+
"extractLicenses": false,
52+
"sourceMap": true
53+
}
54+
},
55+
"defaultConfiguration": "production",
56+
"dependsOn": ["buildPlugin"]
57+
},
58+
"serve": {
59+
"executor": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "poc-tokens-plugin:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "poc-tokens-plugin:build:development",
66+
"port": 4309,
67+
"host": "0.0.0.0"
68+
}
69+
},
70+
"defaultConfiguration": "development"
71+
},
72+
"extract-i18n": {
73+
"executor": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"buildTarget": "poc-tokens-plugin:build"
76+
}
77+
}
78+
}
79+
}

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

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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+
}

0 commit comments

Comments
 (0)