Skip to content

Commit

Permalink
Updated create typography scale to insert the color variable
Browse files Browse the repository at this point in the history
  • Loading branch information
@icona79
icona79 committed May 5, 2022
1 parent bab8574 commit 7305ed7
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 147 deletions.
60 changes: 56 additions & 4 deletions DS-Core.sketchplugin/Contents/Sketch/color-functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,61 @@ function HSLToRGB(h, s, l) {
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);

// console.log("RGB from HSL");
// console.log(r + "," + g + "," + b);

// return "rgb(" + r + "," + g + "," + b + ")";
return [r, g, b];
}

// Update Color Variables
function updateLayerWithColorVariables(context) {
// When you open an existing document in Sketch 69, the color assets in the document will be migrated to Color Swatches. However, layers using those colors will not be changed to use the new swatches. This plugin takes care of this
const allLayers = sketch.find("*"); // TODO: optimise this query: ShapePath, SymbolMaster, Text, SymbolInstance
allLayers.forEach((layer) => {
layer.style.fills
.concat(layer.style.borders)
.filter((item) => item.fillType == "Color")
.forEach((item) => {
const layerColor = item.color;
let swatch = matchingSwatchForColor(layerColor);
if (!swatch) {
return;
}
item.color = swatch.referencingColor;
});
// Previous actions don't work for Text Layer colors that are colored using TextColor, so let's fix that:
if (layer.style.textColor) {
const layerColor = layer.style.textColor;
let swatch = matchingSwatchForColor(layerColor);
if (!swatch) {
return;
}
layer.style.textColor = swatch.referencingColor;
}
});
}

function matchingSwatchForColor(color, name) {
// We need to match color *and* name, if we want this to work
const swatches = sketch.getSelectedDocument().swatches;
const matchingSwatches = swatches.filter((swatch) => swatch.color === color);
if (matchingSwatches.length == 0) {
return null;
}
if (matchingSwatches.length == 1) {
return matchingSwatches[0];
}
// This means there are multiple swatches matching the color. We'll see if we can find one that also matches the name. If we don't find one, or there is no name provided, return the first match.
if (name) {
const swatchesMatchingName = matchingSwatches.filter((swatch) => swatch.name === name);
if (swatchesMatchingName.length) {
return swatchesMatchingName[0];
} else {
return matchingSwatches[0];
}
} else {
return matchingSwatches[0];
}
}

function colorVariableFromColor(color) {
let swatch = matchingSwatchForColor(color);
return swatch.referencingColor;
}
63 changes: 5 additions & 58 deletions DS-Core.sketchplugin/Contents/Sketch/create-all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ var document = sketch.getSelectedDocument();
const Swatch = sketch.Swatch;
var selection = document.selectedLayers;
@import "functions.js";
@import "color-functions.js"

var onRun = function(context) {
@import "color-functions.js";
var newSelection = [];
// Detect Sketch Version to create colors or color vars
var sketchversion = sketch.version.sketch;
Expand Down Expand Up @@ -49,7 +49,7 @@ var onRun = function(context) {
// most likely the user canceled the input
return;
} else {
sketch.UI.message("🌈: Yay! " + value.replace("Steps","Color steps created! 👏 🚀"));
sketch.UI.message("🌈: Yay! " + value.replace("Steps", "Color steps created! 👏 🚀"));

let result = colorVariations[labels.indexOf(value)];

Expand Down Expand Up @@ -198,59 +198,6 @@ var onRun = function(context) {
} else {
sketch.UI.message("🌈: Please select at least one Layer 😅");
}

// When you open an existing document in Sketch 69, the color assets in the document will be migrated to Color Swatches. However, layers using those colors will not be changed to use the new swatches. This plugin takes care of this
const allLayers = sketch.find('*') // TODO: optimise this query: ShapePath, SymbolMaster, Text, SymbolInstance
allLayers.forEach(layer => {
layer.style.fills
.concat(layer.style.borders)
.filter(item => item.fillType == 'Color')
.forEach(item => {
const layerColor = item.color
let swatch = matchingSwatchForColor(layerColor)
if (!swatch) {
return
}
item.color = swatch.referencingColor
})
// Previous actions don't work for Text Layer colors that are colored using TextColor, so let's fix that:
if (layer.style.textColor) {
const layerColor = layer.style.textColor
let swatch = matchingSwatchForColor(layerColor)
if (!swatch) {
return
}
layer.style.textColor = swatch.referencingColor
}
})

function matchingSwatchForColor(color, name) {
// We need to match color *and* name, if we want this to work
const swatches = sketch.getSelectedDocument().swatches
const matchingSwatches = swatches.filter(swatch => swatch.color === color)
if (matchingSwatches.length == 0) {
return null
}
if (matchingSwatches.length == 1) {
return matchingSwatches[0]
}
// This means there are multiple swatches matching the color. We'll see if we can find one that also matches the name. If we don't find one, or there is no name provided, return the first match.
if (name) {
const swatchesMatchingName = matchingSwatches.filter(
swatch => swatch.name === name
)
if (swatchesMatchingName.length) {
return swatchesMatchingName[0]
} else {
return matchingSwatches[0]
}
} else {
return matchingSwatches[0]
}
}

function colorVariableFromColor(color) {
let swatch = matchingSwatchForColor(color)
return swatch.referencingColor
}
};
// Update layers with the created color variables
updateLayerWithColorVariables();
};
67 changes: 8 additions & 59 deletions DS-Core.sketchplugin/Contents/Sketch/create-color-variables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const document = sketch.getSelectedDocument();
@import "functions.js";

var onRun = function(context) {
@import "color-functions.js";
var selection = document.selectedLayers;

if (selection.length > 0) {
Expand Down Expand Up @@ -68,10 +69,10 @@ var onRun = function(context) {

if (counter > 0) {
if (counter < 2) {
sketch.UI.message("🌈: Yay! You now have " + counter.toString() + " new Color Variable available! 👏 🚀");
} else {
sketch.UI.message("🌈: Yay! You now have " + counter.toString() + " new Color Variables available! 👏 🚀");
}
sketch.UI.message("🌈: Yay! You now have " + counter.toString() + " new Color Variable available! 👏 🚀");
} else {
sketch.UI.message("🌈: Yay! You now have " + counter.toString() + " new Color Variables available! 👏 🚀");
}

} else {
sketch.UI.message("🌈: All the Color Variables already existed. You have " + document.swatches.length.toString() + " Color Variables available! 👏 🚀");
Expand All @@ -90,58 +91,6 @@ var onRun = function(context) {
sketch.UI.message("🌈: Please select at least one Layer 😅");
}

// When you open an existing document in Sketch 69, the color assets in the document will be migrated to Color Swatches. However, layers using those colors will not be changed to use the new swatches. This plugin takes care of this
const allLayers = sketch.find('*') // TODO: optimise this query: ShapePath, SymbolMaster, Text, SymbolInstance
allLayers.forEach(layer => {
layer.style.fills
.concat(layer.style.borders)
.filter(item => item.fillType == 'Color')
.forEach(item => {
const layerColor = item.color
let swatch = matchingSwatchForColor(layerColor)
if (!swatch) {
return
}
item.color = swatch.referencingColor
})
// Previous actions don't work for Text Layer colors that are colored using TextColor, so let's fix that:
if (layer.style.textColor) {
const layerColor = layer.style.textColor
let swatch = matchingSwatchForColor(layerColor)
if (!swatch) {
return
}
layer.style.textColor = swatch.referencingColor
}
})

function matchingSwatchForColor(color, name) {
// We need to match color *and* name, if we want this to work
const swatches = sketch.getSelectedDocument().swatches
const matchingSwatches = swatches.filter(swatch => swatch.color === color)
if (matchingSwatches.length == 0) {
return null
}
if (matchingSwatches.length == 1) {
return matchingSwatches[0]
}
// This means there are multiple swatches matching the color. We'll see if we can find one that also matches the name. If we don't find one, or there is no name provided, return the first match.
if (name) {
const swatchesMatchingName = matchingSwatches.filter(
swatch => swatch.name === name
)
if (swatchesMatchingName.length) {
return swatchesMatchingName[0]
} else {
return matchingSwatches[0]
}
} else {
return matchingSwatches[0]
}
}

function colorVariableFromColor(color) {
let swatch = matchingSwatchForColor(color)
return swatch.referencingColor
}
};
// Update layers with the created color variables
updateLayerWithColorVariables();
};
47 changes: 21 additions & 26 deletions DS-Core.sketchplugin/Contents/Sketch/create-typography-scale.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
var sketch = require("sketch");
var ui = require("sketch/ui");
var sketchversion = sketch.version.sketch;
var Group = require("sketch/dom").Group;
var Text = require("sketch/dom").Text;
var SharedStyle = require("sketch/dom").SharedStyle;
var HotSpot = require("sketch/dom").HotSpot;
var Flow = require("sketch/dom").Flow;

var document = sketch.getSelectedDocument();
@import "functions.js"

var onRun = function(context) {
var sketch = require("sketch");
var ui = require("sketch/ui");
var sketchversion = sketch.version.sketch;

var Group = require("sketch/dom").Group;
var Text = require("sketch/dom").Text;
var SharedStyle = require("sketch/dom").SharedStyle;
var HotSpot = require("sketch/dom").HotSpot;
var Flow = require("sketch/dom").Flow;

var document = sketch.getSelectedDocument();
@import "color-functions.js";

// Text Styles Management
var textStyles = document.sharedTextStyles;
Expand Down Expand Up @@ -232,28 +232,24 @@ var onRun = function(context) {

// Se the Color Variable
if (sketchversion >= 69) {
var currentSwatch = newSwatch;
let swatchContainer = document.sketchObject.documentData().sharedSwatches();
currentSwatch.sketchObject.updateWithColor(MSColor.colorWithHex_alpha(color.slice(1, 6), 1));
var currentSwatch = matchingSwatchForColor(colorName);

var myColor = currentSwatch.referencingColor;

newText.style.textColor = myColor;
// /// Update all the layers using the Swatches/Color Vars
swatchContainer = document.sketchObject.documentData().sharedSwatches();
swatchContainer.updateReferencesToSwatch(currentSwatch.sketchObject);
}
console.log(newText)
// Create (if needed) and Apply text styles

// Create (if needed) and Apply text styles
createNewTextStyle(newText, layerName, true, false);
}


newArtboardWidth += margin + alignmentGroup.frame.width;
newArtboardHeight = margin + alignmentGroup.frame.height;
}
// newArtboardWidth += margin;
// newArtboardHeight += margin;
//
// currentArtboard.frame.width = newArtboardWidth;
// currentArtboard.frame.height = newArtboardHeight;

// Handle the Group and Layer re-position inside the Artboard
let groupPosX = 0;
Expand All @@ -262,7 +258,6 @@ var onRun = function(context) {
typographyStyleGroups[i].frame.y = Math.round(typographyStyleGroups[i].frame.y) + margin;
groupPosX += Math.round(typographyStyleGroups[i].frame.width);

// layer.adjustToFit();
// align center
if (i === 1) {
typographyStyleGroups[i].layers.forEach((layer) => {
Expand All @@ -285,12 +280,10 @@ var onRun = function(context) {
newArtboardWidth = typographyStyleGroups[2].frame.x + typographyStyleGroups[2].frame.width + margin;
newArtboardHeight += margin;

// currentArtboard.frame.width = newArtboardWidth;
// currentArtboard.frame.height = newArtboardHeight;
currentArtboard.frame.width = newArtboardWidth;
currentArtboard.frame.height = newArtboardHeight;

///


selection.remove();

Expand Down Expand Up @@ -429,6 +422,8 @@ var onRun = function(context) {
return styleID;
}
}


};

function sortFunction(a, b) {
Expand All @@ -446,4 +441,4 @@ function roundAndEvenNumber(value) {
function roundToClosestGridModuleNumber(value) {
/// Assumes common 8 pixel grid
return Math.round(value / 8) * 8;
}
}

0 comments on commit 7305ed7

Please sign in to comment.