@emblamedical/tokens

Framework-agnostic design tokens for Össur, Bionics, Embla, and Formotion.

Installation

yarn add @emblamedical/tokens

Theme Structure

{
  core: { /* core tokens */ },
  semantic: {
    color: { text: {...}, surface: {...}, border: {...}, ... }
  },
  typography: { desktop: {...}, tablet: {...}, mobile: {...} },
  spacing: { desktop: {...}, tablet: {...}, mobile: {...} }
}

TypeScript

import type { SemanticTokens } from '@emblamedical/tokens';

Usage

Static import

import { ossurTheme, formotionTheme } from '@emblamedical/tokens';

const color = ossurTheme.semantic.color.text.primary;
const spacing = formotionTheme.spacing.desktop.vertical_alignment;

Dynamic theme selection

import { tokenTheme } from '@emblamedical/tokens';

const currentTheme = tokenTheme[themeName]; // themeName: 'ossur' | 'bionics' | 'embla' | 'formotion'

Styled-Components Integration

For cleaner syntax with styled-components, create these helpers in your codebase:

// utils/tokens.ts
import { css } from 'styled-components';

export const createDesignTokenProxy = (path: string[] = []) => {
  const handler: ProxyHandler<any> = {
    get(target, prop) {
      if (prop === Symbol.toPrimitive || prop === 'toString') {
        return () => css`${({ theme }) => path.reduce((acc, key) => acc[key], theme.tokens)}`;
      }
      return createDesignTokenProxy([...path, prop.toString()]);
    },
  };
  return new Proxy({}, handler);
};

export const tokens = createDesignTokenProxy();

export const getSpacingToken = (tokenType: string) => ({
  desktop: tokens.spacing.desktop[tokenType],
  mobile: tokens.spacing.mobile[tokenType],
  tablet: tokens.spacing.tablet[tokenType],
});

export const getTypographyToken = (media: string, tokenType: string) => ({
  fontFamily: tokens.typography[media][tokenType].font_family,
  fontWeight: tokens.typography[media][tokenType].font_weight,
  fontSize: tokens.typography[media][tokenType].font_size,
});

Usage: color: ${tokens.semantic.color.text.primary}