Numbers Dataset

Location

Resolved locations:

• shilpConfig.values.numbers.DEFAULT
• shilpConfig.values.numbers.fractions
• shilpConfig.values.numbers.percentages

Theme locations:

• shilpConfig.theme.numbers
• shilpConfig.theme.numbers.fractions
• shilpConfig.theme.numbers.percentages

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 numeric tokens to CSS values.

It includes following groups:

• DEFAULT → plain numeric values (0-200)
• fractions → decimal values (0.0-2.0)
• percentages → percentage values (0%-200%)

See: Numbers Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

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

  extend: {
    values: {
      numbers: {
        //
        DEFAULT: {
          250: 250,
        },
        //
        fractions: {
          250: 2.5,
        },
        //
        percentages: {
          250: "250%",
        },
      },
    },
  },
};

export default shilpConfig;

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

Numbers Dataset Reference

Numbers Datasetcopy to clipboard
const numbers = {
  DEFAULT: {
    0: 0,
    5: 5,
    10: 10,
    20: 20,
    25: 25,
    30: 30,
    40: 40,
    50: 50,
    60: 60,
    70: 70,
    75: 75,
    80: 80,
    90: 90,
    95: 95,
    100: 100,
    DEFAULT: "100",
    105: 105,
    110: 110,
    125: 125,
    150: 150,
    175: 175,
    200: 200,
  },

  fractions: {
    0: 0,
    5: 0.05,
    10: 0.1,
    20: 0.2,
    25: 0.25,
    30: 0.3,
    40: 0.4,
    50: 0.5,
    60: 0.6,
    70: 0.7,
    75: 0.75,
    80: 0.8,
    90: 0.9,
    95: 0.95,
    100: 1,
    DEFAULT: "1",
    105: 1.05,
    110: 1.1,
    125: 1.25,
    150: 1.5,
    175: 1.75,
    200: 2,
  },

  percentages: {
    0: "0%",
    5: "5%",
    10: "10%",
    20: "20%",
    25: "25%",
    30: "30%",
    40: "40%",
    50: "50%",
    60: "60%",
    70: "70%",
    75: "75%",
    80: "80%",
    90: "90%",
    95: "95%",
    100: "100%",
    DEFAULT: "100%",
    105: "105%",
    110: "110%",
    125: "125%",
    150: "150%",
    175: "175%",
    200: "200%",
  },
};

export default numbers;