diff --git a/dist/backpack-showbie.js b/dist/backpack-showbie.js new file mode 100644 index 0000000..7036bec --- /dev/null +++ b/dist/backpack-showbie.js @@ -0,0 +1,69 @@ +/** + * BACKPACK TOKENS + * v0.4.0 + */ + +var colors = { + grey: { + 400: '#c4c4ca', + 500: '#b9bbbd', + }, + + slate: { + 600: '#8aa4af', + }, + + blue: { + 50: '#f1faff', + 100: '#dcf3ff', + 200: '#cbeeff', + 500: '#29b1f0', + 600: '#009fe8', + 700: '#0084c2', + }, + + green: { + 500: '#5dbe6e', + }, + + red: { + 100: '#fce5e5', + 500: '#f07f7f', + 800: '#e10000', + }, + + brand: { + feide: '#068f8d', + google: '#dc4e41', + microsoft: '#07a6f0', + showbie: '#009fe8', + socrative: '#ff602b', + }, +} + +exports.COLORS = colors; + +var sizes = { + xs: '1rem', + sm: '1.08334rem', + base: '1.25rem', + md: '1.4167rem', + lg: '1.5rem', + xl: '1.75rem', +} + +exports.SIZES = sizes; + +var radii = { + 0: '0', + 1: '0.25rem', + 2: '0.5rem', + 3: '0.75rem', + 4: '1rem', + 6: '1.5rem', + 8: '2rem', + round: '100%', + pill: '9999px', +} + +exports.RADII = radii; diff --git a/dist/backpack-showbie.scss b/dist/backpack-showbie.scss new file mode 100644 index 0000000..a4107e4 --- /dev/null +++ b/dist/backpack-showbie.scss @@ -0,0 +1,61 @@ +//// +/// BACKPACK TOKENS +/// v0.4.0 +//// + +//// +/// UI colours +//// +/// Grey +$sbe-grey-400: #c4c4ca; +$sbe-grey-500: #b9bbbd; + +/// Slate +$sbe-slate-600: #8aa4af; + +/// Blue +$sbe-blue-50: #f1faff; +$sbe-blue-100: #dcf3ff; +$sbe-blue-200: #cbeeff; +$sbe-blue-500: #29b1f0; +$sbe-blue-600: #009fe8; +$sbe-blue-700: #0084c2; + +/// Green +$sbe-green-500: #5dbe6e; + +/// Red +$sbe-red-100: #fce5e5; +$sbe-red-500: #f07f7f; +$sbe-red-800: #e10000; + +/// Brand +$sbe-brand-feide: #068f8d; +$sbe-brand-google: #dc4e41; +$sbe-brand-microsoft: #07a6f0; +$sbe-brand-showbie: #009fe8; +$sbe-brand-socrative: #ff602b; + +//// +/// Typographic scale +//// +$sbe-fs-xs: 1rem; +$sbe-fs-sm: 1.08334rem; +$sbe-fs-base: 1.25rem; +$sbe-fs-md: 1.4167rem; +$sbe-fs-lg: 1.5rem; +$sbe-fs-xl: 1.75rem; + +//// +/// Border radius scale +//// +$sbe-br-0: 0; +$sbe-br-1: 0.25rem; +$sbe-br-2: 0.5rem; +$sbe-br-3: 0.75rem; +$sbe-br-4: 1rem; +$sbe-br-6: 1.5rem; +$sbe-br-8: 2rem; +$sbe-br-round: 100%; +$sbe-br-pill: 9999px; + diff --git a/dist/backpack-showbie.swift b/dist/backpack-showbie.swift new file mode 100644 index 0000000..cbe1a08 --- /dev/null +++ b/dist/backpack-showbie.swift @@ -0,0 +1,69 @@ +//// +/// BACKPACK TOKENS +/// v0.4.0 +//// + +import UIKit + +@objc +public extension UIColor { + /// + /// Grey + /// + // #c4c4ca + static let sbeGrey400 = UIColor(red: 0.7686274509803922, green: 0.7686274509803922, blue: 0.792156862745098, alpha: 1) + // #b9bbbd + static let sbeGrey500 = UIColor(red: 0.7254901960784313, green: 0.7333333333333333, blue: 0.7411764705882353, alpha: 1) + + /// + /// Slate + /// + // #8aa4af + static let sbeSlate600 = UIColor(red: 0.5411764705882353, green: 0.6431372549019608, blue: 0.6862745098039216, alpha: 1) + + /// + /// Blue + /// + // #f1faff + static let sbeBlue50 = UIColor(red: 0.9450980392156862, green: 0.9803921568627451, blue: 1, alpha: 1) + // #dcf3ff + static let sbeBlue100 = UIColor(red: 0.8627450980392157, green: 0.9529411764705882, blue: 1, alpha: 1) + // #cbeeff + static let sbeBlue200 = UIColor(red: 0.796078431372549, green: 0.9333333333333333, blue: 1, alpha: 1) + // #29b1f0 + static let sbeBlue500 = UIColor(red: 0.1607843137254902, green: 0.6941176470588235, blue: 0.9411764705882353, alpha: 1) + // #009fe8 + static let sbeBlue600 = UIColor(red: 0, green: 0.6235294117647059, blue: 0.9098039215686274, alpha: 1) + // #0084c2 + static let sbeBlue700 = UIColor(red: 0, green: 0.5176470588235295, blue: 0.7607843137254902, alpha: 1) + + /// + /// Green + /// + // #5dbe6e + static let sbeGreen500 = UIColor(red: 0.36470588235294116, green: 0.7450980392156863, blue: 0.43137254901960786, alpha: 1) + + /// + /// Red + /// + // #fce5e5 + static let sbeRed100 = UIColor(red: 0.9882352941176471, green: 0.8980392156862745, blue: 0.8980392156862745, alpha: 1) + // #f07f7f + static let sbeRed500 = UIColor(red: 0.9411764705882353, green: 0.4980392156862745, blue: 0.4980392156862745, alpha: 1) + // #e10000 + static let sbeRed800 = UIColor(red: 0.8823529411764706, green: 0, blue: 0, alpha: 1) + + /// + /// Brand + /// + // #068f8d + static let sbeBrandFeide = UIColor(red: 0.023529411764705882, green: 0.5607843137254902, blue: 0.5529411764705883, alpha: 1) + // #dc4e41 + static let sbeBrandGoogle = UIColor(red: 0.8627450980392157, green: 0.3058823529411765, blue: 0.2549019607843137, alpha: 1) + // #07a6f0 + static let sbeBrandMicrosoft = UIColor(red: 0.027450980392156862, green: 0.6509803921568628, blue: 0.9411764705882353, alpha: 1) + // #009fe8 + static let sbeBrandShowbie = UIColor(red: 0, green: 0.6235294117647059, blue: 0.9098039215686274, alpha: 1) + // #ff602b + static let sbeBrandSocrative = UIColor(red: 1, green: 0.3764705882352941, blue: 0.16862745098039217, alpha: 1) +} diff --git a/dist/backpack-socrative.less b/dist/backpack-socrative.less new file mode 100644 index 0000000..6158403 --- /dev/null +++ b/dist/backpack-socrative.less @@ -0,0 +1,58 @@ +//// +/// BACKPACK TOKENS +/// v0.4.0 +//// + +//// +/// UI colours +//// +/// Grey +@soc-grey-50: #f8f8f8; +@soc-grey-100: #f1f0f2; +@soc-grey-200: #e6e5e7; +@soc-grey-300: #cdccd0; +@soc-grey-400: #b9bbbd; + +/// Orange +@soc-orange-50: #fff7e5; +@soc-orange-100: #fff0ce; +@soc-orange-200: #ffe9b7; +@soc-orange-500: #ffc857; +@soc-orange-600: #efa946; + +/// Green +@soc-green-50: #e7f6ea; +@soc-green-100: #daf0de; +@soc-green-200: #c9e9cf; +@soc-green-500: #5dbe6e; + +/// Cyan +@soc-cyan-50: #e4fbff; +@soc-cyan-100: #d8f8ff; +@soc-cyan-500: #00b5e2; +@soc-cyan-600: #0099c7; +@soc-cyan-700: #0075a3; + +/// Blue +@soc-blue-900: #273b4c; + +/// Brand +@soc-brand-feide: #068f8d; +@soc-brand-google: #dc4e41; +@soc-brand-microsoft: #07a6f0; +@soc-brand-showbie: #009fe8; +@soc-brand-socrative: #ff602b; + +//// +/// Border radius scale +//// +@soc-br-0: 0; +@soc-br-1: 0.25rem; +@soc-br-2: 0.5rem; +@soc-br-3: 0.75rem; +@soc-br-4: 1rem; +@soc-br-6: 1.5rem; +@soc-br-8: 2rem; +@soc-br-round: 100%; +@soc-br-pill: 9999px; + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5bac6a7..48399d7 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -3,6 +3,7 @@ module.exports = { themeConfig: { nav: [ { text: 'Colours', link: '/colours/showbie/' }, + { text: 'Typography', link: '/typography/showbie/' }, { text: 'GitHub', link: 'https://github.com/showbie/backpack-tokens' }, ], @@ -19,6 +20,13 @@ module.exports = { children: ['grid/', 'graveyard/'], }, ], + '/typography/': [ + { + title: 'Typography', + collapsable: false, + children: ['showbie/', 'socrative/'], + }, + ], }, }, head: [ diff --git a/docs/README.md b/docs/README.md index 214ed3f..2c76fa5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,10 +10,10 @@ A design token is an abstraction of a visual property such as colour, font, widt

Colours

Showbie application UI colour palettes and usage guidelines.

-
-

Fonts

+ +

Typography

Coming soon.

-
+

Spacing

Coming soon.

diff --git a/docs/typography/showbie/README.md b/docs/typography/showbie/README.md new file mode 100644 index 0000000..ed77bd7 --- /dev/null +++ b/docs/typography/showbie/README.md @@ -0,0 +1,9 @@ +# Showbie typography + +## Families + +Showbie uses Avenir for all in-app text. + +## Size scale + +## Weight scale diff --git a/docs/typography/socrative/README.md b/docs/typography/socrative/README.md new file mode 100644 index 0000000..1145bc6 --- /dev/null +++ b/docs/typography/socrative/README.md @@ -0,0 +1,9 @@ +# Socrative typography + +## Families + +Socrative uses Inter for most in-app text. Montserrat is also used for titles, buttons, and other "accented" text. + +## Size scale + +## Weight scale diff --git a/lib/build-colors.js b/lib/build-colors.js index 8894b35..754891a 100644 --- a/lib/build-colors.js +++ b/lib/build-colors.js @@ -25,9 +25,8 @@ Handlebars.registerHelper('rgbfloat', (a) => rgbFloat(a)); Handlebars.registerHelper('swiftvar', (a, b, c) => swiftVarName(a, b, c)); class BaseBuilder { - constructor(colors, prefix = '', version) { - this.colors = colors; - this.prefix = prefix; + constructor(tokens, version) { + this.tokens = tokens; this.version = version; } @@ -36,13 +35,14 @@ class BaseBuilder { class ColorBuilder extends BaseBuilder { constructor( - colors, - prefix, + tokens, version, templatesDir = path.join(__dirname, '..', 'src', 'templates') ) { super(...arguments); + let colors = tokens.colors; + this.templatesDir = templatesDir; this.colorsArray = Object.keys(colors) .filter((name) => typeof colors[name] !== 'string') @@ -55,8 +55,8 @@ class ColorBuilder extends BaseBuilder { } }); - return { name, scale, prefix: this.prefix }; - }); + return { name, scale, prefix: this.tokens.prefix }; + }).filter(({scale}) => Object.keys(scale).length); } build(file, outputPaths, extraData = {}) { @@ -66,9 +66,12 @@ class ColorBuilder extends BaseBuilder { ); let compile = Handlebars.compile(template); + console.log(this.tokens.prefix) + let compiled = compile({ - prefix: this.prefix, + prefix: this.tokens.prefix, version: this.version, + tokens: this.tokens, colors: this.colorsArray, filter: extraData.filter ? extraData.filter : (color) => color, }); diff --git a/lib/index.js b/lib/index.js index 680439c..00feb61 100644 --- a/lib/index.js +++ b/lib/index.js @@ -6,36 +6,34 @@ const path = require('path'); const pkg = require('../package.json'); const ColorBuilder = require('./build-colors'); -const ShowbieColors = new ColorBuilder( - SHOWBIE.colors, - SHOWBIE.prefix, +const ShowbieTokens = new ColorBuilder( + SHOWBIE, pkg.version ); -const SocrativeColors = new ColorBuilder( - SOCRATIVE.colors, - SOCRATIVE.prefix, +const SocrativeTokens = new ColorBuilder( + SOCRATIVE, pkg.version ); -ShowbieColors.build('showbie-color.scss', [ - path.join(__dirname, '..', 'dist', 'showbie-color.scss'), +ShowbieTokens.build('backpack-tokens.scss', [ + path.join(__dirname, '..', 'dist', 'backpack-showbie.scss'), ]); -ShowbieColors.build('showbie-color.swift', [ - path.join(__dirname, '..', 'dist', 'showbie-color.swift'), +ShowbieTokens.build('backpack-tokens.swift', [ + path.join(__dirname, '..', 'dist', 'backpack-showbie.swift'), ]); -ShowbieColors.build('showbie-color.js', [ - path.join(__dirname, '..', 'dist', 'showbie-color.js'), +ShowbieTokens.build('backpack-tokens.js', [ + path.join(__dirname, '..', 'dist', 'backpack-showbie.js'), ]); -SocrativeColors.build('showbie-color.less', [ - path.join(__dirname, '..', 'dist', 'socrative-color.less'), -]); -SocrativeColors.build('showbie-color.scss', [ - path.join(__dirname, '..', 'dist', 'socrative-color.scss'), -]); -SocrativeColors.build('showbie-color.swift', [ - path.join(__dirname, '..', 'dist', 'socrative-color.swift'), -]); -SocrativeColors.build('showbie-color.js', [ - path.join(__dirname, '..', 'dist', 'socrative-color.js'), +SocrativeTokens.build('backpack-tokens.less', [ + path.join(__dirname, '..', 'dist', 'backpack-socrative.less'), ]); +// SocrativeColors.build('showbie-color.scss', [ +// path.join(__dirname, '..', 'dist', 'socrative-color.scss'), +// ]); +// SocrativeColors.build('showbie-color.swift', [ +// path.join(__dirname, '..', 'dist', 'socrative-color.swift'), +// ]); +// SocrativeColors.build('showbie-color.js', [ +// path.join(__dirname, '..', 'dist', 'socrative-color.js'), +// ]); diff --git a/src/backpack-showbie.js b/src/backpack-showbie.js index a06629f..15f56a3 100644 --- a/src/backpack-showbie.js +++ b/src/backpack-showbie.js @@ -75,4 +75,25 @@ export const colors = { export default { prefix: 'sbe', colors: colors, + + fontSizes: { + xs: '1rem', + sm: '1.08334rem', + base: '1.25rem', + md: '1.4167rem', + lg: '1.5rem', + xl: '1.75rem', + }, + + radii: { + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + round: '100%', + pill: '9999px', + }, }; diff --git a/src/backpack-socrative.js b/src/backpack-socrative.js index e613622..9834eac 100644 --- a/src/backpack-socrative.js +++ b/src/backpack-socrative.js @@ -76,4 +76,16 @@ export const colors = { export default { prefix: 'soc', colors: colors, + + radii: { + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + round: '100%', + pill: '9999px', + }, }; diff --git a/src/templates/backpack-tokens.js.hbs b/src/templates/backpack-tokens.js.hbs new file mode 100644 index 0000000..77ce60e --- /dev/null +++ b/src/templates/backpack-tokens.js.hbs @@ -0,0 +1,59 @@ +/** + * BACKPACK TOKENS + * v{{version}} + */ +{{#if colors}} + +var colors = { +{{~#each colors as |hue|}} + + {{hue.name}}: { +{{#each hue.scale as |value label|}} + {{label}}: '{{value}}', +{{/each}} + }, +{{/each}} +} + +exports.COLORS = colors; +{{/if}} +{{#if tokens.fonts}} + +var fonts = { +{{#each tokens.fonts as |value label|}} + {{label}}: '{{value}}', +{{/each}} +} + +exports.FONTS = fonts; +{{/if}} +{{#if tokens.fontSizes}} + +var sizes = { +{{#each tokens.fontSizes as |value label|}} + {{label}}: '{{value}}', +{{/each}} +} + +exports.SIZES = sizes; +{{/if}} +{{#if tokens.fontWeights}} + +var weights = { +{{#each tokens.fontWeights as |value label|}} + {{label}}: '{{value}}', +{{/each}} +} + +exports.WEIGHTS = weights; +{{/if}} +{{#if tokens.radii}} + +var radii = { +{{#each tokens.radii as |value label|}} + {{label}}: '{{value}}', +{{/each}} +} + +exports.RADII = radii; +{{/if}} diff --git a/src/templates/backpack-tokens.less.hbs b/src/templates/backpack-tokens.less.hbs new file mode 100644 index 0000000..b69b22f --- /dev/null +++ b/src/templates/backpack-tokens.less.hbs @@ -0,0 +1,47 @@ +//// +/// BACKPACK TOKENS +/// v{{version}} +//// +{{#if colors}} + +//// +/// UI colours +//// +{{~#each colors as |hue|}} + +/// {{capitalize hue.name}} +{{#each hue.scale as |value label|}} +@{{hue.prefix}}-{{hue.name}}-{{label}}: {{value}}; +{{/each}}{{/each}}{{/if}} +{{~#if tokens.fonts}} + +//// +/// Font families +//// +{{#each tokens.fonts as |value label|}} +@{{../prefix}}-font-{{label}}: {{value}}; +{{/each}}{{/if}} +{{~#if tokens.fontSizes}} + +//// +/// Typographic scale +//// +{{#each tokens.fontSizes as |value label|}} +@{{../prefix}}-fs-{{label}}: {{value}}; +{{/each}}{{/if}} +{{~#if tokens.fontWeights}} + +//// +/// Font weights +//// +{{#each tokens.fontWeights as |value label|}} +@{{../prefix}}-fw-{{label}}: {{value}}; +{{/each}}{{/if}} +{{~#if tokens.radii}} + +//// +/// Border radius scale +//// +{{#each tokens.radii as |value label|}} +@{{../prefix}}-br-{{label}}: {{value}}; +{{/each}}{{/if}} diff --git a/src/templates/backpack-tokens.scss.hbs b/src/templates/backpack-tokens.scss.hbs new file mode 100644 index 0000000..78ae8f4 --- /dev/null +++ b/src/templates/backpack-tokens.scss.hbs @@ -0,0 +1,39 @@ +//// +/// BACKPACK TOKENS +/// v{{version}} +//// +{{#if colors}} + +//// +/// UI colours +//// +{{~#each colors as |hue|}} + +/// {{capitalize hue.name}} +{{#each hue.scale as |value label|}} +${{hue.prefix}}-{{hue.name}}-{{label}}: {{value}}; +{{/each}}{{/each}}{{/if}} +{{~#if tokens.fonts}} + +//// +/// Font families +//// +{{#each tokens.fonts as |value label|}} +${{../prefix}}-font-{{label}}: {{value}}; +{{/each}}{{/if}} +{{~#if tokens.fontSizes}} + +//// +/// Typographic scale +//// +{{#each tokens.fontSizes as |value label|}} +${{../prefix}}-fs-{{label}}: {{value}}; +{{/each}}{{/if}} +{{~#if tokens.radii}} + +//// +/// Border radius scale +//// +{{#each tokens.radii as |value label|}} +${{../prefix}}-br-{{label}}: {{value}}; +{{/each}}{{/if}} diff --git a/src/templates/showbie-color.swift.hbs b/src/templates/backpack-tokens.swift.hbs similarity index 93% rename from src/templates/showbie-color.swift.hbs rename to src/templates/backpack-tokens.swift.hbs index 8b4d30b..97c66ec 100644 --- a/src/templates/showbie-color.swift.hbs +++ b/src/templates/backpack-tokens.swift.hbs @@ -1,5 +1,5 @@ //// -/// BACKPACK COLOURS +/// BACKPACK TOKENS /// v{{version}} //// diff --git a/src/templates/showbie-color.js.hbs b/src/templates/showbie-color.js.hbs deleted file mode 100644 index e89faec..0000000 --- a/src/templates/showbie-color.js.hbs +++ /dev/null @@ -1,17 +0,0 @@ -/** - * BACKPACK COLOURS - * v{{version}} - */ - -var colors = { -{{~#each colors as |hue|}} - - {{hue.name}}: { -{{#each hue.scale as |value label|}} - {{label}}: '{{value}}', -{{/each}} - }, -{{/each}} -} - -exports.colors = colors; diff --git a/src/templates/showbie-color.less.hbs b/src/templates/showbie-color.less.hbs deleted file mode 100644 index 614f5c7..0000000 --- a/src/templates/showbie-color.less.hbs +++ /dev/null @@ -1,13 +0,0 @@ -//// -/// BACKPACK COLOURS -/// v{{version}} -//// -{{#each colors as |hue|}} - -/// -/// {{capitalize hue.name}} -/// -{{#each hue.scale as |value label|}} -@{{hue.prefix}}-{{hue.name}}-{{label}}: {{value}}; -{{/each}} -{{/each}}