@factorialco/f0-core 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.752 18.0668C13.9914 17.7996 14.4016 17.7769 14.669 18.016C14.9362 18.2554 14.96 18.6665 14.7208 18.934C14.0535 19.6795 13.081 20.1507 12.0001 20.1508C10.9192 20.1508 9.94679 19.6795 9.27939 18.934C9.04003 18.6665 9.06284 18.2554 9.33017 18.016C9.59765 17.7766 10.0087 17.7993 10.2481 18.0668C10.6794 18.5484 11.3043 18.85 12.0001 18.85C12.6958 18.8499 13.3209 18.5484 13.752 18.0668ZM4.54013 4.54041C4.79397 4.28656 5.20621 4.28656 5.46005 4.54041L19.4601 18.5404C19.7137 18.7943 19.7138 19.2066 19.4601 19.4603C19.2063 19.7139 18.7939 19.7139 18.5401 19.4603L4.54013 5.46033C4.28634 5.20654 4.28644 4.79426 4.54013 4.54041ZM6.54013 10.0404C6.79397 9.78656 7.20621 9.78656 7.46005 10.0404C7.71365 10.2943 7.71381 10.7066 7.46005 10.9603L6.49228 11.9281C6.03387 12.3866 5.87318 13.0649 6.07822 13.6801C6.3114 14.3787 6.96568 14.8498 7.70224 14.85H11.5001C11.859 14.85 12.1505 15.1414 12.1505 15.5004C12.1503 15.8591 11.8589 16.1507 11.5001 16.1508H7.70224C6.40612 16.1506 5.25495 15.3207 4.84482 14.0912C4.48407 13.0089 4.76576 11.8149 5.57236 11.0082L6.54013 10.0404ZM12.0001 3.84998C15.1205 3.85003 17.6505 6.37999 17.6505 9.50037C17.6506 9.96809 17.8364 10.4167 18.1671 10.7474L18.4601 11.0404C19.2468 11.8273 19.5209 12.9916 19.169 14.0472L19.1163 14.2054C19.0027 14.5456 18.6353 14.7297 18.295 14.6166C17.9547 14.5031 17.7708 14.1357 17.8839 13.7953L17.9366 13.6361C18.1326 13.0477 17.9786 12.399 17.5401 11.9603L17.2472 11.6674C16.6726 11.0928 16.3498 10.3129 16.3497 9.50037C16.3497 7.09796 14.4025 5.15081 12.0001 5.15076C11.0199 5.15076 10.1168 5.47366 9.38974 6.0199C9.10285 6.23523 8.69521 6.17766 8.47958 5.89099C8.26402 5.60403 8.32258 5.19648 8.60947 4.98083C9.5539 4.27131 10.7287 3.84998 12.0001 3.84998Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M15.5 6.37L19 9.87L15.5 13.37M12.75 9.87C11.1232 9.87 10.3098 9.87 9.63754 10.0267C7.4127 10.5455 5.6755 12.2827 5.15674 14.5075C5 15.1798 5 15.9932 5 17.62M10.9656 6.37L14.4656 9.87L10.9656 13.37" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M19 14.12L16 14.12L12.75 14.12C11.1232 14.12 10.3098 14.12 9.63754 13.9633C7.4127 13.4445 5.6755 11.7073 5.15674 9.48245C5 8.81024 5 7.99682 5 6.37M19 14.12L15.5 17.62M19 14.12L15.5 10.62" stroke="#0D1625" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
2
+ <path d="M5 9.87H8H11.25C12.8768 9.87 13.6902 9.87 14.3625 10.0267C16.5873 10.5455 18.3245 12.2827 18.8433 14.5075C19 15.1798 19 15.9932 19 17.62M8.5 13.37L5 9.87L8.5 6.37" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
3
3
  </svg>
package/dist/index.d.mts CHANGED
@@ -368,10 +368,28 @@ declare const fontSize: {
368
368
  readonly letterSpacing: "-0.02em";
369
369
  };
370
370
  };
371
+ /**
372
+ * Font stacks.
373
+ *
374
+ * `emoji` is for surfaces that render an emoji **on its own** — a picker cell, a
375
+ * reaction pill, a channel icon. It must NOT be applied to prose: `*`, `#`, the
376
+ * digits and `™` are technically emoji in Unicode, so an emoji font over mixed
377
+ * text turns numbers and symbols into pictures. Body copy relies on the
378
+ * browser's own per-character fallback instead, which already picks the system
379
+ * emoji font for emoji codepoints.
380
+ *
381
+ * "Twemoji Mozilla" leads because Firefox ships it and it is the only stack
382
+ * entry that carries flag glyphs on Windows (Segoe UI Emoji has none, so
383
+ * Chromium there falls back to the two regional-indicator letters).
384
+ */
385
+ declare const fontFamily: {
386
+ readonly sans: readonly ["Inter", "sans-serif"];
387
+ readonly emoji: readonly ["Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "sans-serif"];
388
+ };
371
389
  declare const fontWeight: {
372
390
  readonly normal: "400";
373
391
  readonly medium: "500";
374
392
  readonly semibold: "600";
375
393
  };
376
394
 
377
- export { type BaseColor, type F1Color, absoluteSpacing, baseColors, betweenSpacing, borderRadius, boxShadow, breakpoints, f1Colors, fontSize, fontWeight, interactiveHeights, pageSpacing, relativeSpacing };
395
+ export { type BaseColor, type F1Color, absoluteSpacing, baseColors, betweenSpacing, borderRadius, boxShadow, breakpoints, f1Colors, fontFamily, fontSize, fontWeight, interactiveHeights, pageSpacing, relativeSpacing };
package/dist/index.d.ts CHANGED
@@ -368,10 +368,28 @@ declare const fontSize: {
368
368
  readonly letterSpacing: "-0.02em";
369
369
  };
370
370
  };
371
+ /**
372
+ * Font stacks.
373
+ *
374
+ * `emoji` is for surfaces that render an emoji **on its own** — a picker cell, a
375
+ * reaction pill, a channel icon. It must NOT be applied to prose: `*`, `#`, the
376
+ * digits and `™` are technically emoji in Unicode, so an emoji font over mixed
377
+ * text turns numbers and symbols into pictures. Body copy relies on the
378
+ * browser's own per-character fallback instead, which already picks the system
379
+ * emoji font for emoji codepoints.
380
+ *
381
+ * "Twemoji Mozilla" leads because Firefox ships it and it is the only stack
382
+ * entry that carries flag glyphs on Windows (Segoe UI Emoji has none, so
383
+ * Chromium there falls back to the two regional-indicator letters).
384
+ */
385
+ declare const fontFamily: {
386
+ readonly sans: readonly ["Inter", "sans-serif"];
387
+ readonly emoji: readonly ["Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "sans-serif"];
388
+ };
371
389
  declare const fontWeight: {
372
390
  readonly normal: "400";
373
391
  readonly medium: "500";
374
392
  readonly semibold: "600";
375
393
  };
376
394
 
377
- export { type BaseColor, type F1Color, absoluteSpacing, baseColors, betweenSpacing, borderRadius, boxShadow, breakpoints, f1Colors, fontSize, fontWeight, interactiveHeights, pageSpacing, relativeSpacing };
395
+ export { type BaseColor, type F1Color, absoluteSpacing, baseColors, betweenSpacing, borderRadius, boxShadow, breakpoints, f1Colors, fontFamily, fontSize, fontWeight, interactiveHeights, pageSpacing, relativeSpacing };
package/dist/index.js CHANGED
@@ -27,6 +27,7 @@ __export(index_exports, {
27
27
  boxShadow: () => boxShadow,
28
28
  breakpoints: () => breakpoints,
29
29
  f1Colors: () => f1Colors,
30
+ fontFamily: () => fontFamily,
30
31
  fontSize: () => fontSize,
31
32
  fontWeight: () => fontWeight,
32
33
  interactiveHeights: () => interactiveHeights,
@@ -421,6 +422,19 @@ var fontSize = {
421
422
  "3xl": { size: "1.625rem", lineHeight: "2rem", letterSpacing: "-0.01em" },
422
423
  "4xl": { size: "2.25rem", lineHeight: "2.5rem", letterSpacing: "-0.02em" }
423
424
  };
425
+ var fontFamily = {
426
+ sans: ["Inter", "sans-serif"],
427
+ emoji: [
428
+ "Twemoji Mozilla",
429
+ "Apple Color Emoji",
430
+ "Segoe UI Emoji",
431
+ "Segoe UI Symbol",
432
+ "Noto Color Emoji",
433
+ "EmojiOne Color",
434
+ "Android Emoji",
435
+ "sans-serif"
436
+ ]
437
+ };
424
438
  var fontWeight = {
425
439
  normal: "400",
426
440
  medium: "500",
@@ -435,6 +449,7 @@ var fontWeight = {
435
449
  boxShadow,
436
450
  breakpoints,
437
451
  f1Colors,
452
+ fontFamily,
438
453
  fontSize,
439
454
  fontWeight,
440
455
  interactiveHeights,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/tokens/borderRadius.ts","../src/tokens/breakpoints.ts","../src/tokens/colors.ts","../src/tokens/shadows.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["export * from \"./tokens/borderRadius\"\nexport * from \"./tokens/breakpoints\"\nexport * from \"./tokens/colors\"\nexport * from \"./tokens/shadows\"\nexport * from \"./tokens/spacing\"\nexport * from \"./tokens/typography\"\n","/**\n * Border radius scale.\n *\n * ## Usage convention for interactive components\n *\n * Interactive elements (buttons, toggle items, segments) follow a size-based mapping\n * derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`:\n *\n * sm → rounded-sm (0.5rem)\n * md → rounded (0.625rem, DEFAULT)\n * lg → rounded-md (0.75rem)\n *\n * When a component has a container that wraps interactive elements (e.g. a segmented\n * control track, a button group background), the container uses one step up from the\n * inner element so the pill fits visually with the internal padding:\n *\n * inner sm → container rounded (DEFAULT)\n * inner md → container rounded-md\n * inner lg → container rounded-lg\n */\nexport const borderRadius = {\n none: \"0px\",\n \"2xs\": \"0.25rem\",\n xs: \"0.375rem\",\n sm: \"0.5rem\",\n DEFAULT: \"0.625rem\",\n md: \"0.75rem\",\n lg: \"0.875rem\",\n xl: \"1rem\",\n \"2xl\": \"1.25rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\",\n}\n","export const breakpoints = {\n md: 900,\n lg: 1200,\n xl: 1440,\n}\n","export const baseColors = {\n white: {\n 3: \"0 0% 100% / 0.03\",\n 5: \"0 0% 100% / 0.05\",\n 10: \"0 0% 100% / 0.1\",\n 20: \"0 0% 100% / 0.2\",\n 30: \"0 0% 100% / 0.3\",\n 40: \"0 0% 100% / 0.4\",\n 50: \"0 0% 100% / 0.5\",\n 60: \"0 0% 100% / 0.6\",\n 70: \"0 0% 100% / 0.7\",\n 80: \"0 0% 100% / 0.8\",\n 90: \"0 0% 100% / 0.9\",\n 100: \"0 0% 100%\",\n },\n current: \"currentColor\",\n transparent: \"transparent\",\n grey: {\n 0: \"210 91% 22% / 0.02\",\n 2: \"219 88% 17% / 0.02\",\n 5: \"220 88% 17% / 0.04\",\n 10: \"216 89% 18% / 0.06\",\n 20: \"214 70% 20% / 0.1\",\n 30: \"213 87% 15% / 0.20\",\n 40: \"219 97% 15% / 0.45\",\n 50: \"217 96% 11% / 0.61\",\n 60: \"220 88% 10% / 0.82\",\n 70: \"219 91% 8% / 0.88\",\n 80: \"219 94% 7% / 0.9\",\n 90: \"219 88% 6% / 0.92\",\n 100: \"218 48% 10%\",\n solid: {\n 40: \"219 18% 69%\",\n 50: \"218 14% 45%\",\n },\n },\n lilac: {\n 50: \"340 49% 60%\",\n 60: \"341 34% 50%\",\n 70: \"340 33% 41%\",\n },\n barbie: {\n 50: \"331 84% 63%\",\n 60: \"331 55% 53%\",\n 70: \"330 49% 43%\",\n },\n smoke: {\n 50: \"192 26% 54%\",\n 60: \"192 22% 45%\",\n 70: \"192 22% 37%\",\n },\n army: {\n 50: \"162 44% 33%\",\n 60: \"163 45% 28%\",\n 70: \"162 44% 23%\",\n },\n flubber: {\n 50: \"84 55% 53%\",\n 60: \"84 48% 45%\",\n 70: \"83 48% 33%\",\n },\n indigo: {\n 50: \"239 91% 64%\",\n 60: \"239 59% 54%\",\n 70: \"239 51% 44%\",\n },\n camel: {\n 50: \"25 46% 53%\",\n 60: \"25 42% 44%\",\n 70: \"25 42% 36%\",\n },\n radical: {\n 50: \"348 80% 50%\",\n 60: \"348 80% 42%\",\n 70: \"347 80% 34%\",\n },\n viridian: {\n 50: \"184 92% 35%\",\n 60: \"184 92% 28%\",\n 70: \"184 92% 24%\",\n },\n orange: {\n 50: \"25 95% 53%\",\n 60: \"24 69% 49%\",\n 70: \"24 69% 40%\",\n },\n red: {\n 50: \"5 100% 65%\",\n 60: \"4 61% 49%\",\n 70: \"3 71% 41%\",\n },\n grass: {\n 50: \"160 84% 39%\",\n 60: \"160 85% 33%\",\n 70: \"161 84% 27%\",\n },\n malibu: {\n 50: \"216 90% 65%\",\n 60: \"216 59% 55%\",\n 70: \"216 48% 44%\",\n },\n yellow: {\n 50: \"38 92% 54%\",\n 60: \"38 79% 45%\",\n 70: \"38 80% 36%\",\n },\n purple: {\n 50: \"258 88% 67%\",\n 60: \"258 56% 56%\",\n 70: \"258 43% 46%\",\n },\n} as const\n\nexport type BaseColor = keyof typeof baseColors\n\nexport const f1Colors = {\n foreground: {\n DEFAULT: \"hsl(var(--neutral-100))\",\n secondary: \"hsl(var(--neutral-50))\",\n tertiary: \"hsl(var(--neutral-40))\",\n inverse: {\n DEFAULT: \"hsl(var(--white-100))\",\n secondary: \"hsl(var(--white-80))\",\n },\n disabled: \"hsl(var(--neutral-30))\",\n accent: \"hsl(var(--accent-70))\",\n critical: \"hsl(var(--critical-70))\",\n info: \"hsl(var(--info-70))\",\n warning: \"hsl(var(--warning-70))\",\n positive: \"hsl(var(--positive-70))\",\n selected: \"hsl(var(--selected-70))\",\n },\n background: {\n DEFAULT: \"hsl(var(--neutral-0))\",\n hover: \"hsl(var(--neutral-5))\",\n disabled: \"hsl(var(--neutral-3))\",\n secondary: {\n DEFAULT: \"hsl(var(--neutral-10))\",\n hover: \"hsl(var(--neutral-20))\",\n },\n tertiary: \"hsl(var(--neutral-5))\",\n inverse: {\n DEFAULT: \"hsl(var(--neutral-90))\",\n secondary: \"hsl(var(--white-60))\",\n },\n bold: \"hsl(var(--neutral-90))\",\n accent: {\n DEFAULT: \"hsl(var(--accent-50) / 0.05)\",\n bold: {\n DEFAULT: \"hsl(var(--accent-50))\",\n hover: \"hsl(var(--accent-60))\",\n },\n },\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.3)\",\n hover: \"hsl(var(--promote-50) / 0.4)\",\n bold: \"hsl(var(--promote-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-60))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.1)\",\n secondary: \"hsl(var(--selected-50) / 0.05)\",\n hover: \"hsl(var(--selected-50) / 0.2)\",\n bold: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n },\n overlay: {\n DEFAULT: \"hsl(var(--neutral-40))\",\n },\n },\n border: {\n DEFAULT: \"hsl(var(--neutral-30))\",\n hover: \"hsl(var(--neutral-40))\",\n secondary: \"hsl(var(--neutral-20))\",\n inverse: \"hsl(var(--neutral-0) / 0.2)\",\n bold: \"hsl(var(--neutral-100))\",\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.4)\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.4)\",\n bold: \"hsl(var(--selected-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n },\n icon: {\n DEFAULT: \"hsl(var(--neutral-solid-50))\",\n secondary: \"hsl(var(--neutral-solid-40))\",\n inverse: \"hsl(var(--neutral-0))\",\n bold: \"hsl(var(--neutral-100))\",\n critical: {\n DEFAULT: \"hsl(var(--critical-50))\",\n bold: \"hsl(var(--critical-70))\",\n },\n accent: \"hsl(var(--accent-50))\",\n info: \"hsl(var(--info-50))\",\n warning: \"hsl(var(--warning-50))\",\n positive: \"hsl(var(--positive-50))\",\n promote: \"hsl(var(--promote-50))\",\n selected: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n mood: {\n \"super-negative\": \"hsl(var(--mood-super-negative))\",\n negative: \"hsl(var(--mood-negative))\",\n neutral: \"hsl(var(--mood-neutral))\",\n positive: \"hsl(var(--mood-positive))\",\n \"super-positive\": \"hsl(var(--mood-super-positive))\",\n },\n },\n special: {\n ring: \"hsl(var(--ring))\",\n page: \"hsl(var(--page))\",\n highlight: \"hsl(var(--accent-50))\",\n },\n} as const\n\nexport type F1Color = keyof typeof f1Colors\n","export const boxShadow = {\n DEFAULT: \"0 2px 20px 0 hsl(var(--shadow) / 0.04)\",\n md: \"0 4px 20px 0 hsl(var(--shadow) / 0.08)\",\n lg: \"0 8px 30px 0 hsl(var(--shadow) / 0.12)\",\n xl: \"0 12px 56px 0 hsl(var(--shadow) / 0.16)\",\n none: \"none\",\n} as const\n","import { ThemeConfig } from \"tailwindcss/types/config\"\n\n/**\n * Spacing for the tailwind config\n * Provides scale in relative(rem) and absolute(px) units\n *\n * The pixel scale is used by default.\n * All properties that do not explicitly set to use relative scale, use pixels.\n *\n * Relative scale is used for size definitions, like heights and widths.\n */\n\nexport const absoluteSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"2px\",\n 1: \"4px\",\n 1.5: \"6px\",\n 2: \"8px\",\n 2.5: \"10px\",\n 3: \"12px\",\n 3.5: \"14px\",\n 4: \"16px\",\n 5: \"20px\",\n 6: \"24px\",\n 7: \"28px\",\n 8: \"32px\",\n 9: \"36px\",\n 10: \"40px\",\n 11: \"44px\",\n 12: \"48px\",\n 14: \"56px\",\n 16: \"64px\",\n 18: \"72px\",\n 20: \"80px\",\n 24: \"96px\",\n 28: \"112px\",\n 32: \"128px\",\n 36: \"144px\",\n 40: \"160px\",\n 44: \"176px\",\n 48: \"192px\",\n 52: \"208px\",\n 56: \"224px\",\n 60: \"240px\",\n 64: \"256px\",\n 72: \"288px\",\n 80: \"320px\",\n 96: \"384px\",\n}\n\nexport const relativeSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 11: \"2.75rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 18: \"4.5rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\",\n}\n\n/*\n * Spacing between elements\n * This special scale is used for the gap between common elements.\n * Docs: https://zeroheight.com/6cc527675/p/94c391-spacing/t/3409209197\n */\nexport const betweenSpacing: ThemeConfig[\"spacing\"] = {\n sm: relativeSpacing[1],\n md: relativeSpacing[2],\n lg: relativeSpacing[3],\n xl: relativeSpacing[4],\n}\n\n/*\n * Semantic page-level horizontal padding.\n * Used by page headers, data collections, layouts, and tab navigation.\n */\nexport const pageSpacing: ThemeConfig[\"spacing\"] = {\n page: absoluteSpacing[6], // 24px\n}\n\n/**\n * Standard height scale for interactive components (buttons, inputs, segmented controls, etc.)\n *\n * | Size | Height | Tailwind |\n * |------|--------|---------|\n * | sm | 24px | h-6 |\n * | md | 32px | h-8 |\n * | lg | 40px | h-10 |\n *\n * Derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`.\n * Use this as the reference when building any new interactive component.\n */\nexport const interactiveHeights = {\n sm: absoluteSpacing[6], // 24px\n md: absoluteSpacing[8], // 32px\n lg: absoluteSpacing[10], // 40px\n} as const\n","export const fontSize = {\n xs: { size: \"0.625rem\", lineHeight: \"0.75rem\" },\n sm: { size: \"0.75rem\", lineHeight: \"1rem\" },\n base: { size: \"0.875rem\", lineHeight: \"1.25rem\", letterSpacing: \"-0.005em\" },\n lg: { size: \"1rem\", lineHeight: \"1.5rem\", letterSpacing: \"-0.01em\" },\n xl: { size: \"1.125rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"2xl\": { size: \"1.375rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"3xl\": { size: \"1.625rem\", lineHeight: \"2rem\", letterSpacing: \"-0.01em\" },\n \"4xl\": { size: \"2.25rem\", lineHeight: \"2.5rem\", letterSpacing: \"-0.02em\" },\n} as const\n\nexport const fontWeight = {\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n} as const\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/tokens/borderRadius.ts","../src/tokens/breakpoints.ts","../src/tokens/colors.ts","../src/tokens/shadows.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["export * from \"./tokens/borderRadius\"\nexport * from \"./tokens/breakpoints\"\nexport * from \"./tokens/colors\"\nexport * from \"./tokens/shadows\"\nexport * from \"./tokens/spacing\"\nexport * from \"./tokens/typography\"\n","/**\n * Border radius scale.\n *\n * ## Usage convention for interactive components\n *\n * Interactive elements (buttons, toggle items, segments) follow a size-based mapping\n * derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`:\n *\n * sm → rounded-sm (0.5rem)\n * md → rounded (0.625rem, DEFAULT)\n * lg → rounded-md (0.75rem)\n *\n * When a component has a container that wraps interactive elements (e.g. a segmented\n * control track, a button group background), the container uses one step up from the\n * inner element so the pill fits visually with the internal padding:\n *\n * inner sm → container rounded (DEFAULT)\n * inner md → container rounded-md\n * inner lg → container rounded-lg\n */\nexport const borderRadius = {\n none: \"0px\",\n \"2xs\": \"0.25rem\",\n xs: \"0.375rem\",\n sm: \"0.5rem\",\n DEFAULT: \"0.625rem\",\n md: \"0.75rem\",\n lg: \"0.875rem\",\n xl: \"1rem\",\n \"2xl\": \"1.25rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\",\n}\n","export const breakpoints = {\n md: 900,\n lg: 1200,\n xl: 1440,\n}\n","export const baseColors = {\n white: {\n 3: \"0 0% 100% / 0.03\",\n 5: \"0 0% 100% / 0.05\",\n 10: \"0 0% 100% / 0.1\",\n 20: \"0 0% 100% / 0.2\",\n 30: \"0 0% 100% / 0.3\",\n 40: \"0 0% 100% / 0.4\",\n 50: \"0 0% 100% / 0.5\",\n 60: \"0 0% 100% / 0.6\",\n 70: \"0 0% 100% / 0.7\",\n 80: \"0 0% 100% / 0.8\",\n 90: \"0 0% 100% / 0.9\",\n 100: \"0 0% 100%\",\n },\n current: \"currentColor\",\n transparent: \"transparent\",\n grey: {\n 0: \"210 91% 22% / 0.02\",\n 2: \"219 88% 17% / 0.02\",\n 5: \"220 88% 17% / 0.04\",\n 10: \"216 89% 18% / 0.06\",\n 20: \"214 70% 20% / 0.1\",\n 30: \"213 87% 15% / 0.20\",\n 40: \"219 97% 15% / 0.45\",\n 50: \"217 96% 11% / 0.61\",\n 60: \"220 88% 10% / 0.82\",\n 70: \"219 91% 8% / 0.88\",\n 80: \"219 94% 7% / 0.9\",\n 90: \"219 88% 6% / 0.92\",\n 100: \"218 48% 10%\",\n solid: {\n 40: \"219 18% 69%\",\n 50: \"218 14% 45%\",\n },\n },\n lilac: {\n 50: \"340 49% 60%\",\n 60: \"341 34% 50%\",\n 70: \"340 33% 41%\",\n },\n barbie: {\n 50: \"331 84% 63%\",\n 60: \"331 55% 53%\",\n 70: \"330 49% 43%\",\n },\n smoke: {\n 50: \"192 26% 54%\",\n 60: \"192 22% 45%\",\n 70: \"192 22% 37%\",\n },\n army: {\n 50: \"162 44% 33%\",\n 60: \"163 45% 28%\",\n 70: \"162 44% 23%\",\n },\n flubber: {\n 50: \"84 55% 53%\",\n 60: \"84 48% 45%\",\n 70: \"83 48% 33%\",\n },\n indigo: {\n 50: \"239 91% 64%\",\n 60: \"239 59% 54%\",\n 70: \"239 51% 44%\",\n },\n camel: {\n 50: \"25 46% 53%\",\n 60: \"25 42% 44%\",\n 70: \"25 42% 36%\",\n },\n radical: {\n 50: \"348 80% 50%\",\n 60: \"348 80% 42%\",\n 70: \"347 80% 34%\",\n },\n viridian: {\n 50: \"184 92% 35%\",\n 60: \"184 92% 28%\",\n 70: \"184 92% 24%\",\n },\n orange: {\n 50: \"25 95% 53%\",\n 60: \"24 69% 49%\",\n 70: \"24 69% 40%\",\n },\n red: {\n 50: \"5 100% 65%\",\n 60: \"4 61% 49%\",\n 70: \"3 71% 41%\",\n },\n grass: {\n 50: \"160 84% 39%\",\n 60: \"160 85% 33%\",\n 70: \"161 84% 27%\",\n },\n malibu: {\n 50: \"216 90% 65%\",\n 60: \"216 59% 55%\",\n 70: \"216 48% 44%\",\n },\n yellow: {\n 50: \"38 92% 54%\",\n 60: \"38 79% 45%\",\n 70: \"38 80% 36%\",\n },\n purple: {\n 50: \"258 88% 67%\",\n 60: \"258 56% 56%\",\n 70: \"258 43% 46%\",\n },\n} as const\n\nexport type BaseColor = keyof typeof baseColors\n\nexport const f1Colors = {\n foreground: {\n DEFAULT: \"hsl(var(--neutral-100))\",\n secondary: \"hsl(var(--neutral-50))\",\n tertiary: \"hsl(var(--neutral-40))\",\n inverse: {\n DEFAULT: \"hsl(var(--white-100))\",\n secondary: \"hsl(var(--white-80))\",\n },\n disabled: \"hsl(var(--neutral-30))\",\n accent: \"hsl(var(--accent-70))\",\n critical: \"hsl(var(--critical-70))\",\n info: \"hsl(var(--info-70))\",\n warning: \"hsl(var(--warning-70))\",\n positive: \"hsl(var(--positive-70))\",\n selected: \"hsl(var(--selected-70))\",\n },\n background: {\n DEFAULT: \"hsl(var(--neutral-0))\",\n hover: \"hsl(var(--neutral-5))\",\n disabled: \"hsl(var(--neutral-3))\",\n secondary: {\n DEFAULT: \"hsl(var(--neutral-10))\",\n hover: \"hsl(var(--neutral-20))\",\n },\n tertiary: \"hsl(var(--neutral-5))\",\n inverse: {\n DEFAULT: \"hsl(var(--neutral-90))\",\n secondary: \"hsl(var(--white-60))\",\n },\n bold: \"hsl(var(--neutral-90))\",\n accent: {\n DEFAULT: \"hsl(var(--accent-50) / 0.05)\",\n bold: {\n DEFAULT: \"hsl(var(--accent-50))\",\n hover: \"hsl(var(--accent-60))\",\n },\n },\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.3)\",\n hover: \"hsl(var(--promote-50) / 0.4)\",\n bold: \"hsl(var(--promote-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-60))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.1)\",\n secondary: \"hsl(var(--selected-50) / 0.05)\",\n hover: \"hsl(var(--selected-50) / 0.2)\",\n bold: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n },\n overlay: {\n DEFAULT: \"hsl(var(--neutral-40))\",\n },\n },\n border: {\n DEFAULT: \"hsl(var(--neutral-30))\",\n hover: \"hsl(var(--neutral-40))\",\n secondary: \"hsl(var(--neutral-20))\",\n inverse: \"hsl(var(--neutral-0) / 0.2)\",\n bold: \"hsl(var(--neutral-100))\",\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.4)\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.4)\",\n bold: \"hsl(var(--selected-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n },\n icon: {\n DEFAULT: \"hsl(var(--neutral-solid-50))\",\n secondary: \"hsl(var(--neutral-solid-40))\",\n inverse: \"hsl(var(--neutral-0))\",\n bold: \"hsl(var(--neutral-100))\",\n critical: {\n DEFAULT: \"hsl(var(--critical-50))\",\n bold: \"hsl(var(--critical-70))\",\n },\n accent: \"hsl(var(--accent-50))\",\n info: \"hsl(var(--info-50))\",\n warning: \"hsl(var(--warning-50))\",\n positive: \"hsl(var(--positive-50))\",\n promote: \"hsl(var(--promote-50))\",\n selected: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n mood: {\n \"super-negative\": \"hsl(var(--mood-super-negative))\",\n negative: \"hsl(var(--mood-negative))\",\n neutral: \"hsl(var(--mood-neutral))\",\n positive: \"hsl(var(--mood-positive))\",\n \"super-positive\": \"hsl(var(--mood-super-positive))\",\n },\n },\n special: {\n ring: \"hsl(var(--ring))\",\n page: \"hsl(var(--page))\",\n highlight: \"hsl(var(--accent-50))\",\n },\n} as const\n\nexport type F1Color = keyof typeof f1Colors\n","export const boxShadow = {\n DEFAULT: \"0 2px 20px 0 hsl(var(--shadow) / 0.04)\",\n md: \"0 4px 20px 0 hsl(var(--shadow) / 0.08)\",\n lg: \"0 8px 30px 0 hsl(var(--shadow) / 0.12)\",\n xl: \"0 12px 56px 0 hsl(var(--shadow) / 0.16)\",\n none: \"none\",\n} as const\n","import { ThemeConfig } from \"tailwindcss/types/config\"\n\n/**\n * Spacing for the tailwind config\n * Provides scale in relative(rem) and absolute(px) units\n *\n * The pixel scale is used by default.\n * All properties that do not explicitly set to use relative scale, use pixels.\n *\n * Relative scale is used for size definitions, like heights and widths.\n */\n\nexport const absoluteSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"2px\",\n 1: \"4px\",\n 1.5: \"6px\",\n 2: \"8px\",\n 2.5: \"10px\",\n 3: \"12px\",\n 3.5: \"14px\",\n 4: \"16px\",\n 5: \"20px\",\n 6: \"24px\",\n 7: \"28px\",\n 8: \"32px\",\n 9: \"36px\",\n 10: \"40px\",\n 11: \"44px\",\n 12: \"48px\",\n 14: \"56px\",\n 16: \"64px\",\n 18: \"72px\",\n 20: \"80px\",\n 24: \"96px\",\n 28: \"112px\",\n 32: \"128px\",\n 36: \"144px\",\n 40: \"160px\",\n 44: \"176px\",\n 48: \"192px\",\n 52: \"208px\",\n 56: \"224px\",\n 60: \"240px\",\n 64: \"256px\",\n 72: \"288px\",\n 80: \"320px\",\n 96: \"384px\",\n}\n\nexport const relativeSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 11: \"2.75rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 18: \"4.5rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\",\n}\n\n/*\n * Spacing between elements\n * This special scale is used for the gap between common elements.\n * Docs: https://zeroheight.com/6cc527675/p/94c391-spacing/t/3409209197\n */\nexport const betweenSpacing: ThemeConfig[\"spacing\"] = {\n sm: relativeSpacing[1],\n md: relativeSpacing[2],\n lg: relativeSpacing[3],\n xl: relativeSpacing[4],\n}\n\n/*\n * Semantic page-level horizontal padding.\n * Used by page headers, data collections, layouts, and tab navigation.\n */\nexport const pageSpacing: ThemeConfig[\"spacing\"] = {\n page: absoluteSpacing[6], // 24px\n}\n\n/**\n * Standard height scale for interactive components (buttons, inputs, segmented controls, etc.)\n *\n * | Size | Height | Tailwind |\n * |------|--------|---------|\n * | sm | 24px | h-6 |\n * | md | 32px | h-8 |\n * | lg | 40px | h-10 |\n *\n * Derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`.\n * Use this as the reference when building any new interactive component.\n */\nexport const interactiveHeights = {\n sm: absoluteSpacing[6], // 24px\n md: absoluteSpacing[8], // 32px\n lg: absoluteSpacing[10], // 40px\n} as const\n","export const fontSize = {\n xs: { size: \"0.625rem\", lineHeight: \"0.75rem\" },\n sm: { size: \"0.75rem\", lineHeight: \"1rem\" },\n base: { size: \"0.875rem\", lineHeight: \"1.25rem\", letterSpacing: \"-0.005em\" },\n lg: { size: \"1rem\", lineHeight: \"1.5rem\", letterSpacing: \"-0.01em\" },\n xl: { size: \"1.125rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"2xl\": { size: \"1.375rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"3xl\": { size: \"1.625rem\", lineHeight: \"2rem\", letterSpacing: \"-0.01em\" },\n \"4xl\": { size: \"2.25rem\", lineHeight: \"2.5rem\", letterSpacing: \"-0.02em\" },\n} as const\n\n/**\n * Font stacks.\n *\n * `emoji` is for surfaces that render an emoji **on its own** — a picker cell, a\n * reaction pill, a channel icon. It must NOT be applied to prose: `*`, `#`, the\n * digits and `™` are technically emoji in Unicode, so an emoji font over mixed\n * text turns numbers and symbols into pictures. Body copy relies on the\n * browser's own per-character fallback instead, which already picks the system\n * emoji font for emoji codepoints.\n *\n * \"Twemoji Mozilla\" leads because Firefox ships it and it is the only stack\n * entry that carries flag glyphs on Windows (Segoe UI Emoji has none, so\n * Chromium there falls back to the two regional-indicator letters).\n */\nexport const fontFamily = {\n sans: [\"Inter\", \"sans-serif\"],\n emoji: [\n \"Twemoji Mozilla\",\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\",\n \"EmojiOne Color\",\n \"Android Emoji\",\n \"sans-serif\",\n ],\n} as const\n\nexport const fontWeight = {\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n} as const\n"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -384,6 +384,19 @@ var fontSize = {
384
384
  "3xl": { size: "1.625rem", lineHeight: "2rem", letterSpacing: "-0.01em" },
385
385
  "4xl": { size: "2.25rem", lineHeight: "2.5rem", letterSpacing: "-0.02em" }
386
386
  };
387
+ var fontFamily = {
388
+ sans: ["Inter", "sans-serif"],
389
+ emoji: [
390
+ "Twemoji Mozilla",
391
+ "Apple Color Emoji",
392
+ "Segoe UI Emoji",
393
+ "Segoe UI Symbol",
394
+ "Noto Color Emoji",
395
+ "EmojiOne Color",
396
+ "Android Emoji",
397
+ "sans-serif"
398
+ ]
399
+ };
387
400
  var fontWeight = {
388
401
  normal: "400",
389
402
  medium: "500",
@@ -397,6 +410,7 @@ export {
397
410
  boxShadow,
398
411
  breakpoints,
399
412
  f1Colors,
413
+ fontFamily,
400
414
  fontSize,
401
415
  fontWeight,
402
416
  interactiveHeights,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens/borderRadius.ts","../src/tokens/breakpoints.ts","../src/tokens/colors.ts","../src/tokens/shadows.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["/**\n * Border radius scale.\n *\n * ## Usage convention for interactive components\n *\n * Interactive elements (buttons, toggle items, segments) follow a size-based mapping\n * derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`:\n *\n * sm → rounded-sm (0.5rem)\n * md → rounded (0.625rem, DEFAULT)\n * lg → rounded-md (0.75rem)\n *\n * When a component has a container that wraps interactive elements (e.g. a segmented\n * control track, a button group background), the container uses one step up from the\n * inner element so the pill fits visually with the internal padding:\n *\n * inner sm → container rounded (DEFAULT)\n * inner md → container rounded-md\n * inner lg → container rounded-lg\n */\nexport const borderRadius = {\n none: \"0px\",\n \"2xs\": \"0.25rem\",\n xs: \"0.375rem\",\n sm: \"0.5rem\",\n DEFAULT: \"0.625rem\",\n md: \"0.75rem\",\n lg: \"0.875rem\",\n xl: \"1rem\",\n \"2xl\": \"1.25rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\",\n}\n","export const breakpoints = {\n md: 900,\n lg: 1200,\n xl: 1440,\n}\n","export const baseColors = {\n white: {\n 3: \"0 0% 100% / 0.03\",\n 5: \"0 0% 100% / 0.05\",\n 10: \"0 0% 100% / 0.1\",\n 20: \"0 0% 100% / 0.2\",\n 30: \"0 0% 100% / 0.3\",\n 40: \"0 0% 100% / 0.4\",\n 50: \"0 0% 100% / 0.5\",\n 60: \"0 0% 100% / 0.6\",\n 70: \"0 0% 100% / 0.7\",\n 80: \"0 0% 100% / 0.8\",\n 90: \"0 0% 100% / 0.9\",\n 100: \"0 0% 100%\",\n },\n current: \"currentColor\",\n transparent: \"transparent\",\n grey: {\n 0: \"210 91% 22% / 0.02\",\n 2: \"219 88% 17% / 0.02\",\n 5: \"220 88% 17% / 0.04\",\n 10: \"216 89% 18% / 0.06\",\n 20: \"214 70% 20% / 0.1\",\n 30: \"213 87% 15% / 0.20\",\n 40: \"219 97% 15% / 0.45\",\n 50: \"217 96% 11% / 0.61\",\n 60: \"220 88% 10% / 0.82\",\n 70: \"219 91% 8% / 0.88\",\n 80: \"219 94% 7% / 0.9\",\n 90: \"219 88% 6% / 0.92\",\n 100: \"218 48% 10%\",\n solid: {\n 40: \"219 18% 69%\",\n 50: \"218 14% 45%\",\n },\n },\n lilac: {\n 50: \"340 49% 60%\",\n 60: \"341 34% 50%\",\n 70: \"340 33% 41%\",\n },\n barbie: {\n 50: \"331 84% 63%\",\n 60: \"331 55% 53%\",\n 70: \"330 49% 43%\",\n },\n smoke: {\n 50: \"192 26% 54%\",\n 60: \"192 22% 45%\",\n 70: \"192 22% 37%\",\n },\n army: {\n 50: \"162 44% 33%\",\n 60: \"163 45% 28%\",\n 70: \"162 44% 23%\",\n },\n flubber: {\n 50: \"84 55% 53%\",\n 60: \"84 48% 45%\",\n 70: \"83 48% 33%\",\n },\n indigo: {\n 50: \"239 91% 64%\",\n 60: \"239 59% 54%\",\n 70: \"239 51% 44%\",\n },\n camel: {\n 50: \"25 46% 53%\",\n 60: \"25 42% 44%\",\n 70: \"25 42% 36%\",\n },\n radical: {\n 50: \"348 80% 50%\",\n 60: \"348 80% 42%\",\n 70: \"347 80% 34%\",\n },\n viridian: {\n 50: \"184 92% 35%\",\n 60: \"184 92% 28%\",\n 70: \"184 92% 24%\",\n },\n orange: {\n 50: \"25 95% 53%\",\n 60: \"24 69% 49%\",\n 70: \"24 69% 40%\",\n },\n red: {\n 50: \"5 100% 65%\",\n 60: \"4 61% 49%\",\n 70: \"3 71% 41%\",\n },\n grass: {\n 50: \"160 84% 39%\",\n 60: \"160 85% 33%\",\n 70: \"161 84% 27%\",\n },\n malibu: {\n 50: \"216 90% 65%\",\n 60: \"216 59% 55%\",\n 70: \"216 48% 44%\",\n },\n yellow: {\n 50: \"38 92% 54%\",\n 60: \"38 79% 45%\",\n 70: \"38 80% 36%\",\n },\n purple: {\n 50: \"258 88% 67%\",\n 60: \"258 56% 56%\",\n 70: \"258 43% 46%\",\n },\n} as const\n\nexport type BaseColor = keyof typeof baseColors\n\nexport const f1Colors = {\n foreground: {\n DEFAULT: \"hsl(var(--neutral-100))\",\n secondary: \"hsl(var(--neutral-50))\",\n tertiary: \"hsl(var(--neutral-40))\",\n inverse: {\n DEFAULT: \"hsl(var(--white-100))\",\n secondary: \"hsl(var(--white-80))\",\n },\n disabled: \"hsl(var(--neutral-30))\",\n accent: \"hsl(var(--accent-70))\",\n critical: \"hsl(var(--critical-70))\",\n info: \"hsl(var(--info-70))\",\n warning: \"hsl(var(--warning-70))\",\n positive: \"hsl(var(--positive-70))\",\n selected: \"hsl(var(--selected-70))\",\n },\n background: {\n DEFAULT: \"hsl(var(--neutral-0))\",\n hover: \"hsl(var(--neutral-5))\",\n disabled: \"hsl(var(--neutral-3))\",\n secondary: {\n DEFAULT: \"hsl(var(--neutral-10))\",\n hover: \"hsl(var(--neutral-20))\",\n },\n tertiary: \"hsl(var(--neutral-5))\",\n inverse: {\n DEFAULT: \"hsl(var(--neutral-90))\",\n secondary: \"hsl(var(--white-60))\",\n },\n bold: \"hsl(var(--neutral-90))\",\n accent: {\n DEFAULT: \"hsl(var(--accent-50) / 0.05)\",\n bold: {\n DEFAULT: \"hsl(var(--accent-50))\",\n hover: \"hsl(var(--accent-60))\",\n },\n },\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.3)\",\n hover: \"hsl(var(--promote-50) / 0.4)\",\n bold: \"hsl(var(--promote-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-60))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.1)\",\n secondary: \"hsl(var(--selected-50) / 0.05)\",\n hover: \"hsl(var(--selected-50) / 0.2)\",\n bold: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n },\n overlay: {\n DEFAULT: \"hsl(var(--neutral-40))\",\n },\n },\n border: {\n DEFAULT: \"hsl(var(--neutral-30))\",\n hover: \"hsl(var(--neutral-40))\",\n secondary: \"hsl(var(--neutral-20))\",\n inverse: \"hsl(var(--neutral-0) / 0.2)\",\n bold: \"hsl(var(--neutral-100))\",\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.4)\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.4)\",\n bold: \"hsl(var(--selected-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n },\n icon: {\n DEFAULT: \"hsl(var(--neutral-solid-50))\",\n secondary: \"hsl(var(--neutral-solid-40))\",\n inverse: \"hsl(var(--neutral-0))\",\n bold: \"hsl(var(--neutral-100))\",\n critical: {\n DEFAULT: \"hsl(var(--critical-50))\",\n bold: \"hsl(var(--critical-70))\",\n },\n accent: \"hsl(var(--accent-50))\",\n info: \"hsl(var(--info-50))\",\n warning: \"hsl(var(--warning-50))\",\n positive: \"hsl(var(--positive-50))\",\n promote: \"hsl(var(--promote-50))\",\n selected: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n mood: {\n \"super-negative\": \"hsl(var(--mood-super-negative))\",\n negative: \"hsl(var(--mood-negative))\",\n neutral: \"hsl(var(--mood-neutral))\",\n positive: \"hsl(var(--mood-positive))\",\n \"super-positive\": \"hsl(var(--mood-super-positive))\",\n },\n },\n special: {\n ring: \"hsl(var(--ring))\",\n page: \"hsl(var(--page))\",\n highlight: \"hsl(var(--accent-50))\",\n },\n} as const\n\nexport type F1Color = keyof typeof f1Colors\n","export const boxShadow = {\n DEFAULT: \"0 2px 20px 0 hsl(var(--shadow) / 0.04)\",\n md: \"0 4px 20px 0 hsl(var(--shadow) / 0.08)\",\n lg: \"0 8px 30px 0 hsl(var(--shadow) / 0.12)\",\n xl: \"0 12px 56px 0 hsl(var(--shadow) / 0.16)\",\n none: \"none\",\n} as const\n","import { ThemeConfig } from \"tailwindcss/types/config\"\n\n/**\n * Spacing for the tailwind config\n * Provides scale in relative(rem) and absolute(px) units\n *\n * The pixel scale is used by default.\n * All properties that do not explicitly set to use relative scale, use pixels.\n *\n * Relative scale is used for size definitions, like heights and widths.\n */\n\nexport const absoluteSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"2px\",\n 1: \"4px\",\n 1.5: \"6px\",\n 2: \"8px\",\n 2.5: \"10px\",\n 3: \"12px\",\n 3.5: \"14px\",\n 4: \"16px\",\n 5: \"20px\",\n 6: \"24px\",\n 7: \"28px\",\n 8: \"32px\",\n 9: \"36px\",\n 10: \"40px\",\n 11: \"44px\",\n 12: \"48px\",\n 14: \"56px\",\n 16: \"64px\",\n 18: \"72px\",\n 20: \"80px\",\n 24: \"96px\",\n 28: \"112px\",\n 32: \"128px\",\n 36: \"144px\",\n 40: \"160px\",\n 44: \"176px\",\n 48: \"192px\",\n 52: \"208px\",\n 56: \"224px\",\n 60: \"240px\",\n 64: \"256px\",\n 72: \"288px\",\n 80: \"320px\",\n 96: \"384px\",\n}\n\nexport const relativeSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 11: \"2.75rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 18: \"4.5rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\",\n}\n\n/*\n * Spacing between elements\n * This special scale is used for the gap between common elements.\n * Docs: https://zeroheight.com/6cc527675/p/94c391-spacing/t/3409209197\n */\nexport const betweenSpacing: ThemeConfig[\"spacing\"] = {\n sm: relativeSpacing[1],\n md: relativeSpacing[2],\n lg: relativeSpacing[3],\n xl: relativeSpacing[4],\n}\n\n/*\n * Semantic page-level horizontal padding.\n * Used by page headers, data collections, layouts, and tab navigation.\n */\nexport const pageSpacing: ThemeConfig[\"spacing\"] = {\n page: absoluteSpacing[6], // 24px\n}\n\n/**\n * Standard height scale for interactive components (buttons, inputs, segmented controls, etc.)\n *\n * | Size | Height | Tailwind |\n * |------|--------|---------|\n * | sm | 24px | h-6 |\n * | md | 32px | h-8 |\n * | lg | 40px | h-10 |\n *\n * Derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`.\n * Use this as the reference when building any new interactive component.\n */\nexport const interactiveHeights = {\n sm: absoluteSpacing[6], // 24px\n md: absoluteSpacing[8], // 32px\n lg: absoluteSpacing[10], // 40px\n} as const\n","export const fontSize = {\n xs: { size: \"0.625rem\", lineHeight: \"0.75rem\" },\n sm: { size: \"0.75rem\", lineHeight: \"1rem\" },\n base: { size: \"0.875rem\", lineHeight: \"1.25rem\", letterSpacing: \"-0.005em\" },\n lg: { size: \"1rem\", lineHeight: \"1.5rem\", letterSpacing: \"-0.01em\" },\n xl: { size: \"1.125rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"2xl\": { size: \"1.375rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"3xl\": { size: \"1.625rem\", lineHeight: \"2rem\", letterSpacing: \"-0.01em\" },\n \"4xl\": { size: \"2.25rem\", lineHeight: \"2.5rem\", letterSpacing: \"-0.02em\" },\n} as const\n\nexport const fontWeight = {\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n} as const\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/tokens/borderRadius.ts","../src/tokens/breakpoints.ts","../src/tokens/colors.ts","../src/tokens/shadows.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["/**\n * Border radius scale.\n *\n * ## Usage convention for interactive components\n *\n * Interactive elements (buttons, toggle items, segments) follow a size-based mapping\n * derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`:\n *\n * sm → rounded-sm (0.5rem)\n * md → rounded (0.625rem, DEFAULT)\n * lg → rounded-md (0.75rem)\n *\n * When a component has a container that wraps interactive elements (e.g. a segmented\n * control track, a button group background), the container uses one step up from the\n * inner element so the pill fits visually with the internal padding:\n *\n * inner sm → container rounded (DEFAULT)\n * inner md → container rounded-md\n * inner lg → container rounded-lg\n */\nexport const borderRadius = {\n none: \"0px\",\n \"2xs\": \"0.25rem\",\n xs: \"0.375rem\",\n sm: \"0.5rem\",\n DEFAULT: \"0.625rem\",\n md: \"0.75rem\",\n lg: \"0.875rem\",\n xl: \"1rem\",\n \"2xl\": \"1.25rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\",\n}\n","export const breakpoints = {\n md: 900,\n lg: 1200,\n xl: 1440,\n}\n","export const baseColors = {\n white: {\n 3: \"0 0% 100% / 0.03\",\n 5: \"0 0% 100% / 0.05\",\n 10: \"0 0% 100% / 0.1\",\n 20: \"0 0% 100% / 0.2\",\n 30: \"0 0% 100% / 0.3\",\n 40: \"0 0% 100% / 0.4\",\n 50: \"0 0% 100% / 0.5\",\n 60: \"0 0% 100% / 0.6\",\n 70: \"0 0% 100% / 0.7\",\n 80: \"0 0% 100% / 0.8\",\n 90: \"0 0% 100% / 0.9\",\n 100: \"0 0% 100%\",\n },\n current: \"currentColor\",\n transparent: \"transparent\",\n grey: {\n 0: \"210 91% 22% / 0.02\",\n 2: \"219 88% 17% / 0.02\",\n 5: \"220 88% 17% / 0.04\",\n 10: \"216 89% 18% / 0.06\",\n 20: \"214 70% 20% / 0.1\",\n 30: \"213 87% 15% / 0.20\",\n 40: \"219 97% 15% / 0.45\",\n 50: \"217 96% 11% / 0.61\",\n 60: \"220 88% 10% / 0.82\",\n 70: \"219 91% 8% / 0.88\",\n 80: \"219 94% 7% / 0.9\",\n 90: \"219 88% 6% / 0.92\",\n 100: \"218 48% 10%\",\n solid: {\n 40: \"219 18% 69%\",\n 50: \"218 14% 45%\",\n },\n },\n lilac: {\n 50: \"340 49% 60%\",\n 60: \"341 34% 50%\",\n 70: \"340 33% 41%\",\n },\n barbie: {\n 50: \"331 84% 63%\",\n 60: \"331 55% 53%\",\n 70: \"330 49% 43%\",\n },\n smoke: {\n 50: \"192 26% 54%\",\n 60: \"192 22% 45%\",\n 70: \"192 22% 37%\",\n },\n army: {\n 50: \"162 44% 33%\",\n 60: \"163 45% 28%\",\n 70: \"162 44% 23%\",\n },\n flubber: {\n 50: \"84 55% 53%\",\n 60: \"84 48% 45%\",\n 70: \"83 48% 33%\",\n },\n indigo: {\n 50: \"239 91% 64%\",\n 60: \"239 59% 54%\",\n 70: \"239 51% 44%\",\n },\n camel: {\n 50: \"25 46% 53%\",\n 60: \"25 42% 44%\",\n 70: \"25 42% 36%\",\n },\n radical: {\n 50: \"348 80% 50%\",\n 60: \"348 80% 42%\",\n 70: \"347 80% 34%\",\n },\n viridian: {\n 50: \"184 92% 35%\",\n 60: \"184 92% 28%\",\n 70: \"184 92% 24%\",\n },\n orange: {\n 50: \"25 95% 53%\",\n 60: \"24 69% 49%\",\n 70: \"24 69% 40%\",\n },\n red: {\n 50: \"5 100% 65%\",\n 60: \"4 61% 49%\",\n 70: \"3 71% 41%\",\n },\n grass: {\n 50: \"160 84% 39%\",\n 60: \"160 85% 33%\",\n 70: \"161 84% 27%\",\n },\n malibu: {\n 50: \"216 90% 65%\",\n 60: \"216 59% 55%\",\n 70: \"216 48% 44%\",\n },\n yellow: {\n 50: \"38 92% 54%\",\n 60: \"38 79% 45%\",\n 70: \"38 80% 36%\",\n },\n purple: {\n 50: \"258 88% 67%\",\n 60: \"258 56% 56%\",\n 70: \"258 43% 46%\",\n },\n} as const\n\nexport type BaseColor = keyof typeof baseColors\n\nexport const f1Colors = {\n foreground: {\n DEFAULT: \"hsl(var(--neutral-100))\",\n secondary: \"hsl(var(--neutral-50))\",\n tertiary: \"hsl(var(--neutral-40))\",\n inverse: {\n DEFAULT: \"hsl(var(--white-100))\",\n secondary: \"hsl(var(--white-80))\",\n },\n disabled: \"hsl(var(--neutral-30))\",\n accent: \"hsl(var(--accent-70))\",\n critical: \"hsl(var(--critical-70))\",\n info: \"hsl(var(--info-70))\",\n warning: \"hsl(var(--warning-70))\",\n positive: \"hsl(var(--positive-70))\",\n selected: \"hsl(var(--selected-70))\",\n },\n background: {\n DEFAULT: \"hsl(var(--neutral-0))\",\n hover: \"hsl(var(--neutral-5))\",\n disabled: \"hsl(var(--neutral-3))\",\n secondary: {\n DEFAULT: \"hsl(var(--neutral-10))\",\n hover: \"hsl(var(--neutral-20))\",\n },\n tertiary: \"hsl(var(--neutral-5))\",\n inverse: {\n DEFAULT: \"hsl(var(--neutral-90))\",\n secondary: \"hsl(var(--white-60))\",\n },\n bold: \"hsl(var(--neutral-90))\",\n accent: {\n DEFAULT: \"hsl(var(--accent-50) / 0.05)\",\n bold: {\n DEFAULT: \"hsl(var(--accent-50))\",\n hover: \"hsl(var(--accent-60))\",\n },\n },\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.3)\",\n hover: \"hsl(var(--promote-50) / 0.4)\",\n bold: \"hsl(var(--promote-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-60))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.1)\",\n secondary: \"hsl(var(--selected-50) / 0.05)\",\n hover: \"hsl(var(--selected-50) / 0.2)\",\n bold: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n },\n overlay: {\n DEFAULT: \"hsl(var(--neutral-40))\",\n },\n },\n border: {\n DEFAULT: \"hsl(var(--neutral-30))\",\n hover: \"hsl(var(--neutral-40))\",\n secondary: \"hsl(var(--neutral-20))\",\n inverse: \"hsl(var(--neutral-0) / 0.2)\",\n bold: \"hsl(var(--neutral-100))\",\n promote: {\n DEFAULT: \"hsl(var(--promote-50) / 0.4)\",\n },\n selected: {\n DEFAULT: \"hsl(var(--selected-50) / 0.4)\",\n bold: \"hsl(var(--selected-50))\",\n },\n critical: {\n DEFAULT: \"hsl(var(--critical-50) / 0.1)\",\n bold: \"hsl(var(--critical-50))\",\n },\n warning: {\n DEFAULT: \"hsl(var(--warning-50) / 0.1)\",\n bold: \"hsl(var(--warning-50))\",\n },\n info: {\n DEFAULT: \"hsl(var(--info-50) / 0.1)\",\n bold: \"hsl(var(--info-50))\",\n },\n positive: {\n DEFAULT: \"hsl(var(--positive-50) / 0.1)\",\n bold: \"hsl(var(--positive-50))\",\n },\n },\n icon: {\n DEFAULT: \"hsl(var(--neutral-solid-50))\",\n secondary: \"hsl(var(--neutral-solid-40))\",\n inverse: \"hsl(var(--neutral-0))\",\n bold: \"hsl(var(--neutral-100))\",\n critical: {\n DEFAULT: \"hsl(var(--critical-50))\",\n bold: \"hsl(var(--critical-70))\",\n },\n accent: \"hsl(var(--accent-50))\",\n info: \"hsl(var(--info-50))\",\n warning: \"hsl(var(--warning-50))\",\n positive: \"hsl(var(--positive-50))\",\n promote: \"hsl(var(--promote-50))\",\n selected: {\n DEFAULT: \"hsl(var(--selected-60))\",\n hover: \"hsl(var(--selected-70))\",\n },\n mood: {\n \"super-negative\": \"hsl(var(--mood-super-negative))\",\n negative: \"hsl(var(--mood-negative))\",\n neutral: \"hsl(var(--mood-neutral))\",\n positive: \"hsl(var(--mood-positive))\",\n \"super-positive\": \"hsl(var(--mood-super-positive))\",\n },\n },\n special: {\n ring: \"hsl(var(--ring))\",\n page: \"hsl(var(--page))\",\n highlight: \"hsl(var(--accent-50))\",\n },\n} as const\n\nexport type F1Color = keyof typeof f1Colors\n","export const boxShadow = {\n DEFAULT: \"0 2px 20px 0 hsl(var(--shadow) / 0.04)\",\n md: \"0 4px 20px 0 hsl(var(--shadow) / 0.08)\",\n lg: \"0 8px 30px 0 hsl(var(--shadow) / 0.12)\",\n xl: \"0 12px 56px 0 hsl(var(--shadow) / 0.16)\",\n none: \"none\",\n} as const\n","import { ThemeConfig } from \"tailwindcss/types/config\"\n\n/**\n * Spacing for the tailwind config\n * Provides scale in relative(rem) and absolute(px) units\n *\n * The pixel scale is used by default.\n * All properties that do not explicitly set to use relative scale, use pixels.\n *\n * Relative scale is used for size definitions, like heights and widths.\n */\n\nexport const absoluteSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"2px\",\n 1: \"4px\",\n 1.5: \"6px\",\n 2: \"8px\",\n 2.5: \"10px\",\n 3: \"12px\",\n 3.5: \"14px\",\n 4: \"16px\",\n 5: \"20px\",\n 6: \"24px\",\n 7: \"28px\",\n 8: \"32px\",\n 9: \"36px\",\n 10: \"40px\",\n 11: \"44px\",\n 12: \"48px\",\n 14: \"56px\",\n 16: \"64px\",\n 18: \"72px\",\n 20: \"80px\",\n 24: \"96px\",\n 28: \"112px\",\n 32: \"128px\",\n 36: \"144px\",\n 40: \"160px\",\n 44: \"176px\",\n 48: \"192px\",\n 52: \"208px\",\n 56: \"224px\",\n 60: \"240px\",\n 64: \"256px\",\n 72: \"288px\",\n 80: \"320px\",\n 96: \"384px\",\n}\n\nexport const relativeSpacing: ThemeConfig[\"spacing\"] = {\n px: \"1px\",\n 0: \"0px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 11: \"2.75rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 18: \"4.5rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\",\n}\n\n/*\n * Spacing between elements\n * This special scale is used for the gap between common elements.\n * Docs: https://zeroheight.com/6cc527675/p/94c391-spacing/t/3409209197\n */\nexport const betweenSpacing: ThemeConfig[\"spacing\"] = {\n sm: relativeSpacing[1],\n md: relativeSpacing[2],\n lg: relativeSpacing[3],\n xl: relativeSpacing[4],\n}\n\n/*\n * Semantic page-level horizontal padding.\n * Used by page headers, data collections, layouts, and tab navigation.\n */\nexport const pageSpacing: ThemeConfig[\"spacing\"] = {\n page: absoluteSpacing[6], // 24px\n}\n\n/**\n * Standard height scale for interactive components (buttons, inputs, segmented controls, etc.)\n *\n * | Size | Height | Tailwind |\n * |------|--------|---------|\n * | sm | 24px | h-6 |\n * | md | 32px | h-8 |\n * | lg | 40px | h-10 |\n *\n * Derived from `buttonSizeVariants` in `packages/react/src/ui/Action/variants.ts`.\n * Use this as the reference when building any new interactive component.\n */\nexport const interactiveHeights = {\n sm: absoluteSpacing[6], // 24px\n md: absoluteSpacing[8], // 32px\n lg: absoluteSpacing[10], // 40px\n} as const\n","export const fontSize = {\n xs: { size: \"0.625rem\", lineHeight: \"0.75rem\" },\n sm: { size: \"0.75rem\", lineHeight: \"1rem\" },\n base: { size: \"0.875rem\", lineHeight: \"1.25rem\", letterSpacing: \"-0.005em\" },\n lg: { size: \"1rem\", lineHeight: \"1.5rem\", letterSpacing: \"-0.01em\" },\n xl: { size: \"1.125rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"2xl\": { size: \"1.375rem\", lineHeight: \"1.75rem\", letterSpacing: \"-0.01em\" },\n \"3xl\": { size: \"1.625rem\", lineHeight: \"2rem\", letterSpacing: \"-0.01em\" },\n \"4xl\": { size: \"2.25rem\", lineHeight: \"2.5rem\", letterSpacing: \"-0.02em\" },\n} as const\n\n/**\n * Font stacks.\n *\n * `emoji` is for surfaces that render an emoji **on its own** — a picker cell, a\n * reaction pill, a channel icon. It must NOT be applied to prose: `*`, `#`, the\n * digits and `™` are technically emoji in Unicode, so an emoji font over mixed\n * text turns numbers and symbols into pictures. Body copy relies on the\n * browser's own per-character fallback instead, which already picks the system\n * emoji font for emoji codepoints.\n *\n * \"Twemoji Mozilla\" leads because Firefox ships it and it is the only stack\n * entry that carries flag glyphs on Windows (Segoe UI Emoji has none, so\n * Chromium there falls back to the two regional-indicator letters).\n */\nexport const fontFamily = {\n sans: [\"Inter\", \"sans-serif\"],\n emoji: [\n \"Twemoji Mozilla\",\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\",\n \"EmojiOne Color\",\n \"Android Emoji\",\n \"sans-serif\",\n ],\n} as const\n\nexport const fontWeight = {\n normal: \"400\",\n medium: \"500\",\n semibold: \"600\",\n} as const\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,11 @@
1
1
  {
2
2
  "name": "@factorialco/f0-core",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
+ "repository": {
5
+ "type": "git",
6
+ "url": "git+https://github.com/factorialco/f0.git",
7
+ "directory": "packages/core"
8
+ },
4
9
  "description": "Core tokens and utilities for F0 Design System",
5
10
  "main": "dist/index.js",
6
11
  "module": "dist/index.mjs",
@@ -9,6 +9,34 @@ export const fontSize = {
9
9
  "4xl": { size: "2.25rem", lineHeight: "2.5rem", letterSpacing: "-0.02em" },
10
10
  } as const
11
11
 
12
+ /**
13
+ * Font stacks.
14
+ *
15
+ * `emoji` is for surfaces that render an emoji **on its own** — a picker cell, a
16
+ * reaction pill, a channel icon. It must NOT be applied to prose: `*`, `#`, the
17
+ * digits and `™` are technically emoji in Unicode, so an emoji font over mixed
18
+ * text turns numbers and symbols into pictures. Body copy relies on the
19
+ * browser's own per-character fallback instead, which already picks the system
20
+ * emoji font for emoji codepoints.
21
+ *
22
+ * "Twemoji Mozilla" leads because Firefox ships it and it is the only stack
23
+ * entry that carries flag glyphs on Windows (Segoe UI Emoji has none, so
24
+ * Chromium there falls back to the two regional-indicator letters).
25
+ */
26
+ export const fontFamily = {
27
+ sans: ["Inter", "sans-serif"],
28
+ emoji: [
29
+ "Twemoji Mozilla",
30
+ "Apple Color Emoji",
31
+ "Segoe UI Emoji",
32
+ "Segoe UI Symbol",
33
+ "Noto Color Emoji",
34
+ "EmojiOne Color",
35
+ "Android Emoji",
36
+ "sans-serif",
37
+ ],
38
+ } as const
39
+
12
40
  export const fontWeight = {
13
41
  normal: "400",
14
42
  medium: "500",
package/tailwind.ts CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  pageSpacing,
10
10
  relativeSpacing,
11
11
  } from "./src/tokens/spacing"
12
- import { fontSize, fontWeight } from "./src/tokens/typography"
12
+ import { fontFamily, fontSize, fontWeight } from "./src/tokens/typography"
13
13
 
14
14
  export const baseConfig: Omit<Config, "content"> = {
15
15
  darkMode: "class",
@@ -27,7 +27,8 @@ export const baseConfig: Omit<Config, "content"> = {
27
27
  },
28
28
  colors: baseColors,
29
29
  fontFamily: {
30
- sans: ["Inter", "sans-serif"],
30
+ sans: [...fontFamily.sans],
31
+ emoji: [...fontFamily.emoji],
31
32
  },
32
33
  fontWeight,
33
34
  fontSize: Object.fromEntries(