Shadow

Devup UI supports responsive shadow tokens for box-shadow values. Like typography and length, shadow tokens can be defined as responsive arrays in devup.json.

Defining Shadow Tokens

Define shadow tokens in your devup.json:

1{
2  "theme": {
3    "shadow": {
4      "default": {
5        "sm": "0 1px 2px rgba(0,0,0,0.05)",
6        "card": [
7          "0 1px 2px rgba(0,0,0,0.1)",
8          null,
9          null,
10          "0 4px 8px rgba(0,0,0,0.1)"
11        ],
12        "modal": [
13          "0 4px 12px rgba(0,0,0,0.15)",
14          null,
15          null,
16          "0 8px 24px rgba(0,0,0,0.15)"
17        ]
18      }
19    }
20  }
21}
1{
2  "theme": {
3    "shadow": {
4      "default": {
5        "sm": "0 1px 2px rgba(0,0,0,0.05)",
6        "card": [
7          "0 1px 2px rgba(0,0,0,0.1)",
8          null,
9          null,
10          "0 4px 8px rgba(0,0,0,0.1)"
11        ],
12        "modal": [
13          "0 4px 12px rgba(0,0,0,0.15)",
14          null,
15          null,
16          "0 8px 24px rgba(0,0,0,0.15)"
17        ]
18      }
19    }
20  }
21}

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

Usage

Use shadow tokens with the $ prefix on boxShadow:

1<>
2  <Box boxShadow="$card" />
3  <Box boxShadow="$sm" />
4  <Box boxShadow="$modal" />
5</>
1<>
2  <Box boxShadow="$card" />
3  <Box boxShadow="$sm" />
4  <Box boxShadow="$modal" />
5</>

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  /* "$card" stays as a single value at breakpoint index 3 */
3}
4;<Box boxShadow={['none', null, null, '$card']} />
1{
2  /* "$card" stays as a single value at breakpoint index 3 */
3}
4;<Box boxShadow={['none', null, null, '$card']} />

This is the key distinction:

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

Theme Variants

Shadow tokens support theme variants, similar to colors:

1{
2  "theme": {
3    "shadow": {
4      "default": {
5        "card": "0 2px 4px rgba(0,0,0,0.1)"
6      },
7      "dark": {
8        "card": "0 2px 4px rgba(0,0,0,0.4)"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "shadow": {
4      "default": {
5        "card": "0 2px 4px rgba(0,0,0,0.1)"
6      },
7      "dark": {
8        "card": "0 2px 4px rgba(0,0,0,0.4)"
9      }
10    }
11  }
12}

Type Safety

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

1// Autocomplete shows: $sm, $card, $modal, etc.
2<Box boxShadow="$" />
1// Autocomplete shows: $sm, $card, $modal, etc.
2<Box boxShadow="$" />