Custom spacing

The spacing scale drives padding, margin, gap, width, height, inset and basis, among others.

import { defineConfig } from "@croff/core";

export default defineConfig({
  theme: {
    spacing: {
      7: "1.75rem",
      gutter: "clamp(1rem, 4vw, 3rem)",
    },
  },
});

html

<section class="padding-x(gutter) gap(7)">Content</section>

Token names don't need to be numbers. They can't contain dots, so name half-steps something like 1_5.

Default scale

0, px, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48 and 64, where 1 is 0.25rem.

The scale has gaps on purpose: gap(7) is an error until you define it.

Negative values

margin and the offset utilities accept a minus sign.

html

<div class="margin-top(-4) top(-2)"></div>

Generated CSS

:root {
  --croff-spacing-2: 0.5rem;
  --croff-spacing-4: 1rem;
}

.top\(-2\) {
  top: calc(var(--croff-spacing-2) * -1);
}

.margin-top\(-4\) {
  margin-top: calc(var(--croff-spacing-4) * -1);
}

padding doesn't, since CSS doesn't allow negative padding.