Move Styles to Variables (#57)

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+.turbo

.npmrc

@@ -0,0 +1 @@
+prefer-workspace-packages: true

shared/config.ts → core/config.ts

@@ -1,3 +1,13 @@
+export interface Settings {
+ context: string;
+ contexts: string[];
+
+ 'tools.auto-update-references': boolean,
+ 'tools.jsonbin.key': string,
+ 'tools.jsonbin.id': string,
+ 'context.prefix': string;
+}
+
 export const DEFAULT_CONFIG = Object.freeze({
  // default values
  'context': 'light',

core/migrate.ts

@@ -0,0 +1,19 @@
+export function filterStyles(styles: PaintStyle[], searchPhrase: string): PaintStyle[] {
+ if (searchPhrase) {
+ let search: RegExp;
+
+ if (searchPhrase.startsWith('/') && searchPhrase.endsWith('/')) {
+ search = new RegExp(searchPhrase);
+ }
+
+ return styles.filter((style) => {
+ if (search) {
+ return search.exec(style.name)
+ }
+
+ return style.name.includes(searchPhrase as string);
+ });
+ }
+
+ return styles;
+}

core/node/commands.ts

@@ -0,0 +1,4 @@
+export interface MigrateStylesPayload {
+ collection: string;
+ searchPhrase: string;
+}

core/node/events.ts

@@ -0,0 +1,47 @@
+interface Reference {
+ from: string;
+ to: string;
+ transforms: {};
+}
+
+export interface CollectedReferencesNode {
+ node: {
+ id: string;
+ },
+ fill?: Reference;
+ stroke?: Reference;
+ effect?: Reference;
+ text?: Reference;
+}
+
+export interface CollectedReferencesPayload {
+ document: {
+ id: string;
+ name: string;
+ },
+ nodes: CollectedReferencesNode[]
+}
+
+export interface StatsPayload {
+ total: number;
+ text: number;
+ fill: number;
+ stroke: number;
+ effect: number;
+ contexts: number;
+}
+
+export enum StyleTypes {
+ Fill = 'fill',
+ Stroke = 'stroke',
+ Effect = 'effect',
+ Text = 'text'
+}
+
+export interface NodesWithStyles {
+ id: string;
+ name: string;
+ styles: StyleTypes[]
+}
+
+export type NodesPayload = NodesWithStyles[];

core/node/index.ts

@@ -0,0 +1 @@
+export type Context = string;

core/package.json

@@ -0,0 +1,17 @@
+{
+ "name": "@theemo-figma/core",
+ "version": "10",
+ "description": "",
+ "scripts": {
+ "_build": "esbuild src/main.ts --bundle --outfile=dist/main.js --tsconfig=src/tsconfig.json --target=es6",
+ "_start": "pnpm run build -- --watch"
+ },
+ "author": "Thomas Gossmann",
+ "license": "MIT",
+ "devDependencies": {
+ "@figma/plugin-typings": "^1.70.0",
+ "concurrently": "^6.3.0",
+ "esbuild": "^0.18.11",
+ "typescript": "^5.1.6"
+ }
+}

core/styles/commands.ts

@@ -0,0 +1,25 @@
+import { Transforms } from '../transforms';
+import { VariableConfig } from './index';
+
+export enum CommandName {
+ SaveTransforms = 'styles.save-transforms',
+ DeleteTransforms = 'styles.delete-transforms',
+ ReadConfig = 'styles.read-config',
+ LinkReference = 'styles.link-reference',
+ UnlinkReference = 'styles.unlink-reference',
+ UpdateVariables = 'styles.update-variables',
+}
+
+export interface Commands {
+ [CommandName.SaveTransforms]: Pick<VariableConfig, 'variableId' | 'modeId' | 'transforms'>;
+ [CommandName.DeleteTransforms]: Pick<VariableConfig, 'variableId' | 'modeId'>;
+ [CommandName.ReadConfig]: undefined;
+ [CommandName.LinkReference]: {
+ styleId: string;
+ referenceId: string;
+ };
+ [CommandName.UnlinkReference]: {
+ styleId: string;
+ };
+ [CommandName.UpdateVariables]: undefined;
+}

core/styles/events.ts

@@ -0,0 +1,16 @@
+import { Config, StyleDescriptor } from './index';
+
+export enum EventName {
+ StylesInitiated = 'styles.styles-initiated',
+ StyleCreated = 'styles.style-created',
+ StyleUpdated = 'styles.style-updated',
+ StyleDeleted = 'styles.style-deleted',
+ ConfigArrived = 'styles.config-arrived'
+}
+
+export interface Events {
+ [EventName.StyleCreated]: StyleDescriptor;
+ [EventName.StyleUpdated]: StyleDescriptor;
+ [EventName.StyleDeleted]: StyleDescriptor;
+ [EventName.ConfigArrived]: Config;
+}

core/styles/index.ts

@@ -0,0 +1,28 @@
+import { Transforms } from '../transforms';
+
+export interface StyleDescriptor {
+ id: string;
+ name: string;
+ style: PaintStyle | EffectStyle | TextStyle;
+ reference?: string;
+ transforms?: Transforms;
+}
+
+export interface StyleConfig {
+ styleId: string;
+ /** Id of the referenced style */
+ referenceId: string;
+}
+
+export interface VariableConfig {
+ variableId: string;
+ modeId: string;
+ /** Id of the referenced variable */
+ referenceId: string;
+ transforms: Transforms;
+}
+
+export interface Config {
+ styles: StyleConfig[];
+ variables: VariableConfig[];
+}

core/system/events.ts

@@ -0,0 +1,7 @@
+export enum EventName {
+ VersionChanged = 'version-changed'
+}
+
+export interface Events {
+ [EventName.VersionChanged]: string;
+}

core/transforms.ts

@@ -0,0 +1,8 @@
+export interface PaintTransforms {
+ hue?: number;
+ saturation?: number;
+ lightness?: number;
+ opacity?: number;
+}
+
+export type Transforms = PaintTransforms; // or NumericTransforms

core/tsconfig.json

@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es6",
+ "strict": true,
+ "esModuleInterop": true,
+ "inlineSourceMap": false,
+ "typeRoots": [
+ "node_modules/@types",
+ "node_modules/@figma"
+ ],
+ }
+}

manifest.json

@@ -3,5 +3,6 @@
  "id": "791262205400516364",
  "api": "1.0.0",
  "main": "dist/main.js",
- "ui": "dist/ui.html"
-}
+ "ui": "dist/index.html",
+ "editorType": ["figma"]
+}

package.json

@@ -2,33 +2,14 @@
  "name": "figma-theemo",
  "version": "10",
  "description": "",
- "scripts": {
- "test": "jest",
- "test:watch": "jest --watch",
- "build": "yarn webpack --mode=production",
- "start": "yarn webpack --mode=development --watch"
- },
  "author": "Thomas Gossmann",
  "license": "MIT",
- "dependencies": {
- "color-converter": "1.4.1",
- "css-loader": "^3.4.0",
- "figma-plugin-ds": "^0.1.8",
- "html-webpack-inline-source-plugin": "0.0.10",
- "html-webpack-plugin": "^3.2.0",
- "style-loader": "^1.1.2",
- "ts-loader": "^6.2.1",
- "typescript": "^3.9.5",
- "url-loader": "^3.0.0",
- "webpack": "^4.41.5",
- "webpack-cli": "^3.3.10"
+ "scripts": {
+ "dev": "pnpm --parallel start",
+ "build": "pnpm -r build"
  },
  "devDependencies": {
- "@figma/plugin-typings": "^1.15.0",
- "@types/jest": "^25.2.3",
- "esbuild-jest": "^0.1.1",
- "figma-api-stub": "^0.0.42",
- "jest": "^26.0.1",
- "ts-jest": "^26.1.0"
+ "concurrently": "^6.3.0",
+ "turbo": "^1.10.7"
  }
-}
+}

plugin/package.json

@@ -0,0 +1,30 @@
+{
+ "name": "@theemo-figma/plugin",
+ "version": "10",
+ "description": "",
+ "author": "Thomas Gossmann",
+ "license": "MIT",
+ "scripts": {
+ "test": "jest",
+ "test:watch": "jest --watch",
+ "tsc": "tsc --noEmit -p src",
+ "build": "esbuild src/main.ts --bundle --outfile=../dist/main.js --tsconfig=./tsconfig.json --target=es6",
+ "start": "pnpm run build --watch"
+ },
+ "dependencies": {
+ "@theemo-figma/core": "workspace:../core",
+ "color-converter": "1.4.1",
+ "colord": "^2.9.3"
+ },
+ "devDependencies": {
+ "@figma/plugin-typings": "^1.72.0",
+ "@types/jest": "^25.2.3",
+ "esbuild-jest": "^0.5.0",
+ "figma-api-stub": "^0.0.42",
+ "jest": "^29.6.1",
+ "ts-jest": "^29.1.1",
+ "concurrently": "^6.3.0",
+ "esbuild": "^0.18.11",
+ "typescript": "^5.1.6"
+ }
+}

plugin/src/config.ts

@@ -0,0 +1,19 @@
+type Version = '1' | '2';
+type Dimension = { width: number; height: number; };
+
+const savedVersion = figma.root.getPluginData('version');
+const version = (savedVersion === '' ? '1' : savedVersion) as Version;
+
+const DIMENSIONS: Record<Version, Dimension> = {
+ '1': {
+ width: 575,
+ height: 490
+ },
+ '2': {
+ width: 525,
+ height: 380
+ }
+}
+
+export const NAMESPACE = 'stylereferences';
+export const UI_DIMENSIONS = DIMENSIONS[version];

plugin/src/infrastructure/command.ts

@@ -0,0 +1,23 @@
+// import Emitter from '../container/emitter';
+// import Container from '../container/index';
+// import Commander from '../container/commander';
+
+import Commander from './commander';
+import Emitter from './emitter';
+
+export default abstract class Command {
+ abstract NAME: string;
+
+ declare commander: Commander;
+ declare emitter: Emitter;
+
+ abstract execute(data?: any): void;
+
+ protected nodeExists(id: string) {
+ return !!figma.getNodeById(id);
+ }
+
+ protected run(name: string) {
+ this.commander.run(name);
+ }
+}

plugin/src/infrastructure/commander.ts

@@ -0,0 +1,33 @@
+import Command from './command';
+import Emitter from './emitter';
+
+export default class Commander {
+ private commands: Map<string, Command> = new Map();
+ private emitter;
+
+ constructor(emitter: Emitter) {
+ this.emitter = emitter;
+
+ this.listen();
+ }
+
+ registerCommand(command: Command) {
+ this.commands.set(command.NAME, command);
+ command.emitter = this.emitter;
+ command.commander = this;
+ }
+
+ run(name: string, data?: any) {
+ if (this.commands.has(name)) {
+ (this.commands.get(name) as Command).execute(data);
+ }
+ }
+
+ listen() {
+ figma.ui.onmessage = msg => {
+ if (this.commands.has(msg.command)) {
+ (this.commands.get(msg.command) as Command).execute(msg.data);
+ }
+ };
+ }
+}