TypographyHelper

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

helpers.typography.js

import Ember from 'ember';

const DEFAULT_FAMILY = 'Sans';
const DEFAULT_SIZE = 1;
const DEFAULT_COLOR = 'black';
const DEFAULT_WEIGHT = 'regular';
const DEFAULT_OPACITY = 1;

function createTypographyClass(family = DEFAULT_FAMILY, {
  type,
  size = DEFAULT_SIZE,
  color = DEFAULT_COLOR,
  opacity = DEFAULT_OPACITY,
  weight = DEFAULT_WEIGHT,
}) {
  return (
    type ||
    `${family}-f${size}-${color}-op${opacity}${
      weight !== DEFAULT_WEIGHT ? `-${weight}` : ''
    }`
  );
}
 
export function typography([family] = [], hash = {}) {
  console.log('Family: ', family);
  return createTypographyClass(family, hash);
}

export default Ember.Helper.helper(typography);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

<h1 class={{typography "Code" size=2}}>Hello World</h1>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}