Length

Devup UI supports responsive length tokens for spacing, sizing, border-radius, and other CSS length properties. Like typography, length tokens can be defined as responsive arrays in devup.json.

Defining Length Tokens

Define length tokens in your devup.json:

1{
2  "theme": {
3    "length": {
4      "default": {
5        "containerX": ["16px", null, "32px", null, "64px"],
6        "gutter": ["8px", null, "16px"],
7        "borderRadiusMd": ["8px", null, "16px"]
8      }
9    }
10  }
11}
1{
2  "theme": {
3    "length": {
4      "default": {
5        "containerX": ["16px", null, "32px", null, "64px"],
6        "gutter": ["8px", null, "16px"],
7        "borderRadiusMd": ["8px", null, "16px"]
8      }
9    }
10  }
11}

Each array index corresponds to a breakpoint. Use null to skip a breakpoint and inherit from the previous value.

Usage

Use length tokens with the $ prefix on any length-accepting prop:

1<>
2  <Box px="$containerX" />
3  <Box gap="$gutter" />
4  <Box borderRadius="$borderRadiusMd" />
5  <Box px="$containerX" />
6</>
1<>
2  <Box px="$containerX" />
3  <Box gap="$gutter" />
4  <Box borderRadius="$borderRadiusMd" />
5  <Box px="$containerX" />
6</>

Both "$token" and {"$token"} expand the responsive token into multiple breakpoint-level classes.

Responsive Array Behavior

When a $token appears inside a responsive array, it does not expand — the array itself defines the breakpoints:

1{
2  /* "$containerX" stays as a single value at breakpoint index 2 */
3}
4;<Box px={['8px', null, '$containerX']} />
1{
2  /* "$containerX" stays as a single value at breakpoint index 2 */
3}
4;<Box px={['8px', null, '$containerX']} />

This is the key distinction:

| Syntax | Behavior | Classes | | ----------------------------------- | ---------------------------------- | -------- | | px="$containerX" | Expands to all defined breakpoints | Multiple | | px={"$containerX"} | Expands to all defined breakpoints | Multiple | | px={["$containerX"]} | Single value at index 0 | 1 | | px={["8px", null, "$containerX"]} | 8px at index 0, token at index 2 | 2 |

Theme Variants

Length tokens support theme variants, similar to colors:

1{
2  "theme": {
3    "length": {
4      "default": {
5        "containerX": ["16px", null, "32px"]
6      },
7      "compact": {
8        "containerX": ["8px", null, "16px"]
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "length": {
4      "default": {
5        "containerX": ["16px", null, "32px"]
6      },
7      "compact": {
8        "containerX": ["8px", null, "16px"]
9      }
10    }
11  }
12}

Non-Responsive Tokens

For a single value across all breakpoints, use a simple string:

1{
2  "theme": {
3    "length": {
4      "default": {
5        "borderRadiusSm": "4px",
6        "borderRadiusMd": "8px",
7        "borderRadiusLg": "16px"
8      }
9    }
10  }
11}
1{
2  "theme": {
3    "length": {
4      "default": {
5        "borderRadiusSm": "4px",
6        "borderRadiusMd": "8px",
7        "borderRadiusLg": "16px"
8      }
9    }
10  }
11}

Type Safety

Length tokens are fully type-safe. TypeScript will autocomplete available tokens when you type $:

1// Autocomplete shows: $containerX, $gutter, $borderRadiusMd, etc.
2<Box px="$" />
1// Autocomplete shows: $containerX, $gutter, $borderRadiusMd, etc.
2<Box px="$" />