@xaui/native 0.9.1-alpha.0 → 0.9.1-alpha.1
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/chunk-KFCORXWW.cjs +150 -0
- package/dist/chunk-M7P46XKI.cjs +100 -0
- package/dist/chunk-N357EQCZ.js +150 -0
- package/dist/{chunk-JDS6KGCM.cjs → chunk-NHPQQQ7P.cjs} +35 -92
- package/dist/{chunk-T3ZI2PZ6.js → chunk-PBVPOX7D.js} +5 -62
- package/dist/chunk-RBNCR5KB.js +100 -0
- package/dist/index.cjs +10 -2
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +9 -1
- package/dist/system/index.cjs +7 -0
- package/dist/system/index.d.cts +83 -0
- package/dist/system/index.d.ts +83 -0
- package/dist/system/index.js +7 -0
- package/dist/theme/index.cjs +6 -2
- package/dist/theme/index.d.cts +23 -153
- package/dist/theme/index.d.ts +23 -153
- package/dist/theme/index.js +5 -1
- package/dist/theme.type-B3ODSLbB.d.cts +153 -0
- package/dist/theme.type-B3ODSLbB.d.ts +153 -0
- package/package.json +6 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
// src/utils/colors.ts
|
|
2
|
+
var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
3
|
+
var linearToSrgb = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
|
|
4
|
+
var clamp01 = (n) => Math.min(1, Math.max(0, n));
|
|
5
|
+
var HEX = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
6
|
+
function isHex(value) {
|
|
7
|
+
return HEX.test(value);
|
|
8
|
+
}
|
|
9
|
+
function hexToRgb(hex) {
|
|
10
|
+
if (!isHex(hex)) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
`XAUI: "${hex}" is not a hex colour. Tokens that feed mix() and alpha() must be #rgb or #rrggbb \u2014 named colours and rgb()/rgba() values cannot be blended.`
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
const raw = hex.replace("#", "");
|
|
16
|
+
const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
|
|
17
|
+
return [
|
|
18
|
+
parseInt(full.slice(0, 2), 16) / 255,
|
|
19
|
+
parseInt(full.slice(2, 4), 16) / 255,
|
|
20
|
+
parseInt(full.slice(4, 6), 16) / 255
|
|
21
|
+
];
|
|
22
|
+
}
|
|
23
|
+
function rgbToHex([r, g, b]) {
|
|
24
|
+
const to = (n) => Math.round(clamp01(n) * 255).toString(16).padStart(2, "0");
|
|
25
|
+
return `#${to(r)}${to(g)}${to(b)}`;
|
|
26
|
+
}
|
|
27
|
+
function rgbToOklab([r, g, b]) {
|
|
28
|
+
const R = srgbToLinear(r);
|
|
29
|
+
const G = srgbToLinear(g);
|
|
30
|
+
const B = srgbToLinear(b);
|
|
31
|
+
const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);
|
|
32
|
+
const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);
|
|
33
|
+
const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);
|
|
34
|
+
return [
|
|
35
|
+
0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
|
|
36
|
+
1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
|
|
37
|
+
0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
|
|
38
|
+
];
|
|
39
|
+
}
|
|
40
|
+
function oklabToRgb([L, a, b]) {
|
|
41
|
+
const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
|
|
42
|
+
const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
|
|
43
|
+
const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
|
|
44
|
+
return [
|
|
45
|
+
clamp01(linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
|
|
46
|
+
clamp01(linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
|
|
47
|
+
clamp01(linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s))
|
|
48
|
+
];
|
|
49
|
+
}
|
|
50
|
+
function mix(base, other, amount) {
|
|
51
|
+
const from = rgbToOklab(hexToRgb(base));
|
|
52
|
+
const to = rgbToOklab(hexToRgb(other));
|
|
53
|
+
return rgbToHex(
|
|
54
|
+
oklabToRgb([
|
|
55
|
+
from[0] + (to[0] - from[0]) * amount,
|
|
56
|
+
from[1] + (to[1] - from[1]) * amount,
|
|
57
|
+
from[2] + (to[2] - from[2]) * amount
|
|
58
|
+
])
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
function alpha(hex, amount) {
|
|
62
|
+
const [r, g, b] = hexToRgb(hex).map((v) => Math.round(v * 255));
|
|
63
|
+
return `rgba(${r}, ${g}, ${b}, ${amount})`;
|
|
64
|
+
}
|
|
65
|
+
function lightnessOf(hex) {
|
|
66
|
+
return rgbToOklab(hexToRgb(hex))[0];
|
|
67
|
+
}
|
|
68
|
+
function contrastOn(hex, light, dark) {
|
|
69
|
+
return lightnessOf(hex) > 0.62 ? dark : light;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// src/theme/derive-tint.ts
|
|
73
|
+
var cache = /* @__PURE__ */ new Map();
|
|
74
|
+
function deriveTint(tint, theme) {
|
|
75
|
+
const key = `${theme.id}|${theme.mode}|${tint}`;
|
|
76
|
+
const hit = cache.get(key);
|
|
77
|
+
if (hit) return hit;
|
|
78
|
+
if (!isHex(tint)) {
|
|
79
|
+
throw new Error(
|
|
80
|
+
`XAUI: color="${tint}" must be a hex value (#rgb or #rrggbb). A tint's contrasted, soft and pressed slices are derived in OKLab, which cannot read rgba() or a named colour. Pass the hex here and put the transparency in \`style\`.`
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
const foreground = contrastOn(tint, theme.colors.snow, theme.colors.eclipse);
|
|
84
|
+
const derived = {
|
|
85
|
+
base: tint,
|
|
86
|
+
foreground,
|
|
87
|
+
soft: alpha(tint, 0.15),
|
|
88
|
+
softForeground: mix(tint, theme.colors.foreground, 0.2),
|
|
89
|
+
pressed: mix(tint, foreground, 0.1),
|
|
90
|
+
softPressed: alpha(tint, 0.2)
|
|
91
|
+
};
|
|
92
|
+
cache.set(key, derived);
|
|
93
|
+
return derived;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export {
|
|
97
|
+
mix,
|
|
98
|
+
alpha,
|
|
99
|
+
deriveTint
|
|
100
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
+
var _chunkKFCORXWWcjs = require('./chunk-KFCORXWW.cjs');
|
|
3
4
|
|
|
4
5
|
|
|
5
6
|
|
|
@@ -13,11 +14,12 @@
|
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
|
|
16
|
-
var _chunkJDS6KGCMcjs = require('./chunk-JDS6KGCM.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
|
+
var _chunkNHPQQQ7Pcjs = require('./chunk-NHPQQQ7P.cjs');
|
|
19
20
|
|
|
20
21
|
|
|
22
|
+
var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
|
|
21
23
|
|
|
22
24
|
|
|
23
25
|
|
|
@@ -29,4 +31,10 @@ var _chunkJDS6KGCMcjs = require('./chunk-JDS6KGCM.cjs');
|
|
|
29
31
|
|
|
30
32
|
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
exports.ThemeContext = _chunkNHPQQQ7Pcjs.ThemeContext; exports.XAUIProvider = _chunkNHPQQQ7Pcjs.XAUIProvider; exports.buildRadius = _chunkNHPQQQ7Pcjs.buildRadius; exports.buildShadows = _chunkNHPQQQ7Pcjs.buildShadows; exports.createRecipe = _chunkKFCORXWWcjs.createRecipe; exports.createTheme = _chunkNHPQQQ7Pcjs.createTheme; exports.defaultTheme = _chunkNHPQQQ7Pcjs.defaultTheme; exports.deriveColors = _chunkNHPQQQ7Pcjs.deriveColors; exports.deriveTint = _chunkM7P46XKIcjs.deriveTint; exports.palette = _chunkNHPQQQ7Pcjs.palette; exports.primitives = _chunkNHPQQQ7Pcjs.primitives; exports.sourceKeys = _chunkNHPQQQ7Pcjs.sourceKeys; exports.tokens = _chunkNHPQQQ7Pcjs.tokens; exports.useColorMode = _chunkNHPQQQ7Pcjs.useColorMode; exports.useThemeColor = _chunkNHPQQQ7Pcjs.useThemeColor; exports.useXAUITheme = _chunkNHPQQQ7Pcjs.useXAUITheme;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Axes, CompoundVariant, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, createRecipe } from './system/index.cjs';
|
|
2
|
+
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.cjs';
|
|
3
|
+
export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-B3ODSLbB.cjs';
|
|
4
|
+
import 'react-native';
|
|
2
5
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Axes, CompoundVariant, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, createRecipe } from './system/index.js';
|
|
2
|
+
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.js';
|
|
3
|
+
export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-B3ODSLbB.js';
|
|
4
|
+
import 'react-native';
|
|
2
5
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createRecipe
|
|
3
|
+
} from "./chunk-N357EQCZ.js";
|
|
1
4
|
import {
|
|
2
5
|
ThemeContext,
|
|
3
6
|
XAUIProvider,
|
|
@@ -13,15 +16,20 @@ import {
|
|
|
13
16
|
useColorMode,
|
|
14
17
|
useThemeColor,
|
|
15
18
|
useXAUITheme
|
|
16
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-PBVPOX7D.js";
|
|
20
|
+
import {
|
|
21
|
+
deriveTint
|
|
22
|
+
} from "./chunk-RBNCR5KB.js";
|
|
17
23
|
export {
|
|
18
24
|
ThemeContext,
|
|
19
25
|
XAUIProvider,
|
|
20
26
|
buildRadius,
|
|
21
27
|
buildShadows,
|
|
28
|
+
createRecipe,
|
|
22
29
|
createTheme,
|
|
23
30
|
defaultTheme,
|
|
24
31
|
deriveColors,
|
|
32
|
+
deriveTint,
|
|
25
33
|
palette,
|
|
26
34
|
primitives,
|
|
27
35
|
sourceKeys,
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { g as XAUITheme, X as XAUIColors } from '../theme.type-B3ODSLbB.cjs';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A slot is a view or a text node, and a recipe writes one object per slot, so the two
|
|
6
|
+
* RN style shapes are merged rather than discriminated per slot.
|
|
7
|
+
*/
|
|
8
|
+
type SlotStyle = ViewStyle & TextStyle;
|
|
9
|
+
type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
|
|
10
|
+
/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
|
|
11
|
+
type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
|
|
12
|
+
/** Token names per role — no colour value ever appears in a recipe. */
|
|
13
|
+
type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
|
|
14
|
+
/** The same roles resolved: theme colours, or the slices of a raw `color`. */
|
|
15
|
+
type VariantColors = Partial<Record<VariantRole, string>>;
|
|
16
|
+
/**
|
|
17
|
+
* `disabled` is applied last of the three: a control that is both pressed and disabled
|
|
18
|
+
* has to read disabled.
|
|
19
|
+
*/
|
|
20
|
+
type StateName = 'focused' | 'pressed' | 'disabled';
|
|
21
|
+
type States = Partial<Record<StateName, boolean>>;
|
|
22
|
+
/** Reads the theme and the variant's resolved colours; returns one style per slot. */
|
|
23
|
+
type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
|
|
24
|
+
/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
|
|
25
|
+
type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
|
|
26
|
+
/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
|
|
27
|
+
type Selection<Variant extends string, A extends Axes<string>> = {
|
|
28
|
+
variant?: Variant;
|
|
29
|
+
} & {
|
|
30
|
+
[Axis in keyof A]?: Extract<keyof A[Axis], string>;
|
|
31
|
+
};
|
|
32
|
+
type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
33
|
+
when: Selection<Variant, A>;
|
|
34
|
+
style: StyleFn<Slot>;
|
|
35
|
+
};
|
|
36
|
+
type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
37
|
+
/** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
|
|
38
|
+
slots: readonly Slot[];
|
|
39
|
+
base?: StyleFn<Slot>;
|
|
40
|
+
variantTokens?: Record<Variant, VariantTokens>;
|
|
41
|
+
/** Where the variant's colours land — written once, and it holds for every variant. */
|
|
42
|
+
paint?: StyleFn<Slot>;
|
|
43
|
+
variants?: A;
|
|
44
|
+
compoundVariants?: ReadonlyArray<CompoundVariant<Slot, Variant, A>>;
|
|
45
|
+
states?: Partial<Record<StateName, StyleFn<Slot>>>;
|
|
46
|
+
defaultVariants?: Selection<Variant, A>;
|
|
47
|
+
};
|
|
48
|
+
/** Stable references: the same object for the same tokens, for the app's lifetime. */
|
|
49
|
+
type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
|
|
50
|
+
/** A selection with `defaultVariants` already folded in, keyed by axis name. */
|
|
51
|
+
type ResolvedSelection = Readonly<Record<string, string | undefined>>;
|
|
52
|
+
|
|
53
|
+
type ResolveArgs<Variant extends string, A extends Axes<string>> = {
|
|
54
|
+
theme: XAUITheme;
|
|
55
|
+
selection?: Selection<Variant, A>;
|
|
56
|
+
states?: States;
|
|
57
|
+
};
|
|
58
|
+
type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
|
|
59
|
+
color: string;
|
|
60
|
+
};
|
|
61
|
+
type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
62
|
+
readonly slots: readonly Slot[];
|
|
63
|
+
/** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
|
|
64
|
+
resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
|
|
65
|
+
/**
|
|
66
|
+
* The tint pass: the same functions run again with `color`'s slices in place of the
|
|
67
|
+
* theme's tokens. Uncached and allocating, and only ever called when `color` is set.
|
|
68
|
+
*/
|
|
69
|
+
tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* A component's style, declared once. Resolution splits in two because the two halves
|
|
73
|
+
* have different lifetimes: everything keyed by a finite token is cached forever, and
|
|
74
|
+
* an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
|
|
75
|
+
* by the number of token combinations rather than by the palette users invent.
|
|
76
|
+
*
|
|
77
|
+
* const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
|
|
78
|
+
* const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
|
|
79
|
+
* <View style={[styles.root, tint?.root, style]} />
|
|
80
|
+
*/
|
|
81
|
+
declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
|
|
82
|
+
|
|
83
|
+
export { type Axes, type CompoundVariant, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, createRecipe };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { g as XAUITheme, X as XAUIColors } from '../theme.type-B3ODSLbB.js';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A slot is a view or a text node, and a recipe writes one object per slot, so the two
|
|
6
|
+
* RN style shapes are merged rather than discriminated per slot.
|
|
7
|
+
*/
|
|
8
|
+
type SlotStyle = ViewStyle & TextStyle;
|
|
9
|
+
type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
|
|
10
|
+
/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
|
|
11
|
+
type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
|
|
12
|
+
/** Token names per role — no colour value ever appears in a recipe. */
|
|
13
|
+
type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
|
|
14
|
+
/** The same roles resolved: theme colours, or the slices of a raw `color`. */
|
|
15
|
+
type VariantColors = Partial<Record<VariantRole, string>>;
|
|
16
|
+
/**
|
|
17
|
+
* `disabled` is applied last of the three: a control that is both pressed and disabled
|
|
18
|
+
* has to read disabled.
|
|
19
|
+
*/
|
|
20
|
+
type StateName = 'focused' | 'pressed' | 'disabled';
|
|
21
|
+
type States = Partial<Record<StateName, boolean>>;
|
|
22
|
+
/** Reads the theme and the variant's resolved colours; returns one style per slot. */
|
|
23
|
+
type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
|
|
24
|
+
/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
|
|
25
|
+
type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
|
|
26
|
+
/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
|
|
27
|
+
type Selection<Variant extends string, A extends Axes<string>> = {
|
|
28
|
+
variant?: Variant;
|
|
29
|
+
} & {
|
|
30
|
+
[Axis in keyof A]?: Extract<keyof A[Axis], string>;
|
|
31
|
+
};
|
|
32
|
+
type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
33
|
+
when: Selection<Variant, A>;
|
|
34
|
+
style: StyleFn<Slot>;
|
|
35
|
+
};
|
|
36
|
+
type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
37
|
+
/** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
|
|
38
|
+
slots: readonly Slot[];
|
|
39
|
+
base?: StyleFn<Slot>;
|
|
40
|
+
variantTokens?: Record<Variant, VariantTokens>;
|
|
41
|
+
/** Where the variant's colours land — written once, and it holds for every variant. */
|
|
42
|
+
paint?: StyleFn<Slot>;
|
|
43
|
+
variants?: A;
|
|
44
|
+
compoundVariants?: ReadonlyArray<CompoundVariant<Slot, Variant, A>>;
|
|
45
|
+
states?: Partial<Record<StateName, StyleFn<Slot>>>;
|
|
46
|
+
defaultVariants?: Selection<Variant, A>;
|
|
47
|
+
};
|
|
48
|
+
/** Stable references: the same object for the same tokens, for the app's lifetime. */
|
|
49
|
+
type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
|
|
50
|
+
/** A selection with `defaultVariants` already folded in, keyed by axis name. */
|
|
51
|
+
type ResolvedSelection = Readonly<Record<string, string | undefined>>;
|
|
52
|
+
|
|
53
|
+
type ResolveArgs<Variant extends string, A extends Axes<string>> = {
|
|
54
|
+
theme: XAUITheme;
|
|
55
|
+
selection?: Selection<Variant, A>;
|
|
56
|
+
states?: States;
|
|
57
|
+
};
|
|
58
|
+
type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
|
|
59
|
+
color: string;
|
|
60
|
+
};
|
|
61
|
+
type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
|
|
62
|
+
readonly slots: readonly Slot[];
|
|
63
|
+
/** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
|
|
64
|
+
resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
|
|
65
|
+
/**
|
|
66
|
+
* The tint pass: the same functions run again with `color`'s slices in place of the
|
|
67
|
+
* theme's tokens. Uncached and allocating, and only ever called when `color` is set.
|
|
68
|
+
*/
|
|
69
|
+
tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* A component's style, declared once. Resolution splits in two because the two halves
|
|
73
|
+
* have different lifetimes: everything keyed by a finite token is cached forever, and
|
|
74
|
+
* an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
|
|
75
|
+
* by the number of token combinations rather than by the palette users invent.
|
|
76
|
+
*
|
|
77
|
+
* const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
|
|
78
|
+
* const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
|
|
79
|
+
* <View style={[styles.root, tint?.root, style]} />
|
|
80
|
+
*/
|
|
81
|
+
declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
|
|
82
|
+
|
|
83
|
+
export { type Axes, type CompoundVariant, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, createRecipe };
|
package/dist/theme/index.cjs
CHANGED
|
@@ -13,9 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _chunkNHPQQQ7Pcjs = require('../chunk-NHPQQQ7P.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
|
+
var _chunkM7P46XKIcjs = require('../chunk-M7P46XKI.cjs');
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
|
|
@@ -29,4 +30,7 @@ var _chunkJDS6KGCMcjs = require('../chunk-JDS6KGCM.cjs');
|
|
|
29
30
|
|
|
30
31
|
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
exports.ThemeContext = _chunkNHPQQQ7Pcjs.ThemeContext; exports.XAUIProvider = _chunkNHPQQQ7Pcjs.XAUIProvider; exports.buildRadius = _chunkNHPQQQ7Pcjs.buildRadius; exports.buildShadows = _chunkNHPQQQ7Pcjs.buildShadows; exports.createTheme = _chunkNHPQQQ7Pcjs.createTheme; exports.defaultTheme = _chunkNHPQQQ7Pcjs.defaultTheme; exports.deriveColors = _chunkNHPQQQ7Pcjs.deriveColors; exports.deriveTint = _chunkM7P46XKIcjs.deriveTint; exports.palette = _chunkNHPQQQ7Pcjs.palette; exports.primitives = _chunkNHPQQQ7Pcjs.primitives; exports.sourceKeys = _chunkNHPQQQ7Pcjs.sourceKeys; exports.tokens = _chunkNHPQQQ7Pcjs.tokens; exports.useColorMode = _chunkNHPQQQ7Pcjs.useColorMode; exports.useThemeColor = _chunkNHPQQQ7Pcjs.useThemeColor; exports.useXAUITheme = _chunkNHPQQQ7Pcjs.useXAUITheme;
|
package/dist/theme/index.d.cts
CHANGED
|
@@ -1,157 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
type XAUISourceColors = {
|
|
6
|
-
background: string;
|
|
7
|
-
foreground: string;
|
|
8
|
-
surface: string;
|
|
9
|
-
surfaceForeground: string;
|
|
10
|
-
surfaceSecondary: string;
|
|
11
|
-
surfaceSecondaryForeground: string;
|
|
12
|
-
surfaceTertiary: string;
|
|
13
|
-
surfaceTertiaryForeground: string;
|
|
14
|
-
overlay: string;
|
|
15
|
-
overlayForeground: string;
|
|
16
|
-
backdrop: string;
|
|
17
|
-
muted: string;
|
|
18
|
-
default: string;
|
|
19
|
-
defaultForeground: string;
|
|
20
|
-
accent: string;
|
|
21
|
-
accentForeground: string;
|
|
22
|
-
fieldBackground: string;
|
|
23
|
-
fieldForeground: string;
|
|
24
|
-
fieldPlaceholder: string;
|
|
25
|
-
fieldBorder: string;
|
|
26
|
-
success: string;
|
|
27
|
-
successForeground: string;
|
|
28
|
-
warning: string;
|
|
29
|
-
warningForeground: string;
|
|
30
|
-
danger: string;
|
|
31
|
-
dangerForeground: string;
|
|
32
|
-
segment: string;
|
|
33
|
-
segmentForeground: string;
|
|
34
|
-
border: string;
|
|
35
|
-
separator: string;
|
|
36
|
-
focus: string;
|
|
37
|
-
link: string;
|
|
38
|
-
};
|
|
39
|
-
/** The derived layer — computed by `deriveColors`, never written by hand. */
|
|
40
|
-
type XAUIDerivedColors = {
|
|
41
|
-
accentPressed: string;
|
|
42
|
-
successPressed: string;
|
|
43
|
-
warningPressed: string;
|
|
44
|
-
dangerPressed: string;
|
|
45
|
-
defaultPressed: string;
|
|
46
|
-
surfacePressed: string;
|
|
47
|
-
defaultSoft: string;
|
|
48
|
-
defaultSoftForeground: string;
|
|
49
|
-
defaultSoftPressed: string;
|
|
50
|
-
accentSoft: string;
|
|
51
|
-
accentSoftForeground: string;
|
|
52
|
-
accentSoftPressed: string;
|
|
53
|
-
successSoft: string;
|
|
54
|
-
successSoftForeground: string;
|
|
55
|
-
successSoftPressed: string;
|
|
56
|
-
warningSoft: string;
|
|
57
|
-
warningSoftForeground: string;
|
|
58
|
-
warningSoftPressed: string;
|
|
59
|
-
dangerSoft: string;
|
|
60
|
-
dangerSoftForeground: string;
|
|
61
|
-
dangerSoftPressed: string;
|
|
62
|
-
backgroundSecondary: string;
|
|
63
|
-
backgroundTertiary: string;
|
|
64
|
-
backgroundInverse: string;
|
|
65
|
-
borderSecondary: string;
|
|
66
|
-
borderTertiary: string;
|
|
67
|
-
separatorSecondary: string;
|
|
68
|
-
separatorTertiary: string;
|
|
69
|
-
fieldPressed: string;
|
|
70
|
-
fieldFocus: string;
|
|
71
|
-
fieldBorderPressed: string;
|
|
72
|
-
fieldBorderFocus: string;
|
|
73
|
-
};
|
|
74
|
-
/** Constant across both modes. */
|
|
75
|
-
type XAUIPrimitiveColors = {
|
|
76
|
-
white: string;
|
|
77
|
-
black: string;
|
|
78
|
-
snow: string;
|
|
79
|
-
eclipse: string;
|
|
80
|
-
};
|
|
81
|
-
/** Everything a component reads, flattened. */
|
|
82
|
-
type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
|
|
83
|
-
type ColorMode = 'light' | 'dark';
|
|
84
|
-
type Size = 'xs' | 'sm' | 'md' | 'lg';
|
|
85
|
-
type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
|
|
86
|
-
type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
|
|
87
|
-
type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
88
|
-
type XAUIRadius = Record<RadiusKey, number>;
|
|
89
|
-
type XAUIShadow = {
|
|
90
|
-
shadowColor: string;
|
|
91
|
-
shadowOffset: {
|
|
92
|
-
width: number;
|
|
93
|
-
height: number;
|
|
94
|
-
};
|
|
95
|
-
shadowOpacity: number;
|
|
96
|
-
shadowRadius: number;
|
|
97
|
-
elevation: number;
|
|
98
|
-
};
|
|
99
|
-
type XAUITheme = {
|
|
100
|
-
id: string;
|
|
101
|
-
mode: ColorMode;
|
|
102
|
-
colors: XAUIColors;
|
|
103
|
-
/** Base 4 — `spacing(3) === 12`. A function, so there is no "what do we call 12px". */
|
|
104
|
-
spacing: (steps: number) => number;
|
|
105
|
-
radius: XAUIRadius;
|
|
106
|
-
borderWidth: {
|
|
107
|
-
default: number;
|
|
108
|
-
field: number;
|
|
109
|
-
};
|
|
110
|
-
fontSizes: Record<FontSizeKey, number>;
|
|
111
|
-
lineHeights: Record<FontSizeKey, number>;
|
|
112
|
-
fontWeights: Record<FontWeightKey, string>;
|
|
113
|
-
fontFamilies: {
|
|
114
|
-
body: string;
|
|
115
|
-
heading: string;
|
|
116
|
-
mono: string;
|
|
117
|
-
};
|
|
118
|
-
/** Semantic roles, not a scale: dark mode drops the surface shadow entirely. */
|
|
119
|
-
shadows: {
|
|
120
|
-
surface: XAUIShadow;
|
|
121
|
-
overlay: XAUIShadow;
|
|
122
|
-
field: XAUIShadow;
|
|
123
|
-
};
|
|
124
|
-
opacity: {
|
|
125
|
-
disabled: number;
|
|
126
|
-
};
|
|
127
|
-
controlHeights: Record<Size, number>;
|
|
128
|
-
};
|
|
129
|
-
type XAUIThemeConfig = {
|
|
130
|
-
colors?: {
|
|
131
|
-
light?: Partial<XAUISourceColors & XAUIDerivedColors>;
|
|
132
|
-
dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
|
|
133
|
-
};
|
|
134
|
-
/** The single base the whole radius scale derives from. */
|
|
135
|
-
radius?: number;
|
|
136
|
-
spacingUnit?: number;
|
|
137
|
-
borderWidth?: Partial<XAUITheme['borderWidth']>;
|
|
138
|
-
fontSizes?: Partial<XAUITheme['fontSizes']>;
|
|
139
|
-
lineHeights?: Partial<XAUITheme['lineHeights']>;
|
|
140
|
-
fontWeights?: Partial<XAUITheme['fontWeights']>;
|
|
141
|
-
fontFamilies?: Partial<XAUITheme['fontFamilies']>;
|
|
142
|
-
/** Per role, and `shadowOffset` is replaced whole — a half-set offset is not a shadow. */
|
|
143
|
-
shadows?: {
|
|
144
|
-
[K in keyof XAUITheme['shadows']]?: Partial<XAUIShadow>;
|
|
145
|
-
};
|
|
146
|
-
opacity?: Partial<XAUITheme['opacity']>;
|
|
147
|
-
controlHeights?: Partial<XAUITheme['controlHeights']>;
|
|
148
|
-
};
|
|
149
|
-
/** What `createTheme` returns: both modes, resolved, sharing one id. */
|
|
150
|
-
type XAUIThemeSet = {
|
|
151
|
-
id: string;
|
|
152
|
-
light: XAUITheme;
|
|
153
|
-
dark: XAUITheme;
|
|
154
|
-
};
|
|
3
|
+
import { i as XAUIThemeSet, h as XAUIThemeConfig, f as XAUISourceColors, b as XAUIDerivedColors, g as XAUITheme, d as XAUIRadius, C as ColorMode, X as XAUIColors } from '../theme.type-B3ODSLbB.cjs';
|
|
4
|
+
export { F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, c as XAUIPrimitiveColors, e as XAUIShadow } from '../theme.type-B3ODSLbB.cjs';
|
|
155
5
|
|
|
156
6
|
/** `'system'` follows the device; the resolved value is never `'system'`. */
|
|
157
7
|
type ColorModePreference = 'light' | 'dark' | 'system';
|
|
@@ -196,6 +46,26 @@ declare const defaultTheme: XAUIThemeSet;
|
|
|
196
46
|
*/
|
|
197
47
|
declare function deriveColors(s: XAUISourceColors): XAUIDerivedColors;
|
|
198
48
|
|
|
49
|
+
/**
|
|
50
|
+
* A raw tint, expanded into the slices a variant consumes. One `color` gives the base;
|
|
51
|
+
* the other five come out of the same OKLab formulas as `deriveColors`, so a free tint
|
|
52
|
+
* behaves exactly like `accent` or `danger` — same ratios, same rendering — instead of
|
|
53
|
+
* following a parallel mechanic.
|
|
54
|
+
*/
|
|
55
|
+
type XAUITint = {
|
|
56
|
+
base: string;
|
|
57
|
+
foreground: string;
|
|
58
|
+
soft: string;
|
|
59
|
+
softForeground: string;
|
|
60
|
+
pressed: string;
|
|
61
|
+
softPressed: string;
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Memoized per tint *and* theme: sRGB → OKLab → sRGB is not free per render, and
|
|
65
|
+
* `softForeground` mixes with the theme's `foreground`, which differs between modes.
|
|
66
|
+
*/
|
|
67
|
+
declare function deriveTint(tint: string, theme: XAUITheme): XAUITint;
|
|
68
|
+
|
|
199
69
|
/**
|
|
200
70
|
* The raw palette — Tailwind's scale, 22 families x 11 shades.
|
|
201
71
|
*
|
|
@@ -666,4 +536,4 @@ declare function useColorMode(): ColorMode;
|
|
|
666
536
|
declare function useThemeColor(token: keyof XAUIColors): string;
|
|
667
537
|
declare function useThemeColor(tokens: Array<keyof XAUIColors>): string[];
|
|
668
538
|
|
|
669
|
-
export {
|
|
539
|
+
export { ColorMode, type ColorModePreference, type PaletteFamily, type PaletteShade, ThemeContext, XAUIColors, XAUIDerivedColors, XAUIProvider, type XAUIProviderProps, XAUIRadius, XAUISourceColors, XAUITheme, XAUIThemeConfig, XAUIThemeSet, type XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme };
|