@react-spectrum/s2 3.0.0-nightly-5a0b4fabc-240924 → 3.0.0-nightly-a626c2596-240926

package/style/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/style/packages/@react-spectrum/s2/style/types.ts","packages/@react-spectrum/s2/style/packages/@react-spectrum/s2/style/style-macro.ts","packages/@react-spectrum/s2/style/packages/@react-spectrum/s2/style/tokens.ts","packages/@react-spectrum/s2/style/packages/@react-spectrum/s2/style/spectrum-theme.ts","packages/@react-spectrum/s2/style/spectrum-theme.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color, createArbitraryProperty, createColorProperty, createMappedProperty, createRenamedProperty, createTheme} from './style-macro';\nimport {colorScale, colorToken, fontSizeToken, getToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'};\nimport type * as CSS from 'csstype';\n\ninterface MacroContext {\n  addAsset(asset: {type: string, content: string}): void\n}\n\nfunction pxToRem(px: string | number) {\n  if (typeof px === 'string') {\n    px = parseFloat(px);\n  }\n  return px / 16 + 'rem';\n}\n\nconst color = {\n  transparent: 'transparent',\n  black: 'black',\n  white: 'white',\n\n  ...colorScale('gray'),\n  ...colorScale('blue'),\n  ...colorScale('red'),\n  ...colorScale('orange'),\n  ...colorScale('yellow'),\n  ...colorScale('chartreuse'),\n  ...colorScale('celery'),\n  ...colorScale('green'),\n  ...colorScale('seafoam'),\n  ...colorScale('cyan'),\n  ...colorScale('indigo'),\n  ...colorScale('purple'),\n  ...colorScale('fuchsia'),\n  ...colorScale('magenta'),\n  ...colorScale('pink'),\n  ...colorScale('turquoise'),\n  ...colorScale('brown'),\n  ...colorScale('silver'),\n  ...colorScale('cinnamon'),\n\n  ...colorScale('accent-color'),\n  ...colorScale('informative-color'),\n  ...colorScale('negative-color'),\n  ...colorScale('notice-color'),\n  ...colorScale('positive-color'),\n\n  ...simpleColorScale('transparent-white'),\n  ...simpleColorScale('transparent-black'),\n\n  // High contrast mode.\n  Background: 'Background',\n  ButtonBorder: 'ButtonBorder',\n  ButtonFace: 'ButtonFace',\n  ButtonText: 'ButtonText',\n  Field: 'Field',\n  Highlight: 'Highlight',\n  HighlightText: 'HighlightText',\n  GrayText: 'GrayText',\n  Mark: 'Mark',\n  LinkText: 'LinkText'\n};\n\nexport function baseColor(base: keyof typeof color) {\n  let keys = Object.keys(color) as (keyof typeof color)[];\n  let index = keys.indexOf(base);\n  if (index === -1) {\n    throw new Error('Invalid base color ' + base);\n  }\n\n  return {\n    default: base,\n    isHovered: keys[index + 1],\n    isFocusVisible: keys[index + 1],\n    isPressed: keys[index + 1]\n  };\n}\n\nexport function lightDark(light: Color<keyof typeof color>, dark: Color<keyof typeof color>): `[${string}]` {\n  let [lightColorValue, lightOpacity] = light.split('/');\n  let [darkColorValue, darkOpacity] = dark.split('/');\n  let lightColor = color[lightColorValue];\n  let darkColor = color[darkColorValue];\n\n  if (lightOpacity) {\n    lightColor = `rgb(from ${lightColor} r g b / ${lightOpacity}%)`;\n  }\n\n  if (darkOpacity) {\n    darkColor = `rgb(from ${darkColor} r g b / ${darkOpacity}%)`;\n  }\n\n  return `[light-dark(${lightColor}, ${darkColor})]`;\n}\n\nfunction generateSpacing<K extends number[]>(px: K): {[P in K[number]]: string} {\n  let res: any = {};\n  for (let p of px) {\n    res[p] = pxToRem(p);\n  }\n  return res;\n}\n\nconst baseSpacing = generateSpacing([\n  0,\n  2, // spacing-50\n  4, // spacing-75\n  8, // spacing-100\n  12, // spacing-200\n  16, // spacing-300\n  20,\n  24, // spacing-400\n  28,\n  32, // spacing-500\n  36,\n  40, // spacing-600\n  44,\n  48, // spacing-700\n  56,\n  // From here onward the values are mostly spaced by 1rem (16px)\n  64, // spacing-800\n  80, // spacing-900\n  96, // spacing-1000\n  // TODO: should these only be available as sizes rather than spacing?\n  112,\n  128,\n  144,\n  160,\n  176,\n  192,\n  208,\n  224,\n  240,\n  256,\n  288,\n  320,\n  384\n] as const);\n\n// This should match the above, but negative. There's no way to negate a number\n// type in typescript so this has to be done manually for now.\nconst negativeSpacing = generateSpacing([\n  // -2, // spacing-50 !! TODO: should we support this?\n  -4, // spacing-75\n  -8, // spacing-100\n  -12, // spacing-200\n  -16, // spacing-300\n  -20,\n  -24, // spacing-400\n  -28,\n  -32, // spacing-500\n  -36,\n  -40, // spacing-600\n  -44,\n  -48, // spacing-700\n  -56,\n  // From here onward the values are mostly spaced by 1rem (16px)\n  -64, // spacing-800\n  -80, // spacing-900\n  -96, // spacing-1000\n  // TODO: should these only be available as sizes rather than spacing?\n  -112,\n  -128,\n  -144,\n  -160,\n  -176,\n  -192,\n  -208,\n  -224,\n  -240,\n  -256,\n  -288,\n  -320,\n  -384\n] as const);\n\nfunction arbitrary(ctx: MacroContext | void, value: string): `[${string}]` {\n  return ctx ? `[${value}]` : value as any;\n}\n\nexport function fontRelative(this: MacroContext | void, base: number, baseFontSize = 14) {\n  return arbitrary(this, (base / baseFontSize) + 'em');\n}\n\nexport function edgeToText(this: MacroContext | void, height: keyof typeof baseSpacing) {\n  return `calc(${baseSpacing[height]} * 3 / 8)`;\n}\n\nexport function space(this: MacroContext | void, px: number) {\n  return arbitrary(this, pxToRem(px));\n}\n\nconst spacing = {\n  ...baseSpacing,\n\n  // font-size relative values\n  'text-to-control': fontRelative(10),\n  'text-to-visual': {\n    default: fontRelative(6), // -> 5px, 5px, 6px, 7px, 8px\n    touch: fontRelative(8, 17) // -> 6px, 7px, 8px, 9px, 10px, should be 7px, 7px, 8px, 9px, 11px\n  },\n  // height relative values\n  'edge-to-text': 'calc(self(height, self(minHeight)) * 3 / 8)',\n  'pill': 'calc(self(height, self(minHeight)) / 2)'\n};\n\nexport function size(this: MacroContext | void, px: number) {\n  return {default: arbitrary(this, pxToRem(px)), touch: arbitrary(this, pxToRem(px * 1.25))};\n}\n\nconst scaledSpacing: {[key in keyof typeof baseSpacing]: {default: string, touch: string}} =\n  Object.fromEntries(Object.entries(baseSpacing).map(([k, v]) =>\n    [k, {default: v, touch: parseFloat(v) * 1.25 + v.match(/[^0-9.]+/)![0]}])\n  ) as any;\n\nconst sizing = {\n  ...scaledSpacing,\n  auto: 'auto',\n  full: '100%',\n  min: 'min-content',\n  max: 'max-content',\n  fit: 'fit-content',\n\n  control: {\n    default: size(32),\n    size: {\n      XS: size(20),\n      S: size(24),\n      L: size(40),\n      XL: size(48)\n    }\n  },\n  // With browser support for round() we could do this:\n  // 'control-sm': `round(${16 / 14}em, 2px)`\n  'control-sm': {\n    default: size(16),\n    size: {\n      S: size(14),\n      L: size(18),\n      XL: size(20)\n    }\n  }\n};\n\nconst height = {\n  ...sizing,\n  screen: '100vh'\n};\n\nconst width = {\n  ...sizing,\n  screen: '100vw'\n};\n\nconst margin = {\n  ...spacing,\n  ...negativeSpacing,\n  auto: 'auto'\n};\n\nconst inset = {\n  ...baseSpacing,\n  auto: 'auto',\n  full: '100%'\n};\n\nconst translate = {\n  ...baseSpacing,\n  ...negativeSpacing,\n  full: '100%'\n};\n\nconst borderWidth = {\n  0: '0px',\n  1: getToken('border-width-100'),\n  2: getToken('border-width-200'),\n  4: getToken('border-width-400')\n};\n\nconst radius = {\n  none: getToken('corner-radius-none'), // 0px\n  sm: pxToRem(getToken('corner-radius-small-default')), // 4px\n  default: pxToRem(getToken('corner-radius-medium-default')), // 8px\n  lg: pxToRem(getToken('corner-radius-large-default')), // 10px\n  xl: pxToRem(getToken('corner-radius-extra-large-default')), // 16px\n  full: '9999px',\n  pill: 'calc(self(height, self(minHeight, 9999px)) / 2)',\n  control: fontRelative(8), // automatic based on font size (e.g. t-shirt size logarithmic scale)\n  'control-sm': fontRelative(4)\n};\n\ntype GridTrack = 'none' | 'subgrid' | (string & {}) | readonly GridTrackSize[];\ntype GridTrackSize = 'auto' | 'min-content' | 'max-content' | `${number}fr` | `minmax(${string}, ${string})` | keyof typeof baseSpacing | (string & {});\n\nlet gridTrack = (value: GridTrack) => {\n  if (typeof value === 'string') {\n    return value;\n  }\n  return value.map(v => gridTrackSize(v)).join(' ');\n};\n\nlet gridTrackSize = (value: GridTrackSize) => {\n  // @ts-ignore\n  return value in baseSpacing ? baseSpacing[value] : value;\n};\n\nconst transitionProperty = {\n  default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',\n  colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',\n  opacity: 'opacity',\n  shadow: 'box-shadow',\n  transform: 'transform, translate, scale, rotate',\n  all: 'all',\n  none: 'none'\n};\n\n// TODO\nconst timingFunction = {\n  default: 'cubic-bezier(0.45, 0, 0.4, 1)',\n  linear: 'linear',\n  in: 'cubic-bezier(0.5, 0, 1, 1)',\n  out: 'cubic-bezier(0, 0, 0.40, 1)',\n  'in-out': 'cubic-bezier(0.45, 0, 0.4, 1)'\n};\n\n// TODO: do these need tokens or are arbitrary values ok?\nlet durationProperty = createArbitraryProperty((value: number | string, property) => ({[property]: typeof value === 'number' ? value + 'ms' : value}));\n\n// const colorWithAlpha = createColorProperty(color);\n\nconst fontWeightBase = {\n  light: '300',\n  // TODO: spectrum calls this \"regular\" but CSS calls it \"normal\". We also call other properties \"default\". What do we want to match?\n  normal: '400',\n  medium: '500',\n  bold: '700',\n  'extra-bold': '800',\n  black: '900'\n} as const;\n\nconst i18nFonts = {\n  ':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',\n  ':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',\n  ':lang(ja)': \"adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif\",\n  ':lang(ko)': \"adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif\",\n  ':lang(zh)': \"adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif\",\n  // TODO: are these fallbacks supposed to be different than above?\n  ':lang(zh-hant)': \"adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif\",\n  ':lang(zh-Hans, zh-CN, zh-SG)': \"adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif\"\n} as const;\n\nconst fontSize = {\n  // The default font size scale is for use within UI components.\n  'ui-xs': fontSizeToken('font-size-50'),\n  'ui-sm': fontSizeToken('font-size-75'),\n  ui: fontSizeToken('font-size-100'),\n  'ui-lg': fontSizeToken('font-size-200'),\n  'ui-xl': fontSizeToken('font-size-300'),\n  'ui-2xl': fontSizeToken('font-size-400'),\n  'ui-3xl': fontSizeToken('font-size-500'),\n\n  control: {\n    default: fontSizeToken('font-size-100'),\n    size: {\n      XS: fontSizeToken('font-size-50'),\n      S: fontSizeToken('font-size-75'),\n      L: fontSizeToken('font-size-200'),\n      XL: fontSizeToken('font-size-300')\n    }\n  },\n\n  'heading-2xs': fontSizeToken('heading-size-xxs'),\n  'heading-xs': fontSizeToken('heading-size-xs'),\n  'heading-sm': fontSizeToken('heading-size-s'),\n  heading: fontSizeToken('heading-size-m'),\n  'heading-lg': fontSizeToken('heading-size-l'),\n  'heading-xl': fontSizeToken('heading-size-xl'),\n  'heading-2xl': fontSizeToken('heading-size-xxl'),\n  'heading-3xl': fontSizeToken('heading-size-xxxl'),\n\n  'title-xs': fontSizeToken('title-size-xs'),\n  'title-sm': fontSizeToken('title-size-s'),\n  title: fontSizeToken('title-size-m'),\n  'title-lg': fontSizeToken('title-size-l'),\n  'title-xl': fontSizeToken('title-size-xl'),\n  'title-2xl': fontSizeToken('title-size-xxl'),\n  'title-3xl': fontSizeToken('title-size-xxxl'),\n\n  // Body is for large blocks of text, e.g. paragraphs, not in UI components.\n  'body-2xs': fontSizeToken('font-size-50'), // TODO: seems like there is no token for this\n  'body-xs': fontSizeToken('body-size-xs'),\n  'body-sm': fontSizeToken('body-size-s'),\n  body: fontSizeToken('body-size-m'),\n  'body-lg': fontSizeToken('body-size-l'),\n  'body-xl': fontSizeToken('body-size-xl'),\n  'body-2xl': fontSizeToken('body-size-xxl'),\n  'body-3xl': fontSizeToken('body-size-xxxl'),\n\n  'detail-sm': fontSizeToken('detail-size-s'),\n  detail: fontSizeToken('detail-size-m'),\n  'detail-lg': fontSizeToken('detail-size-l'),\n  'detail-xl': fontSizeToken('detail-size-xl'),\n\n  'code-xs': fontSizeToken('code-size-xs'),\n  'code-sm': fontSizeToken('code-size-s'),\n  code: fontSizeToken('code-size-m'),\n  'code-lg': fontSizeToken('code-size-l'),\n  'code-xl': fontSizeToken('code-size-xl')\n} as const;\n\nexport const style = createTheme({\n  properties: {\n    // colors\n    color: createColorProperty({\n      ...color,\n      accent: {\n        default: colorToken('accent-content-color-default'),\n        isHovered: colorToken('accent-content-color-hover'),\n        isFocusVisible: colorToken('accent-content-color-key-focus'),\n        isPressed: colorToken('accent-content-color-down')\n        // isSelected: colorToken('accent-content-color-selected'), // same as pressed\n      },\n      neutral: {\n        default: colorToken('neutral-content-color-default'),\n        isHovered: colorToken('neutral-content-color-hover'),\n        isFocusVisible: colorToken('neutral-content-color-key-focus'),\n        isPressed: colorToken('neutral-content-color-down')\n        // isSelected: colorToken('neutral-subdued-content-color-selected'),\n      },\n      'neutral-subdued': {\n        default: colorToken('neutral-subdued-content-color-default'),\n        isHovered: colorToken('neutral-subdued-content-color-hover'),\n        isFocusVisible: colorToken('neutral-subdued-content-color-key-focus'),\n        isPressed: colorToken('neutral-subdued-content-color-down')\n        // isSelected: colorToken('neutral-subdued-content-color-selected'),\n      },\n      negative: {\n        default: colorToken('negative-content-color-default'),\n        isHovered: colorToken('negative-content-color-hover'),\n        isFocusVisible: colorToken('negative-content-color-key-focus'),\n        isPressed: colorToken('negative-content-color-down')\n      },\n      disabled: {\n        default: colorToken('disabled-content-color')\n        // forcedColors: 'GrayText'\n      },\n      heading: colorToken('heading-color'),\n      title: colorToken('title-color'),\n      body: colorToken('body-color'),\n      detail: colorToken('detail-color'),\n      code: colorToken('code-color')\n    }),\n    backgroundColor: createColorProperty({\n      ...color,\n      accent: {\n        default: weirdColorToken('accent-background-color-default'),\n        isHovered: weirdColorToken('accent-background-color-hover'),\n        isFocusVisible: weirdColorToken('accent-background-color-key-focus'),\n        isPressed: weirdColorToken('accent-background-color-down')\n      },\n      neutral: {\n        default: colorToken('neutral-background-color-default'),\n        isHovered: colorToken('neutral-background-color-hover'),\n        isFocusVisible: colorToken('neutral-background-color-key-focus'),\n        isPressed: colorToken('neutral-background-color-down')\n      },\n      'neutral-subdued': {\n        default: weirdColorToken('neutral-subdued-background-color-default'),\n        isHovered: weirdColorToken('neutral-subdued-background-color-hover'),\n        isFocusVisible: weirdColorToken('neutral-subdued-background-color-key-focus'),\n        isPressed: weirdColorToken('neutral-subdued-background-color-down')\n      },\n      'neutral-subtle': colorToken('neutral-subtle-background-color-default'),\n      negative: {\n        default: weirdColorToken('negative-background-color-default'),\n        isHovered: weirdColorToken('negative-background-color-hover'),\n        isFocusVisible: weirdColorToken('negative-background-color-key-focus'),\n        isPressed: weirdColorToken('negative-background-color-down')\n      },\n      'negative-subtle': colorToken('negative-subtle-background-color-default'),\n      informative: {\n        default: weirdColorToken('informative-background-color-default'),\n        isHovered: weirdColorToken('informative-background-color-hover'),\n        isFocusVisible: weirdColorToken('informative-background-color-key-focus'),\n        isPressed: weirdColorToken('informative-background-color-down')\n      },\n      'informative-subtle': colorToken('informative-subtle-background-color-default'),\n      positive: {\n        default: weirdColorToken('positive-background-color-default'),\n        isHovered: weirdColorToken('positive-background-color-hover'),\n        isFocusVisible: weirdColorToken('positive-background-color-key-focus'),\n        isPressed: weirdColorToken('positive-background-color-down')\n      },\n      'positive-subtle': colorToken('positive-subtle-background-color-default'),\n      notice: weirdColorToken('notice-background-color-default'),\n      'notice-subtle': colorToken('notice-subtle-background-color-default'),\n      gray: weirdColorToken('gray-background-color-default'),\n      red: weirdColorToken('red-background-color-default'),\n      orange: weirdColorToken('orange-background-color-default'),\n      yellow: weirdColorToken('yellow-background-color-default'),\n      chartreuse: weirdColorToken('chartreuse-background-color-default'),\n      celery: weirdColorToken('celery-background-color-default'),\n      green: weirdColorToken('green-background-color-default'),\n      seafoam: weirdColorToken('seafoam-background-color-default'),\n      cyan: weirdColorToken('cyan-background-color-default'),\n      blue: weirdColorToken('blue-background-color-default'),\n      indigo: weirdColorToken('indigo-background-color-default'),\n      purple: weirdColorToken('purple-background-color-default'),\n      fuchsia: weirdColorToken('fuchsia-background-color-default'),\n      magenta: weirdColorToken('magenta-background-color-default'),\n      pink: weirdColorToken('pink-background-color-default'),\n      turquoise: weirdColorToken('turquoise-background-color-default'),\n      cinnamon: weirdColorToken('cinnamon-background-color-default'),\n      brown: weirdColorToken('brown-background-color-default'),\n      silver: weirdColorToken('silver-background-color-default'),\n      disabled: colorToken('disabled-background-color'),\n      base: colorToken('background-base-color'),\n      'layer-1': colorToken('background-layer-1-color'),\n      'layer-2': weirdColorToken('background-layer-2-color'),\n      pasteboard: weirdColorToken('background-pasteboard-color'),\n      elevated: weirdColorToken('background-elevated-color')\n    }),\n    borderColor: createColorProperty({\n      ...color,\n      negative: {\n        default: colorToken('negative-border-color-default'),\n        isHovered: colorToken('negative-border-color-hover'),\n        isFocusVisible: colorToken('negative-border-color-key-focus'),\n        isPressed: colorToken('negative-border-color-down')\n      },\n      disabled: colorToken('disabled-border-color')\n        // forcedColors: 'GrayText'\n\n    }),\n    outlineColor: createColorProperty({\n      ...color,\n      'focus-ring': {\n        default: colorToken('focus-indicator-color'),\n        forcedColors: 'Highlight'\n      }\n    }),\n    // textDecorationColor: colorWithAlpha,\n    // accentColor: colorWithAlpha,\n    // caretColor: colorWithAlpha,\n    fill: createColorProperty({\n      none: 'none',\n      currentColor: 'currentColor',\n      accent: weirdColorToken('accent-visual-color'),\n      neutral: weirdColorToken('neutral-visual-color'),\n      negative: weirdColorToken('negative-visual-color'),\n      informative: weirdColorToken('informative-visual-color'),\n      positive: weirdColorToken('positive-visual-color'),\n      notice: weirdColorToken('notice-visual-color'),\n      gray: weirdColorToken('gray-visual-color'),\n      red: weirdColorToken('red-visual-color'),\n      orange: weirdColorToken('orange-visual-color'),\n      yellow: weirdColorToken('yellow-visual-color'),\n      chartreuse: weirdColorToken('chartreuse-visual-color'),\n      celery: weirdColorToken('celery-visual-color'),\n      green: weirdColorToken('green-visual-color'),\n      seafoam: weirdColorToken('seafoam-visual-color'),\n      cyan: weirdColorToken('cyan-visual-color'),\n      blue: weirdColorToken('blue-visual-color'),\n      indigo: weirdColorToken('indigo-visual-color'),\n      purple: weirdColorToken('purple-visual-color'),\n      fuchsia: weirdColorToken('fuchsia-visual-color'),\n      magenta: weirdColorToken('magenta-visual-color'),\n      pink: weirdColorToken('pink-visual-color'),\n      turquoise: weirdColorToken('turquoise-visual-color'),\n      cinnamon: weirdColorToken('cinnamon-visual-color'),\n      brown: weirdColorToken('brown-visual-color'),\n      silver: weirdColorToken('silver-visual-color'),\n      ...color\n    }),\n    stroke: createColorProperty({\n      none: 'none',\n      currentColor: 'currentColor',\n      ...color\n    }),\n\n    // dimensions\n    borderSpacing: baseSpacing, // TODO: separate x and y\n    flexBasis: {\n      auto: 'auto',\n      full: '100%',\n      ...baseSpacing\n    },\n    rowGap: spacing,\n    columnGap: spacing,\n    height,\n    width,\n    containIntrinsicWidth: width,\n    containIntrinsicHeight: height,\n    minHeight: height,\n    maxHeight: {\n      ...height,\n      none: 'none'\n    },\n    minWidth: width,\n    maxWidth: {\n      ...width,\n      none: 'none'\n    },\n    borderStartWidth: createRenamedProperty('borderInlineStartWidth', borderWidth),\n    borderEndWidth: createRenamedProperty('borderInlineEndWidth', borderWidth),\n    borderTopWidth: borderWidth,\n    borderBottomWidth: borderWidth,\n    borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'] as const,\n    strokeWidth: {\n      0: '0',\n      1: '1',\n      2: '2'\n    },\n    marginStart: createRenamedProperty('marginInlineStart', margin),\n    marginEnd: createRenamedProperty('marginInlineEnd', margin),\n    marginTop: margin,\n    marginBottom: margin,\n    paddingStart: createRenamedProperty('paddingInlineStart', spacing),\n    paddingEnd: createRenamedProperty('paddingInlineEnd', spacing),\n    paddingTop: spacing,\n    paddingBottom: spacing,\n    scrollMarginStart: createRenamedProperty('scrollMarginInlineStart', baseSpacing),\n    scrollMarginEnd: createRenamedProperty('scrollMarginInlineEnd', baseSpacing),\n    scrollMarginTop: baseSpacing,\n    scrollMarginBottom: baseSpacing,\n    scrollPaddingStart: createRenamedProperty('scrollPaddingInlineStart', baseSpacing),\n    scrollPaddingEnd: createRenamedProperty('scrollPaddingInlineEnd', baseSpacing),\n    scrollPaddingTop: baseSpacing,\n    scrollPaddingBottom: baseSpacing,\n    textIndent: baseSpacing,\n    translateX: createMappedProperty(value => ({\n      '--translateX': value,\n      translate: 'var(--translateX, 0) var(--translateY, 0)'\n    }), translate),\n    translateY: createMappedProperty(value => ({\n      '--translateY': value,\n      translate: 'var(--translateX, 0) var(--translateY, 0)'\n    }), translate),\n    rotate: createArbitraryProperty((value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`, property) => ({[property]: typeof value === 'number' ? `${value}deg` : value})),\n    scale: createArbitraryProperty<number>(),\n    transform: createArbitraryProperty<string>(),\n    position: ['absolute', 'fixed', 'relative', 'sticky', 'static'] as const,\n    insetStart: createRenamedProperty('insetInlineStart', inset),\n    insetEnd: createRenamedProperty('insetInlineEnd', inset),\n    top: inset,\n    left: inset,\n    bottom: inset,\n    right: inset,\n    aspectRatio: {\n      auto: 'auto',\n      square: '1 / 1',\n      video: '16 / 9'\n    },\n\n    // text\n    fontFamily: {\n      sans: {\n        default: 'adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif',\n        ...i18nFonts\n      },\n      serif: {\n        default: 'adobe-clean-serif, \"Source Serif\", Georgia, serif',\n        ...i18nFonts\n      },\n      code: 'source-code-pro, \"Source Code Pro\", Monaco, monospace'\n    },\n    fontSize,\n    fontWeight: createMappedProperty((value, property) => {\n      if (property === 'fontWeight') {\n        return {\n          // Set font-variation-settings in addition to font-weight to work around typekit issue.\n          fontVariationSettings: value === 'inherit' ? 'inherit' : `\"wght\" ${value}`,\n          fontWeight: value as any,\n          fontSynthesisWeight: 'none'\n        };\n      }\n\n      return {[property]: value};\n    }, {\n      ...fontWeightBase,\n      heading: {\n        default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]\n      },\n      title: {\n        default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]\n      },\n      detail: {\n        default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]\n      }\n    }),\n    lineHeight: {\n      // See https://spectrum.corp.adobe.com/page/typography/#Line-height\n      ui: {\n        default: getToken('line-height-100'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('line-height-200')\n      },\n      heading: {\n        default: getToken('heading-line-height'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('heading-cjk-line-height')\n      },\n      title: {\n        default: getToken('title-line-height'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('title-cjk-line-height')\n      },\n      body: {\n        default: getToken('body-line-height'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('body-cjk-line-height')\n      },\n      detail: {\n        default: getToken('detail-line-height'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('detail-cjk-line-height')\n      },\n      code: {\n        default: getToken('code-line-height'),\n        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('code-cjk-line-height')\n      }\n    },\n    listStyleType: ['none', 'dist', 'decimal'] as const,\n    listStylePosition: ['inside', 'outside'] as const,\n    textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'] as const,\n    textAlign: ['start', 'center', 'end', 'justify'] as const,\n    verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'] as const,\n    textDecoration: createMappedProperty((value) => ({\n      textDecoration: value === 'none' ? 'none' : `${value} ${getToken('text-underline-thickness')}`,\n      textUnderlineOffset: value === 'underline' ? getToken('text-underline-gap') : undefined\n    }), ['underline', 'overline', 'line-through', 'none'] as const),\n    textOverflow: ['ellipsis', 'clip'] as const,\n    lineClamp: createArbitraryProperty((value: number) => ({\n      overflow: 'hidden',\n      display: '-webkit-box',\n      '-webkit-box-orient': 'vertical',\n      '-webkit-line-clamp': value\n    })),\n    hyphens: ['none', 'manual', 'auto'] as const,\n    whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] as const,\n    textWrap: ['wrap', 'nowrap', 'balance', 'pretty'] as const,\n    wordBreak: ['normal', 'break-all', 'keep-all'] as const, // also overflowWrap??\n    boxDecorationBreak: ['slice', 'clone'] as const,\n\n    // effects\n    boxShadow: {\n      emphasized: `${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')}`,\n      elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')}`,\n      dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`,\n      none: 'none'\n    },\n    filter: {\n      emphasized: `drop-shadow(${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')})`,\n      elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')})`,\n      dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`,\n      none: 'none'\n    },\n    borderTopStartRadius: createRenamedProperty('borderStartStartRadius', radius),\n    borderTopEndRadius: createRenamedProperty('borderStartEndRadius', radius),\n    borderBottomStartRadius: createRenamedProperty('borderEndStartRadius', radius),\n    borderBottomEndRadius: createRenamedProperty('borderEndEndRadius', radius),\n    forcedColorAdjust: ['auto', 'none'] as const,\n    colorScheme: ['light', 'dark', 'light dark'] as const,\n    backgroundImage: createArbitraryProperty<string>(),\n    // TODO: do we need separate x and y properties?\n    backgroundPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,\n    backgroundSize: ['auto', 'cover', 'contain'] as const,\n    backgroundAttachment: ['fixed', 'local', 'scroll'] as const,\n    backgroundClip: ['border-box', 'padding-box', 'content-box', 'text'] as const,\n    backgroundRepeat: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'round', 'space'] as const,\n    backgroundOrigin: ['border-box', 'padding-box', 'content-box'] as const,\n    backgroundBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'] as const,\n    mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter'] as const,\n    opacity: createArbitraryProperty<number>(),\n\n    outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'] as const,\n    outlineOffset: createArbitraryProperty<number>((v, property) => ({[property]: `${v}px`})),\n    outlineWidth: borderWidth,\n\n    transition: createRenamedProperty('transitionProperty', transitionProperty),\n    transitionDelay: durationProperty,\n    transitionDuration: durationProperty,\n    transitionTimingFunction: timingFunction,\n    animation: createArbitraryProperty((value: string, property) => ({[property === 'animation' ? 'animationName' : property]: value})),\n    animationDuration: durationProperty,\n    animationDelay: durationProperty,\n    animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'] as const,\n    animationFillMode: ['none', 'forwards', 'backwards', 'both'] as const,\n    animationIterationCount: createArbitraryProperty<string>(),\n    animationTimingFunction: timingFunction,\n\n    // layout\n    display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'list-item', 'none'] as const, // tables?\n    alignContent: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'] as const,\n    alignItems: ['start', 'end', 'center', 'baseline', 'stretch'] as const,\n    justifyContent: ['normal', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'] as const,\n    justifyItems: ['start', 'end', 'center', 'stretch'] as const,\n    alignSelf: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'] as const,\n    justifySelf: ['auto', 'start', 'end', 'center', 'stretch'] as const,\n    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'] as const,\n    flexWrap: ['wrap', 'wrap-reverse', 'nowrap'] as const,\n    flexShrink: createArbitraryProperty<CSS.Property.FlexShrink>(),\n    flexGrow: createArbitraryProperty<CSS.Property.FlexGrow>(),\n    gridColumnStart: createArbitraryProperty<CSS.Property.GridColumnStart>(),\n    gridColumnEnd: createArbitraryProperty<CSS.Property.GridColumnEnd>(),\n    gridRowStart: createArbitraryProperty<CSS.Property.GridRowStart>(),\n    gridRowEnd: createArbitraryProperty<CSS.Property.GridRowEnd>(),\n    gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'] as const,\n    gridAutoRows: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),\n    gridAutoColumns: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),\n    gridTemplateColumns: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),\n    gridTemplateRows: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),\n    gridTemplateAreas: createArbitraryProperty((value: readonly string[], property) => ({[property]: value.map(v => `\"${v}\"`).join('')})),\n    float: ['inline-start', 'inline-end', 'right', 'left', 'none'] as const,\n    clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'] as const,\n    contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'] as const,\n    boxSizing: ['border-box', 'content-box'] as const,\n    tableLayout: ['auto', 'fixed'] as const,\n    captionSide: ['top', 'bottom'] as const,\n    borderCollapse: ['collapse', 'separate'] as const,\n    columns: {\n      auto: 'auto',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n      // TODO: what should these sizes be?\n      '3xs': '16rem',\n      '2xs': '18rem',\n      xs: '20rem',\n      sm: '24rem',\n      md: '28rem',\n      lg: '32rem',\n      xl: '36rem',\n      '2xl': '42rem',\n      '3xl': '48rem',\n      '4xl': '56rem',\n      '5xl': '64rem',\n      '6xl': '72rem',\n      '7xl': '80rem'\n    },\n    breakBefore: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,\n    breakInside: ['auto', 'avoid', 'avoid-page', 'avoid-column'] as const,\n    breakAfter: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,\n    overflowX: ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const,\n    overflowY: ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const,\n    overscrollBehaviorX: ['auto', 'contain', 'none'] as const,\n    overscrollBehaviorY: ['auto', 'contain', 'none'] as const,\n    scrollBehavior: ['auto', 'smooth'] as const,\n    order: createArbitraryProperty<number>(),\n\n    pointerEvents: ['none', 'auto'] as const,\n    touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'] as const,\n    userSelect: ['none', 'text', 'all', 'auto'] as const,\n    visibility: ['visible', 'hidden', 'collapse'] as const,\n    isolation: ['isolate', 'auto'] as const,\n    transformOrigin: ['center', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left', 'top right'] as const,\n    cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', 'none', 'context-menu', 'progress', 'cell', 'crosshair', 'vertical-text', 'alias', 'copy', 'no-drop', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out'] as const,\n    resize: ['none', 'vertical', 'horizontal', 'both'] as const,\n    scrollSnapType: ['x', 'y', 'both', 'x mandatory', 'y mandatory', 'both mandatory'] as const,\n    scrollSnapAlign: ['start', 'end', 'center', 'none'] as const,\n    scrollSnapStop: ['normal', 'always'] as const,\n    appearance: ['none', 'auto'] as const,\n    objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'] as const,\n    objectPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,\n    willChange: ['auto', 'scroll-position', 'contents', 'transform'] as const,\n    zIndex: createArbitraryProperty<number>(),\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    disableTapHighlight: createArbitraryProperty((_value: true) => ({\n      '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'\n    }))\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] as const,\n    paddingX: ['paddingStart', 'paddingEnd'] as const,\n    paddingY: ['paddingTop', 'paddingBottom'] as const,\n    margin: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'] as const,\n    marginX: ['marginStart', 'marginEnd'] as const,\n    marginY: ['marginTop', 'marginBottom'] as const,\n    scrollPadding: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'] as const,\n    scrollPaddingX: ['scrollPaddingStart', 'scrollPaddingEnd'] as const,\n    scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'] as const,\n    scrollMargin: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'] as const,\n    scrollMarginX: ['scrollMarginStart', 'scrollMarginEnd'] as const,\n    scrollMarginY: ['scrollMarginTop', 'scrollMarginBottom'] as const,\n    borderWidth: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'] as const,\n    borderXWidth: ['borderStartWidth', 'borderEndWidth'] as const,\n    borderYWidth: ['borderTopWidth', 'borderBottomWidth'] as const,\n    borderRadius: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'] as const,\n    borderTopRadius: ['borderTopStartRadius', 'borderTopEndRadius'] as const,\n    borderBottomRadius: ['borderBottomStartRadius', 'borderBottomEndRadius'] as const,\n    borderStartRadius: ['borderTopStartRadius', 'borderBottomStartRadius'] as const,\n    borderEndRadius: ['borderTopEndRadius', 'borderBottomEndRadius'] as const,\n    translate: ['translateX', 'translateY'] as const,\n    inset: ['top', 'bottom', 'insetStart', 'insetEnd'] as const,\n    insetX: ['insetStart', 'insetEnd'] as const,\n    insetY: ['top', 'bottom'] as const,\n    placeItems: ['alignItems', 'justifyItems'] as const,\n    placeContent: ['alignContent', 'justifyContent'] as const,\n    placeSelf: ['alignSelf', 'justifySelf'] as const,\n    gap: ['rowGap', 'columnGap'] as const,\n    size: ['width', 'height'] as const,\n    minSize: ['minWidth', 'minHeight'] as const,\n    maxSize: ['maxWidth', 'maxHeight'] as const,\n    overflow: ['overflowX', 'overflowY'] as const,\n    overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'] as const,\n    gridArea: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'] as const,\n    transition: (value: keyof typeof transitionProperty) => ({\n      transition: value,\n      transitionDuration: 150,\n      transitionTimingFunction: 'default'\n    }),\n    animation: (value: string) => ({\n      animation: value,\n      animationDuration: 150,\n      animationTimingFunction: 'default'\n    }),\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    truncate: (_value: true) => ({\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap'\n    }),\n    font: (value: keyof typeof fontSize) => {\n      let type = value.split('-')[0];\n      if (type === 'control') {\n        type = 'ui';\n      }\n      return {\n        fontFamily: type === 'code' ? 'code' : 'sans',\n        fontSize: value,\n        fontWeight: type === 'heading' || type === 'title' || type === 'detail' ? type : 'normal',\n        lineHeight: type,\n        color: type === 'ui' ? 'body' : type\n      };\n    }\n  },\n  conditions: {\n    forcedColors: '@media (forced-colors: active)',\n    // This detects touch primary devices as best as we can.\n    // Ideally we'd use (pointer: course) but browser/device support is inconsistent.\n    // Samsung Android devices claim to be mice at the hardware/OS level: (any-pointer: fine), (any-hover: hover), (hover: hover), and nothing for pointer.\n    // More details: https://www.ctrl.blog/entry/css-media-hover-samsung.html\n    // iPhone matches (any-hover: none), (hover: none), and nothing for any-pointer or pointer.\n    // If a trackpad or Apple Pencil is connected to iPad, it matches (any-pointer: fine), (any-hover: hover), (hover: none).\n    // Windows tablet matches the same as iPhone. No difference when a mouse is connected.\n    // Windows touch laptop matches same as macOS: (any-pointer: fine), (pointer: fine), (any-hover: hover), (hover: hover).\n    touch: '@media not ((hover: hover) and (pointer: fine))',\n    // TODO\n    sm: '@media (min-width: 640px)',\n    md: '@media (min-width: 768px)',\n    lg: '@media (min-width: 1024px)',\n    xl: '@media (min-width: 1280px)',\n    '2xl': '@media (min-width: 1536px)'\n  }\n});\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/style/runtime.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {StyleString} from './types';
+// import {RuntimeStyleFunction, RenderProps} from './types';
+
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;
+// type NullToObject<T> = T extends (null | undefined) ? {} : T;
+// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];
+// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];
+// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;
+// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;
+// type NoInfer<T> = [T, void][T extends any ? 0 : 1];
+// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;
+// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
+// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;
+
+// Two overloads:
+// 1. If a render props type is expected based on the return type, forward that type to all arguments.
+// 2. Otherwise, infer the return type based on the arguments.
+// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;
+// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;
+// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {
+//   return (props) => {
+//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));
+//   };
+// }
+
+export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {
+  let definedStyles = styles.filter(Boolean) as StyleString[];
+  if (definedStyles.length === 1) {
+    return definedStyles[0];
+  }
+
+  let map = new Map();
+  for (let style of definedStyles) {
+    for (let [k, v] of parse(style)) {
+      map.set(k, v);
+    }
+  }
+  
+  let res = '';
+  for (let value of map.values()) {
+    res += value;
+  }
+  return res as StyleString;
+}
+
+function parse(s: string) {
+  let properties = new Map<string, string>();
+  let i = 0;
+  while (i < s.length) {
+    while (i < s.length && s[i] === ' ') {
+      i++;
+    }
+
+    let start = i;
+    readValue(); // property index
+
+    // read conditions (up to the last segment)
+    let condition = i;
+    while (i < s.length && s[i] !== ' ') {
+      readValue();
+    }
+
+    let property = s.slice(start, condition);
+    properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));
+  }
+
+  function readValue() {
+    if (s[i] === '-') {
+      // the beginning and end of arbitrary values are marked with -
+      while (i < s.length && s[i] !== ' ') {
+        i++;
+        if (s[i] === '-') {
+          i++;
+          break;
+        }
+      }
+    } else {
+      while (i < s.length) {
+        if (s[i] === '_') {
+          i++;
+        } else {
+          i++;
+          break;
+        }
+      }
+    }
+  }
+
+  return properties;
+}