// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file text.stylex.ts
 * @input Uses StyleX, theme tokens
 * @output Exports StyleX styles for Text and Heading props
 * @position Styles module; consumed by Text.tsx, Heading.tsx
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Text/Text.doc.mjs
 */

import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, fontWeightVars, textSizeVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";

// =============================================================================
// Color Styles
// =============================================================================

export const colorStyles = {
  primary: {
    kMwMTN: "x1tgivj0",
    $$css: true as const
  },
  secondary: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  disabled: {
    kMwMTN: "xnbbluu",
    $$css: true as const
  },
  placeholder: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  accent: {
    kMwMTN: "xjse4m1",
    $$css: true as const
  },
  inherit: {
    kMwMTN: "x1heor9g",
    $$css: true as const
  }
};

// =============================================================================
// Weight Styles
// =============================================================================

export const weightStyles = {
  normal: {
    k63SB2: "x1sodnla",
    $$css: true as const
  },
  medium: {
    k63SB2: "x1e4wzip",
    $$css: true as const
  },
  semibold: {
    k63SB2: "x2mo6ok",
    $$css: true as const
  },
  bold: {
    k63SB2: "x1lvx875",
    $$css: true as const
  }
};

// =============================================================================
// Default Weight by Type (matches theme type-scale tokens)
// =============================================================================

export const defaultWeightByTypeStyles = {
  body: {
    k63SB2: "xxovm9e",
    $$css: true as const
  },
  large: {
    k63SB2: "x149oux8",
    $$css: true as const
  },
  label: {
    k63SB2: "xmhvcl5",
    $$css: true as const
  },
  code: {
    k63SB2: "xx3eeay",
    $$css: true as const
  },
  supporting: {
    k63SB2: "xv8on6e",
    $$css: true as const
  },
  "display-1": {
    k63SB2: "x1txul5o",
    $$css: true as const
  },
  "display-2": {
    k63SB2: "x1y36c3f",
    $$css: true as const
  },
  "display-3": {
    k63SB2: "x1on40hk",
    $$css: true as const
  },
  inherit: {
    k63SB2: "x1pd3egz",
    $$css: true as const
  }
};

// =============================================================================
// Baseline Size/Leading by Type (from type-scale tokens)
//
// These ensure Text renders with correct sizing even without a theme.
// Theme component overrides (`.astryx-text[data-type="body"]`, etc.) win when
// because they have higher specificity via @scope.
// =============================================================================

export const sizeByTypeStyles = {
  body: {
    kGuDYH: "xjm74w1",
    kLWn49: "xw6l6zx",
    $$css: true as const
  },
  large: {
    kGuDYH: "x18juvz8",
    kLWn49: "xf74fhv",
    $$css: true as const
  },
  label: {
    kGuDYH: "xcr08ib",
    kLWn49: "x1kq96og",
    $$css: true as const
  },
  code: {
    kGuDYH: "xp03k98",
    kLWn49: "x17iicif",
    kMv6JI: "x9m5x89",
    $$css: true as const
  },
  supporting: {
    kGuDYH: "x141an7d",
    kLWn49: "x1ltkj2j",
    $$css: true as const
  },
  "display-1": {
    kGuDYH: "xsub3ws",
    kLWn49: "x112ttwr",
    $$css: true as const
  },
  "display-2": {
    kGuDYH: "x1yego12",
    kLWn49: "xh0iwvy",
    $$css: true as const
  },
  "display-3": {
    kGuDYH: "xlgnzhf",
    kLWn49: "x1ujwuaq",
    $$css: true as const
  },
  inherit: {
    kGuDYH: "x1qlqyl8",
    kLWn49: "x15bjb6t",
    $$css: true as const
  }
};

// =============================================================================
// Explicit Size Override
// =============================================================================

export const sizeStyles = {
  "4xs": {
    kGuDYH: "xxc45ev",
    $$css: true as const
  },
  "3xs": {
    kGuDYH: "x10p7juq",
    $$css: true as const
  },
  "2xs": {
    kGuDYH: "x16a80zy",
    $$css: true as const
  },
  xsm: {
    kGuDYH: "x51wmvv",
    $$css: true as const
  },
  sm: {
    kGuDYH: "x1eqnyfr",
    $$css: true as const
  },
  base: {
    kGuDYH: "x1j29vfg",
    $$css: true as const
  },
  lg: {
    kGuDYH: "xc7cgfe",
    $$css: true as const
  },
  xl: {
    kGuDYH: "x1wqms48",
    $$css: true as const
  },
  "2xl": {
    kGuDYH: "xhs0kqb",
    $$css: true as const
  },
  "3xl": {
    kGuDYH: "x10srzze",
    $$css: true as const
  },
  "4xl": {
    kGuDYH: "xqcvi3d",
    $$css: true as const
  }
};

// =============================================================================
// Baseline Size/Leading by Heading Level (from type-scale tokens)
//
// Same rationale as sizeByTypeStyles — ensures Heading renders
// with correct sizing even without a theme.
// =============================================================================

export const sizeByLevelStyles = {
  "1": {
    kGuDYH: "xcg7oai",
    kLWn49: "xfmsba7",
    k63SB2: "x1v68xuy",
    $$css: true as const
  },
  "2": {
    kGuDYH: "x1xvnhcw",
    kLWn49: "x1cpk1wn",
    k63SB2: "x12yy4cs",
    $$css: true as const
  },
  "3": {
    kGuDYH: "xii13ha",
    kLWn49: "xwjzt0u",
    k63SB2: "x1jcxfy8",
    $$css: true as const
  },
  "4": {
    kGuDYH: "x8tkxat",
    kLWn49: "xqerer",
    k63SB2: "x2hcmsi",
    $$css: true as const
  },
  "5": {
    kGuDYH: "xsgqta0",
    kLWn49: "xo3gurs",
    k63SB2: "xno150v",
    $$css: true as const
  },
  "6": {
    kGuDYH: "xw5ohdf",
    kLWn49: "xeixjfn",
    k63SB2: "x1pw4frv",
    $$css: true as const
  }
};

// =============================================================================
// Display Styles
// =============================================================================

export const displayStyles = {
  inline: {
    k1xSpc: "xt0psk2",
    $$css: true as const
  },
  block: {
    k1xSpc: "x1lliihq",
    $$css: true as const
  }
};

// =============================================================================
// Truncation Styles
// =============================================================================

export const truncationStyles = {
  singleLine: {
    kVQacm: "xb3r6kr",
    kg5iWk: "xlyipyv",
    khDVqt: "xuxw1ft",
    k1xSpc: "x1lliihq",
    $$css: true as const
  },
  multiLine: {
    kVQacm: "xb3r6kr",
    k1xSpc: "x104kibb",
    kgKLqz: "x1ua5tub",
    $$css: true as const
  }
};

// =============================================================================
// Word Break Styles
// =============================================================================

export const wordBreakStyles = {
  "break-word": {
    kTgw9: "x1lldw8n",
    kHjlTd: "x1mzt3pk",
    $$css: true as const
  },
  "break-all": {
    kTgw9: "x1yn0g08",
    $$css: true as const
  }
};

// =============================================================================
// Text Wrap Styles
// =============================================================================

export const textWrapStyles = {
  wrap: {
    kN2L0X: "xk4td0m",
    $$css: true as const
  },
  nowrap: {
    kN2L0X: "xebhuq6",
    $$css: true as const
  },
  balance: {
    kN2L0X: "x1w2vvpw",
    $$css: true as const
  },
  pretty: {
    kN2L0X: "x1fzhlzt",
    $$css: true as const
  }
};

// =============================================================================
// Capsize Styles (Text Box Trim)
// =============================================================================

export const capsizeStyles = {
  enabled: {
    kxwWH2: "x1b2iylo",
    kzeHkT: "xwgcxoh",
    k1xSpc: "x1lliihq",
    $$css: true as const
  }
};

// =============================================================================
// Decoration Styles
// =============================================================================

export const decorationStyles = {
  strikethrough: {
    kybGjl: "xmqliwb",
    $$css: true as const
  }
};

// =============================================================================
// Tabular Numbers Style
// =============================================================================

export const tabularNumbersStyle = {
  enabled: {
    kcqcaj: "xss6m8b",
    $$css: true as const
  }
};

// =============================================================================
// Justify (Text Alignment) Styles
// =============================================================================

export const justifyStyles = {
  start: {
    k9WMMc: "x1yc453h",
    $$css: true as const
  },
  center: {
    k9WMMc: "x2b8uid",
    $$css: true as const
  },
  end: {
    k9WMMc: "xp4054r",
    $$css: true as const
  }
};

// =============================================================================
// Truncation Tooltip Content Style
// =============================================================================

export const truncationTooltipStyles = {
  content: {
    ks0D6T: "xw5ewwj",
    kTgw9: "x13faqbe",
    $$css: true as const
  }
};