@sofya-ds/tokens 0.1.0

package/dist/index.js

@@ -0,0 +1,584 @@
+// src/index.ts
+var sofyaTextStyleNames = ["h1", "h2", "h3", "h4", "body", "tiny"];
+var sofyaSurfaceNames = ["card", "panel", "focus"];
+var sharedTypography = {
+  sans: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
+  display: '"Schibsted Grotesk", "Avenir Next", "Segoe UI", sans-serif',
+  mono: '"JetBrains Mono", "SFMono-Regular", monospace'
+};
+var sofyaBrandPalette = {
+  neutrals: {
+    50: "#F2EFF9",
+    100: "#FFFFFF",
+    200: "#F6F5F8",
+    600: "#CCCCCC",
+    700: "#8B8A8C",
+    800: "#202021",
+    900: "#000000"
+  },
+  tags: {
+    navy: "#222B4C",
+    blue: "#1976D2",
+    violet: "#7B5DC1",
+    magenta: "#B55CAF",
+    red: "#C83A32",
+    brick: "#B55C5C",
+    sand: "#B5905C",
+    green: "#1CCC6B"
+  },
+  agent: {
+    pink: "#FFD7F7",
+    sky: "#E7F5FB",
+    lavender: "#F0E8ED",
+    mint: "#E8F5F0",
+    green: "#E2F5E5"
+  },
+  gradients: {
+    brand: {
+      angle: "135deg",
+      from: "#C075BF",
+      via: "#8F74CC",
+      to: "#5B76D9"
+    },
+    ocean: {
+      angle: "90deg",
+      from: "#5BADA8",
+      to: "#396DC9"
+    }
+  }
+};
+var sofyaColorPalette = {
+  neutrals: sofyaBrandPalette.neutrals,
+  tags: sofyaBrandPalette.tags,
+  agentCodes: sofyaBrandPalette.agent,
+  gradients: sofyaBrandPalette.gradients
+};
+function normalizeHex(hex) {
+  const value = hex.replace("#", "").trim();
+  if (value.length === 3) {
+    return value.split("").map((char) => `${char}${char}`).join("");
+  }
+  if (value.length === 6) {
+    return value;
+  }
+  throw new Error(`Unsupported hex color: ${hex}`);
+}
+function hexToHslChannels(hex) {
+  const normalizedHex = normalizeHex(hex);
+  const red = Number.parseInt(normalizedHex.slice(0, 2), 16) / 255;
+  const green = Number.parseInt(normalizedHex.slice(2, 4), 16) / 255;
+  const blue = Number.parseInt(normalizedHex.slice(4, 6), 16) / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  let hue = 0;
+  if (delta !== 0) {
+    if (max === red) {
+      hue = (green - blue) / delta % 6;
+    } else if (max === green) {
+      hue = (blue - red) / delta + 2;
+    } else {
+      hue = (red - green) / delta + 4;
+    }
+  }
+  hue = Math.round((hue * 60 + 360) % 360);
+  const lightness = (max + min) / 2;
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+  return `${hue} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
+}
+function gradientToCss(token) {
+  const stops = token.via ? `${token.from} 0%, ${token.via} 50%, ${token.to} 100%` : `${token.from} 0%, ${token.to} 100%`;
+  return `linear-gradient(${token.angle}, ${stops})`;
+}
+function brandPaletteToCssVariables(palette = sofyaBrandPalette) {
+  return {
+    "--sofya-neutral-50": palette.neutrals[50],
+    "--sofya-neutral-100": palette.neutrals[100],
+    "--sofya-neutral-200": palette.neutrals[200],
+    "--sofya-neutral-600": palette.neutrals[600],
+    "--sofya-neutral-700": palette.neutrals[700],
+    "--sofya-neutral-800": palette.neutrals[800],
+    "--sofya-neutral-900": palette.neutrals[900],
+    "--sofya-tag-navy": palette.tags.navy,
+    "--sofya-tag-blue": palette.tags.blue,
+    "--sofya-tag-violet": palette.tags.violet,
+    "--sofya-tag-magenta": palette.tags.magenta,
+    "--sofya-tag-red": palette.tags.red,
+    "--sofya-tag-brick": palette.tags.brick,
+    "--sofya-tag-sand": palette.tags.sand,
+    "--sofya-tag-green": palette.tags.green,
+    "--sofya-agent-pink": palette.agent.pink,
+    "--sofya-agent-sky": palette.agent.sky,
+    "--sofya-agent-lavender": palette.agent.lavender,
+    "--sofya-agent-mint": palette.agent.mint,
+    "--sofya-agent-green": palette.agent.green,
+    "--sofya-gradient-brand-from": palette.gradients.brand.from,
+    "--sofya-gradient-brand-via": palette.gradients.brand.via ?? palette.gradients.brand.to,
+    "--sofya-gradient-brand-to": palette.gradients.brand.to,
+    "--sofya-gradient-brand": gradientToCss(palette.gradients.brand),
+    "--sofya-gradient-ocean-from": palette.gradients.ocean.from,
+    "--sofya-gradient-ocean-to": palette.gradients.ocean.to,
+    "--sofya-gradient-ocean": gradientToCss(palette.gradients.ocean)
+  };
+}
+var sofyaSemanticColorHex = {
+  background: sofyaBrandPalette.neutrals[50],
+  foreground: sofyaBrandPalette.neutrals[800],
+  card: sofyaBrandPalette.neutrals[100],
+  cardForeground: sofyaBrandPalette.neutrals[800],
+  popover: sofyaBrandPalette.neutrals[100],
+  popoverForeground: sofyaBrandPalette.neutrals[800],
+  primary: sofyaBrandPalette.tags.blue,
+  primaryForeground: sofyaBrandPalette.neutrals[100],
+  secondary: sofyaBrandPalette.neutrals[200],
+  secondaryForeground: sofyaBrandPalette.neutrals[800],
+  muted: sofyaBrandPalette.neutrals[200],
+  mutedForeground: sofyaBrandPalette.neutrals[700],
+  accent: sofyaBrandPalette.tags.magenta,
+  accentForeground: sofyaBrandPalette.neutrals[100],
+  destructive: sofyaBrandPalette.tags.red,
+  destructiveForeground: sofyaBrandPalette.neutrals[100],
+  success: sofyaBrandPalette.tags.green,
+  successForeground: sofyaBrandPalette.neutrals[900],
+  warning: sofyaBrandPalette.tags.sand,
+  warningForeground: sofyaBrandPalette.neutrals[900],
+  border: sofyaBrandPalette.neutrals[600],
+  input: sofyaBrandPalette.neutrals[600],
+  ring: sofyaBrandPalette.tags.blue,
+  focus: sofyaBrandPalette.tags.blue,
+  subtle: sofyaBrandPalette.neutrals[600],
+  buttonGradientFrom: sofyaBrandPalette.gradients.brand.from,
+  buttonGradientTo: sofyaBrandPalette.gradients.brand.to
+};
+function createColorScale(hexColors) {
+  return {
+    background: hexToHslChannels(hexColors.background),
+    foreground: hexToHslChannels(hexColors.foreground),
+    card: hexToHslChannels(hexColors.card),
+    cardForeground: hexToHslChannels(hexColors.cardForeground),
+    popover: hexToHslChannels(hexColors.popover),
+    popoverForeground: hexToHslChannels(hexColors.popoverForeground),
+    primary: hexToHslChannels(hexColors.primary),
+    primaryForeground: hexToHslChannels(hexColors.primaryForeground),
+    secondary: hexToHslChannels(hexColors.secondary),
+    secondaryForeground: hexToHslChannels(hexColors.secondaryForeground),
+    muted: hexToHslChannels(hexColors.muted),
+    mutedForeground: hexToHslChannels(hexColors.mutedForeground),
+    accent: hexToHslChannels(hexColors.accent),
+    accentForeground: hexToHslChannels(hexColors.accentForeground),
+    destructive: hexToHslChannels(hexColors.destructive),
+    destructiveForeground: hexToHslChannels(hexColors.destructiveForeground),
+    success: hexToHslChannels(hexColors.success),
+    successForeground: hexToHslChannels(hexColors.successForeground),
+    warning: hexToHslChannels(hexColors.warning),
+    warningForeground: hexToHslChannels(hexColors.warningForeground),
+    border: hexToHslChannels(hexColors.border),
+    input: hexToHslChannels(hexColors.input),
+    ring: hexToHslChannels(hexColors.ring),
+    focus: hexToHslChannels(hexColors.focus),
+    subtle: hexToHslChannels(hexColors.subtle),
+    buttonGradientFrom: hexToHslChannels(hexColors.buttonGradientFrom),
+    buttonGradientTo: hexToHslChannels(hexColors.buttonGradientTo)
+  };
+}
+function createFocusShadow(color) {
+  return `0 0 0 1px hsl(${color} / 0.42), 0 12px 28px -16px hsl(${color} / 0.28), 0 0 18px 0 hsl(${color} / 0.24)`;
+}
+function createTextStyleScale(typography) {
+  return {
+    h1: {
+      fontFamily: typography.display,
+      fontSize: "60px",
+      fontWeight: "500",
+      lineHeight: "1",
+      letterSpacing: "0"
+    },
+    h2: {
+      fontFamily: typography.display,
+      fontSize: "30px",
+      fontWeight: "500",
+      lineHeight: "1",
+      letterSpacing: "0"
+    },
+    h3: {
+      fontFamily: typography.display,
+      fontSize: "24px",
+      fontWeight: "600",
+      lineHeight: "30px",
+      letterSpacing: "0"
+    },
+    h4: {
+      fontFamily: typography.display,
+      fontSize: "16px",
+      fontWeight: "500",
+      lineHeight: "24px",
+      letterSpacing: "0"
+    },
+    body: {
+      fontFamily: typography.sans,
+      fontSize: "14px",
+      fontWeight: "400",
+      lineHeight: "26px",
+      letterSpacing: "0"
+    },
+    tiny: {
+      fontFamily: typography.sans,
+      fontSize: "12px",
+      fontWeight: "400",
+      lineHeight: "1",
+      letterSpacing: "0"
+    }
+  };
+}
+function createSurfaceScale(colors, radii, shadows) {
+  return {
+    card: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.xl,
+      shadow: "none"
+    },
+    panel: {
+      background: colors.card,
+      borderColor: colors.subtle,
+      borderWidth: "1px",
+      radius: radii.sm,
+      shadow: "none"
+    },
+    focus: {
+      background: colors.card,
+      borderColor: colors.focus,
+      borderWidth: "1px",
+      radius: radii.sm,
+      shadow: shadows.focus
+    }
+  };
+}
+function mergeTextStyleScale(baseScale, overrides) {
+  return Object.fromEntries(
+    sofyaTextStyleNames.map((name) => [
+      name,
+      {
+        ...baseScale[name],
+        ...overrides?.[name]
+      }
+    ])
+  );
+}
+function mergeSurfaceScale(baseScale, overrides) {
+  return Object.fromEntries(
+    sofyaSurfaceNames.map((name) => [
+      name,
+      {
+        ...baseScale[name],
+        ...overrides?.[name]
+      }
+    ])
+  );
+}
+var sofyaColors = createColorScale(sofyaSemanticColorHex);
+var sofyaRadii = {
+  sm: "0.5rem",
+  md: "0.8rem",
+  lg: "1.15rem",
+  xl: "2rem",
+  full: "9999px"
+};
+var sofyaShadows = {
+  sm: `0 10px 30px -18px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.18)`,
+  md: `0 18px 56px -26px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.38)`,
+  lg: `0 24px 80px -38px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.3)`,
+  xl: `0 32px 100px -48px hsl(${hexToHslChannels(sofyaBrandPalette.tags.violet)} / 0.36)`,
+  focus: createFocusShadow(sofyaColors.focus)
+};
+var oceanColors = {
+  background: "204 60% 97%",
+  foreground: "215 45% 12%",
+  card: "0 0% 100%",
+  cardForeground: "215 45% 12%",
+  popover: "0 0% 100%",
+  popoverForeground: "215 45% 12%",
+  primary: "212 89% 53%",
+  primaryForeground: "210 40% 98%",
+  secondary: "197 43% 89%",
+  secondaryForeground: "216 41% 16%",
+  muted: "196 38% 92%",
+  mutedForeground: "215 18% 40%",
+  accent: "183 78% 42%",
+  accentForeground: "187 100% 96%",
+  destructive: "0 72% 52%",
+  destructiveForeground: "0 0% 98%",
+  success: "160 84% 31%",
+  successForeground: "0 0% 98%",
+  warning: "40 94% 54%",
+  warningForeground: "24 10% 10%",
+  border: "200 35% 84%",
+  input: "200 35% 84%",
+  ring: "212 89% 53%",
+  focus: "212 89% 53%",
+  subtle: "200 35% 84%",
+  buttonGradientFrom: "212 89% 53%",
+  buttonGradientTo: "183 78% 42%"
+};
+var oceanRadii = {
+  sm: "0.55rem",
+  md: "0.9rem",
+  lg: "1.2rem",
+  xl: "1.6rem",
+  full: "9999px"
+};
+var oceanShadows = {
+  sm: "0 12px 32px -18px hsl(212 89% 53% / 0.28)",
+  md: "0 22px 62px -26px hsl(212 89% 53% / 0.42)",
+  lg: "0 28px 86px -36px hsl(212 89% 53% / 0.4)",
+  xl: "0 34px 110px -44px hsl(212 89% 53% / 0.48)",
+  focus: createFocusShadow(oceanColors.focus)
+};
+var midnightColors = {
+  background: "223 47% 9%",
+  foreground: "210 40% 98%",
+  card: "224 43% 12%",
+  cardForeground: "210 40% 98%",
+  popover: "224 43% 12%",
+  popoverForeground: "210 40% 98%",
+  primary: "191 92% 49%",
+  primaryForeground: "223 47% 9%",
+  secondary: "217 33% 19%",
+  secondaryForeground: "210 40% 98%",
+  muted: "217 33% 16%",
+  mutedForeground: "215 18% 73%",
+  accent: "171 72% 43%",
+  accentForeground: "176 100% 97%",
+  destructive: "0 78% 63%",
+  destructiveForeground: "0 0% 98%",
+  success: "155 74% 44%",
+  successForeground: "223 47% 9%",
+  warning: "38 92% 58%",
+  warningForeground: "24 10% 10%",
+  border: "217 33% 22%",
+  input: "217 33% 22%",
+  ring: "191 92% 49%",
+  focus: "191 92% 49%",
+  subtle: "217 33% 22%",
+  buttonGradientFrom: "191 92% 49%",
+  buttonGradientTo: "171 72% 43%"
+};
+var midnightRadii = {
+  sm: "0.5rem",
+  md: "0.85rem",
+  lg: "1.2rem",
+  xl: "1.75rem",
+  full: "9999px"
+};
+var midnightShadows = {
+  sm: "0 18px 38px -24px hsl(191 92% 49% / 0.3)",
+  md: "0 26px 70px -28px hsl(191 92% 49% / 0.42)",
+  lg: "0 32px 90px -40px hsl(191 92% 49% / 0.42)",
+  xl: "0 40px 120px -48px hsl(191 92% 49% / 0.5)",
+  focus: createFocusShadow(midnightColors.focus)
+};
+var sofyaTheme = {
+  name: "sofya",
+  colors: sofyaColors,
+  radii: sofyaRadii,
+  shadows: sofyaShadows,
+  typography: sharedTypography,
+  textStyles: createTextStyleScale(sharedTypography),
+  surfaces: createSurfaceScale(sofyaColors, sofyaRadii, sofyaShadows)
+};
+var oceanTheme = {
+  name: "ocean",
+  colors: oceanColors,
+  radii: oceanRadii,
+  shadows: oceanShadows,
+  typography: sharedTypography,
+  textStyles: createTextStyleScale(sharedTypography),
+  surfaces: createSurfaceScale(oceanColors, oceanRadii, oceanShadows)
+};
+var midnightTheme = {
+  name: "midnight",
+  colors: midnightColors,
+  radii: midnightRadii,
+  shadows: midnightShadows,
+  typography: sharedTypography,
+  textStyles: createTextStyleScale(sharedTypography),
+  surfaces: createSurfaceScale(midnightColors, midnightRadii, midnightShadows)
+};
+var themePresets = {
+  sofya: sofyaTheme,
+  ocean: oceanTheme,
+  midnight: midnightTheme
+};
+var themePresetNames = Object.keys(themePresets);
+var defaultTheme = themePresets.sofya;
+function resolveTextStyle(name, theme = defaultTheme) {
+  return { ...theme.textStyles[name] };
+}
+function resolveSurfaceToken(name, theme = defaultTheme) {
+  return { ...theme.surfaces[name] };
+}
+function mergeTheme(baseTheme, overrides) {
+  if (!overrides) {
+    return {
+      ...baseTheme,
+      colors: { ...baseTheme.colors },
+      radii: { ...baseTheme.radii },
+      shadows: { ...baseTheme.shadows },
+      typography: { ...baseTheme.typography },
+      textStyles: mergeTextStyleScale(baseTheme.textStyles),
+      surfaces: mergeSurfaceScale(baseTheme.surfaces)
+    };
+  }
+  const colors = {
+    ...baseTheme.colors,
+    ...overrides.colors
+  };
+  const radii = {
+    ...baseTheme.radii,
+    ...overrides.radii
+  };
+  const shadows = {
+    ...baseTheme.shadows,
+    ...overrides.shadows,
+    focus: overrides.shadows?.focus ?? createFocusShadow(colors.focus)
+  };
+  const typography = {
+    ...baseTheme.typography,
+    ...overrides.typography
+  };
+  const textStyles = mergeTextStyleScale(createTextStyleScale(typography), overrides.textStyles);
+  const surfaces = mergeSurfaceScale(createSurfaceScale(colors, radii, shadows), overrides.surfaces);
+  return {
+    name: overrides.name ?? baseTheme.name,
+    colors,
+    radii,
+    shadows,
+    typography,
+    textStyles,
+    surfaces
+  };
+}
+function resolveTheme(preset = defaultTheme, overrides) {
+  const baseTheme = typeof preset === "string" ? themePresets[preset] : preset;
+  return mergeTheme(baseTheme, overrides);
+}
+function themeToCssVariables(theme) {
+  const textStyles = Object.fromEntries(
+    sofyaTextStyleNames.map((name) => [name, resolveTextStyle(name, theme)])
+  );
+  const surfaces = Object.fromEntries(
+    sofyaSurfaceNames.map((name) => [name, resolveSurfaceToken(name, theme)])
+  );
+  return {
+    ...brandPaletteToCssVariables(),
+    "--sofya-background": theme.colors.background,
+    "--sofya-foreground": theme.colors.foreground,
+    "--sofya-card": theme.colors.card,
+    "--sofya-card-foreground": theme.colors.cardForeground,
+    "--sofya-popover": theme.colors.popover,
+    "--sofya-popover-foreground": theme.colors.popoverForeground,
+    "--sofya-primary": theme.colors.primary,
+    "--sofya-primary-foreground": theme.colors.primaryForeground,
+    "--sofya-secondary": theme.colors.secondary,
+    "--sofya-secondary-foreground": theme.colors.secondaryForeground,
+    "--sofya-muted": theme.colors.muted,
+    "--sofya-muted-foreground": theme.colors.mutedForeground,
+    "--sofya-accent": theme.colors.accent,
+    "--sofya-accent-foreground": theme.colors.accentForeground,
+    "--sofya-destructive": theme.colors.destructive,
+    "--sofya-destructive-foreground": theme.colors.destructiveForeground,
+    "--sofya-success": theme.colors.success,
+    "--sofya-success-foreground": theme.colors.successForeground,
+    "--sofya-warning": theme.colors.warning,
+    "--sofya-warning-foreground": theme.colors.warningForeground,
+    "--sofya-border": theme.colors.border,
+    "--sofya-input": theme.colors.input,
+    "--sofya-ring": theme.colors.ring,
+    "--sofya-focus": theme.colors.focus,
+    "--sofya-subtle": theme.colors.subtle,
+    "--sofya-surface-default": theme.colors.card,
+    "--sofya-button-gradient-from": theme.colors.buttonGradientFrom,
+    "--sofya-button-gradient-to": theme.colors.buttonGradientTo,
+    "--sofya-radius-sm": theme.radii.sm,
+    "--sofya-radius-md": theme.radii.md,
+    "--sofya-radius-lg": theme.radii.lg,
+    "--sofya-radius-xl": theme.radii.xl,
+    "--sofya-radius-full": theme.radii.full,
+    "--sofya-shadow-sm": theme.shadows.sm,
+    "--sofya-shadow-md": theme.shadows.md,
+    "--sofya-shadow-lg": theme.shadows.lg,
+    "--sofya-shadow-xl": theme.shadows.xl,
+    "--sofya-shadow-focus": theme.shadows.focus,
+    "--sofya-font-sans": theme.typography.sans,
+    "--sofya-font-display": theme.typography.display,
+    "--sofya-font-mono": theme.typography.mono,
+    "--sofya-text-h1-font-family": textStyles.h1.fontFamily,
+    "--sofya-text-h1-font-size": textStyles.h1.fontSize,
+    "--sofya-text-h1-font-weight": textStyles.h1.fontWeight,
+    "--sofya-text-h1-line-height": textStyles.h1.lineHeight,
+    "--sofya-text-h1-letter-spacing": textStyles.h1.letterSpacing,
+    "--sofya-text-h2-font-family": textStyles.h2.fontFamily,
+    "--sofya-text-h2-font-size": textStyles.h2.fontSize,
+    "--sofya-text-h2-font-weight": textStyles.h2.fontWeight,
+    "--sofya-text-h2-line-height": textStyles.h2.lineHeight,
+    "--sofya-text-h2-letter-spacing": textStyles.h2.letterSpacing,
+    "--sofya-text-h3-font-family": textStyles.h3.fontFamily,
+    "--sofya-text-h3-font-size": textStyles.h3.fontSize,
+    "--sofya-text-h3-font-weight": textStyles.h3.fontWeight,
+    "--sofya-text-h3-line-height": textStyles.h3.lineHeight,
+    "--sofya-text-h3-letter-spacing": textStyles.h3.letterSpacing,
+    "--sofya-text-h4-font-family": textStyles.h4.fontFamily,
+    "--sofya-text-h4-font-size": textStyles.h4.fontSize,
+    "--sofya-text-h4-font-weight": textStyles.h4.fontWeight,
+    "--sofya-text-h4-line-height": textStyles.h4.lineHeight,
+    "--sofya-text-h4-letter-spacing": textStyles.h4.letterSpacing,
+    "--sofya-text-body-font-family": textStyles.body.fontFamily,
+    "--sofya-text-body-font-size": textStyles.body.fontSize,
+    "--sofya-text-body-font-weight": textStyles.body.fontWeight,
+    "--sofya-text-body-line-height": textStyles.body.lineHeight,
+    "--sofya-text-body-letter-spacing": textStyles.body.letterSpacing,
+    "--sofya-text-tiny-font-family": textStyles.tiny.fontFamily,
+    "--sofya-text-tiny-font-size": textStyles.tiny.fontSize,
+    "--sofya-text-tiny-font-weight": textStyles.tiny.fontWeight,
+    "--sofya-text-tiny-line-height": textStyles.tiny.lineHeight,
+    "--sofya-text-tiny-letter-spacing": textStyles.tiny.letterSpacing,
+    "--sofya-surface-card-background": surfaces.card.background,
+    "--sofya-surface-card-border-color": surfaces.card.borderColor,
+    "--sofya-surface-card-border-width": surfaces.card.borderWidth,
+    "--sofya-surface-card-radius": surfaces.card.radius,
+    "--sofya-surface-card-shadow": surfaces.card.shadow,
+    "--sofya-surface-panel-background": surfaces.panel.background,
+    "--sofya-surface-panel-border-color": surfaces.panel.borderColor,
+    "--sofya-surface-panel-border-width": surfaces.panel.borderWidth,
+    "--sofya-surface-panel-radius": surfaces.panel.radius,
+    "--sofya-surface-panel-shadow": surfaces.panel.shadow,
+    "--sofya-surface-focus-background": surfaces.focus.background,
+    "--sofya-surface-focus-border-color": surfaces.focus.borderColor,
+    "--sofya-surface-focus-border-width": surfaces.focus.borderWidth,
+    "--sofya-surface-focus-radius": surfaces.focus.radius,
+    "--sofya-surface-focus-shadow": surfaces.focus.shadow
+  };
+}
+function createWhitelabelTheme(overrides, preset = defaultTheme) {
+  return resolveTheme(preset, overrides);
+}
+export {
+  brandPaletteToCssVariables,
+  createWhitelabelTheme,
+  defaultTheme,
+  gradientToCss,
+  hexToHslChannels,
+  mergeTheme,
+  resolveSurfaceToken,
+  resolveTextStyle,
+  resolveTheme,
+  sofyaBrandPalette,
+  sofyaColorPalette,
+  sofyaSemanticColorHex,
+  sofyaSurfaceNames,
+  sofyaTextStyleNames,
+  themePresetNames,
+  themePresets,
+  themeToCssVariables
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@sofya-ds/tokens",
+  "version": "0.1.0",
+  "description": "Official Sofya design tokens, theme presets and semantic color helpers.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "sofya",
+    "design-system",
+    "tokens",
+    "theme"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://dev.azure.com/sofya-ai/sofya.med/_git/sofya.design.system"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}