ui-title-component.js

import Component from '@ember/component';
import { Styled, group } from 'ember-cli-ui-components';

export default Component.extend(Styled, {

  styles: {
    base: 'leading-tight',

    defaultStyle: 'regular margined',

    sizes: group({
      headline: {
        tagName: 'h1',
        style: 'text-2 sm:text-1 font-semibold mt-3 md:mt-4'
      },
      regular: {
        tagName: 'h2',
        style: 'text-3 font-semibold'
      },
      small: {
        tagName: 'h3',
        style: 'text-4 sm:text-3 font-medium'
      },
      xs: {
        tagName: 'h4',
        style: 'text-6 sm:text-4 font-semibold'
      }
    }),

    uppercase: 'uppercase',
    center: 'text-center mx-auto',
    transparent: 'opacity-70',
    underlined: 'border-solid border-b-2',
    skeleton: 'bg-light-gray text-light-gray w-256',

    margins: group({
      margined: 'mb-3',
      marginless: ''
    }),
  }

});