@trypattern/sdk 0.1.26 → 0.1.28

package/dist/components/ButtonBody.js

@@ -3,7 +3,7 @@ import { Button as BaseButton } from '@base-ui/react/button';
 import { Link as RouterLink } from 'react-router';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, fontWeights, iconSizes, motion, shadows } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing } from "./controlLook.js";
+import { buttonCorners, controlSizes, focusRing } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact, textOf } from "./interaction.js";
 import { Kbd } from "./Kbd.js";
@@ -14,7 +14,7 @@ export function ButtonBody({ children, variant = 'primary', tone = variant === '
         interact({ primitive: 'Button', event: 'click', label: textOf(children) });
         onClick?.();
     };
-    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
+    const className = stylex.props(styles.button, controlSizes[size], buttonCorners[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
     const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isIconPinned && styles.pinnedContent, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut, isIconPinned && styles.labelBetweenPins), children: children }), isIconPinned ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(pinBalances[size]) })) : null, trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
     if (href !== undefined) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));

package/dist/components/IconButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
-import { colors, controls, radii } from "../theme/tokens.stylex.js";
+import { colors, controls, corners } from "../theme/tokens.stylex.js";
 import { focusRing, transparentLook } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
@@ -28,26 +28,26 @@ const sizes = stylex.create({
     xs: {
         width: controls.heightXs,
         height: controls.heightXs,
-        borderRadius: radii.sm
+        borderRadius: corners.buttonXs
     },
     sm: {
         width: controls.heightSm,
         height: controls.heightSm,
-        borderRadius: radii.md
+        borderRadius: corners.buttonSm
     },
     md: {
         width: controls.heightMd,
         height: controls.heightMd,
-        borderRadius: radii.md
+        borderRadius: corners.buttonMd
     },
     lg: {
         width: controls.heightLg,
         height: controls.heightLg,
-        borderRadius: radii.lg
+        borderRadius: corners.buttonLg
     },
     xl: {
         width: controls.heightXl,
         height: controls.heightXl,
-        borderRadius: radii.lg
+        borderRadius: corners.buttonXl
     }
 });

package/dist/components/Select.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import * as stylex from '@stylexjs/stylex';
 import { borders, colors, controls, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
-import { controlSizes } from "./controlLook.js";
+import { fieldCorners, controlSizes } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { Popup } from "./Popup.js";
@@ -13,7 +13,7 @@ export function Select({ label, value, options, size = 'md', disabled = false, o
                 return;
             interact({ primitive: 'Select', event: 'change', label });
             onChange(next);
-        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
+        }, children: [_jsxs(BaseSelect.Trigger, { "aria-label": label, className: (state) => stylex.props(styles.trigger, controlSizes[size], fieldCorners[size], triggerPaddings[size], styles.triggerLook, !disabled && styles.hoverable, state.open && styles.triggerOpen, disabled && styles.disabled, style).className, children: [_jsx("span", { ...stylex.props(styles.values), children: options.map((option) => (_jsx("span", { "aria-hidden": option.value !== value, ...stylex.props(styles.value, option.value !== value && styles.valueHidden), children: option.label }, option.value))) }), _jsx(BaseSelect.Icon, { className: stylex.props(styles.chevron).className, children: _jsx(Icon, { name: "chevronUpDown", size: size }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseSelect.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "select", isOpen: state.open, transitionStatus: state.transitionStatus })), children: options.map((option) => (_jsxs(BaseSelect.Item, { value: option.value, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "select", isHighlighted: state.highlighted })), children: [_jsx("span", { ...stylex.props(styles.indicator), children: _jsx(BaseSelect.ItemIndicator, { className: stylex.props(styles.check).className, children: _jsx(Icon, { name: "check" }) }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value))) }) }) })] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const styles = stylex.create({

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/components/TextField.js

@@ -4,7 +4,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
 import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
 import { Icon } from "./Icon.js";
-import { controlSizes } from "./controlLook.js";
+import { fieldCorners, controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
 export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
     const isInvalid = error !== undefined;
@@ -15,7 +15,7 @@ export function TextField({ label, isLabelHidden = false, description, error, on
                             if (event.currentTarget.value !== valueOnFocus.current) {
                                 interact({ primitive: 'TextField', event: 'change', label });
                             }
-                        }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).className })] }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
+                        }, className: stylex.props(styles.input, controlSizes[size], fieldCorners[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).className })] }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;

package/dist/components/controlLook.d.ts

@@ -6,7 +6,6 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
     readonly sm: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
@@ -14,7 +13,6 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
     readonly md: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
@@ -22,7 +20,6 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
     readonly lg: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
@@ -30,7 +27,6 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
     readonly xl: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
@@ -38,6 +34,39 @@ export declare const controlSizes: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+}>;
+export declare const buttonCorners: Readonly<{
+    readonly xs: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+}>;
+export declare const fieldCorners: Readonly<{
+    readonly xs: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly xl: Readonly<{
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
     }>;
 }>;

package/dist/components/controlLook.js

@@ -1,47 +1,56 @@
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, controls, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, corners, motion } from "../theme/tokens.stylex.js";
 export const controlSizes = stylex.create({
     xs: {
         gap: controls.gapXs,
         height: controls.heightXs,
         paddingInline: controls.paddingXs,
         fontSize: controls.fontSizeXs,
-        lineHeight: controls.lineHeightXs,
-        borderRadius: radii.sm
+        lineHeight: controls.lineHeightXs
     },
     sm: {
         gap: controls.gapSm,
         height: controls.heightSm,
         paddingInline: controls.paddingSm,
         fontSize: controls.fontSizeSm,
-        lineHeight: controls.lineHeightSm,
-        borderRadius: radii.md
+        lineHeight: controls.lineHeightSm
     },
     md: {
         gap: controls.gapMd,
         height: controls.heightMd,
         paddingInline: controls.paddingMd,
         fontSize: controls.fontSizeMd,
-        lineHeight: controls.lineHeightMd,
-        borderRadius: radii.md
+        lineHeight: controls.lineHeightMd
     },
     lg: {
         gap: controls.gapLg,
         height: controls.heightLg,
         paddingInline: controls.paddingLg,
         fontSize: controls.fontSizeLg,
-        lineHeight: controls.lineHeightLg,
-        borderRadius: radii.lg
+        lineHeight: controls.lineHeightLg
     },
     xl: {
         gap: controls.gapXl,
         height: controls.heightXl,
         paddingInline: controls.paddingXl,
         fontSize: controls.fontSizeXl,
-        lineHeight: controls.lineHeightXl,
-        borderRadius: radii.lg
+        lineHeight: controls.lineHeightXl
     }
 });
+export const buttonCorners = stylex.create({
+    xs: { borderRadius: corners.buttonXs },
+    sm: { borderRadius: corners.buttonSm },
+    md: { borderRadius: corners.buttonMd },
+    lg: { borderRadius: corners.buttonLg },
+    xl: { borderRadius: corners.buttonXl }
+});
+export const fieldCorners = stylex.create({
+    xs: { borderRadius: corners.fieldXs },
+    sm: { borderRadius: corners.fieldSm },
+    md: { borderRadius: corners.fieldMd },
+    lg: { borderRadius: corners.fieldLg },
+    xl: { borderRadius: corners.fieldXl }
+});
 export const transparentLook = stylex.create({
     rest: {
         color: colors.secondaryForeground,

package/dist/rules/checkAllFiles.js

@@ -340,6 +340,7 @@ const SRC_ENTRY_FILES = new Set([
 ]);
 const SRC_FOLDER_PATTERNS = [
     /^theme\/(theme|icons)\.ts$/,
+    /^theme\/colors\.stylex\.ts$/,
     /^lib\/[a-z][A-Za-z]*\.ts$/,
     /^hooks\/use[A-Z][A-Za-z]*\.ts$/,
     /^screens\/[A-Z][A-Za-z]*Screen\.tsx$/,

package/dist/rules/lintPlugin.js

@@ -1,6 +1,7 @@
 import { ACTIONS_WHERE_MESSAGE, COMPONENT_FIRST_MESSAGE, COMPONENT_FILE_NAME_MESSAGE, DARK_MODE_IN_TOKENS_MESSAGE, DEV_ONLY_SIGN_IN_MESSAGE, EXPLICIT_ACCESS_MESSAGE, USE_BREAKPOINTS_MESSAGE, HOVER_USES_HIGHLIGHT_MESSAGE, NO_CLASSNAME_STRINGS_MESSAGE, NO_COMMENTS_MESSAGE, NO_INTERACTIVE_TRANSITION_MESSAGE, NO_POINTER_CURSOR_MESSAGE, NO_ROUTE_DATA_APIS_MESSAGE, ROUTES_UNDER_APP_LAYOUT_MESSAGE, SCROLL_VIEW_ONLY_MESSAGE, SELECTABLE_ONLY_MESSAGE, STATE_VIA_HOOKS_MESSAGE, MODEL_BY_NAME_MESSAGE, MODEL_MEMBERS_MESSAGE, PURE_ACTIONS_MESSAGE, PURE_GETTERS_MESSAGE, USE_MODEL_WHERE_MESSAGE, CLASSES_NOT_FACTORIES_MESSAGE, STORES_IN_APP_MESSAGE, TYPED_STYLE_PROP_MESSAGE, USE_COLOR_TOKEN_MESSAGE, USE_FONT_TOKEN_MESSAGE, USE_LINK_MESSAGE, USE_PRIMITIVES_MESSAGE, USE_IMAGE_MESSAGE, NO_WIDGET_ROLES_MESSAGE, NO_CLICK_ON_STATIC_MESSAGE, PRIMITIVE_NAMES_MESSAGE, USE_SPACE_TOKENS_MESSAGE, USE_SIZE_TOKENS_MESSAGE, TEXT_VIA_TEXT_MESSAGE, TEXT_ELEMENTS_MESSAGE, LOOSE_TEXT_MESSAGE, COMPOSE_IN_SCREENS_MESSAGE, NO_HOVER_IN_APP_MESSAGE } from "./messages.js";
 const TOKENS_FILE = 'src/theme/tokens.stylex.ts';
 const APP_THEME_FILE = 'src/theme/theme.ts';
+const APP_COLORS_FILE = 'src/theme/colors.stylex.ts';
 const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
 const SELECTABLE_FILE = 'src/components/Text.tsx';
 const PRIMITIVE_ELEMENTS = new Set([
@@ -322,8 +323,11 @@ const noPointerCursor = styleRule((declarations) => declarations
     .filter((d) => d.property === 'cursor' && stringValue(d.value) === 'pointer')
     .map((d) => ({ location: d.location, message: NO_POINTER_CURSOR_MESSAGE })));
 const useTokens = styleRule((declarations, context) => {
-    if (inFile(context, TOKENS_FILE) || inFile(context, APP_THEME_FILE))
+    if (inFile(context, TOKENS_FILE) ||
+        inFile(context, APP_THEME_FILE) ||
+        inFile(context, APP_COLORS_FILE)) {
         return [];
+    }
     return declarations.flatMap((d) => {
         const raw = stringValue(d.value);
         const isColorProperty = /color$/i.test(d.property) ||

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, corners, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
+type Themeable = typeof colors | typeof radii | typeof corners | 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, corners, 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

@@ -165,6 +165,18 @@ export declare const radii: stylex.VarGroup<Readonly<{
     xxxxl: string;
     full: string;
 }>, symbol>;
+export declare const corners: stylex.VarGroup<Readonly<{
+    buttonXs: string;
+    buttonSm: string;
+    buttonMd: string;
+    buttonLg: string;
+    buttonXl: string;
+    fieldXs: string;
+    fieldSm: string;
+    fieldMd: string;
+    fieldLg: string;
+    fieldXl: string;
+}>, symbol>;
 export declare const fontSizes: stylex.VarGroup<Readonly<{
     captionXs: string;
     captionSm: string;
@@ -174,6 +186,7 @@ export declare const fontSizes: stylex.VarGroup<Readonly<{
     bodyMd: string;
     bodyBase: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -194,6 +207,7 @@ export declare const lineHeights: stylex.VarGroup<Readonly<{
     bodySm: string;
     body: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -203,6 +217,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 +230,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

@@ -165,6 +165,18 @@ export const radii = stylex.defineVars({
     xxxxl: '20px',
     full: '9999px'
 });
+export const corners = stylex.defineVars({
+    buttonXs: radii.sm,
+    buttonSm: radii.md,
+    buttonMd: radii.md,
+    buttonLg: radii.lg,
+    buttonXl: radii.lg,
+    fieldXs: radii.sm,
+    fieldSm: radii.md,
+    fieldMd: radii.md,
+    fieldLg: radii.lg,
+    fieldXl: radii.lg
+});
 export const fontSizes = stylex.defineVars({
     captionXs: '8px',
     captionSm: '10px',
@@ -174,6 +186,7 @@ export const fontSizes = stylex.defineVars({
     bodyMd: '14px',
     bodyBase: '15px',
     bodyLg: '18px',
+    bodyCompact: '15px',
     heading6: '20px',
     heading5: '24px',
     heading4: '28px',
@@ -194,6 +207,7 @@ export const lineHeights = stylex.defineVars({
     bodySm: '20px',
     body: '24px',
     bodyLg: '28px',
+    bodyCompact: '24px',
     heading6: '24px',
     heading5: '32px',
     heading4: '36px',
@@ -203,6 +217,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 +229,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.28",
   "type": "module",
   "files": [
     "dist",