@factorialco/f0-core 2.1.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/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
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":";AAoBO,IAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;;;AChCO,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;ACJO,IAAM,aAAa;AAAA,EACxB,OAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,KAAK;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACF;AAIO,IAAM,WAAW;AAAA,EACtB,YAAY;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,MACJ,kBAAkB;AAAA,MAClB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,kBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;;;ACxPO,IAAM,YAAY;AAAA,EACvB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;;;ACMO,IAAM,kBAA0C;AAAA,EACrD,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,kBAA0C;AAAA,EACrD,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,KAAK;AAAA,EACL,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAOO,IAAM,iBAAyC;AAAA,EACpD,IAAI,gBAAgB,CAAC;AAAA,EACrB,IAAI,gBAAgB,CAAC;AAAA,EACrB,IAAI,gBAAgB,CAAC;AAAA,EACrB,IAAI,gBAAgB,CAAC;AACvB;AAMO,IAAM,cAAsC;AAAA,EACjD,MAAM,gBAAgB,CAAC;AAAA;AACzB;AAcO,IAAM,qBAAqB;AAAA,EAChC,IAAI,gBAAgB,CAAC;AAAA;AAAA,EACrB,IAAI,gBAAgB,CAAC;AAAA;AAAA,EACrB,IAAI,gBAAgB,EAAE;AAAA;AACxB;;;AC9HO,IAAM,WAAW;AAAA,EACtB,IAAI,EAAE,MAAM,YAAY,YAAY,UAAU;AAAA,EAC9C,IAAI,EAAE,MAAM,WAAW,YAAY,OAAO;AAAA,EAC1C,MAAM,EAAE,MAAM,YAAY,YAAY,WAAW,eAAe,WAAW;AAAA,EAC3E,IAAI,EAAE,MAAM,QAAQ,YAAY,UAAU,eAAe,UAAU;AAAA,EACnE,IAAI,EAAE,MAAM,YAAY,YAAY,WAAW,eAAe,UAAU;AAAA,EACxE,OAAO,EAAE,MAAM,YAAY,YAAY,WAAW,eAAe,UAAU;AAAA,EAC3E,OAAO,EAAE,MAAM,YAAY,YAAY,QAAQ,eAAe,UAAU;AAAA,EACxE,OAAO,EAAE,MAAM,WAAW,YAAY,UAAU,eAAe,UAAU;AAC3E;AAEO,IAAM,aAAa;AAAA,EACxB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AACZ;","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(
|