xd-design-tokens

Design tokens for the Tajir / XD extension UI. Forked from MetaMask’s design-tokens package and customized with a skyblue navy dark theme.

Package: xd-design-tokens
Repo: xaadali0087/xd-design-tokens

Table of Contents

• Installation
• CSS Variables
• CSS-in-JS
• Dark theme palette
• Development
• Release
• License

Installation

yarn add xd-design-tokens

or

npm install xd-design-tokens

Supports two formats:

1. CSS variables — web / extension / SCSS
2. CSS-in-JS theme objects — React / React Native

CSS Variables

1. Import the stylesheet:

@import 'xd-design-tokens/styles.scss';

2. Use semantic CSS variables:

.card {
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-muted);
}

<div style={{ color: 'var(--color-error-default)' }}>Error</div>

Apply themes with data-theme or class names:

• Light: :root, [data-theme='light'], .light
• Dark: [data-theme='dark'], .dark

CSS-in-JS

import { lightTheme, darkTheme, brandColor, typography } from 'xd-design-tokens';

// Swap theme (pseudo code)
<ThemeProvider theme={isDark ? darkTheme : lightTheme} />;

const styles = StyleSheet.create({
  modalContainer: {
    backgroundColor: darkTheme.colors.background.default,
    borderColor: darkTheme.colors.border.default,
    color: darkTheme.colors.text.default,
  },
});

Public exports

| Export | Description | |--------|-------------| | lightTheme | Light theme (colors, typography, shadows) | | darkTheme | Dark theme (colors, typography, shadows) | | brandColor | Primitive palette (prefer semantic theme colors) | | typography | Typography scale | | colors | Deprecated — use lightTheme / darkTheme instead | | Theme | TypeScript type |

Dark theme palette

Dark theme colors are aligned with the Flutter AppColorsExt skyblue navy palette:

| Token | Value | Source | |-------|-------|--------| | background.default | #0A1B4A | bar / gradient dark one | | background.alternative | #1A337A | dark tile | | background.accent | #092A88 | bottom nav | | overlay.alternative | #032379 | bottom sheet | | primary.default | #0E3ACE | primary | | primary.alternative | #1A72F6 | gradient one | | text / icon.default | #FFFFFF | white | | text.alternative | #D1D1D1 | secondary text | | border.default | #FFFFFF | border | | border.muted | #4C526B4A | divider | | success.default | #0BAE44 | green | | error.default | #D32F2F | red | | shadow.default | #FFFFFF46 | nav shadow |

Source files:

• src/js/themes/darkTheme/colors.ts
• src/css/dark-theme-colors.css
• src/figma/darkTheme.json

Development

Setup

yarn install

Scripts

| Command | Description | |---------|-------------| | yarn build | Bundle JS (tsup), emit types (tsc), minify CSS → dist/ | | yarn test | Run Jest tests | | yarn release | Bump patch version, build, and publish to npm |

Project structure

src/
  js/          # TypeScript theme objects (lightTheme, darkTheme, brandColor, typography)
  css/         # CSS custom properties
  figma/       # Tokens Studio JSON (reference + test oracle)
dist/          # Published build output

Tokens are maintained manually from Figma Tokens Studio JSON. Keep JS, CSS, and src/figma/*.json in sync when changing colors.

Build output

| Path | Use | |------|-----| | dist/index.js / dist/index.mjs | CJS / ESM | | dist/index.d.ts | Types | | dist/styles.scss | CSS variables stylesheet |

Release

Publish to npmjs.com as xd-design-tokens (unscoped name).

1. Create an npm account if needed.
2. Log in and publish:

npm login
yarn build
npm publish --access public

Or:

yarn release

Note: GitHub Packages requires a scoped name (@username/package). To keep the name xd-design-tokens, this package publishes to the public npm registry instead.

License

MIT (see LICENSE.MIT and LICENSE.APACHE2)