Block Component

components.block\.js

import Component from '@glimmer/component';

// Need to support auto and 0 as params

function getClassName(type, edge, unit) {
  if (unit === '0') {
  	return '';
  }
  
  return `${type}${edge}-${unit}`;
}

function getClassNames(type, spacing) {
  const edges = spacing.split(' ');
  const [a, b, c, d] = edges;

  let top, right, bottom, left; 

  // 
  if (edges.length === 1) {
  	[top, right, bottom, left] = [a, a, a, a];
  }
  
  //   
  else if (edges.length === 2) {
    [top, right, bottom, left] = [a, b, a, b];
  }
  
  //    
  else if (edges.length === 3) {
    [top, right, bottom, left] = [a, b, c, b];
  }
  
  //   
  else if (edges.length === 4) {
    [top, right, bottom, left] = [a, b, c, d];
  }
  
  const t = type === 'offset' ? 'm' : 'p';
  
  const classNames = [
  	getClassName(t, 't', top),
  	getClassName(t, 'r', right),
  	getClassName(t, 'b', bottom),
    getClassName(t, 'l', left),    
  ];
  
  return classNames.join(' '); 
}

export default class extends Component {
  get inset() {
    const { inset: spacing } = this.args;
    
    if (!spacing) {
      return;
    }
		
    return getClassNames('inset', spacing);
  }
  
  get offset() {
    const { offset: spacing } = this.args;
    
    if (!spacing) {
      return;
    }
    
    return getClassNames('offset', spacing);
  }
}

components.card\.js

import Component from '@glimmer/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

styles.app\.css

/* Need to rename tokens to correct name */
:root {
--dimension-spacing-2xsmall: .4rem;
--dimension-spacing-xsmall: .8rem;
--dimension-spacing-small: 1.2rem;
--dimension-spacing-medium: 1.6rem;
--dimension-spacing-large: 2.4rem;
--dimension-spacing-xlarge: 3.2rem;
--dimension-spacing-2xlarge: 4.8rem;
--dimension-spacing-3xlarge: 6.4rem;
--dimension-spacing-4xlarge: 9.6rem;
--dimension-spacing-5xlarge: 12.8rem;
}

body {
  margin: 12px 16px;
  font-family: sans-serif;
  font-size: 62.5%;
}

p {
	font-size: 1.2rem;
  margin: 0;
}

p + p {
	margin-top: 2.4rem;
}

.block {
  border: 1px solid magenta;
  font-size: 1.2rem;
  font-weight: bold;
}

:root {
	--dimension-spacing-key: ".4rem";
	--dimension-spacing-key: ".8rem";
	--dimension-spacing-key: "1.2rem";
	--dimension-spacing-key: "1.6rem";
	--dimension-spacing-key: "2.4rem";
	--dimension-spacing-key: "3.2rem";
	--dimension-spacing-key: "4.8rem";
	--dimension-spacing-key: "6.4rem";
	--dimension-spacing-key: "9.6rem";
	--dimension-spacing-key: "12.8rem";
}:root {
	--dimension-spacing-size: .4rem;
	--dimension-spacing-size: .8rem;
	--dimension-spacing-size: 1.2rem;
	--dimension-spacing-size: 1.6rem;
	--dimension-spacing-size: 2.4rem;
	--dimension-spacing-size: 3.2rem;
	--dimension-spacing-size: 4.8rem;
	--dimension-spacing-size: 6.4rem;
	--dimension-spacing-size: 9.6rem;
	--dimension-spacing-size: 12.8rem;
}

.mt-2xsm {
	margin-top: var(--dimension-spacing-2xsmall);
}

.pt-2xsm {
	padding-top: var(--dimension-spacing-2xsmall);
}

.mr-2xsm {
	margin-right: var(--dimension-spacing-2xsmall);
}

.pr-2xsm {
	padding-right: var(--dimension-spacing-2xsmall);
}

.mb-2xsm {
	margin-bottom: var(--dimension-spacing-2xsmall);
}

.pb-2xsm {
	padding-bottom: var(--dimension-spacing-2xsmall);
}

.ml-2xsm {
	margin-left: var(--dimension-spacing-2xsmall);
}

.pl-2xsm {
	padding-left: var(--dimension-spacing-2xsmall);
}

.mt-xsm {
	margin-top: var(--dimension-spacing-xsmall);
}

.pt-xsm {
	padding-top: var(--dimension-spacing-xsmall);
}

.mr-xsm {
	margin-right: var(--dimension-spacing-xsmall);
}

.pr-xsm {
	padding-right: var(--dimension-spacing-xsmall);
}

.mb-xsm {
	margin-bottom: var(--dimension-spacing-xsmall);
}

.pb-xsm {
	padding-bottom: var(--dimension-spacing-xsmall);
}

.ml-xsm {
	margin-left: var(--dimension-spacing-xsmall);
}

.pl-xsm {
	padding-left: var(--dimension-spacing-xsmall);
}

.mt-sm {
	margin-top: var(--dimension-spacing-small);
}

.pt-sm {
	padding-top: var(--dimension-spacing-small);
}

.mr-sm {
	margin-right: var(--dimension-spacing-small);
}

.pr-sm {
	padding-right: var(--dimension-spacing-small);
}

.mb-sm {
	margin-bottom: var(--dimension-spacing-small);
}

.pb-sm {
	padding-bottom: var(--dimension-spacing-small);
}

.ml-sm {
	margin-left: var(--dimension-spacing-small);
}

.pl-sm {
	padding-left: var(--dimension-spacing-small);
}

.mt-md {
	margin-top: var(--dimension-spacing-medium);
}

.pt-md {
	padding-top: var(--dimension-spacing-medium);
}

.mr-md {
	margin-right: var(--dimension-spacing-medium);
}

.pr-md {
	padding-right: var(--dimension-spacing-medium);
}

.mb-md {
	margin-bottom: var(--dimension-spacing-medium);
}

.pb-md {
	padding-bottom: var(--dimension-spacing-medium);
}

.ml-md {
	margin-left: var(--dimension-spacing-medium);
}

.pl-md {
	padding-left: var(--dimension-spacing-medium);
}

.mt-lg {
	margin-top: var(--dimension-spacing-large);
}

.pt-lg {
	padding-top: var(--dimension-spacing-large);
}

.mr-lg {
	margin-right: var(--dimension-spacing-large);
}

.pr-lg {
	padding-right: var(--dimension-spacing-large);
}

.mb-lg {
	margin-bottom: var(--dimension-spacing-large);
}

.pb-lg {
	padding-bottom: var(--dimension-spacing-large);
}

.ml-lg {
	margin-left: var(--dimension-spacing-large);
}

.pl-lg {
	padding-left: var(--dimension-spacing-large);
}

.mt-xlg {
	margin-top: var(--dimension-spacing-xlarge);
}

.pt-xlg {
	padding-top: var(--dimension-spacing-xlarge);
}

.mr-xlg {
	margin-right: var(--dimension-spacing-xlarge);
}

.pr-xlg {
	padding-right: var(--dimension-spacing-xlarge);
}

.mb-xlg {
	margin-bottom: var(--dimension-spacing-xlarge);
}

.pb-xlg {
	padding-bottom: var(--dimension-spacing-xlarge);
}

.ml-xlg {
	margin-left: var(--dimension-spacing-xlarge);
}

.pl-xlg {
	padding-left: var(--dimension-spacing-xlarge);
}

.mt-2xlg {
	margin-top: var(--dimension-spacing-2xlarge);
}

.pt-2xlg {
	padding-top: var(--dimension-spacing-2xlarge);
}

.mr-2xlg {
	margin-right: var(--dimension-spacing-2xlarge);
}

.pr-2xlg {
	padding-right: var(--dimension-spacing-2xlarge);
}

.mb-2xlg {
	margin-bottom: var(--dimension-spacing-2xlarge);
}

.pb-2xlg {
	padding-bottom: var(--dimension-spacing-2xlarge);
}

.ml-2xlg {
	margin-left: var(--dimension-spacing-2xlarge);
}

.pl-2xlg {
	padding-left: var(--dimension-spacing-2xlarge);
}

.mt-3xlg {
	margin-top: var(--dimension-spacing-3xlarge);
}

.pt-3xlg {
	padding-top: var(--dimension-spacing-3xlarge);
}

.mr-3xlg {
	margin-right: var(--dimension-spacing-3xlarge);
}

.pr-3xlg {
	padding-right: var(--dimension-spacing-3xlarge);
}

.mb-3xlg {
	margin-bottom: var(--dimension-spacing-3xlarge);
}

.pb-3xlg {
	padding-bottom: var(--dimension-spacing-3xlarge);
}

.ml-3xlg {
	margin-left: var(--dimension-spacing-3xlarge);
}

.pl-3xlg {
	padding-left: var(--dimension-spacing-3xlarge);
}

.mt-4xlg {
	margin-top: var(--dimension-spacing-4xlarge);
}

.pt-4xlg {
	padding-top: var(--dimension-spacing-4xlarge);
}

.mr-4xlg {
	margin-right: var(--dimension-spacing-4xlarge);
}

.pr-4xlg {
	padding-right: var(--dimension-spacing-4xlarge);
}

.mb-4xlg {
	margin-bottom: var(--dimension-spacing-4xlarge);
}

.pb-4xlg {
	padding-bottom: var(--dimension-spacing-4xlarge);
}

.ml-4xlg {
	margin-left: var(--dimension-spacing-4xlarge);
}

.pl-4xlg {
	padding-left: var(--dimension-spacing-4xlarge);
}

.mt-5xlg {
	margin-top: var(--dimension-spacing-5xlarge);
}

.pt-5xlg {
	padding-top: var(--dimension-spacing-5xlarge);
}

.mr-5xlg {
	margin-right: var(--dimension-spacing-5xlarge);
}

.pr-5xlg {
	padding-right: var(--dimension-spacing-5xlarge);
}

.mb-5xlg {
	margin-bottom: var(--dimension-spacing-5xlarge);
}

.pb-5xlg {
	padding-bottom: var(--dimension-spacing-5xlarge);
}

.ml-5xlg {
	margin-left: var(--dimension-spacing-5xlarge);
}

.pl-5xlg {
	padding-left: var(--dimension-spacing-5xlarge);
}

templates.application\.hbs

<p>This is only a <em>proof of concept</em>. The class names are not fully optimized for high-volume reuse.</p>

<p>Nor does this demo allow for negative offset <em>yet</em>. Inset should ever allow negative.</p>

<Card @inset="4xlg" @offset="lg 3xlg xsm 5xlg">
  Card
</Card>

<Card @inset="lg" @offset="sm">
  Card
</Card>

<Card @inset="sm 4xlg" @offset="0 lg">
  Card
</Card>

templates.components.block\.hbs

<div class="block {{this.inset}} {{this.offset}}" ...attributes>
	{{yield}}
</div>

templates.components.card\.hbs

<Block @inset={{@inset}} @offset={{@offset}} class="card">
	{{yield}}
</Block>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}