onecart-ui 1.0.1

package/src/styles/tokens/tokensMap.scss

@@ -0,0 +1,353 @@
+
+/**
+ * File generated by the Figma Token Engine
+ * Do not edit directly
+ */
+
+$tokens: (
+  'border-radius-tooltip-default': 0.25rem,
+  'border-radius-popover-default': 0.5rem,
+  'border-radius-tag-sm': 0.25rem,
+  'border-radius-tag-xl': 62.4rem,
+  'border-radius-button-sm': 0.25rem,
+  'border-radius-button-full': 62.4rem,
+  'border-radius-input-sm': 0.25rem,
+  'border-radius-input-lg': 0.5rem,
+  'border-radius-card-sm': 0.25rem,
+  'border-radius-card-md': 0.5rem,
+  'border-radius-card-lg': 0.75rem,
+  'border-radius-modal-lg': 0.75rem,
+  'border-radius-modal-xl': 1rem,
+  'border-radius-none': 0,
+  'border-radius-xs': 0.25rem,
+  'border-radius-sm': 0.5rem,
+  'border-radius-md': 0.75rem,
+  'border-radius-lg': 1rem,
+  'border-radius-xl': 1.25rem,
+  'border-radius-2xl': 1.5rem,
+  'border-radius-3xl': 1.75rem,
+  'border-radius-full': 62.4rem,
+  'border-width-button-default': 0.0625rem,
+  'border-width-button-hover': 0.125rem,
+  'border-width-button-pressed': 0.125rem,
+  'border-width-input-default': 0.0625rem,
+  'border-width-input-focus': 0.125rem,
+  'border-width-input-error': 0.125rem,
+  'border-width-card-default': 0.0625rem,
+  'border-width-card-hover': 0.125rem,
+  'border-width-none': 0,
+  'border-width-xs': 0.0625rem,
+  'border-width-sm': 0.125rem,
+  'border-width-md': 0.25rem,
+  'border-green': #00df88,
+  'border-blue': #0053e2,
+  'border-yellow': #f4b400,
+  'border-red': #a90000,
+  'border-dark': #111,
+  'border-light': #e2e2e2,
+  'border-lighter': #f1f1f1,
+  'layout-spacing-inline-none': 0,
+  'layout-spacing-inline-3xs': 0.125rem,
+  'layout-spacing-inline-2xs': 0.25rem,
+  'layout-spacing-inline-xs': 0.5rem,
+  'layout-spacing-inline-sm': 0.75rem,
+  'layout-spacing-inline-md': 1rem,
+  'layout-spacing-inline-lg': 2rem,
+  'layout-spacing-inline-xl': 2.5rem,
+  'layout-spacing-inline-2xl': 5rem,
+  'layout-spacing-stack-none': 0,
+  'layout-spacing-stack-3xs': 0.125rem,
+  'layout-spacing-stack-2xs': 0.25rem,
+  'layout-spacing-stack-xs': 0.5rem,
+  'layout-spacing-stack-sm': 0.75rem,
+  'layout-spacing-stack-md': 1rem,
+  'layout-spacing-stack-lg': 2rem,
+  'layout-spacing-stack-xl': 2.5rem,
+  'layout-spacing-stack-2xl': 5rem,
+  'section-spacing-sm': 1.5rem,
+  'section-spacing-md': 1.75rem,
+  'section-spacing-lg': 2rem,
+  'section-spacing-xl': 2.5rem,
+  'section-spacing-2xl': 3.5rem,
+  'section-spacing-3xl': 5rem,
+  'component-card-sm': 0.75rem,
+  'component-card-md': 1.25rem,
+  'component-card-lg': 1.5rem,
+  'component-card-xl': 2rem,
+  'component-card-2xl': 2.5rem,
+  'component-modal-sm': 1.25rem,
+  'component-modal-md': 1.5rem,
+  'component-modal-lg': 1.75rem,
+  'space-0': 0,
+  'space-3xs': 0.125rem,
+  'space-2xs': 0.25rem,
+  'space-xs': 0.5rem,
+  'space-sm': 0.75rem,
+  'space-md': 1rem,
+  'space-lg': 1.25rem,
+  'space-xl': 1.5rem,
+  'space-2xl': 1.75rem,
+  'space-3xl': 2rem,
+  'space-4xl': 2.5rem,
+  'space-5xl': 3rem,
+  'space-6xl': 3.5rem,
+  'space-7xl': 4rem,
+  'space-8xl': 5rem,
+  'xs': 0.75rem,
+  's': 1rem,
+  'md': 1.25rem,
+  'lg': 1.5rem,
+  'xl': 1.75rem,
+  '2xl': 2rem,
+  'background-yellow-light': #fff5d9,
+  'background-yellow-medium': #ffe7a5,
+  'background-blue-light': #e3ebff,
+  'background-blue-medium': #c3deff,
+  'background-green-light': #E5FCF3,
+  'background-green-medium': #ccf9e7,
+  'background-green-dark': #00df88,
+  'background-red-light': #feecec,
+  'background-red-medium': #fed8d8,
+  'background-white-light': #ffffff,
+  'background-neutral-dark': #111,
+  'background-neutral-grey': #e2e2e2,
+  'background-neutral-light': #f1f1f1,
+  'text-inverse': #ffffff,
+  'text-disabled': #ababab,
+  'text-placeholder': #919191,
+  'text-tertiary': #525252,
+  'text-body': #3b3b3b,
+  'text-header': #111,
+  'text-green': #00df88,
+  'text-blue': #0053e2,
+  'text-error': #a90000,
+  'text-yellow': #f4b400,
+  'feedback-alert-success': #00df88,
+  'feedback-alert-error': #a90000,
+  'feedback-alert-warning': #fff5d9,
+  'feedback-alert-neutral': #111,
+  'action-primary-default': #00df88,
+  'action-primary-hover': #4ce9ac,
+  'action-primary-active': #98f2cf,
+  'action-primary-disabled': #E5FCF3,
+  'action-secondary-default': #0053e2,
+  'action-secondary-hover': #254cac,
+  'action-secondary-active': #9ec1ff,
+  'action-secondary-disabled': #e3ebff,
+  'action-destructive-default': #d60000,
+  'action-destructive-hover': #a90000,
+  'action-destructive-active': #fed8d8,
+  'action-destructive-disable': #feecec,
+  'action-tertiary-default': #3b3b3b,
+  'action-tertiary-hover': #111,
+  'action-tertiary-active': #ababab,
+  'action-tertiary-disable': #f1f1f1,
+  'icon-yellow': #f4b400,
+  'icon-blue': #0053e2,
+  'icon-green': #00df88,
+  'icon-red': #a90000,
+  'icon-neutral': #111,
+  'icon-light': #e2e2e2,
+  'icon-lighter': #f1f1f1,
+  'green-10': #E5FCF3,
+  'green-20': #ccf9e7,
+  'green-30': #B2F5DB,
+  'green-40': #98f2cf,
+  'green-50': #81efc3,
+  'green-60': #66ecb8,
+  'green-70': #4ce9ac,
+  'green-80': #31e5a0,
+  'green-90': #1ae294,
+  'green-100': #00df88,
+  'neutral-10': #f1f1f1,
+  'neutral-20': #e2e2e2,
+  'neutral-30': #c6c6c6,
+  'neutral-40': #ababab,
+  'neutral-50': #919191,
+  'neutral-60': #6a6a6a,
+  'neutral-70': #525252,
+  'neutral-80': #3b3b3b,
+  'neutral-90': #262626,
+  'neutral-100': #111,
+  'blue-10': #e3ebff,
+  'blue-20': #c3deff,
+  'blue-30': #9ec1ff,
+  'blue-40': #5c83fd,
+  'blue-50': #446ef5,
+  'blue-60': #0053e2,
+  'blue-70': #254cac,
+  'blue-80': #14328d,
+  'blue-90': #0c285f,
+  'blue-100': #071e3c,
+  'red-10': #feecec,
+  'red-20': #fed8d8,
+  'red-30': #feb3b3,
+  'red-40': #fe8888,
+  'red-50': #fb5959,
+  'red-60': #d60000,
+  'red-70': #a90000,
+  'red-80': #820000,
+  'red-90': #550000,
+  'red-100': #3a0000,
+  'yellow-10': #fff5d9,
+  'yellow-20': #ffe7a5,
+  'yellow-30': #ffd86b,
+  'yellow-40': #ffce46,
+  'yellow-50': #ffc420,
+  'yellow-60': #f4b400,
+  'yellow-70': #dba200,
+  'yellow-80': #c69200,
+  'yellow-90': #b38400,
+  'yellow-100': #9a7100,
+  'white-10': #ffffff,
+  'display-2xl-font-family': 'Campton',
+  'display-2xl-font-weight': 500,
+  'display-2xl-line-height': 56px,
+  'display-2xl-font-size': 52px,
+  'display-2xl-letter-spacing': 0%,
+  'display-2xl-paragraph-indent': 0px,
+  'display-2xl-text-case': none,
+  'display-2xl-text-decoration': none,
+  'display-xl-font-family': 'Campton',
+  'display-xl-font-weight': 500,
+  'display-xl-line-height': 48px,
+  'display-xl-font-size': 44px,
+  'display-xl-letter-spacing': 0%,
+  'display-xl-paragraph-indent': 0px,
+  'display-xl-text-case': none,
+  'display-xl-text-decoration': none,
+  'heading-xl-font-family': 'Campton',
+  'heading-xl-font-weight': 600,
+  'heading-xl-line-height': 48px,
+  'heading-xl-font-size': 40px,
+  'heading-xl-letter-spacing': 0%,
+  'heading-xl-paragraph-indent': 0px,
+  'heading-xl-text-case': none,
+  'heading-xl-text-decoration': none,
+  'heading-lg-font-family': 'Campton',
+  'heading-lg-font-weight': 600,
+  'heading-lg-line-height': 44px,
+  'heading-lg-font-size': 36px,
+  'heading-lg-letter-spacing': 0%,
+  'heading-lg-paragraph-indent': 0px,
+  'heading-lg-text-case': none,
+  'heading-lg-text-decoration': none,
+  'heading-md-font-family': 'Campton',
+  'heading-md-font-weight': 600,
+  'heading-md-line-height': 40px,
+  'heading-md-font-size': 32px,
+  'heading-md-letter-spacing': 0%,
+  'heading-md-paragraph-indent': 0px,
+  'heading-md-text-case': none,
+  'heading-md-text-decoration': none,
+  'heading-sm-font-family': 'Campton',
+  'heading-sm-font-weight': 600,
+  'heading-sm-line-height': 36px,
+  'heading-sm-font-size': 28px,
+  'heading-sm-letter-spacing': 0%,
+  'heading-sm-paragraph-indent': 0px,
+  'heading-sm-text-case': none,
+  'heading-sm-text-decoration': none,
+  'heading-xs-font-family': 'Campton',
+  'heading-xs-font-weight': 600,
+  'heading-xs-line-height': 28px,
+  'heading-xs-font-size': 20px,
+  'heading-xs-letter-spacing': 0%,
+  'heading-xs-paragraph-indent': 0px,
+  'heading-xs-text-case': none,
+  'heading-xs-text-decoration': none,
+  'heading-2xs-font-family': 'Campton',
+  'heading-2xs-font-weight': 600,
+  'heading-2xs-line-height': 24px,
+  'heading-2xs-font-size': 18px,
+  'heading-2xs-letter-spacing': 0%,
+  'heading-2xs-paragraph-indent': 0px,
+  'heading-2xs-text-case': none,
+  'heading-2xs-text-decoration': none,
+  'body-xl-font-family': 'Campton',
+  'body-xl-font-weight': book,
+  'body-xl-line-height': 28px,
+  'body-xl-font-size': 18px,
+  'body-xl-letter-spacing': 0%,
+  'body-xl-paragraph-indent': 0px,
+  'body-xl-text-case': none,
+  'body-xl-text-decoration': none,
+  'body-lg-font-family': 'Campton',
+  'body-lg-font-weight': book,
+  'body-lg-line-height': 24px,
+  'body-lg-font-size': 16px,
+  'body-lg-letter-spacing': 0%,
+  'body-lg-paragraph-indent': 0px,
+  'body-lg-text-case': none,
+  'body-lg-text-decoration': none,
+  'body-md-font-family': 'Campton',
+  'body-md-font-weight': book,
+  'body-md-line-height': 20px,
+  'body-md-font-size': 14px,
+  'body-md-letter-spacing': 0%,
+  'body-md-paragraph-indent': 0px,
+  'body-md-text-case': none,
+  'body-md-text-decoration': none,
+  'body-sm-font-family': 'Campton',
+  'body-sm-font-weight': book,
+  'body-sm-line-height': 20px,
+  'body-sm-font-size': 12px,
+  'body-sm-letter-spacing': 0%,
+  'body-sm-paragraph-indent': 0px,
+  'body-sm-text-case': none,
+  'body-sm-text-decoration': none,
+  'utility-button-font-family': 'Campton',
+  'utility-button-font-weight': 500,
+  'utility-button-line-height': 16px,
+  'utility-button-font-size': 16px,
+  'utility-button-letter-spacing': 0%,
+  'utility-button-paragraph-indent': 0px,
+  'utility-button-text-case': none,
+  'utility-button-text-decoration': none,
+  'utility-link-font-family': 'Campton',
+  'utility-link-font-weight': 500,
+  'utility-link-line-height': 20px,
+  'utility-link-font-size': 14px,
+  'utility-link-letter-spacing': 0%,
+  'utility-link-paragraph-indent': 0px,
+  'utility-link-text-case': none,
+  'utility-link-text-decoration': underline,
+  'utility-caption-font-family': 'Campton',
+  'utility-caption-font-weight': book,
+  'utility-caption-line-height': 16px,
+  'utility-caption-font-size': 12px,
+  'utility-caption-letter-spacing': 0%,
+  'utility-caption-paragraph-indent': 0px,
+  'utility-caption-text-case': none,
+  'utility-caption-text-decoration': none,
+  'font-families-campton': 'Campton',
+  'line-height-6xl': 56px,
+  'line-height-5xl': 48px,
+  'line-height-4xl': 44px,
+  'line-height-3xl': 40px,
+  'line-height-2xl': 36px,
+  'line-height-xl': 32px,
+  'line-height-lg': 28px,
+  'line-height-md': 24px,
+  'line-height-s': 20px,
+  'line-height-xs': 16px,
+  'medium': 500,
+  'semi-bold': 600,
+  'book': book,
+  'font-size-2xs': 14px,
+  'font-size-3xs': 12px,
+  'font-size-xs': 16px,
+  'font-size-md': 18px,
+  'font-size-lg': 20px,
+  'font-size-xl': 28px,
+  'font-size-2xl': 32px,
+  'font-size-3xl': 36px,
+  'font-size-4xl': 40px,
+  'font-size-5xl': 44px,
+  'font-size-6xl': 52px,
+  'letter-spacing-0': 0%,
+  'text-case-none': none,
+  'text-decoration-none': none,
+  'text-decoration-underline': underline,
+  'paragraph-indent-0': 0px
+);

package/src/styles/tokens/typography.ts

@@ -0,0 +1,172 @@
+// This file maps the generated tokens to a structured format for Typography component
+import * as tokens from "./tokens";
+import { normalizeFontWeight } from "./utils/fontUtils";
+import { pxToNumber } from "./utils/utils";
+
+export const typographyTokens = {
+  // Display variants
+  display2xl: {
+    fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,
+    textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,
+    textCase: tokens.DISPLAY_2XL_TEXT_CASE,
+  },
+  displayXl: {
+    fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,
+    textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,
+    textCase: tokens.DISPLAY_XL_TEXT_CASE,
+  },
+
+  // Heading variants
+  headingXl: {
+    fontFamily: tokens.HEADING_XL_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_XL_LETTER_SPACING,
+    textDecoration: tokens.HEADING_XL_TEXT_DECORATION,
+    textCase: tokens.HEADING_XL_TEXT_CASE,
+  },
+  headingLg: {
+    fontFamily: tokens.HEADING_LG_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_LG_LETTER_SPACING,
+    textDecoration: tokens.HEADING_LG_TEXT_DECORATION,
+    textCase: tokens.HEADING_LG_TEXT_CASE,
+  },
+  headingMd: {
+    fontFamily: tokens.HEADING_MD_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_MD_LETTER_SPACING,
+    textDecoration: tokens.HEADING_MD_TEXT_DECORATION,
+    textCase: tokens.HEADING_MD_TEXT_CASE,
+  },
+  headingSm: {
+    fontFamily: tokens.HEADING_SM_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_SM_LETTER_SPACING,
+    textDecoration: tokens.HEADING_SM_TEXT_DECORATION,
+    textCase: tokens.HEADING_SM_TEXT_CASE,
+  },
+  headingXs: {
+    fontFamily: tokens.HEADING_XS_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_XS_LETTER_SPACING,
+    textDecoration: tokens.HEADING_XS_TEXT_DECORATION,
+    textCase: tokens.HEADING_XS_TEXT_CASE,
+  },
+
+  // Body text variants
+  bodyLg: {
+    fontFamily: tokens.BODY_LG_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),
+    color: tokens.TEXT_BODY,
+    letterSpacing: tokens.BODY_LG_LETTER_SPACING,
+    textDecoration: tokens.BODY_LG_TEXT_DECORATION,
+    textCase: tokens.BODY_LG_TEXT_CASE,
+    paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,
+  },
+  bodyMd: {
+    fontFamily: tokens.BODY_MD_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),
+    color: tokens.TEXT_BODY,
+    letterSpacing: tokens.BODY_MD_LETTER_SPACING,
+    textDecoration: tokens.BODY_MD_TEXT_DECORATION,
+    textCase: tokens.BODY_MD_TEXT_CASE,
+    paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,
+  },
+  bodySm: {
+    fontFamily: tokens.BODY_SM_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),
+    color: tokens.TEXT_BODY,
+    letterSpacing: tokens.BODY_SM_LETTER_SPACING,
+    textDecoration: tokens.BODY_SM_TEXT_DECORATION,
+    textCase: tokens.BODY_SM_TEXT_CASE,
+    paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,
+  },
+  bodyXs: {
+    // Map to utility-caption which is our smallest text style in Figma tokens
+    fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),
+    color: tokens.TEXT_BODY,
+    letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,
+    textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,
+    textCase: tokens.UTILITY_CAPTION_TEXT_CASE,
+    paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,
+  },
+
+  // Label variants - map to Utility tokens from Figma
+  labelLg: {
+    // Maps to utility-button
+    fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),
+    color: tokens.TEXT_TERTIARY,
+    letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,
+    textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,
+    textCase: tokens.UTILITY_BUTTON_TEXT_CASE,
+  },
+  labelMd: {
+    // Maps to utility-link
+    fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),
+    color: tokens.TEXT_TERTIARY,
+    letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,
+    textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link
+    textCase: tokens.UTILITY_LINK_TEXT_CASE,
+  },
+  labelSm: {
+    // Maps to utility-caption
+    fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),
+    color: tokens.TEXT_TERTIARY,
+    letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,
+    textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,
+    textCase: tokens.UTILITY_CAPTION_TEXT_CASE,
+  },
+
+  // Weights mapping for custom weight overrides
+  weights: {
+    normal: "400", // Regular weight
+    medium: normalizeFontWeight(tokens.MEDIUM),
+    semibold: normalizeFontWeight(tokens.SEMI_BOLD),
+    bold: "700", // Bold weight (not directly defined in tokens)
+  },
+};
+
+export default typographyTokens;

package/src/styles/tokens/utils/fontUtils.ts

@@ -0,0 +1,63 @@
+import { pxToNumber } from "./utils";
+
+/**
+ * Normalizes font weight to a string representation
+ * Converts numeric values to string, handles special cases like "book"
+ * @param weight The font weight value, can be a string or number
+ * @returns Normalized font weight as a string
+ */
+export const normalizeFontWeight = (weight: string | number): string => {
+  if (typeof weight === "number") {
+    return weight.toString();
+  }
+
+  if (weight === "book") {
+    return "400";
+  }
+
+  return weight;
+};
+
+/**
+ * Calculates an appropriate line height based on font size
+ * Uses a standard typographic ratio or falls back to a default multiplier
+ *
+ * @param fontSize The font size in pixels
+ * @param ratio Optional ratio to calculate line height (default: 1.5)
+ * @returns The calculated line height as a number
+ */
+export const calculateLineHeight = (
+  fontSize: string | number,
+  ratio: number = 1.5
+): number => {
+  const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
+  return Math.round(size * ratio);
+};
+
+/**
+ * Converts letter spacing percentage to a pixel value
+ * Figma often uses percentage values for letter spacing
+ *
+ * @param letterSpacing The letter spacing value (e.g. "0%", "2%")
+ * @param fontSize The font size to calculate relative to
+ * @returns The letter spacing in pixels as a number
+ */
+export const letterSpacingToPixels = (
+  letterSpacing: string,
+  fontSize: string | number
+): number => {
+  // If letterSpacing is already a pixel value, convert and return
+  if (letterSpacing.endsWith("px")) {
+    return pxToNumber(letterSpacing);
+  }
+
+  // Handle percentage values
+  if (letterSpacing.endsWith("%")) {
+    const percentage = parseFloat(letterSpacing) / 100;
+    const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
+    return size * percentage;
+  }
+
+  // Default to 0 if format is not recognized
+  return 0;
+};

package/src/styles/tokens/utils/utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Convert rem values to numbers
+ * @param remValue The rem value to convert (e.g. "1.5rem")
+ * @returns The converted number value
+ */
+export 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
+ * @param pxValue The px value to convert (e.g. "24px")
+ * @returns The converted number value
+ */
+export const pxToNumber = (pxValue: string): number => {
+  if (!pxValue || typeof pxValue !== 'string') return 0;
+  return parseFloat(pxValue.replace('px', ''));
+};

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import { Theme, defaultTheme } from "./index";
+
+interface ThemeContextValue {
+  theme: Theme;
+  updateTheme: (newTheme: Partial<Theme>) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  theme?: Partial<Theme>;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme: customTheme,
+}) => {
+  // Using useMemo instead of useState to prevent unnecessary re-renders
+  const theme = React.useMemo<Theme>(
+    () => ({
+      ...defaultTheme,
+      ...customTheme,
+      colors: { ...defaultTheme.colors, ...customTheme?.colors },
+      spacing: { ...defaultTheme.spacing, ...customTheme?.spacing },
+      borderRadius: {
+        ...defaultTheme.borderRadius,
+        ...customTheme?.borderRadius,
+      },
+      typography: {
+        ...defaultTheme.typography,
+        ...customTheme?.typography,
+        fontSize: {
+          ...defaultTheme.typography.fontSize,
+          ...customTheme?.typography?.fontSize,
+        },
+        fontWeight: {
+          ...defaultTheme.typography.fontWeight,
+          ...customTheme?.typography?.fontWeight,
+        },
+        lineHeight: {
+          ...defaultTheme.typography.lineHeight,
+          ...customTheme?.typography?.lineHeight,
+        },
+      },
+    }),
+    [customTheme]
+  );
+
+  const updateTheme = React.useCallback((newTheme: Partial<Theme>) => {
+    console.log(
+      "Theme update requested, but we are using static theme for now.",
+      newTheme
+    );
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, updateTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};