-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
218 additions
and
166 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
File renamed without changes
File renamed without changes
File renamed without changes
46 changes: 46 additions & 0 deletions
46
material-design-color-palette.sketchplugin/Contents/Sketch/hue.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); | ||
} | ||
}; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
40 changes: 40 additions & 0 deletions
40
material-design-color-palette.sketchplugin/Contents/Sketch/manifest.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
] | ||
} |
65 changes: 65 additions & 0 deletions
65
material-design-color-palette.sketchplugin/Contents/Sketch/swatch.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]); | ||
}); | ||
} | ||
} | ||
}; |
Oops, something went wrong.