Gavin McFarland gavinmcfarland

Leading Trim Toggle

Below is a CSS snippet you can use to turn leading trimming on and off per element. Otherwise known as line-height crop or text crop.

/* leading-trim.css */

* {
  --line-height: 1.5;
  --cap-height: 0.75;

How to lookup properties?

red: #FF0000;

color: {
  red: #CD0000;
  blue: #001AFF;
  green: #00FF19;
}

An idea for a super minimalistic templating language

.<rule.abbr><modifier> {        # for rule, modifier, prop, value in rules
	<prop>: >> <value> <<;
}

// css/class.template

Adding plugin inline

// index.js
import { mole, Model } from 'mole'

mole.add(
	new Model('model-name', (data, theme) =&gt; {

	* {
	--cap-height: 0.75;
	--leading-trim-over-adjustment: 0em;
	--leading-trim-under-adjustment: 0em;
	--line-height: 1.5;

	--unset: unset;
	--leading-trim: var(--unset);
	--leading-trim-over: var(--unset);
	--leading-trim-under: var(--unset);

	import React from "react";

	const CodeSandboxPreview = ({ value }) => {
	const { url = "test", theme = "light", view } = value;

	if (!url) {
	return (<div>Add a URL</div>)
	}

	var viewString = ""

	import React from "react";

	const FigmaPreview = ({ value }) => {
	const { url } = value;
	const host = `gavinmcfarland.co.uk;` // Change to your host/domain
	const regex = /https:\/\/([\w\.-]+\.)?figma.com\/(file\|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/
	if (regex.test(url)) {
	const embedUrl = `https://www.figma.com/embed?embed_host=${host}&url=${url}`;

	return (<iframe

	function getAdjValues(thing, depth) {
	function iterValue(thing, depth, i = -1) {
	i++

	let targetDepth = depth - 1

	_.each(thing, function(value, property) {
	let newThing = {}
	if (Array.isArray(value)) {
	if (value.length === 1) {