New: Add more design tokens

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;

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;
+

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)
+}

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;
+

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: [

docs/README.md

@@ -10,10 +10,10 @@ A design token is an abstraction of a visual property such as colour, font, widt
     <h2><Badge vertical="middle"><VIcon name="droplet"/></Badge> Colours</h2>
     <p>Showbie application UI colour palettes and usage guidelines.</p>
   </a>
-  <div class="feature ma2 o-50">
-    <h2><Badge vertical="middle"><VIcon name="type"/></Badge> Fonts</h2>
+  <a class="feature ma2" href="/typography/showbie/">
+    <h2><Badge vertical="middle"><VIcon name="type"/></Badge> Typography</h2>
     <p>Coming soon.</p>
-  </div>
+  </a>
   <div class="feature ma2 o-50">
     <h2><Badge vertical="middle"><VIcon name="layout"/></Badge> Spacing</h2>
     <p>Coming soon.</p>

docs/typography/showbie/README.md

@@ -0,0 +1,9 @@
+# Showbie typography
+
+## Families
+
+Showbie uses Avenir for all in-app text.
+
+## Size scale
+
+## Weight scale

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

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,
     });