@trypattern/sdk 0.1.26 → 0.1.27

package/dist/components/Text.d.ts

@@ -5,13 +5,14 @@ type TextProps = {
     children: ReactNode;
     variant?: 'hero' | 'display' | 'section' | 'heading' | 'subheading' | 'title' | 'lead' | 'intro' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'heavy';
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';
     isTruncated?: boolean;
     isSelectable?: boolean;
     style?: Placement;
 };
-export declare function Text({ children, variant, tone, align, as, isTruncated, isSelectable, style }: TextProps): import("react").DetailedReactHTMLElement<Readonly<{
+export declare function Text({ children, variant, tone, weight, align, as, isTruncated, isSelectable, style }: TextProps): import("react").DetailedReactHTMLElement<Readonly<{
     className?: string;
     'data-style-src'?: string;
     style?: Readonly<{

package/dist/components/Text.js

@@ -2,8 +2,8 @@ import * as stylex from '@stylexjs/stylex';
 import { createElement } from 'react';
 import { breakpoints, fontSizes, fontWeights, fonts, lineHeights, trackings } from "../theme/tokens.stylex.js";
 import { tones } from "./tones.js";
-export function Text({ children, variant = 'body', tone = 'inherit', align, as = 'span', isTruncated = false, isSelectable = false, style }) {
-    return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
+export function Text({ children, variant = 'body', tone = 'inherit', weight, align, as = 'span', isTruncated = false, isSelectable = false, style }) {
+    return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], weight !== undefined && weights[weight], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
 }
 const styles = stylex.create({
     block: {
@@ -22,11 +22,12 @@ const styles = stylex.create({
 });
 const variants = stylex.create({
     hero: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading1,
             [breakpoints.compact]: fontSizes.heading2
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading1,
             [breakpoints.compact]: lineHeights.heading2
@@ -34,11 +35,12 @@ const variants = stylex.create({
         letterSpacing: trackings.hero
     },
     display: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading2,
             [breakpoints.compact]: fontSizes.heading3
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading2,
             [breakpoints.compact]: lineHeights.heading3
@@ -46,11 +48,12 @@ const variants = stylex.create({
         letterSpacing: trackings.display
     },
     section: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading3,
             [breakpoints.compact]: fontSizes.heading5
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading3,
             [breakpoints.compact]: lineHeights.heading5
@@ -58,14 +61,16 @@ const variants = stylex.create({
         letterSpacing: trackings.section
     },
     heading: {
+        fontFamily: fonts.heading,
         fontSize: fontSizes.heading5,
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: lineHeights.heading5,
         letterSpacing: trackings.heading
     },
     subheading: {
+        fontFamily: fonts.heading,
         fontSize: fontSizes.heading6,
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: lineHeights.heading6
     },
     title: {
@@ -86,23 +91,23 @@ const variants = stylex.create({
     label: {
         fontSize: {
             default: fontSizes.bodySm,
-            [breakpoints.compact]: fontSizes.bodyBase
+            [breakpoints.compact]: fontSizes.bodyCompact
         },
         fontWeight: fontWeights.medium,
         lineHeight: {
             default: lineHeights.bodySm,
-            [breakpoints.compact]: lineHeights.body
+            [breakpoints.compact]: lineHeights.bodyCompact
         }
     },
     body: {
         fontSize: {
             default: fontSizes.bodySm,
-            [breakpoints.compact]: fontSizes.bodyBase
+            [breakpoints.compact]: fontSizes.bodyCompact
         },
         fontWeight: fontWeights.normal,
         lineHeight: {
             default: lineHeights.bodySm,
-            [breakpoints.compact]: lineHeights.body
+            [breakpoints.compact]: lineHeights.bodyCompact
         }
     },
     caption: {
@@ -117,6 +122,13 @@ const variants = stylex.create({
         lineHeight: lineHeights.bodySm
     }
 });
+const weights = stylex.create({
+    normal: { fontWeight: fontWeights.normal },
+    medium: { fontWeight: fontWeights.medium },
+    semibold: { fontWeight: fontWeights.semibold },
+    bold: { fontWeight: fontWeights.bold },
+    heavy: { fontWeight: fontWeights.heavy }
+});
 const alignments = stylex.create({
     start: { textAlign: 'start' },
     center: { textAlign: 'center' },

package/dist/start.d.ts

@@ -5,8 +5,8 @@ import type { IconDrawing } from './components/icons.ts';
 import type { Interaction } from './components/interaction.ts';
 import type { ReactApp } from './hooks/appContext.ts';
 import type { Tables } from './table.ts';
-import { borders, colors, controls, fontSizes, fonts, iconSizes, lineHeights, radii, shadows, space, widths } from './theme/tokens.stylex.ts';
-type Themeable = typeof colors | typeof radii | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof lineHeights | typeof controls | typeof iconSizes | typeof borders | typeof widths;
+import { borders, colors, controls, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
+type Themeable = typeof colors | typeof radii | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof fontWeights | typeof lineHeights | typeof trackings | typeof controls | typeof iconSizes | typeof borders | typeof widths;
 export type StartOptions = {
     theme?: readonly Theme<Themeable>[];
     icons?: Readonly<Record<string, IconDrawing>>;

package/dist/start.js

@@ -12,7 +12,7 @@ import { manualClock, realClock } from "./clock.js";
 import { Gate } from "./gate.js";
 import { AppProvider } from "./hooks/appContext.js";
 import { routeObjects } from "./routes.js";
-import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, widths } from "./theme/tokens.stylex.js";
+import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
 const TEST_SEED = 'patternSeed';
 const INLINE_DATA_ID = 'pattern-data';
 const TEST_ADMINS = 'patternAdmins';

package/dist/theme/tokens.stylex.d.ts

@@ -174,6 +174,7 @@ export declare const fontSizes: stylex.VarGroup<Readonly<{
     bodyMd: string;
     bodyBase: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -194,6 +195,7 @@ export declare const lineHeights: stylex.VarGroup<Readonly<{
     bodySm: string;
     body: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -203,6 +205,7 @@ export declare const lineHeights: stylex.VarGroup<Readonly<{
 }>, symbol>;
 export declare const fonts: stylex.VarGroup<Readonly<{
     sans: string;
+    heading: string;
     mono: string;
 }>, symbol>;
 export declare const fontFeatures: stylex.VarGroup<Readonly<{
@@ -215,6 +218,8 @@ export declare const fontWeights: stylex.VarGroup<Readonly<{
     medium: string;
     semibold: string;
     bold: string;
+    heavy: string;
+    heading: string;
 }>, symbol>;
 export declare const shadows: stylex.VarGroup<Readonly<{
     border: string;

package/dist/theme/tokens.stylex.js

@@ -174,6 +174,7 @@ export const fontSizes = stylex.defineVars({
     bodyMd: '14px',
     bodyBase: '15px',
     bodyLg: '18px',
+    bodyCompact: '15px',
     heading6: '20px',
     heading5: '24px',
     heading4: '28px',
@@ -194,6 +195,7 @@ export const lineHeights = stylex.defineVars({
     bodySm: '20px',
     body: '24px',
     bodyLg: '28px',
+    bodyCompact: '24px',
     heading6: '24px',
     heading5: '32px',
     heading4: '36px',
@@ -203,6 +205,7 @@ export const lineHeights = stylex.defineVars({
 });
 export const fonts = stylex.defineVars({
     sans: '"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    heading: '"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, monospace'
 });
 export const fontFeatures = stylex.defineVars({
@@ -214,7 +217,9 @@ export const fontWeights = stylex.defineVars({
     semimedium: '450',
     medium: '500',
     semibold: '600',
-    bold: '700'
+    bold: '700',
+    heavy: '800',
+    heading: '500'
 });
 export const shadows = stylex.defineVars({
     border: '0 0 0 1px light-dark(#00000012, #ffffff12)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "files": [
     "dist",