Danny Banks dbanksdesign

🐈

hello

Principal Design Technologist at AWS Amplify @dbanksdesign on social media. Lover of 🐈s and design tokens.

dbanksdesign / fontMap.json

Created September 12, 2019 18:12

iOS TextStyle Font Map

	{
	"PFToFontStyle": {
	"0": { "value": "UICTFontTextStyleCaption1" },
	"1": { "value": "UICTFontTextStyleSubhead" },
	"2": { "value": "UICTFontTextStyleBody" },
	"3": { "value": "UICTFontTextStyleTitle3" },
	"4": { "value": "UICTFontTextStyleTitle2" },
	"5": { "value": "UICTFontTextStyleTitle1" },
	"6": { "value": "UICTFontTextStyleTitle0" }
	},

dbanksdesign / index.js

Created September 27, 2019 15:59

Style Dictionary Filter Example

	const StyleDictionary = require('style-dictionary');

	StyleDictionary.registerFilter({
	name: 'test',
	matcher: (prop) => {
	return prop.attributes.category === 'color';
	}
	});

	StyleDictionary.extend({

dbanksdesign / ColorPage.js

Created January 29, 2020 16:53

Style Dictionary Docs Example

	import React, { PureComponent } from 'react'
	import Section from 'Components/layout/section'
	import StyleDictionary from 'StyleDictionary/SellerMobileStyleDictionary/styleDictionary.json'
	import checkContrast from 'Helpers/checkContrast'

	const backgroundColors = Object.keys(StyleDictionary.color.background)
	.filter(key => StyleDictionary.color.background[key].value)
	.map(key => StyleDictionary.color.background[key]);

	const fontColors = Object.keys(StyleDictionary.color.font)

dbanksdesign / config.js

Created April 2, 2020 19:01

Style Dictionary replacing transform in transformGroup

	const StyleDictionary = require('style-dictionary');

	// Way 1:
	// Will run both name transforms, but yours will run last
	// StyleDictionary.registerTransformGroup({
	// name: 'less',
	// transforms: StyleDictionary.transformGroup.less.concat('name/ti/camel')
	// });

	// Way 2:

dbanksdesign / config.js

Created April 23, 2020 20:52

sd: css / scss

	StyleDictionary.registerTransform({
	type: 'value',
	matcher: /* */,
	transformer: function(prop) {
	return `var(--${prop.name}, ${prop.original.value})`
	}
	});

dbanksdesign / sd.config.js

Last active June 8, 2020 18:48

sd-434

	const camelCase = require('lodash/camelCase');

	module.exports = {
	format: {
	customES6: function(dictionary, config) {
	let toRet = '';
	console.log(JSON.stringify(dictionary.properties, null, 2));
	Object.keys(dictionary.properties).forEach(function(key) {
	Object.keys(dictionary.properties[key]).forEach(function(key2) {
	const varName = camelCase([key, key2].join(' '));

dbanksdesign / base.json

Last active June 11, 2020 16:46

sd-transitive-attribute-transform-example

dbanksdesign / style-dictionary-platform-value.js

Created July 27, 2020 17:07

	const StyleDictionary = require('style-dictionary');

	// Creating a function that takes a token value
	// and returns an object of the transformed value for
	// the platforms defined in the config
	const sdValue = (value) => {
	const styleDictionary = StyleDictionary.extend({
	// You can directly set the 'properties' aka tokens
	// of the dictionary by giving it an object
	properties: {

dbanksdesign / apl-package.json

Last active October 16, 2020 03:00

dbanksdesign / apl-package-2.json

Last active October 16, 2020 03:19