Skip to content
This repository has been archived by the owner on Apr 2, 2020. It is now read-only.

Commit

Permalink
Added button text alpha, first pass at text inputs
Browse files Browse the repository at this point in the history 
Also working on making pixels to REMs more universal. Button shadows are also captured (only those defined as layer styles for now...)
  • Loading branch information
Drew Vosburg committed Oct 23, 2018
1 parent c6898e6 commit 3652b2e
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 28 deletions.
2 changes: 1 addition & 1 deletion src/export-to-sass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function(context) {
const formElementStyleSheet = formElements.writeSass(formElementMap)

var scss = "" + layerStyleSheet + layerTextStyleSheet + formElementStyleSheet
saveScssToFile(scss)
saveScssToFile(scss.trim())
}

function saveScssToFile(fileData) {
Expand Down
24 changes: 23 additions & 1 deletion src/internal/common.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
const defaultBaseFontSize = 16;
var mobileBaseFontSize = defaultBaseFontSize;
var desktopBaseFontSize = defaultBaseFontSize;
module.exports = {

getTag: (name) => {
Expand Down Expand Up @@ -50,7 +53,26 @@ module.exports = {
}
})
return rgba.slice(0, -2) + ")"
}
},
getDefaultBaseFontSize: () => {
return defaultBaseFontSize
},
getMobileBaseFontSize: () => {
return mobileBaseFontSize
},
getDesktopBaseFontSize: () => {
return desktopBaseFontSize
},
setMobileBaseFontSize: (size) => {
mobileBaseFontSize = size
},
setDesktopBaseFontSize: (size) => {
desktopBaseFontSize = size
},
pixelsToRem: (pixelValue, baseSize) => {
return Math.round((pixelValue / baseSize) * 1000) / 1000
},

}

function removeZeros(str){
Expand Down
74 changes: 64 additions & 10 deletions src/internal/formElements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const symbolsPage = _.find(pages, (page) => {

module.exports = {
parse: (sharedStyles, sharedTextStyles, layerStyles) => {
var result = [];
if (!symbolsPage) {
console.log("There is no symbols page.")
return false
Expand All @@ -18,7 +19,17 @@ module.exports = {
var buttonSymbols = _.filter(symbolsPage.layers(), (layer) =>{
return (String(layer.name()).toLowerCase().startsWith("button"))
})
return getElementAttributes(buttonSymbols, sharedStyles, sharedTextStyles, layerStyles)
result = result.concat(getElementAttributes("button", buttonSymbols, sharedStyles, sharedTextStyles, layerStyles))

// get text inputs
var textInputs = _.filter(symbolsPage.layers(), (layer) =>{
return (String(layer.name()).toLowerCase().startsWith("text input"))
})
result = result.concat(getElementAttributes("textInput", textInputs, sharedStyles, sharedTextStyles, layerStyles))



return result
},

writeSass: (styles) => {
Expand All @@ -33,14 +44,17 @@ module.exports = {
}
css += " @include " + style.attributes.textStyle + ";\n"
css += " color: " + style.attributes.textColor + ";\n"
css += " text-alignment: " + style.attributes.textAlignment + ";\n"
css += " text-align: " + style.attributes.textAlignment + ";\n"
css += " background: " + style.attributes.background + ";\n"
css += " border-style: solid;\n"
css += " border-color: " + style.attributes.borderColor + ";\n"

css += addBorderPropertyToCss(style.attributes.borderThickness, "border-width")
css += addBorderPropertyToCss(style.attributes.borderRadius, "border-radius")
css += addPaddingValuetoCss(style)
if (style.attributes.shadow) {
css += " box-shadow: " + style.attributes.shadow + ";\n"
}

css += "}\n\n"
})
Expand All @@ -53,7 +67,10 @@ function addBorderPropertyToCss(collection, property) {
_.forEach(collection, (val) => {
prop += val + "px "
})
return ` ${property}: ` + prop.slice(0,-1) + ";\n"
if (collection.every( (val, i) => val === collection[0])) {
prop = collection[0] + "px";
}
return ` ${property}: ` + prop.trim() + ";\n"
}

function addPaddingValuetoCss(style) {
Expand All @@ -62,10 +79,14 @@ function addPaddingValuetoCss(style) {
_.forEach(padding, (val, i) => {
paddingValue += (val - style.attributes.borderThickness[i]) + "px "
})
if (padding && padding.every( (val, i) => val === padding[0])) {
paddingValue = padding[0] + "px";
}
return " padding: " + paddingValue.trim() + ";\n"
}

function getElementAttributes (elements, sharedStyles, sharedTextStyles, layerStyles) {
function getElementAttributes (elementType, elements, sharedStyles, sharedTextStyles, layerStyles) {
var elements = _.sortBy(elements, [element => element.name()], ["desc"])
var results = []
_.forEach(elements, (element) => {
var elementAttributes = {
Expand All @@ -74,9 +95,32 @@ function getElementAttributes (elements, sharedStyles, sharedTextStyles, layerSt
"borderThickness": null,
"borderColor": "transparent",
"background": null,
"shadow": null
}
var searchReferenceElement = element
// check for group
if (String(element.layers()[0].class()).toLowerCase().indexOf("group") >= 0) {
var shadow;
var group = element.layers()[0]
if (group.sharedStyleID()) {
// we have a shadow layer style, pls retrieve
var shadow = _.find(sharedStyles.objects(), (style) => {
return String(style.objectID()) === String(group.sharedStyleID())
})
if (shadow && shadow.name()) {
shadow = String(shadow.name())
var tag = common.getTag(shadow)
if (tag.isTag) {
shadow = tag.name.trim()
}
shadow = "$" + _.kebabCase(shadow)
}
}
elementAttributes.shadow = shadow
searchReferenceElement = element.layers()[0]
}

var shape = _.find(element.layers(), (layer) => {
var shape = _.find(searchReferenceElement.layers(), (layer) => {
return String(layer.name()).toLowerCase() === "shape"
})

Expand All @@ -86,25 +130,31 @@ function getElementAttributes (elements, sharedStyles, sharedTextStyles, layerSt
}

// Check for text layer
var textLayer = _.find(element.layers(), (layer) => {
return (String(layer.name()).toLowerCase() === "label" ||
String(layer.name()).toLowerCase() === "value")
var textLayer = _.find(searchReferenceElement.layers(), (layer) => {
var layerName = String(layer.name()).toLowerCase()
return (layerName.indexOf("label") >= 0 || layerName.indexOf("value") >= 0)
})
if (!textLayer) {
elementAttributes.width = parseInt(element.frame().width())
} else {
elementAttributes = setTextLayerElementAttributes(textLayer, layerStyles, element, sharedTextStyles, elementAttributes)
elementAttributes = setTextLayerElementAttributes(textLayer, layerStyles, searchReferenceElement, sharedTextStyles, elementAttributes)
}
results.push({"name": String(element.name()), "attributes": elementAttributes})
results.push({"name": String(element.name()), "elementType": elementType, "attributes": elementAttributes})
})

return results
}

function setTextLayerElementAttributes(textLayer, layerStyles, element, sharedTextStyles, elementAttributes) {
var elementAttr = elementAttributes
var symbolAlpha = 1;
var textAlpha = 1;
var shadow = "!do-nothing";


// check for symbol
if (String(textLayer.class()).toLowerCase().indexOf("symbol") >= 0) {
symbolAlpha = parseFloat(textLayer.style().contextSettings().opacity());
textLayer = findSymbolById(textLayer.symbolID()).layers()[0]
}
// check for text style
Expand All @@ -113,13 +163,17 @@ function setTextLayerElementAttributes(textLayer, layerStyles, element, sharedTe
})

if (textStyle) {
textAlpha = parseFloat(textLayer.style().contextSettings().opacity());
var tag = common.getTag(textStyle.name())
elementAttr.textStyle = tag.cssSelector + "-text-style"
}

// get color
var fontColor = "#" + String(textLayer.textColor().immutableModelObject().hexValue())
fontColor = findLayerStyleByColor(fontColor, layerStyles.colors)
if (textAlpha * symbolAlpha < 1) {
fontColor = "rgba(" + fontColor + ", " + (Math.round(textAlpha * symbolAlpha * 100) / 100) + ")"
}
elementAttr.textColor = fontColor

// get alignment
Expand Down
22 changes: 10 additions & 12 deletions src/internal/layerTextStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ const common = require("./common");
var useRem = true;
var defaultBaseFontSize = 16;
var breakpointVariable = "$breakpoint";
var mobileBaseFontSize = defaultBaseFontSize;
var desktopBaseFontSize = defaultBaseFontSize;
var outputFontWeight = true;

module.exports = {
Expand Down Expand Up @@ -153,17 +151,17 @@ function setBaseFontSize (mobileRamp, desktopRamp) {
var output = "";
if (useRem) {
if (mobileRamp.hasParagraph) {
mobileBaseFontSize = mobileRamp.styles[0].size
common.setMobileBaseFontSize(mobileRamp.styles[0].size)
}
if (desktopRamp && desktopRamp.hasParagraph) {
desktopBaseFontSize = desktopRamp.styles[0].size
common.setDesktopBaseFontSize(desktopRamp.styles[0].size)
}
var output = "\n// BASE FONT SIZE\n@mixin baseFontSize {\n"
// mobile base font size
output += " font-size: " + Math.round(mobileBaseFontSize / defaultBaseFontSize * 100) + "%;\n"
output += " font-size: " + Math.round(common.getMobileBaseFontSize() / common.getDefaultBaseFontSize() * 100) + "%;\n"
output += " @media screen and (min-width: " + breakpointVariable + ") {\n"
output += " & {\n"
output += " font-size: " + Math.round(desktopBaseFontSize / defaultBaseFontSize * 100) + "%;\n"
output += " font-size: " + Math.round(common.getDesktopBaseFontSize() / common.getDefaultBaseFontSize() * 100) + "%;\n"
output += " }\n"
output += " }\n"
output += "}\n\n"
Expand Down Expand Up @@ -306,10 +304,10 @@ function writeTypeStyles(fonts, mobileTypeRamp, desktopTypeRamp) {
desktopTag.tag = _.kebabCase(desktopTag.tag).toLowerCase();
}

output += outputSetupVars(thisStyle, mobileBaseFontSize, fonts)
output += outputSetupVars(thisStyle, common.getMobileBaseFontSize(), fonts)

// if desktop, set desktop vars
output += outputSetupVars(thisDesktopStyle, desktopBaseFontSize, fonts)
output += outputSetupVars(thisDesktopStyle, common.getDesktopBaseFontSize(), fonts)
isResponsive = true
}
// give me those sweet sweet mixins
Expand All @@ -323,7 +321,7 @@ function writeTypeStyles(fonts, mobileTypeRamp, desktopTypeRamp) {
}
output += "// " + styleName + "\n";

output += outputSetupVars(thisStyle, mobileBaseFontSize, fonts)
output += outputSetupVars(thisStyle, common.getMobileBaseFontSize(), fonts)
output += outputMixin(tag, 0, false)
})
return output;
Expand All @@ -349,12 +347,12 @@ function outputSetupVars(style, baseSize, fonts) {
}
fontSize = style.size + "px"
if (useRem) {
fontSize = Math.round((style.size / baseSize) * 1000) / 1000 + "rem"
fontSize = common.pixelsToRem(style.size, baseSize) + "rem"
}
output += pre + "-font-size: " + fontSize + ";\n";
var letterSpacing = parseFloat(style.spacing) + "px;\n";
if (useRem) {
letterSpacing = Math.round((parseFloat(style.spacing) / baseSize) * 100) / 100 + "rem;\n";
letterSpacing = common.pixelsToRem(style.spacing, baseSize) + "rem;\n";
}
output += pre + "-letter-spacing: " + letterSpacing;

Expand All @@ -381,7 +379,7 @@ function outputSetupVars(style, baseSize, fonts) {
if (style.paragraphSpacing > 0) {
marginValue = "0 0 " + style.paragraphSpacing + "px 0";
if (useRem) {
marginValue = "0 0 " + Math.round((style.paragraphSpacing / baseSize) * 100) / 100 + "rem 0";
marginValue = "0 0 " + common.pixelsToRem(style.paragraphSpacing, baseSize) + "rem 0";
}
}
output += pre + "-margin: " + marginValue + ";\n"
Expand Down
7 changes: 3 additions & 4 deletions src/internal/shadows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
},

addShadows: (shadowStyles) => {
return _.reduce(shadowStyles, (shaddows, style) => {
return _.reduce(shadowStyles, (shadows, style) => {
var thisName = String(style.name())
var tag = common.getTag(thisName)
if (tag.isTag) {
Expand All @@ -17,13 +17,12 @@ module.exports = {
name: _.kebabCase(thisName),
value: getShadows(style.value())
}
shaddows.push(tmp)
return shaddows
shadows.push(tmp)
return shadows
}, [])
},

writeShadows: (shadows) => {
log(shadows)
var styles = ""
if (shadows.length) {
styles = styles + "// SHADOWS\n"
Expand Down

0 comments on commit 3652b2e

Please sign in to comment.