Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Single-token method #4

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 12 additions & 1 deletion actions/android/vector.js
Expand Up @@ -7,8 +7,9 @@ const s2v = require('svg2vectordrawable');
* @param {String} options.svg - The content of the SVG that will be turned into a vector drawable. The SVG content at this point should have had all the token references inside of it resolved.
* @param {String} options.name - The name of the image token
* @param {String} options.androidPath - The build path for Android. This will be defined in the configuration
* @param {String} options.svgDark - The dark version of the SVG
*/
function androidVector({ androidPath, svg, name }) {
function androidVector({ androidPath, svg, svgDark, name }) {
const outputPath = `${androidPath}drawable/${name}.xml`;
fs.ensureFileSync(outputPath);

Expand All @@ -19,6 +20,16 @@ function androidVector({ androidPath, svg, name }) {
fs.writeFileSync(outputPath, xml);
console.log(`✔︎ ${outputPath}`);
});

if (svgDark) {
const outputPath = `${androidPath}drawable-night/${name}.xml`;
fs.ensureFileSync(outputPath);
s2v(svgDark).then(xml => {
setTimeout(() => null, 0); // forces node to not exit immediately
fs.writeFileSync(outputPath, xml);
console.log(`✔︎ ${outputPath}`);
});
}
}

module.exports = androidVector;
39 changes: 35 additions & 4 deletions actions/generateGraphics.js
Expand Up @@ -20,7 +20,7 @@ module.exports = {
return token.attributes.category === `image`
})
.forEach(token => {
const { name, value } = token;
const { name, value, darkValue, hcValue, hcDarkValue } = token;

// Read the file from the token's value and turn it into a
// [lodash template](https://lodash.com/docs/4.17.15#template)
Expand All @@ -35,19 +35,50 @@ module.exports = {
// that can now be written to a file or passed to other functions
// to translate it to a PNG or Android Vector Drawable
const svg = src(dictionary.properties);
let svgDark, svgHc, svgHcDark;

// Make sure the directory exists and write the new SVG file
const outputPath = `${buildPath||''}${name}.svg`;
const outputPath = `${buildPath||''}${name}-light.svg`;
fs.ensureFileSync(outputPath);
fs.writeFileSync(outputPath, svg);
console.log(`✔︎ ${outputPath}`);

if (darkValue) {
const src = template( fs.readFileSync(darkValue) );
svgDark = src(dictionary.properties);

const outputPath = `${buildPath||''}${name}-dark.svg`;
fs.ensureFileSync(outputPath);
fs.writeFileSync(outputPath, svgDark);
console.log(`✔︎ ${outputPath}`);
}

if (hcDarkValue) {
const src = template( fs.readFileSync(hcDarkValue) );
svgHcDark = src(dictionary.properties);

const outputPath = `${buildPath||''}${name}-hc-dark.svg`;
fs.ensureFileSync(outputPath);
fs.writeFileSync(outputPath, svgHcDark);
console.log(`✔︎ ${outputPath}`);
}

if (hcValue) {
const src = template( fs.readFileSync(hcValue) );
svgHc = src(dictionary.properties);

const outputPath = `${buildPath||''}${name}-hc.svg`;
fs.ensureFileSync(outputPath);
fs.writeFileSync(outputPath, svgHc);
console.log(`✔︎ ${outputPath}`);
}

// This will take the SVG and convert it into Android Vector Drawable format
androidVector({ androidPath, name, svg });
androidVector({ androidPath, name, svg, svgDark, svgHc, svgHcDark });

// This will take the SVG and convert it to a PNG and create the metadata
// for an iOS imageset
iosImageset({ iosPath, name, svg });
iosImageset({ iosPath, name, svg, svgDark, svgHc, svgHcDark });
});
},

Expand Down
40 changes: 38 additions & 2 deletions actions/ios/colorsets.js
@@ -1,5 +1,5 @@
const fs = require('fs-extra');
const { contents, idiom } = require('./consts');
const { contents, idiom, darkAppearance, hcAppearance } = require('./consts');

/**
* This action will iterate over all the colors in the Style Dictionary
Expand All @@ -12,7 +12,10 @@ module.exports = {
fs.writeFileSync(`${assetPath}/Contents.json`, JSON.stringify(contents, null, 2));

dictionary.allProperties
.filter(token => token.attributes.category === `color`)
.filter(token => token.attributes.category === `color` &&
(!dictionary.usesReference(token.original.value) || token.darkValue))
// we only need colorsets for tokens that have a dark value or
// are not a reference
.forEach(token => {
const colorsetPath = `${assetPath}/${token.name}.colorset`;
fs.ensureDirSync(colorsetPath);
Expand All @@ -28,6 +31,39 @@ module.exports = {
...contents
}

if (token.darkValue) {
colorset.colors.push({
idiom,
color: {
'color-space': `srgb`,
components: token.darkValue
},
appearances: [darkAppearance]
});
}

if (token.hcValue) {
colorset.colors.push({
idiom,
appearances: [hcAppearance],
color: {
'color-space': 'srgb',
components: token.hcValue
}
});
}

if (token.hcDarkValue) {
colorset.colors.push({
idiom,
color: {
'color-space': 'srgb',
components: token.hcDarkValue
},
appearances: [hcAppearance, darkAppearance]
});
}

fs.writeFileSync(`${colorsetPath}/Contents.json`, JSON.stringify(colorset, null, 2));
});
},
Expand Down
58 changes: 55 additions & 3 deletions actions/ios/imagesets.js
@@ -1,15 +1,16 @@
const fs = require('fs-extra');
const sharp = require('sharp');
const { contents, idiom } = require('./consts');
const { contents, darkAppearance, idiom, hcAppearance } = require('./consts');

/**
* This function will generate an imageset for iOS
* @param {Object} options
* @param {String} options.svg - The content of the SVG that will be turned into a PNG. The SVG content at this point should have had all the token references inside of it resolved.
* @param {String} options.name - The name of the image token
* @param {String} options.iosPath - The build path for iOS. This will be defined in the configuration
* @param {String} options.svgDark - The dark version of the SVG
*/
function generateImageset({ svg, name, iosPath }) {
function generateImageset({ svg, svgDark, name, iosPath, svgHc, svgHcDark }) {
const outputPath = `${iosPath}StyleDictionary.xcassets/${name}.imageset`;
fs.ensureDirSync(outputPath);

Expand All @@ -33,7 +34,58 @@ function generateImageset({ svg, name, iosPath }) {
console.log(err);
}
});


if (svgDark) {
const filename = `img-dark.png`;
imageset.images.push({
idiom,
appearances: [darkAppearance],
filename
});
sharp(Buffer.from(svgDark, `utf-8`), { density: 300 })
.toFile(`${outputPath}/${filename}`, (err) => {
if (!err) {
console.log(`✔︎ ${outputPath}/${filename}`);
} else {
console.log(err);
}
});
}

if (svgHcDark) {
const filename = `img-hc-dark.png`;
imageset.images.push({
idiom,
appearances: [darkAppearance, hcAppearance],
filename
});
sharp(Buffer.from(svgHcDark, `utf-8`), { density: 300 })
.toFile(`${outputPath}/${filename}`, (err) => {
if (!err) {
console.log(`✔︎ ${outputPath}/${filename}`);
} else {
console.log(err);
}
});
}

if (svgHc) {
const filename = `img-hc.png`;
imageset.images.push({
idiom,
appearances: [hcAppearance],
filename
});
sharp(Buffer.from(svgHc, `utf-8`), { density: 300 })
.toFile(`${outputPath}/${filename}`, (err) => {
if (!err) {
console.log(`✔︎ ${outputPath}/${filename}`);
} else {
console.log(err);
}
});
}

// Lastly, write the Contents.json file with the updated content
fs.writeFileSync(`${outputPath}/Contents.json`, JSON.stringify(imageset, null, 2));
}
Expand Down
2 changes: 1 addition & 1 deletion android/demo/src/main/res/values/styles.xml
@@ -1,5 +1,5 @@
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="colorPrimary">@color/color_brand_primary_base</item>
<item name="colorPrimaryDark">@color/color_brand_primary_dark</item>
<item name="colorAccent">@color/color_brand_secondary_base</item>
Expand Down
36 changes: 36 additions & 0 deletions assets/svg/empty.dark.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions assets/svg/empty.hc.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.