onecart-ui/src/styles/tokens/index.ts

Cross-platform React and React Native component library with white-label support

// This file maps the generated tokens to a structured format our components expect
import * as tokens from './tokens';
import { typographyTokens } from './typography';

export { typographyTokens };

// Convert rem values to numbers
const remToNumber = (remValue: string): number => {
  if (!remValue || typeof remValue !== 'string') return 0;
  return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px
};

// Convert px values to numbers
const pxToNumber = (pxValue: string): number => {
  if (!pxValue || typeof pxValue !== 'string') return 0;
  return parseFloat(pxValue.replace('px', ''));
};

// Size configurations for buttons
const buttonSizes = {
  sm: {
    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_SM),
    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_XS),
    fontSize: pxToNumber(tokens.FONT_SIZE_3XS),
    borderRadius: remToNumber(tokens.BORDER_RADIUS_BUTTON_SM),
    minHeight: 32,
  },
  md: {
    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_MD),
    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_SM),
    fontSize: pxToNumber(tokens.FONT_SIZE_XS),
    borderRadius: remToNumber(tokens.BORDER_RADIUS_XS),
    minHeight: 40,
  },
  lg: {
    paddingHorizontal: remToNumber(tokens.LAYOUT_SPACING_INLINE_LG),
    paddingVertical: remToNumber(tokens.LAYOUT_SPACING_STACK_MD),
    fontSize: pxToNumber(tokens.FONT_SIZE_MD),
    borderRadius: remToNumber(tokens.BORDER_RADIUS_SM),
    minHeight: 48,
  }
};

// Common button properties
const buttonCommon = {
  fontWeight: tokens.MEDIUM,
  lineHeight: pxToNumber(tokens.LINE_HEIGHT_XS),
  borderWidth: pxToNumber(tokens.BORDER_WIDTH_BUTTON_DEFAULT),
  transition: 'all 0.2s ease-in-out',
};

// Button tokens organized by variant and size
export const buttonTokens = {
  primary: {
    background: {
      default: tokens.ACTION_PRIMARY_DEFAULT,
      hover: tokens.ACTION_PRIMARY_HOVER,
      active: tokens.ACTION_PRIMARY_ACTIVE,
      disabled: tokens.ACTION_PRIMARY_DISABLED,
    },
    text: {
      default: "#FFFFFF", // White
      disabled: tokens.NEUTRAL_50,
    },
    border: {
      default: tokens.ACTION_PRIMARY_DEFAULT,
      hover: tokens.ACTION_PRIMARY_HOVER,
      active: tokens.ACTION_PRIMARY_ACTIVE,
      disabled: tokens.ACTION_PRIMARY_DISABLED,
    }
  },
  secondary: {
    background: {
      default: tokens.NEUTRAL_10,
      hover: tokens.NEUTRAL_20,
      active: tokens.NEUTRAL_30,
      disabled: tokens.NEUTRAL_10,
    },
    text: {
      default: tokens.NEUTRAL_70,
      disabled: tokens.NEUTRAL_40,
    },
    border: {
      default: tokens.NEUTRAL_30,
      hover: tokens.NEUTRAL_40,
      active: tokens.NEUTRAL_50,
      disabled: tokens.NEUTRAL_20,
    }
  },
  outline: {
    background: {
      default: 'transparent',
      hover: tokens.ACTION_PRIMARY_DISABLED,
      active: tokens.ACTION_PRIMARY_ACTIVE,
      disabled: 'transparent',
    },
    text: {
      default: tokens.ACTION_PRIMARY_DEFAULT,
      disabled: tokens.NEUTRAL_40,
    },
    border: {
      default: tokens.ACTION_PRIMARY_DEFAULT,
      hover: tokens.ACTION_PRIMARY_HOVER,
      active: tokens.ACTION_PRIMARY_ACTIVE,
      disabled: tokens.NEUTRAL_30,
    }
  },
  ghost: {
    background: {
      default: 'transparent',
      hover: tokens.NEUTRAL_10,
      active: tokens.NEUTRAL_20,
      disabled: 'transparent',
    },
    text: {
      default: tokens.NEUTRAL_60,
      disabled: tokens.NEUTRAL_40,
    },
    border: {
      default: 'transparent',
      hover: 'transparent',
      active: 'transparent',
      disabled: 'transparent',
    }
  },
  sizes: buttonSizes,
  common: buttonCommon
};

export default buttonTokens;