Spacing Dataset

Location

Resolved locations:

• shilpConfig.values.spacing.percentages
• shilpConfig.values.spacing.pixels

Theme locations:

• shilpConfig.theme.spacing (pixel values & percentage values)
• shilpConfig.theme.spacingPercentages
• shilpConfig.theme.spacingPixels

Usage

These utilities read values from the theme, which is built from this dataset.

Dataset Structure

The dataset is a nested key–value map of spacing tokens to CSS values.

It includes following groups:

1. pixels → fixed spacing values defined in pixels
2. percentages → relative spacing values in percentages
   • "x/y": "n%", where x < y andy in range of 1-12

See: Spacing Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customizing spacing datasetcopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  extend: {
    values: {
      spacing: {
        //
        percentages: {
          "1/13": "7.69%",
          "2/13": "15.38%",
          "3/13": "23.08%",
          "4/13": "30.77%",
          "5/13": "38.46%",
          "6/13": "46.15%",
          "7/13": "53.85%",
          "8/13": "61.54%",
          "9/13": "69.23%",
          "10/13": "76.92%",
          "11/13": "84.62%",
          "12/13": "92.31%",
        },
        //
        pixels: {
          112: "448px",
          120: "480px",
          144: "576px",
          160: "640px",
        },
      },
    },
  },
};

export default shilpConfig;

This will make additional spacing tokens available through the theme system.

Spacing Dataset Reference

Spacing Datasetcopy to clipboard
// https://v3.tailwindcss.com/docs/customizing-spacing#default-spacing-scale
// https://v3.tailwindcss.com/docs/width#percentage-widths

const spacing = {
  percentages: {
    half: "50%",
    full: "100%",
    // `"x/y": "n%"`, where `x < y` and `y` in range of `1-12`

    // `for` loop defined below, will inject the data
  },

  pixels: {
    auto: "auto",
    0: 0,
    px: "1px",
    0.5: "2px",
    0.75: "3px",
    1: "4px",
    1.5: "6px",
    2: "8px",
    2.5: "10px",
    3: "12px",
    3.5: "14px",
    4: "16px",
    4.5: "18px",
    5: "20px",
    5.5: "22px",
    6: "24px",
    6.6: "26px",
    7: "28px",
    7.5: "30px",
    8: "32px",
    9: "36px",
    10: "40px",
    11: "44px",
    12: "48px",
    14: "56px",
    15: "60px",
    16: "64px",
    18: "72px",
    20: "80px",
    24: "96px",
    28: "112px",
    32: "128px",
    36: "144px",
    40: "160px",
    44: "176px",
    48: "192px",
    52: "208px",
    56: "224px",
    60: "240px",
    64: "256px",
    72: "288px",
    80: "320px",
    96: "384px",
    100: "400px",
  },
};

/* ============================================================================================= */

// `"x/y": "n%"`, where `x < y` and `y` in range of `1-12`
for (let i = 2; i <= 12; i++) {
  for (let j = 1; j < i; j++) {
    Object.assign(spacing.percentages, {
      [`${j}/${i}`]: `${((j / i) * 100).toFixed(2)}%`.replace(".00", ""),
    });
  }
}

/* ============================================================================================= */

export default spacing;