@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.
- package/assets/icons/app/BellOff.svg +3 -0
- package/assets/icons/app/Forward.svg +3 -0
- package/assets/icons/app/reply.svg +1 -1
- package/dist/index.d.mts +19 -1
- package/dist/index.d.ts +19 -1
- package/dist/index.js +15 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -1
- package/src/tokens/typography.ts +28 -0
- package/tailwind.ts +3 -2
|
@@ -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="
|
|
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,
|
package/dist/index.mjs.map
CHANGED
|
@@ -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.
|
|
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",
|
package/src/tokens/typography.ts
CHANGED
|
@@ -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: [
|
|
30
|
+
sans: [...fontFamily.sans],
|
|
31
|
+
emoji: [...fontFamily.emoji],
|
|
31
32
|
},
|
|
32
33
|
fontWeight,
|
|
33
34
|
fontSize: Object.fromEntries(
|