Support length variable

Author: owjs3901

.changepacks/changepack_log_J7kZ5wcihsOAeZHW9L3kE.json

@@ -0,0 +1 @@
+{"changes":{"bindings/devup-ui-wasm/package.json":"Patch"},"note":"Support variable","date":"2026-04-01T07:11:17.490320600Z"}

.gitignore

@@ -20,3 +20,4 @@ storybook-static
 .sisyphus
 test-results
 playwright-report
+.omc

AGENTS.md

@@ -36,7 +36,7 @@ devup-ui/
 | Add CSS property | `libs/css/src/constant.rs` | Property mappings |
 | Add pseudo selector | `packages/react/src/types/props/selector/` | TypeScript types |
 | Modify extraction | `libs/extractor/src/lib.rs` | Core logic + tests |
-| Theme system | `libs/sheet/src/theme.rs` | Color/typography |
+| Theme system | `libs/sheet/src/theme.rs` | Color/typography/length/shadow |
 | Plugin behavior | `packages/*-plugin/src/plugin.ts` | All follow same pattern |
 | Component API | `packages/react/src/components/` | Box, Flex, Text... |
 | WASM exports | `bindings/devup-ui-wasm/src/lib.rs` | JS-exposed functions |
@@ -49,7 +49,7 @@ devup-ui/
 |--------|------|-------|------|
 | extractor | `lib.rs` | 9,094 | Main extraction + tests |
 | sheet | `lib.rs` | 1,821 | CSS output generation |
-| theme | `theme.rs` | 1,526 | Color/typography system |
+| theme | `theme.rs` | 1,526 | Color/typography/length/shadow system |
 | css_utils | `css_utils.rs` | 1,239 | Template literal parsing |
 | visit | `visit.rs` | 669 | AST visitor pattern |
 
@@ -105,11 +105,19 @@ All React components throw `Error('Cannot run on the runtime')` - they're compil
 {
   "theme": {
     "colors": { "default": {...}, "dark": {...} },
-    "typography": { "heading": {...} }
+    "typography": { "heading": {...} },
+    "length": { "default": { "containerX": ["1px", null, "2px"] } },
+    "shadow": { "default": { "card": ["0 1px 2px #0003", null, null, "0 4px 8px #0003"] } }
   }
 }
 ```
 
+### Length & Shadow Tokens
+- Defined responsively like typography (arrays with `null` for skipped breakpoints)
+- Used with `$` prefix: `<Box w="$containerX" />`, `<Box boxShadow="$card" />`
+- `"$token"` and `{"$token"}` both expand to multiple breakpoint classes
+- `{["$token"]}` inside a responsive array stays single class (array defines breakpoints)
+
 ### Plugin Pattern
 All plugins wrap bundler config:
 ```ts

SKILL.md

@@ -6,12 +6,13 @@ description: |
   TRIGGER WHEN:
   - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.)
   - Using styling APIs: css(), globalCss(), keyframes()
-  - Configuring devup.json theme (colors, typography, extends)
+  - Configuring devup.json theme (colors, typography, length, shadow, extends)
   - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun)
   - Debugging "Cannot run on the runtime" errors
   - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.)
   - Using polymorphic `as` prop or `selectors` prop
   - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
+  - Using responsive length tokens ($containerX, $gutter) or shadow tokens ($card, $sm)
 ---
 
 # Devup UI
@@ -338,15 +339,42 @@ const spin = keyframes({ from: { transform: "rotate(0)" }, to: { transform: "rot
         null,
         { "fontSize": "16px", "lineHeight": 1.6 }
       ]
+    },
+    "length": {
+      "default": {
+        "containerX": ["16px", null, "32px"],
+        "gutter": ["8px", null, "16px"]
+      }
+    },
+    "shadow": {
+      "default": {
+        "card": ["0 1px 2px #0003", null, null, "0 4px 8px #0003"],
+        "sm": "0 1px 2px rgba(0,0,0,0.05)"
+      }
     }
   }
 }
 ```
 
 - **Colors**: Use with `$` prefix in JSX props: `<Box color="$primary" />`
 - **Typography**: Use with `$` prefix: `<Text typography="$heading" />`
+- **Length**: Responsive length tokens: `<Box px="$containerX" />`, `<Flex gap="$gutter" />`
+- **Shadow**: Responsive shadow tokens: `<Box boxShadow="$card" />`
 - **extends**: Inherit from base config files (deep merge, last wins)
-- **Responsive typography**: Use arrays with `null` for unchanged breakpoints
+- **Responsive typography/length/shadow**: Use arrays with `null` for unchanged breakpoints
+
+### Length & Shadow Token Behavior
+
+Length and shadow tokens support responsive arrays like typography. The key distinction is how `$token` behaves depending on syntax:
+
+| 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 only | 1 |
+| `px={["8px", null, "$containerX"]}` | `8px` at index 0, token at index 2 | 2 |
+
+Both `"$token"` and `{"$token"}` expand the responsive token. Only `{["$token"]}` inside a responsive array keeps it as a single class — because the array itself defines the breakpoint levels.
 
 Theme types are auto-generated via module augmentation of `DevupTheme` and `DevupThemeTypography`.
 
@@ -415,20 +443,22 @@ DevupUI({
 })
 ```
 
-## $color Token Scope
+## $token Scope
 
-`$color` tokens only work in **JSX props**. Use `var(--color)` in external objects.
+`$token` values (colors, length, shadow) only work in **JSX props**. Use `var(--token)` in external objects.
 
 ```tsx
-// CORRECT - $color in JSX prop
+// CORRECT - $token in JSX prop
 <Box bg="$primary" />
+<Box px="$containerX" />
+<Box boxShadow="$card" />
 <Box bg={{ active: '$primary', inactive: '$gray' }[status]} />
 
-// WRONG - $color in external object (won't be transformed)
+// WRONG - $token in external object (won't be transformed)
 const colors = { active: '$primary' }
 <Box bg={colors.active} />  // broken!
 
-// CORRECT - var(--color) in external object
+// CORRECT - var(--token) in external object
 const colors = { active: 'var(--primary)' }
 <Box bg={colors.active} />
 ```

apps/landing/src/app/(detail)/docs/LeftMenu.tsx

@@ -122,6 +122,14 @@ export function LeftMenu() {
             to: '/docs/devup/typography',
             children: 'Typography',
           },
+          {
+            to: '/docs/devup/length',
+            children: 'Length',
+          },
+          {
+            to: '/docs/devup/shadow',
+            children: 'Shadow',
+          },
           {
             to: '/docs/devup/breakpoints',
             children: 'Breakpoints',

apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx

@@ -7,7 +7,7 @@ export const metadata = {
 
 # devup.json
 
-The `devup.json` file is the configuration file for your Devup UI theme. Create it at the root of your project to define colors, typography, and other design tokens.
+The `devup.json` file is the configuration file for your Devup UI theme. Create it at the root of your project to define colors, typography, length, shadow, and other design tokens.
 
 ## Basic Structure
 
@@ -18,7 +18,13 @@ The `devup.json` file is the configuration file for your Devup UI theme. Create
       "default": {},
       "dark": {}
     },
-    "typography": {}
+    "typography": {},
+    "length": {
+      "default": {}
+    },
+    "shadow": {
+      "default": {}
+    }
   }
 }
 ```
@@ -155,6 +161,53 @@ Typography properties:
 
 See [Typography](/docs/devup/typography) for more details.
 
+## Length Configuration
+
+Define responsive length tokens for spacing, sizing, and other CSS length properties:
+
+```json
+{
+  "theme": {
+    "length": {
+      "default": {
+        "containerX": ["16px", null, "32px", null, "64px"],
+        "gutter": ["8px", null, "16px"]
+      }
+    }
+  }
+}
+```
+
+Length tokens use responsive arrays just like typography. Use `null` to skip breakpoints and inherit from the previous value.
+
+See [Length](/docs/devup/length) for more details.
+
+## Shadow Configuration
+
+Define responsive shadow tokens for box-shadow values:
+
+```json
+{
+  "theme": {
+    "shadow": {
+      "default": {
+        "card": [
+          "0 1px 2px rgba(0,0,0,0.1)",
+          null,
+          null,
+          "0 4px 8px rgba(0,0,0,0.1)"
+        ],
+        "sm": "0 1px 2px rgba(0,0,0,0.05)"
+      }
+    }
+  }
+}
+```
+
+Shadow tokens also support responsive arrays. Non-array values define a single shadow for all breakpoints.
+
+See [Shadow](/docs/devup/shadow) for more details.
+
 ## Usage in Components
 
 ### Colors
@@ -170,6 +223,18 @@ const headingExample = <Text typography="$h1">Heading</Text>
 const bodyExample = <Text typography="$body">Body text</Text>
 ```
 
+### Length
+
+```tsx
+<Box gap="$gutter" px="$containerX" />
+```
+
+### Shadow
+
+```tsx
+<Box boxShadow="$card" />
+```
+
 ## File Location
 
 The `devup.json` file should be placed at the root of your project:
@@ -215,7 +280,7 @@ module.exports = withDevupUI({
 
 When your project builds, Devup UI automatically generates TypeScript types from your `devup.json`. This enables:
 
-- Autocomplete for color and typography tokens
+- Autocomplete for color, typography, length, and shadow tokens
 - Type errors for invalid tokens
 - Consistent usage across your codebase
 
@@ -227,6 +292,6 @@ Changes to `devup.json` trigger hot reload during development. You can:
 
 1. Add new color tokens
 2. Modify existing values
-3. Add typography styles
+3. Add typography, length, or shadow styles
 
 And see changes immediately without restarting the dev server.

apps/landing/src/app/(detail)/docs/devup/length/page.mdx

@@ -0,0 +1,111 @@
+export const metadata = {
+  title: 'Length',
+  alternates: {
+    canonical: '/docs/devup/length',
+  },
+}
+
+# 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`:
+
+```json
+{
+  "theme": {
+    "length": {
+      "default": {
+        "containerX": ["16px", null, "32px", null, "64px"],
+        "gutter": ["8px", null, "16px"],
+        "borderRadiusMd": ["8px", null, "16px"]
+      }
+    }
+  }
+}
+```
+
+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:
+
+```tsx
+<>
+  <Box px="$containerX" />
+  <Box gap="$gutter" />
+  <Box borderRadius="$borderRadiusMd" />
+  <Box px="$containerX" />
+</>
+```
+
+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:
+
+```tsx
+{
+  /* "$containerX" stays as a single value at breakpoint index 2 */
+}
+;<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:
+
+```json
+{
+  "theme": {
+    "length": {
+      "default": {
+        "containerX": ["16px", null, "32px"]
+      },
+      "compact": {
+        "containerX": ["8px", null, "16px"]
+      }
+    }
+  }
+}
+```
+
+## Non-Responsive Tokens
+
+For a single value across all breakpoints, use a simple string:
+
+```json
+{
+  "theme": {
+    "length": {
+      "default": {
+        "borderRadiusSm": "4px",
+        "borderRadiusMd": "8px",
+        "borderRadiusLg": "16px"
+      }
+    }
+  }
+}
+```
+
+## Type Safety
+
+Length tokens are fully type-safe. TypeScript will autocomplete available tokens when you type `$`:
+
+```tsx
+// Autocomplete shows: $containerX, $gutter, $borderRadiusMd, etc.
+<Box px="$" />
+```