@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/src/tokens/consts/fontDeclarationsMap.ts

@@ -0,0 +1,509 @@
+import type { FontID, FontType } from '../types';
+
+const UDS_FONTS_CDN_PREFIX = 'https://s.yimg.com/bw/fonts';
+
+const sansFallbacks = ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'];
+const serifFallbacks = ['Georgia', 'Times', 'Times New Roman', 'serif'];
+const monoFallbacks = [
+  'ui-monospace',
+  'SFMono-Regular',
+  'Menlo',
+  'Monaco',
+  'Consolas',
+  'Liberation Mono',
+  'Courier New',
+  'monospace',
+];
+
+export const FONT_DECLARATIONS_MAP = {
+  'centra-no2': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Centra No2',
+    isVariableFont: false,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Hairline', value: 50 },
+      { label: 'Thin', value: 100 },
+      { label: 'Light', value: 300 },
+      { label: 'Book', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Bold', value: 700 },
+      { label: 'ExtraBold', value: 800 },
+      { label: 'Black', value: 900 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        fontStyle: 'normal',
+        fontWeight: '50',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-hairline.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '50',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-hairline-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '100',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-thin.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '100',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-thin-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '300',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-light.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '300',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-light-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-book.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-book-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '500',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-medium.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '500',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-medium-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-bold.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-bold-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '800',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-extrabold.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '800',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-extrabold-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '900',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-black.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '900',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/centra-no2-black-italic.woff2') format('woff2')`,
+      },
+    ],
+  },
+  inter: {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Inter',
+    isVariableFont: true,
+    fontSlants: [
+      { label: 'Italic', value: -10 },
+      { label: 'None', value: 0 },
+    ],
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Thin', value: 100 },
+      { label: 'Extra Light', value: 200 },
+      { label: 'Light', value: 300 },
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Semi Bold', value: 600 },
+      { label: 'Bold', value: 700 },
+      { label: 'Extra Bold', value: 800 },
+      { label: 'Black', value: 900 },
+    ],
+    defaults: {
+      fontSlant: 0,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/inter-vf.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'roboto-mono': {
+    fallback: monoFallbacks,
+    type: 'mono',
+    fontFamily: 'Roboto Mono',
+    isVariableFont: false,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Thin', value: 100 },
+      { label: 'Light', value: 300 },
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Bold', value: 700 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        fontStyle: 'normal',
+        fontWeight: '100',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-100.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '100',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-100-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '300',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-300.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '300',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-300-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-400.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-400-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '500',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-500.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '500',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-500-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-700.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/roboto-mono-700-italic.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'yahoo-sans': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Yahoo Sans',
+    isVariableFont: true,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'ExtraLight', value: 200 },
+      { label: 'Light', value: 300 },
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Semibold', value: 585 },
+      { label: 'Bold', value: 700 },
+      { label: 'ExtraBold', value: 810 },
+      { label: 'Black', value: 900 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-sans-vf.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'yahoo-sans-cr4': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Yahoo CR4 BETA VF',
+
+    isVariableFont: true,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      /**
+       * brand guide https://www.figma.com/design/3gDo09eKkxvq6qgHw9Epa2/Product-Visual-Guidance?node-id=41-6148&p=f&t=8NHi3cv3QtiieZNv-0
+       * says Regular should be 450, but variable font has regular at 400
+       */
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Bold', value: 700 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 450,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-sans-cr4-vf.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'yahoo-product-sans': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Yahoo Product Sans VF',
+    isVariableFont: true,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      /**
+       * brand guide https://www.figma.com/design/3gDo09eKkxvq6qgHw9Epa2/Product-Visual-Guidance?node-id=41-6148&p=f&t=8NHi3cv3QtiieZNv-0
+       * says Regular should be 450, but variable font has regular at 400
+       */
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Bold', value: 700 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 450,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-product-sans-vf.woff2') format('woff2-variations')`,
+      },
+    ],
+  },
+  'yahoo-product-sans-extended': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'YahooPd_Eval202412',
+    isVariableFont: true,
+    fontSlants: [
+      { label: 'Italic', value: 9 },
+      { label: 'None', value: 0 },
+    ],
+    fontWidths: [
+      { label: 'Cond', value: 50 },
+      { label: 'Normal', value: 75 },
+      { label: 'Ext', value: 100 },
+    ],
+    fontWeights: [
+      { label: 'Light', value: 300 },
+      /**
+       * brand guide https://www.figma.com/design/3gDo09eKkxvq6qgHw9Epa2/Product-Visual-Guidance?node-id=41-6148&p=f&t=8NHi3cv3QtiieZNv-0
+       * says Regular should be 450, but variable font has regular at 400.
+       * Going to use value from brand guide of 450 vs font file value of 400.
+       */
+      { label: 'Regular', value: 450 },
+      { label: 'Medium', value: 500 },
+      /**
+       * Brand guide https://www.figma.com/design/3gDo09eKkxvq6qgHw9Epa2/Product-Visual-Guidance?node-id=41-6148&p=f&t=8NHi3cv3QtiieZNv-0
+       * says 600 should be labeled as Emphasized, but variable font has 600 labeled as Semibold.
+       * Going to use naming from brand guide of Emphasized vs font file name of Semibold.
+       */
+      { label: 'Semibold', value: 600 },
+      { label: 'Bold', value: 700 },
+      { label: 'Black', value: 850 },
+    ],
+    defaults: {
+      fontSlant: 0,
+      fontWidth: 75,
+      fontWeight: 450,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/YahooPd_Eval202412-v1.1.0.woff2') format("woff2 supports variations"), url('${UDS_FONTS_CDN_PREFIX}/YahooPd_Eval202412-v1.1.0.woff2') format('woff2-variations')`,
+      },
+    ],
+  },
+  'yahoo-sans-condensed': {
+    fallback: sansFallbacks,
+    type: 'sans',
+    fontFamily: 'Yahoo Sans Cond',
+    isVariableFont: true,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Light', value: 300 },
+      { label: 'Regular', value: 400 },
+      { label: 'Medium', value: 500 },
+      { label: 'Bold', value: 718 },
+      { label: 'XBold', value: 800 },
+      { label: 'Black', value: 900 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        /** TODO: We can make performant by only including font weights used for this font in config */
+        fontWeight: '1 1000',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-sans-condensed-vf.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'yahoo-serif-display': {
+    fallback: serifFallbacks,
+    type: 'serif',
+    fontFamily: 'Yahoo Serif Display',
+    isVariableFont: false,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Light', value: 300 },
+      { label: 'Regular', value: 400 },
+      { label: 'Bold', value: 700 },
+      { label: 'Extrabold', value: 800 },
+      { label: 'Black', value: 900 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        fontStyle: 'normal',
+        fontWeight: '300',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-display-light.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-display-regular.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-display-bold.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '800',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-display-extrabold.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '900',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-display-black.woff2') format('woff2')`,
+      },
+    ],
+  },
+  'yahoo-serif-text': {
+    fallback: serifFallbacks,
+    type: 'serif',
+    fontFamily: 'Yahoo Serif Text',
+    isVariableFont: false,
+    fontSlants: undefined,
+    fontWidths: undefined,
+    fontWeights: [
+      { label: 'Regular', value: 400 },
+      { label: 'Bold', value: 700 },
+    ],
+    defaults: {
+      fontSlant: undefined,
+      fontWidth: undefined,
+      fontWeight: 400,
+    },
+    declarations: [
+      {
+        fontStyle: 'normal',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-text-regular.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '400',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-text-italic.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'normal',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-text-bold.woff2') format('woff2')`,
+      },
+      {
+        fontStyle: 'italic',
+        fontWeight: '700',
+        src: `url('${UDS_FONTS_CDN_PREFIX}/yahoo-serif-text-bold-italic.woff2') format('woff2')`,
+      },
+    ],
+  },
+} as const satisfies Record<string, FontDeclarationConfig>;
+
+export type FontAxisConfig = { label: string; value: number };
+
+export type FontDeclarationItemConfig = {
+  /** @default to normal if not provided */
+  fontStyle?: 'normal' | 'italic';
+  fontWeight?: `${number}` | '1 1000';
+  /** @defaults to swap if not provided */
+  fontDisplay?: 'swap';
+  src: `url('${typeof UDS_FONTS_CDN_PREFIX}/${string}.woff2') ${string}`;
+};
+
+export type FontDeclarationConfig = {
+  fallback: string[];
+  type: FontType;
+  isVariableFont: boolean;
+  fontSlants: FontAxisConfig[] | undefined;
+  fontWidths: FontAxisConfig[] | undefined;
+  fontFamily: string;
+  fontWeights: FontAxisConfig[];
+  declarations: FontDeclarationItemConfig[];
+  defaults: {
+    fontSlant: number | undefined;
+    fontWidth: number | undefined;
+    fontWeight: number;
+  };
+};
+
+export type FontDeclarationMap = typeof FONT_DECLARATIONS_MAP;
+
+export type FontWeightForFont<T extends FontID> = FontDeclarationMap[T]['fontWeights'][number];

package/src/tokens/index.ts

@@ -0,0 +1,15 @@
+export * from '../styles/variants';
+/* eslint-disable @typescript-eslint/consistent-type-exports */
+export * from './automation';
+export * from './configs/button';
+export { alwaysPalette } from './configs/palette';
+export * from './configs/shadow';
+export { fontWeightMap } from './configs/typography';
+export * from './consts/cssTokens';
+export * from './consts/defaultModes';
+export * from './consts/fontDeclarationsMap';
+export * from './parseButtonVariants';
+export type * from './types';
+export * from './utils/entries';
+export * from './utils/fromEntries';
+export * from './utils/mapValues';

package/src/tokens/parseButtonVariants.ts

@@ -0,0 +1,59 @@
+import type { ButtonPalette, ButtonVariant, ButtonVariantFlat } from './types';
+
+interface ParseButtonVariantFlatArgs {
+  palette?: ButtonPalette;
+  variant?: ButtonVariant;
+}
+
+function parseButtonVariantFlat({
+  palette = 'accent',
+  variant = 'primary',
+}: ParseButtonVariantFlatArgs): ButtonVariantFlat {
+  if (palette === 'accent') {
+    return variant; // primary, secondary, tertiary
+  }
+
+  if (variant === 'primary') {
+    return palette; // brand, alert, positive, warning
+  }
+
+  return `${palette}-${variant}`; // brand-secondary, alert-tertiary, etc.
+}
+
+interface parseDeprecatedButtonPaletteVariantArgs {
+  flatVariant?: ButtonVariantFlat;
+}
+
+interface DeprecatedButtonVariant {
+  palette: ButtonPalette | undefined;
+  variant: ButtonVariant | undefined;
+}
+
+function parseDeprecatedButtonPaletteVariant({
+  flatVariant,
+}: parseDeprecatedButtonPaletteVariantArgs): DeprecatedButtonVariant {
+  if (!flatVariant) {
+    return { palette: undefined, variant: undefined };
+  }
+
+  const [palette, variant] = flatVariant.split('-') as [
+    ButtonPalette | undefined,
+    ButtonVariant | undefined,
+  ];
+
+  if (!variant) {
+    // If there's no "-", it must be a primary variant or standalone palette
+    if (['primary', 'secondary', 'tertiary'].includes(flatVariant)) {
+      return { palette: 'accent', variant: flatVariant as ButtonVariant };
+    }
+
+    return { palette: flatVariant as Exclude<ButtonPalette, 'accent'>, variant: 'primary' };
+  }
+
+  return {
+    palette: palette as Exclude<ButtonPalette, 'accent'>,
+    variant: variant as Exclude<ButtonVariant, 'primary'>,
+  };
+}
+
+export { parseButtonVariantFlat, parseDeprecatedButtonPaletteVariant };

package/src/tokens/parseTokens.ts

@@ -0,0 +1,122 @@
+import {
+  AVATAR_SIZE_PREFIX,
+  BORDER_RADIUS_PREFIX,
+  BORDER_WIDTH_PREFIX,
+  ICON_SIZE_PREFIX,
+  SPECTRUM_COLOR_PREFIX,
+  UDS_PREFIX,
+} from './consts/cssTokens';
+import type {
+  ColorMode,
+  ColorsConfig,
+  Hue,
+  HueStep,
+  PaletteConfig,
+  PaletteType,
+  ScaleMode,
+  UniversalTokensConfig,
+} from './types';
+import { entries } from './utils/entries';
+import { mapValues } from './utils/mapValues';
+
+function transformColors(colors: ColorsConfig) {
+  const { palette, spectrum } = colors;
+  const rootVars: Record<string, string> = {};
+  const tailwindConfig = {
+    spectrum: {} as Record<Hue, Record<HueStep, string>>,
+    palette: {} as {
+      [key in PaletteType]: Record<keyof PaletteConfig[key], string>;
+    },
+  };
+
+  for (const [hue, hueSteps] of entries(spectrum)) {
+    for (const [hueStep, value] of entries(hueSteps)) {
+      const name = `${hue}-${hueStep}`;
+      const varKey = `--${SPECTRUM_COLOR_PREFIX}-${name}`;
+      if (!tailwindConfig.spectrum[hue]) {
+        tailwindConfig.spectrum[hue] = {} as Record<HueStep, string>;
+      }
+      tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;
+      rootVars[varKey] = value;
+    }
+  }
+
+  entries(palette).forEach(([paletteType, paletteConfig]) => {
+    for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {
+      if (!(paletteType in tailwindConfig.palette)) {
+        // @ts-expect-error we fill this object later
+        tailwindConfig.palette[paletteType] = {};
+      }
+      const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;
+      rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
+      // @ts-expect-error this is fine
+      tailwindConfig.palette[paletteType][paletteKey] = opacity
+        ? `rgb(var(${name}) / ${opacity})`
+        : `rgb(var(${name}))`;
+    }
+  });
+
+  return {
+    _vars: rootVars,
+    _raw: colors,
+    tailwindConfig,
+  };
+}
+
+function transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T) {
+  if (!config) {
+    return {
+      _vars: {} as Record<string, string>,
+      _raw: {} as Record<string, number>,
+      tailwindConfig: {} as Record<string, string>,
+    };
+  }
+  const rootVars: Record<string, string> = {};
+  const tailwindConfig = {} as Record<string, string>;
+  for (const [variant, value] of entries(config)) {
+    const rootVarKey = `--${prefix}-${variant}`;
+    const rootVarValue = `${value}px`;
+    rootVars[rootVarKey] = rootVarValue;
+    tailwindConfig[variant] = `var(${rootVarKey})`;
+  }
+  return {
+    _vars: rootVars,
+    _raw: config,
+    tailwindConfig,
+  };
+}
+
+type WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {
+  colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;
+  scaleMode: Record<
+    ScaleMode,
+    {
+      borderRadius: ReturnType<typeof transformNumericToPx>;
+      borderWidth: ReturnType<typeof transformNumericToPx>;
+      avatarSizes: ReturnType<typeof transformNumericToPx>;
+      iconSizes: ReturnType<typeof transformNumericToPx>;
+    }
+  >;
+};
+
+export function parseTokens(config: UniversalTokensConfig): WebTokens {
+  const { colorMode, scaleMode } = config;
+
+  return {
+    ...config,
+    colorMode: {
+      light: transformColors(colorMode.light),
+      dark: transformColors(colorMode.dark),
+    },
+    scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {
+      return {
+        borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),
+        borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),
+        avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),
+        iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes),
+      };
+    }),
+  };
+}
+
+export { type WebTokens };