> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tokencraft.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# export_mode

> Export a specific mode tokens in various formats

# export\_mode

Exports design tokens from a specific mode in your chosen format (JSON, CSS, iOS, Android).

## Tool Schema

```json theme={null}
{
  "name": "export_mode",
  "description": "Export a specific mode's tokens in various formats (json, css, ios, android)",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "The ID of the tokenset"
      },
      "mode_id": {
        "type": "string",
        "description": "The ID of the mode to export"
      },
      "format": {
        "type": "string",
        "enum": ["json", "css", "ios", "android"],
        "default": "json",
        "description": "The export format (default: json)"
      }
    },
    "required": ["tokenset_id", "mode_id"]
  }
}
```

## Parameters

| Parameter     | Type   | Required | Description                                                      |
| ------------- | ------ | -------- | ---------------------------------------------------------------- |
| `tokenset_id` | string | Yes      | The ID of the tokenset to export from                            |
| `mode_id`     | string | Yes      | The ID of the mode to export                                     |
| `format`      | string | No       | Export format: `json`, `css`, `ios`, `android` (default: `json`) |

## Response

The response contains the exported token data as a string in the requested format.

```json theme={null}
{
  "content": ":root {\n  --colors-primary: #007AFF;\n  --spacing-medium: 16px;\n}",
  "format": "css"
}
```

## Supported Formats

### JSON (W3C Design Tokens)

Standard W3C Design Tokens format:

```json theme={null}
{
  "color": {
    "primary": {
      "value": "#007AFF",
      "type": "color",
      "description": "Primary brand color"
    }
  },
  "spacing": {
    "medium": {
      "value": "16px",
      "type": "dimension"
    }
  }
}
```

### CSS Custom Properties

CSS variables ready for your stylesheets:

```css theme={null}
:root {
  /* Primary brand color */
  --color-primary: #007AFF;
  --spacing-medium: 16px;
  --font-size-base: 16px;
}
```

### iOS (Swift)

Swift code with UIColor and CGFloat definitions:

```swift theme={null}
import UIKit

extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
}

extension CGFloat {
    static let spacingMedium: CGFloat = 16.0
    static let fontSizeBase: CGFloat = 16.0
}
```

### Android (XML)

Android XML resources:

```xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#007AFF</color>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="font_size_base">16sp</dimen>
</resources>
```

## Example Usage in Claude

### Export CSS Variables

````
You: Export the Light mode from my Colors tokenset as CSS

Claude: I'll export the Light mode tokens as CSS custom properties.

Here's your CSS export:

```css
:root {
  /* Brand Colors */
  --color-primary: #007AFF;
  --color-secondary: #5856D6;
  --color-background: #FFFFFF;

  /* Spacing */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}
````

You can copy this CSS and use it in your project.

```

### Export for Development

```

You: Give me the JSON format for the Dark mode so I can use it in my design system

Claude: I'll export the Dark mode tokens in W3C Design Tokens JSON format.

```json theme={null}
{
  "color": {
    "primary": {
      "value": "#0A84FF",
      "type": "color",
      "description": "Primary brand color for dark mode"
    },
    "background": {
      "value": "#000000",
      "type": "color"
    }
  }
}
```

```

### Cross-Platform Export

```

You: Export the Light mode in both iOS Swift and Android XML formats

Claude: I'll export the tokens in both formats for you.

**iOS Swift:**

```swift theme={null}
extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
    static let colorBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
}
```

**Android XML:**

```xml theme={null}
<color name="color_primary">#007AFF</color>
<color name="color_background">#FFFFFF</color>
```

```

## Common Use Cases

### 1. Web Development

```

You: Export CSS variables for my component library

```

### 2. Mobile Apps

```

You: Generate Swift color constants for the iOS app

```

### 3. Design System Documentation

```

You: Export JSON format to generate style documentation

```

### 4. Cross-Platform Consistency

```

You: Export both iOS and Android formats to ensure consistency

```

## Notes

- Only exports tokens from the specified mode
- Aliased tokens are resolved to their actual values in the export
- Comments and descriptions are included where supported by the format
- The export is returned as a string that you can copy to your project

## Tips

1. **Format Selection**: Choose the format that matches your target platform
2. **Mode Selection**: Export different modes for theme support (Light/Dark)
3. **Copy Content**: The export content is displayed but not automatically saved
4. **Batch Exports**: Request multiple formats in one conversation

## See Also

- [export_tokenset](/mcp/tools/export-tokens) - Export complete tokenset with all modes
- [list_tokens_by_mode](/mcp/tools/list-tokens-by-mode) - Preview tokens before export
- [get_mode](/mcp/tools/get-mode) - Get mode details
```