@trypattern/sdk 0.1.27 → 0.1.28
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/components/ButtonBody.js +2 -2
- package/dist/components/IconButton.js +6 -6
- package/dist/components/Select.js +2 -2
- package/dist/components/TextField.js +2 -2
- package/dist/components/controlLook.d.ts +33 -4
- package/dist/components/controlLook.js +20 -11
- package/dist/rules/checkAllFiles.js +1 -0
- package/dist/rules/lintPlugin.js +5 -1
- package/dist/start.d.ts +2 -2
- package/dist/start.js +1 -1
- package/dist/theme/tokens.stylex.d.ts +12 -0
- package/dist/theme/tokens.stylex.js +12 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { Button as BaseButton } from '@base-ui/react/button';
|
|
|
3
3
|
import { Link as RouterLink } from 'react-router';
|
|
4
4
|
import * as stylex from '@stylexjs/stylex';
|
|
5
5
|
import { colors, controls, fontWeights, iconSizes, motion, shadows } from "../theme/tokens.stylex.js";
|
|
6
|
-
import { controlSizes, focusRing } from "./controlLook.js";
|
|
6
|
+
import { buttonCorners, controlSizes, focusRing } from "./controlLook.js";
|
|
7
7
|
import { Icon } from "./Icon.js";
|
|
8
8
|
import { interact, textOf } from "./interaction.js";
|
|
9
9
|
import { Kbd } from "./Kbd.js";
|
|
@@ -14,7 +14,7 @@ export function ButtonBody({ children, variant = 'primary', tone = variant === '
|
|
|
14
14
|
interact({ primitive: 'Button', event: 'click', label: textOf(children) });
|
|
15
15
|
onClick?.();
|
|
16
16
|
};
|
|
17
|
-
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;
|
|
17
|
+
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;
|
|
18
18
|
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] }));
|
|
19
19
|
if (href !== undefined) {
|
|
20
20
|
return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Button as BaseButton } from '@base-ui/react/button';
|
|
3
3
|
import * as stylex from '@stylexjs/stylex';
|
|
4
|
-
import { colors, controls,
|
|
4
|
+
import { colors, controls, corners } from "../theme/tokens.stylex.js";
|
|
5
5
|
import { focusRing, transparentLook } from "./controlLook.js";
|
|
6
6
|
import { Icon } from "./Icon.js";
|
|
7
7
|
import { interact } from "./interaction.js";
|
|
@@ -28,26 +28,26 @@ const sizes = stylex.create({
|
|
|
28
28
|
xs: {
|
|
29
29
|
width: controls.heightXs,
|
|
30
30
|
height: controls.heightXs,
|
|
31
|
-
borderRadius:
|
|
31
|
+
borderRadius: corners.buttonXs
|
|
32
32
|
},
|
|
33
33
|
sm: {
|
|
34
34
|
width: controls.heightSm,
|
|
35
35
|
height: controls.heightSm,
|
|
36
|
-
borderRadius:
|
|
36
|
+
borderRadius: corners.buttonSm
|
|
37
37
|
},
|
|
38
38
|
md: {
|
|
39
39
|
width: controls.heightMd,
|
|
40
40
|
height: controls.heightMd,
|
|
41
|
-
borderRadius:
|
|
41
|
+
borderRadius: corners.buttonMd
|
|
42
42
|
},
|
|
43
43
|
lg: {
|
|
44
44
|
width: controls.heightLg,
|
|
45
45
|
height: controls.heightLg,
|
|
46
|
-
borderRadius:
|
|
46
|
+
borderRadius: corners.buttonLg
|
|
47
47
|
},
|
|
48
48
|
xl: {
|
|
49
49
|
width: controls.heightXl,
|
|
50
50
|
height: controls.heightXl,
|
|
51
|
-
borderRadius:
|
|
51
|
+
borderRadius: corners.buttonXl
|
|
52
52
|
}
|
|
53
53
|
});
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Select as BaseSelect } from '@base-ui/react/select';
|
|
3
3
|
import * as stylex from '@stylexjs/stylex';
|
|
4
4
|
import { borders, colors, controls, iconSizes, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
|
|
5
|
-
import { controlSizes } from "./controlLook.js";
|
|
5
|
+
import { fieldCorners, controlSizes } from "./controlLook.js";
|
|
6
6
|
import { Icon } from "./Icon.js";
|
|
7
7
|
import { interact } from "./interaction.js";
|
|
8
8
|
import { Popup } from "./Popup.js";
|
|
@@ -13,7 +13,7 @@ export function Select({ label, value, options, size = 'md', disabled = false, o
|
|
|
13
13
|
return;
|
|
14
14
|
interact({ primitive: 'Select', event: 'change', label });
|
|
15
15
|
onChange(next);
|
|
16
|
-
}, 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))) }) }) })] }));
|
|
16
|
+
}, 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))) }) }) })] }));
|
|
17
17
|
}
|
|
18
18
|
const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
|
|
19
19
|
const styles = stylex.create({
|
|
@@ -4,7 +4,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
4
4
|
import { useRef } from 'react';
|
|
5
5
|
import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
|
|
6
6
|
import { Icon } from "./Icon.js";
|
|
7
|
-
import { controlSizes } from "./controlLook.js";
|
|
7
|
+
import { fieldCorners, controlSizes } from "./controlLook.js";
|
|
8
8
|
import { interact } from "./interaction.js";
|
|
9
9
|
export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
|
|
10
10
|
const isInvalid = error !== undefined;
|
|
@@ -15,7 +15,7 @@ export function TextField({ label, isLabelHidden = false, description, error, on
|
|
|
15
15
|
if (event.currentTarget.value !== valueOnFocus.current) {
|
|
16
16
|
interact({ primitive: 'TextField', event: 'change', label });
|
|
17
17
|
}
|
|
18
|
-
}, 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 }))] }));
|
|
18
|
+
}, 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 }))] }));
|
|
19
19
|
}
|
|
20
20
|
const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
|
|
21
21
|
const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;
|
|
@@ -6,7 +6,6 @@ export declare const controlSizes: Readonly<{
|
|
|
6
6
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
7
7
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
8
8
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
9
|
-
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
10
9
|
}>;
|
|
11
10
|
readonly sm: Readonly<{
|
|
12
11
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
@@ -14,7 +13,6 @@ export declare const controlSizes: Readonly<{
|
|
|
14
13
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
15
14
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
16
15
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
17
|
-
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
18
16
|
}>;
|
|
19
17
|
readonly md: Readonly<{
|
|
20
18
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
@@ -22,7 +20,6 @@ export declare const controlSizes: Readonly<{
|
|
|
22
20
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
23
21
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
24
22
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
25
|
-
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
26
23
|
}>;
|
|
27
24
|
readonly lg: Readonly<{
|
|
28
25
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
@@ -30,7 +27,6 @@ export declare const controlSizes: Readonly<{
|
|
|
30
27
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
31
28
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
32
29
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
33
|
-
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
34
30
|
}>;
|
|
35
31
|
readonly xl: Readonly<{
|
|
36
32
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
@@ -38,6 +34,39 @@ export declare const controlSizes: Readonly<{
|
|
|
38
34
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
39
35
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
40
36
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
37
|
+
}>;
|
|
38
|
+
}>;
|
|
39
|
+
export declare const buttonCorners: Readonly<{
|
|
40
|
+
readonly xs: Readonly<{
|
|
41
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
42
|
+
}>;
|
|
43
|
+
readonly sm: Readonly<{
|
|
44
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
45
|
+
}>;
|
|
46
|
+
readonly md: Readonly<{
|
|
47
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
48
|
+
}>;
|
|
49
|
+
readonly lg: Readonly<{
|
|
50
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
51
|
+
}>;
|
|
52
|
+
readonly xl: Readonly<{
|
|
53
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
54
|
+
}>;
|
|
55
|
+
}>;
|
|
56
|
+
export declare const fieldCorners: Readonly<{
|
|
57
|
+
readonly xs: Readonly<{
|
|
58
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
59
|
+
}>;
|
|
60
|
+
readonly sm: Readonly<{
|
|
61
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
62
|
+
}>;
|
|
63
|
+
readonly md: Readonly<{
|
|
64
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
65
|
+
}>;
|
|
66
|
+
readonly lg: Readonly<{
|
|
67
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
68
|
+
}>;
|
|
69
|
+
readonly xl: Readonly<{
|
|
41
70
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
42
71
|
}>;
|
|
43
72
|
}>;
|
|
@@ -1,47 +1,56 @@
|
|
|
1
1
|
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { borders, colors, controls,
|
|
2
|
+
import { borders, colors, controls, corners, motion } from "../theme/tokens.stylex.js";
|
|
3
3
|
export const controlSizes = stylex.create({
|
|
4
4
|
xs: {
|
|
5
5
|
gap: controls.gapXs,
|
|
6
6
|
height: controls.heightXs,
|
|
7
7
|
paddingInline: controls.paddingXs,
|
|
8
8
|
fontSize: controls.fontSizeXs,
|
|
9
|
-
lineHeight: controls.lineHeightXs
|
|
10
|
-
borderRadius: radii.sm
|
|
9
|
+
lineHeight: controls.lineHeightXs
|
|
11
10
|
},
|
|
12
11
|
sm: {
|
|
13
12
|
gap: controls.gapSm,
|
|
14
13
|
height: controls.heightSm,
|
|
15
14
|
paddingInline: controls.paddingSm,
|
|
16
15
|
fontSize: controls.fontSizeSm,
|
|
17
|
-
lineHeight: controls.lineHeightSm
|
|
18
|
-
borderRadius: radii.md
|
|
16
|
+
lineHeight: controls.lineHeightSm
|
|
19
17
|
},
|
|
20
18
|
md: {
|
|
21
19
|
gap: controls.gapMd,
|
|
22
20
|
height: controls.heightMd,
|
|
23
21
|
paddingInline: controls.paddingMd,
|
|
24
22
|
fontSize: controls.fontSizeMd,
|
|
25
|
-
lineHeight: controls.lineHeightMd
|
|
26
|
-
borderRadius: radii.md
|
|
23
|
+
lineHeight: controls.lineHeightMd
|
|
27
24
|
},
|
|
28
25
|
lg: {
|
|
29
26
|
gap: controls.gapLg,
|
|
30
27
|
height: controls.heightLg,
|
|
31
28
|
paddingInline: controls.paddingLg,
|
|
32
29
|
fontSize: controls.fontSizeLg,
|
|
33
|
-
lineHeight: controls.lineHeightLg
|
|
34
|
-
borderRadius: radii.lg
|
|
30
|
+
lineHeight: controls.lineHeightLg
|
|
35
31
|
},
|
|
36
32
|
xl: {
|
|
37
33
|
gap: controls.gapXl,
|
|
38
34
|
height: controls.heightXl,
|
|
39
35
|
paddingInline: controls.paddingXl,
|
|
40
36
|
fontSize: controls.fontSizeXl,
|
|
41
|
-
lineHeight: controls.lineHeightXl
|
|
42
|
-
borderRadius: radii.lg
|
|
37
|
+
lineHeight: controls.lineHeightXl
|
|
43
38
|
}
|
|
44
39
|
});
|
|
40
|
+
export const buttonCorners = stylex.create({
|
|
41
|
+
xs: { borderRadius: corners.buttonXs },
|
|
42
|
+
sm: { borderRadius: corners.buttonSm },
|
|
43
|
+
md: { borderRadius: corners.buttonMd },
|
|
44
|
+
lg: { borderRadius: corners.buttonLg },
|
|
45
|
+
xl: { borderRadius: corners.buttonXl }
|
|
46
|
+
});
|
|
47
|
+
export const fieldCorners = stylex.create({
|
|
48
|
+
xs: { borderRadius: corners.fieldXs },
|
|
49
|
+
sm: { borderRadius: corners.fieldSm },
|
|
50
|
+
md: { borderRadius: corners.fieldMd },
|
|
51
|
+
lg: { borderRadius: corners.fieldLg },
|
|
52
|
+
xl: { borderRadius: corners.fieldXl }
|
|
53
|
+
});
|
|
45
54
|
export const transparentLook = stylex.create({
|
|
46
55
|
rest: {
|
|
47
56
|
color: colors.secondaryForeground,
|
|
@@ -340,6 +340,7 @@ const SRC_ENTRY_FILES = new Set([
|
|
|
340
340
|
]);
|
|
341
341
|
const SRC_FOLDER_PATTERNS = [
|
|
342
342
|
/^theme\/(theme|icons)\.ts$/,
|
|
343
|
+
/^theme\/colors\.stylex\.ts$/,
|
|
343
344
|
/^lib\/[a-z][A-Za-z]*\.ts$/,
|
|
344
345
|
/^hooks\/use[A-Z][A-Za-z]*\.ts$/,
|
|
345
346
|
/^screens\/[A-Z][A-Za-z]*Screen\.tsx$/,
|
package/dist/rules/lintPlugin.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
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";
|
|
2
2
|
const TOKENS_FILE = 'src/theme/tokens.stylex.ts';
|
|
3
3
|
const APP_THEME_FILE = 'src/theme/theme.ts';
|
|
4
|
+
const APP_COLORS_FILE = 'src/theme/colors.stylex.ts';
|
|
4
5
|
const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
|
|
5
6
|
const SELECTABLE_FILE = 'src/components/Text.tsx';
|
|
6
7
|
const PRIMITIVE_ELEMENTS = new Set([
|
|
@@ -322,8 +323,11 @@ const noPointerCursor = styleRule((declarations) => declarations
|
|
|
322
323
|
.filter((d) => d.property === 'cursor' && stringValue(d.value) === 'pointer')
|
|
323
324
|
.map((d) => ({ location: d.location, message: NO_POINTER_CURSOR_MESSAGE })));
|
|
324
325
|
const useTokens = styleRule((declarations, context) => {
|
|
325
|
-
if (inFile(context, TOKENS_FILE) ||
|
|
326
|
+
if (inFile(context, TOKENS_FILE) ||
|
|
327
|
+
inFile(context, APP_THEME_FILE) ||
|
|
328
|
+
inFile(context, APP_COLORS_FILE)) {
|
|
326
329
|
return [];
|
|
330
|
+
}
|
|
327
331
|
return declarations.flatMap((d) => {
|
|
328
332
|
const raw = stringValue(d.value);
|
|
329
333
|
const isColorProperty = /color$/i.test(d.property) ||
|
package/dist/start.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ import type { IconDrawing } from './components/icons.ts';
|
|
|
5
5
|
import type { Interaction } from './components/interaction.ts';
|
|
6
6
|
import type { ReactApp } from './hooks/appContext.ts';
|
|
7
7
|
import type { Tables } from './table.ts';
|
|
8
|
-
import { borders, colors, controls, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
|
|
9
|
-
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;
|
|
8
|
+
import { borders, colors, controls, corners, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
|
|
9
|
+
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;
|
|
10
10
|
export type StartOptions = {
|
|
11
11
|
theme?: readonly Theme<Themeable>[];
|
|
12
12
|
icons?: Readonly<Record<string, IconDrawing>>;
|
package/dist/start.js
CHANGED
|
@@ -12,7 +12,7 @@ import { manualClock, realClock } from "./clock.js";
|
|
|
12
12
|
import { Gate } from "./gate.js";
|
|
13
13
|
import { AppProvider } from "./hooks/appContext.js";
|
|
14
14
|
import { routeObjects } from "./routes.js";
|
|
15
|
-
import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
|
|
15
|
+
import { borders, breakpoints, colors, controls, corners, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
|
|
16
16
|
const TEST_SEED = 'patternSeed';
|
|
17
17
|
const INLINE_DATA_ID = 'pattern-data';
|
|
18
18
|
const TEST_ADMINS = 'patternAdmins';
|
|
@@ -165,6 +165,18 @@ export declare const radii: stylex.VarGroup<Readonly<{
|
|
|
165
165
|
xxxxl: string;
|
|
166
166
|
full: string;
|
|
167
167
|
}>, symbol>;
|
|
168
|
+
export declare const corners: stylex.VarGroup<Readonly<{
|
|
169
|
+
buttonXs: string;
|
|
170
|
+
buttonSm: string;
|
|
171
|
+
buttonMd: string;
|
|
172
|
+
buttonLg: string;
|
|
173
|
+
buttonXl: string;
|
|
174
|
+
fieldXs: string;
|
|
175
|
+
fieldSm: string;
|
|
176
|
+
fieldMd: string;
|
|
177
|
+
fieldLg: string;
|
|
178
|
+
fieldXl: string;
|
|
179
|
+
}>, symbol>;
|
|
168
180
|
export declare const fontSizes: stylex.VarGroup<Readonly<{
|
|
169
181
|
captionXs: string;
|
|
170
182
|
captionSm: string;
|
|
@@ -165,6 +165,18 @@ export const radii = stylex.defineVars({
|
|
|
165
165
|
xxxxl: '20px',
|
|
166
166
|
full: '9999px'
|
|
167
167
|
});
|
|
168
|
+
export const corners = stylex.defineVars({
|
|
169
|
+
buttonXs: radii.sm,
|
|
170
|
+
buttonSm: radii.md,
|
|
171
|
+
buttonMd: radii.md,
|
|
172
|
+
buttonLg: radii.lg,
|
|
173
|
+
buttonXl: radii.lg,
|
|
174
|
+
fieldXs: radii.sm,
|
|
175
|
+
fieldSm: radii.md,
|
|
176
|
+
fieldMd: radii.md,
|
|
177
|
+
fieldLg: radii.lg,
|
|
178
|
+
fieldXl: radii.lg
|
|
179
|
+
});
|
|
168
180
|
export const fontSizes = stylex.defineVars({
|
|
169
181
|
captionXs: '8px',
|
|
170
182
|
captionSm: '10px',
|