From 0933da0865c121fd71174c8c7b666685b72f6b5c Mon Sep 17 00:00:00 2001 From: t32k Date: Wed, 21 Oct 2015 21:08:23 +0900 Subject: [PATCH] modify dirs for v3.4 --- .gitignore | 1 - Hue.sketchplugin | 43 ------------ LICENCE | 2 +- README.md | 14 +++- Swatch.sketchplugin | 61 ---------------- Value.sketchplugin | 51 -------------- .../Contents/Resources}/cover.png | Bin .../Contents/Resources}/demo.gif | Bin .../Contents/Resources}/sketchtoolbox.png | Bin .../Contents/Sketch/hue.js | 46 +++++++++++++ .../Contents/Sketch/lib}/colors.js | 0 .../Contents/Sketch/lib}/functions.js | 0 .../Contents/Sketch/lib}/util.js | 0 .../Contents/Sketch/manifest.json | 40 +++++++++++ .../Contents/Sketch/swatch.js | 65 ++++++++++++++++++ .../Contents/Sketch/value.js | 55 +++++++++++++++ sketchpack.json | 6 -- 17 files changed, 218 insertions(+), 166 deletions(-) delete mode 100644 .gitignore delete mode 100644 Hue.sketchplugin delete mode 100644 Swatch.sketchplugin delete mode 100644 Value.sketchplugin rename {assets => material-design-color-palette.sketchplugin/Contents/Resources}/cover.png (100%) rename {assets => material-design-color-palette.sketchplugin/Contents/Resources}/demo.gif (100%) rename {assets => material-design-color-palette.sketchplugin/Contents/Resources}/sketchtoolbox.png (100%) create mode 100644 material-design-color-palette.sketchplugin/Contents/Sketch/hue.js rename {lib => material-design-color-palette.sketchplugin/Contents/Sketch/lib}/colors.js (100%) rename {lib => material-design-color-palette.sketchplugin/Contents/Sketch/lib}/functions.js (100%) rename {lib => material-design-color-palette.sketchplugin/Contents/Sketch/lib}/util.js (100%) create mode 100644 material-design-color-palette.sketchplugin/Contents/Sketch/manifest.json create mode 100644 material-design-color-palette.sketchplugin/Contents/Sketch/swatch.js create mode 100644 material-design-color-palette.sketchplugin/Contents/Sketch/value.js delete mode 100644 sketchpack.json diff --git a/.gitignore b/.gitignore deleted file mode 100644 index bfa6a22..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -# Created by .ignore support plugin (hsz.mobi) diff --git a/Hue.sketchplugin b/Hue.sketchplugin deleted file mode 100644 index b8a3f10..0000000 --- a/Hue.sketchplugin +++ /dev/null @@ -1,43 +0,0 @@ -// (ctrl shift h) - -// Require library files -@import 'lib/colors.js' -@import 'lib/functions.js' - -// Get current canvas -var page = doc.currentPage(); -var artboard = doc.currentPage().currentArtboard(); -var canvas = artboard ? artboard : page; - -// Get color info -var choice = createSelect('Select a color set', COLORS, 0); -var choiceCode = choice[0]; -var colorIndex = choice[1]; -var colorName = COLORS[colorIndex]; - -// Add color palette -if (isSelected(choiceCode)) { - var userColorSets = []; - var swatchesGroups = []; - - if (colorName !== 'All Colors') { - COLORS[0] = colorName; - userColorSets = COLOR_SETS.filter(function (e, index) { - return index === colorIndex; - }); - } else { - userColorSets = COLOR_SETS; - } - - userColorSets.forEach(function (colorSet, index) { - swatchesGroups[index] = createGroup({ - parent: canvas, - name: 'Material ' + COLORS[index], - x: 220 * index, y: 0, - width: 200, height: colorSet.length * 50 - }); - colorSet.forEach(function (colorInfo, i) { - addHuePalette(index, colorInfo[0], colorInfo[1], i); - }); - }); -} \ No newline at end of file diff --git a/LICENCE b/LICENCE index 02fdf88..c65af4c 100644 --- a/LICENCE +++ b/LICENCE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Koji Ishimoto +Copyright (c) 2015 Koji Ishimoto Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index d3e6f18..adb2f92 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,31 @@ -![Material Design Color Palette](assets/cover.png) +![Material Design Color Palette](material-design-color-palette/Contents/Resources/cover.png) + > Sketch 3 plugin generate a palette of Google Material Design color for you. + ## Demo -![Demo](assets/demo.gif) + +![Demo](material-design-color-palette/Contents/Resources/demo.gif) + ## Shortcuts + | Action | Key | |--------|-----------------------------| | Hue | ⌃⇧H ( Control + Shift + H ) | | Value | ⌃⇧V ( Control + Shift + V ) | | Swatch | ⌃⇧S ( Control + Shift + S ) | + ## Installation -![Sketch Toolbox.app](assets/sketchtoolbox.png) +![Sketch Toolbox.app](material-design-color-palette/Contents/Resources/sketchtoolbox.png) You can find this plugin on [Sketch Toolbox.app](http://sketchtoolbox.com/), so you just search and download it. Or add Material Design Color Palette folder to the plugin folder `/Library/Application Support/com.bohemiancoding.sketch3` or `~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/` or find it via menu option in Sketch 3 Plugins / __Reveal Plugins folder...__ + ## Resource + + [Color - Style - Google design guidelines](http://www.google.com/design/spec/style/color.html#color-color-palette) diff --git a/Swatch.sketchplugin b/Swatch.sketchplugin deleted file mode 100644 index c257227..0000000 --- a/Swatch.sketchplugin +++ /dev/null @@ -1,61 +0,0 @@ -// (ctrl shift s) - -// Require library files -@import 'lib/colors.js' -@import 'lib/functions.js' - -// Get current canvas -var page = doc.currentPage(); -var artboard = doc.currentPage().currentArtboard(); -var canvas = artboard ? artboard : page; - -// Delete 'All Colors' -COLORS.pop(); - -var choice = createSelect('Select a primary color', COLORS, 0); -var choiceCode = choice[0]; -var colorIndex = choice[1]; - -if (isSelected(choiceCode)) { - var primaryColorName = COLORS[colorIndex]; - var primaryColorSet = COLOR_SETS[colorIndex]; - - var secondChoice = createSelect('Select an accent color', COLORS, 0); - var secondChoiceCode = secondChoice[0]; - var secondColorIndex = secondChoice[1]; - - if (isSelected(secondChoiceCode)) { - var accentColorName = COLORS[secondColorIndex]; - var accentColorSet = COLOR_SETS[secondColorIndex]; - - var swatchesGroup = createGroup({ - parent: canvas, - name: primaryColorName + ' x ' + accentColorName, - x: 0, y: 0, - width: 400, height: 200 - }); - - var swatches = []; - - // Dark Primary Color, Primary Color, Light Primary Color - swatches.push(primaryColorSet[7], primaryColorSet[5], primaryColorSet[1]); - // Text / Icons - if (swatches[1][1] === 1) { - swatches.push(['#FFFFFF', 0]); - } else { - swatches.push(['#212121', 1]); - } - // Accent Color - if (accentColorSet[11]) { - swatches.push(accentColorSet[11]); - } else { - swatches.push(accentColorSet[5]); - } - // Primary Text, Secondary Text, Divider Color - swatches.push(['#212121', 1], ['#727272', 1], ['#B6B6B6', 1]); - - swatches.forEach(function (colorSet, i) { - addSwatch(colorSet[0], i, colorSet[1]); - }); - } -} \ No newline at end of file diff --git a/Value.sketchplugin b/Value.sketchplugin deleted file mode 100644 index 145bc36..0000000 --- a/Value.sketchplugin +++ /dev/null @@ -1,51 +0,0 @@ -// (ctrl shift v) - -// Require library files -@import 'lib/colors.js' -@import 'lib/functions.js' - -// Get current canvas -var page = doc.currentPage(); -var artboard = doc.currentPage().currentArtboard(); -var canvas = artboard ? artboard : page; - -// Get value info -var choice = createSelect('Select a color value', VALUES, 0); -var choiceCode = choice[0]; -var valueIndex = choice[1]; -var valueName = VALUES[valueIndex]; - -if (isSelected(choiceCode)) { - var userValueSets = []; - var swatchesGroups = []; - - if (valueName !== 'All Values') { - VALUES[0] = valueName; - userValueSets.push(COLOR_SETS.map(function (colorSet) { - return colorSet[valueIndex]; - }).filter(function (e) { - return e; - })); - } else { - var allValues = 14; - for (var i = 0; i < allValues; i++) { - userValueSets.push(COLOR_SETS.map(function (colorSet) { - return colorSet[i]; - }).filter(function (e) { - return e; - })); - } - } - - userValueSets.forEach(function (valueSet, index) { - swatchesGroups[index] = createGroup({ - parent: canvas, - name: 'Material ' + VALUES[index], - x: 0, y: 60 * index, - width: valueSet.length * 50, height: 50 - }); - valueSet.forEach(function (colorInfo, i) { - addValuePalette(index, colorInfo[0], colorInfo[1], i); - }); - }); -} \ No newline at end of file diff --git a/assets/cover.png b/material-design-color-palette.sketchplugin/Contents/Resources/cover.png similarity index 100% rename from assets/cover.png rename to material-design-color-palette.sketchplugin/Contents/Resources/cover.png diff --git a/assets/demo.gif b/material-design-color-palette.sketchplugin/Contents/Resources/demo.gif similarity index 100% rename from assets/demo.gif rename to material-design-color-palette.sketchplugin/Contents/Resources/demo.gif diff --git a/assets/sketchtoolbox.png b/material-design-color-palette.sketchplugin/Contents/Resources/sketchtoolbox.png similarity index 100% rename from assets/sketchtoolbox.png rename to material-design-color-palette.sketchplugin/Contents/Resources/sketchtoolbox.png diff --git a/material-design-color-palette.sketchplugin/Contents/Sketch/hue.js b/material-design-color-palette.sketchplugin/Contents/Sketch/hue.js new file mode 100644 index 0000000..f917f40 --- /dev/null +++ b/material-design-color-palette.sketchplugin/Contents/Sketch/hue.js @@ -0,0 +1,46 @@ +// Require library files +@import 'lib/colors.js' +@import 'lib/functions.js' + +var onRun = function (context) { + var doc = context.document; + + // Get current canvas + var page = doc.currentPage(); + var artboard = doc.currentPage().currentArtboard(); + var canvas = artboard ? artboard : page; + + // Get color info + var choice = createSelect('Select a color set', COLORS, 0); + var choiceCode = choice[0]; + var colorIndex = choice[1]; + var colorName = COLORS[colorIndex]; + + // Add color palette + if (isSelected(choiceCode)) { + var userColorSets = []; + var swatchesGroups = []; + log(swatchesGroups); + + if (colorName !== 'All Colors') { + COLORS[0] = colorName; + userColorSets = COLOR_SETS.filter(function (e, index) { + return index === colorIndex; + }); + } else { + userColorSets = COLOR_SETS; + } + + userColorSets.forEach(function (colorSet, index) { + swatchesGroups[index] = createGroup({ + parent: canvas, + name: 'Material ' + COLORS[index], + x: 220 * index, y: 0, + width: 200, height: colorSet.length * 50 + }); + colorSet.forEach(function (colorInfo, i) { + addHuePalette(index, colorInfo[0], colorInfo[1], i); + }); + }); + } +}; diff --git a/lib/colors.js b/material-design-color-palette.sketchplugin/Contents/Sketch/lib/colors.js similarity index 100% rename from lib/colors.js rename to material-design-color-palette.sketchplugin/Contents/Sketch/lib/colors.js diff --git a/lib/functions.js b/material-design-color-palette.sketchplugin/Contents/Sketch/lib/functions.js similarity index 100% rename from lib/functions.js rename to material-design-color-palette.sketchplugin/Contents/Sketch/lib/functions.js diff --git a/lib/util.js b/material-design-color-palette.sketchplugin/Contents/Sketch/lib/util.js similarity index 100% rename from lib/util.js rename to material-design-color-palette.sketchplugin/Contents/Sketch/lib/util.js diff --git a/material-design-color-palette.sketchplugin/Contents/Sketch/manifest.json b/material-design-color-palette.sketchplugin/Contents/Sketch/manifest.json new file mode 100644 index 0000000..8bece40 --- /dev/null +++ b/material-design-color-palette.sketchplugin/Contents/Sketch/manifest.json @@ -0,0 +1,40 @@ +{ + "author": "Koji Ishimoto", + "menu": { + "isRoot": false, + "shortcut": "", + "items": [ + "hue", + "value", + "swatch" + ], + "title": "Material Design Color Palette" + }, + "identifier": "me.t32k.material-design-color-palette", + "version": "3.0.0", + "description": "Sketch app plugin for displaying Google material design color palette.", + "name": "Material Design Color Palette", + "commands": [ + { + "name": "Hue", + "identifier": "hue", + "handler": "onRun", + "shortcut": "ctrl shift h", + "script": "hue.js" + }, + { + "name": "Value", + "identifier": "value", + "handler": "onRun", + "shortcut": "ctrl shift v", + "script": "value.js" + }, + { + "name": "Swatch", + "identifier": "swatch", + "handler": "onRun", + "shortcut": "ctrl shift s", + "script": "swatch.js" + } + ] +} diff --git a/material-design-color-palette.sketchplugin/Contents/Sketch/swatch.js b/material-design-color-palette.sketchplugin/Contents/Sketch/swatch.js new file mode 100644 index 0000000..66f3394 --- /dev/null +++ b/material-design-color-palette.sketchplugin/Contents/Sketch/swatch.js @@ -0,0 +1,65 @@ +// (ctrl shift s) + +// Require library files +@import 'lib/colors.js' +@import 'lib/functions.js' + +var onRun = function(context) { + var doc = context.document; + + // Get current canvas + var page = doc.currentPage(); + var artboard = doc.currentPage().currentArtboard(); + var canvas = artboard ? artboard : page; + + // Delete 'All Colors' + COLORS.pop(); + + var choice = createSelect('Select a primary color', COLORS, 0); + var choiceCode = choice[0]; + var colorIndex = choice[1]; + + if (isSelected(choiceCode)) { + var primaryColorName = COLORS[colorIndex]; + var primaryColorSet = COLOR_SETS[colorIndex]; + + var secondChoice = createSelect('Select an accent color', COLORS, 0); + var secondChoiceCode = secondChoice[0]; + var secondColorIndex = secondChoice[1]; + + if (isSelected(secondChoiceCode)) { + var accentColorName = COLORS[secondColorIndex]; + var accentColorSet = COLOR_SETS[secondColorIndex]; + + var swatchesGroup = createGroup({ + parent: canvas, + name: primaryColorName + ' x ' + accentColorName, + x: 0, y: 0, + width: 400, height: 200 + }); + + var swatches = []; + + // Dark Primary Color, Primary Color, Light Primary Color + swatches.push(primaryColorSet[7], primaryColorSet[5], primaryColorSet[1]); + // Text / Icons + if (swatches[1][1] === 1) { + swatches.push(['#FFFFFF', 0]); + } else { + swatches.push(['#212121', 1]); + } + // Accent Color + if (accentColorSet[11]) { + swatches.push(accentColorSet[11]); + } else { + swatches.push(accentColorSet[5]); + } + // Primary Text, Secondary Text, Divider Color + swatches.push(['#212121', 1], ['#727272', 1], ['#B6B6B6', 1]); + + swatches.forEach(function (colorSet, i) { + addSwatch(colorSet[0], i, colorSet[1]); + }); + } + } +}; diff --git a/material-design-color-palette.sketchplugin/Contents/Sketch/value.js b/material-design-color-palette.sketchplugin/Contents/Sketch/value.js new file mode 100644 index 0000000..14d91b9 --- /dev/null +++ b/material-design-color-palette.sketchplugin/Contents/Sketch/value.js @@ -0,0 +1,55 @@ +// (ctrl shift v) + +// Require library files +@import 'lib/colors.js' +@import 'lib/functions.js' + +var onRun = function(context) { + var doc = context.document; + + // Get current canvas + var page = doc.currentPage(); + var artboard = doc.currentPage().currentArtboard(); + var canvas = artboard ? artboard : page; + + // Get value info + var choice = createSelect('Select a color value', VALUES, 0); + var choiceCode = choice[0]; + var valueIndex = choice[1]; + var valueName = VALUES[valueIndex]; + + if (isSelected(choiceCode)) { + var userValueSets = []; + var swatchesGroups = []; + + if (valueName !== 'All Values') { + VALUES[0] = valueName; + userValueSets.push(COLOR_SETS.map(function (colorSet) { + return colorSet[valueIndex]; + }).filter(function (e) { + return e; + })); + } else { + var allValues = 14; + for (var i = 0; i < allValues; i++) { + userValueSets.push(COLOR_SETS.map(function (colorSet) { + return colorSet[i]; + }).filter(function (e) { + return e; + })); + } + } + + userValueSets.forEach(function (valueSet, index) { + swatchesGroups[index] = createGroup({ + parent: canvas, + name: 'Material ' + VALUES[index], + x: 0, y: 60 * index, + width: valueSet.length * 50, height: 50 + }); + valueSet.forEach(function (colorInfo, i) { + addValuePalette(index, colorInfo[0], colorInfo[1], i); + }); + }); + } +}; diff --git a/sketchpack.json b/sketchpack.json deleted file mode 100644 index 0ff3264..0000000 --- a/sketchpack.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Material Design Color Palette", - "version": "2.2.0", - "description": "Sketch app plugin for displaying Google material design color palette.", - "tags": ["google", "material", "design", "color", "android"] -} \ No newline at end of file