diff --git a/apps/create-palette-plugin/src/plugin.ts b/apps/create-palette-plugin/src/plugin.ts index 6da175d..487a936 100644 --- a/apps/create-palette-plugin/src/plugin.ts +++ b/apps/create-palette-plugin/src/plugin.ts @@ -6,13 +6,6 @@ function main() { } function createPalette() { - const frame = penpot.createFrame(); - frame.name = 'Palette'; - - const viewport = penpot.viewport; - frame.x = viewport.center.x - 150; - frame.y = viewport.center.y - 200; - const colors = penpot.library.local.colors.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 @@ -21,17 +14,24 @@ function createPalette() { : 0 ); + const cols = 4; + const rows = Math.ceil(colors.length / cols); + + const width = cols * 200 + Math.max(0, cols - 1) * 10 + 20; + const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20; + + const frame = penpot.createFrame(); + frame.name = 'Palette'; + + const viewport = penpot.viewport; + frame.x = viewport.center.x - width / 2; + frame.y = viewport.center.y - height / 2; + if (colors.length === 0) { // NO colors return return; } - const cols = 3; - const rows = Math.ceil(colors.length / 3); - - const width = cols * 150 + Math.max(0, cols - 1) * 10 + 20; - const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20; - frame.resize(width, height); frame.borderRadius = 8; @@ -39,11 +39,11 @@ function createPalette() { const grid = frame.addGridLayout(); for (let i = 0; i < rows; i++) { - grid.addRow('auto'); + grid.addRow('flex', 1); } for (let i = 0; i < cols; i++) { - grid.addColumn('auto'); + grid.addColumn('flex', 1); } grid.alignItems = 'center'; @@ -55,6 +55,8 @@ function createPalette() { grid.verticalPadding = 10; grid.horizontalPadding = 10; + grid.horizontalSizing = 'auto'; + // create text for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { @@ -80,9 +82,22 @@ function createPalette() { const flex = board.addFlexLayout(); flex.alignItems = 'center'; flex.justifyContent = 'center'; + flex.verticalPadding = 8; + flex.horizontalPadding = 8; const text = penpot.createText(color.name); + text.fontWeight = 'bold'; + text.fontVariantId = 'bold'; text.growType = 'auto-width'; + text.strokes = [ + { + strokeColor: '#FFFFFF', + strokeWidth: 1, + strokeAlignment: 'outer', + strokeOpacity: 0.5, + strokeStyle: 'solid', + }, + ]; board.appendChild(text); } } diff --git a/apps/poc-state-plugin/src/assets/icon.png b/apps/poc-state-plugin/src/assets/icon.png deleted file mode 100644 index 6c4a8ad..0000000 Binary files a/apps/poc-state-plugin/src/assets/icon.png and /dev/null differ