@lt-three/love3 0.1.0 → 0.1.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/README.md +40 -40
- package/dist/native/analytics/animation.d.ts +1 -1
- package/dist/native/analytics/animation.js +1 -1
- package/dist/native/analytics/chart.types.d.ts +3 -3
- package/dist/native/analytics/metric-card.d.ts +3 -3
- package/dist/native/analytics/metric-card.js +3 -3
- package/dist/native/analytics/multi-line-chart.d.ts +9 -8
- package/dist/native/analytics/multi-line-chart.js +14 -13
- package/dist/native/analytics/pie-chart.d.ts +7 -7
- package/dist/native/analytics/pie-chart.js +8 -8
- package/dist/native/analytics/single-number.d.ts +4 -4
- package/dist/native/analytics/single-number.js +2 -2
- package/dist/native/atom/avatar.d.ts +6 -6
- package/dist/native/atom/avatar.js +2 -2
- package/dist/native/atom/badge.d.ts +5 -5
- package/dist/native/atom/button.d.ts +12 -12
- package/dist/native/atom/button.js +8 -8
- package/dist/native/atom/checkbox.d.ts +4 -4
- package/dist/native/atom/checkbox.js +2 -2
- package/dist/native/atom/colored-value.d.ts +4 -4
- package/dist/native/atom/colored-value.js +4 -4
- package/dist/native/atom/image.d.ts +7 -7
- package/dist/native/atom/image.js +2 -2
- package/dist/native/atom/label.d.ts +5 -5
- package/dist/native/atom/label.js +2 -2
- package/dist/native/atom/link.d.ts +5 -5
- package/dist/native/atom/link.js +5 -5
- package/dist/native/atom/readout.d.ts +7 -7
- package/dist/native/atom/readout.js +3 -3
- package/dist/native/atom/search-input.d.ts +2 -2
- package/dist/native/atom/search-input.js +2 -2
- package/dist/native/atom/select.d.ts +14 -14
- package/dist/native/atom/select.js +8 -8
- package/dist/native/atom/separator.d.ts +2 -3
- package/dist/native/atom/separator.js +2 -3
- package/dist/native/atom/skeleton.d.ts +3 -3
- package/dist/native/atom/skeleton.js +3 -3
- package/dist/native/atom/slider.d.ts +6 -6
- package/dist/native/atom/slider.js +3 -3
- package/dist/native/atom/spinner.d.ts +4 -4
- package/dist/native/atom/spinner.js +2 -2
- package/dist/native/atom/switch.d.ts +4 -4
- package/dist/native/atom/switch.js +3 -3
- package/dist/native/atom/symbol.d.ts +7 -7
- package/dist/native/atom/symbol.js +7 -7
- package/dist/native/atom/symbol.types.d.ts +8 -8
- package/dist/native/atom/symbol.types.js +7 -7
- package/dist/native/atom/text-field.d.ts +15 -15
- package/dist/native/atom/text-field.js +5 -5
- package/dist/native/atom/theme-toggle.d.ts +7 -7
- package/dist/native/atom/theme-toggle.js +4 -4
- package/dist/native/atom/timezone-select.d.ts +5 -5
- package/dist/native/atom/timezone-select.js +4 -4
- package/dist/native/atom/typography.d.ts +2 -2
- package/dist/native/atom/typography.js +2 -2
- package/dist/native/base/button.d.ts +13 -13
- package/dist/native/base/button.js +4 -4
- package/dist/native/base/form.d.ts +15 -15
- package/dist/native/base/form.js +11 -11
- package/dist/native/base/glass-card.d.ts +3 -3
- package/dist/native/base/glass-card.js +3 -3
- package/dist/native/base/input.d.ts +8 -8
- package/dist/native/base/input.js +7 -7
- package/dist/native/base/sheet.d.ts +27 -27
- package/dist/native/base/sheet.js +15 -15
- package/dist/native/form/checkbox.d.ts +3 -3
- package/dist/native/form/checkbox.js +2 -2
- package/dist/native/form/date-picker.d.ts +9 -9
- package/dist/native/form/date-picker.js +9 -9
- package/dist/native/form/form.d.ts +5 -6
- package/dist/native/form/form.js +4 -5
- package/dist/native/form/radio-group.d.ts +5 -5
- package/dist/native/form/radio-group.js +4 -4
- package/dist/native/form/select.d.ts +2 -2
- package/dist/native/form/select.js +2 -2
- package/dist/native/form/slider.d.ts +2 -2
- package/dist/native/form/slider.js +2 -2
- package/dist/native/form/switch.d.ts +2 -2
- package/dist/native/form/switch.js +2 -2
- package/dist/native/form/text-area.d.ts +2 -2
- package/dist/native/form/text-area.js +1 -1
- package/dist/native/form/text-input.d.ts +5 -5
- package/dist/native/form/text-input.js +8 -8
- package/dist/native/layout/accordion.d.ts +5 -5
- package/dist/native/layout/accordion.js +2 -2
- package/dist/native/layout/card.d.ts +8 -8
- package/dist/native/layout/card.js +3 -3
- package/dist/native/layout/description.d.ts +2 -2
- package/dist/native/layout/description.js +2 -2
- package/dist/native/layout/error.d.ts +5 -5
- package/dist/native/layout/error.js +2 -2
- package/dist/native/layout/information.d.ts +4 -4
- package/dist/native/layout/information.js +3 -3
- package/dist/native/layout/locked.d.ts +15 -15
- package/dist/native/layout/locked.js +7 -7
- package/dist/native/layout/modal.d.ts +8 -8
- package/dist/native/layout/modal.js +5 -5
- package/dist/native/layout/not-found.d.ts +4 -4
- package/dist/native/layout/not-found.js +3 -3
- package/dist/native/layout/page-frame.d.ts +8 -8
- package/dist/native/layout/page-frame.js +3 -3
- package/dist/native/layout/panel.d.ts +5 -5
- package/dist/native/layout/panel.js +5 -5
- package/dist/native/layout/reorderable-list.d.ts +14 -14
- package/dist/native/layout/reorderable-list.js +10 -10
- package/dist/native/layout/sheet.d.ts +10 -10
- package/dist/native/layout/sheet.js +4 -4
- package/dist/native/layout/simple-dialog.d.ts +3 -3
- package/dist/native/layout/simple-dialog.js +2 -2
- package/dist/native/layout/simple-table.d.ts +18 -18
- package/dist/native/layout/simple-table.js +1 -1
- package/dist/native/layout/tab-bar.d.ts +10 -10
- package/dist/native/layout/tab-bar.js +4 -4
- package/dist/native/layout/tabs.d.ts +6 -6
- package/dist/native/layout/tabs.js +4 -4
- package/dist/native/layout/tuning-panel.d.ts +10 -10
- package/dist/native/layout/tuning-panel.js +15 -15
- package/dist/native/lib/autocomplete.d.ts +1 -1
- package/dist/native/lib/autocomplete.js +1 -1
- package/dist/native/lib/breakpoints.d.ts +3 -3
- package/dist/native/lib/breakpoints.js +3 -3
- package/dist/native/lib/chart-palette.d.ts +2 -2
- package/dist/native/lib/chart-palette.js +2 -2
- package/dist/native/lib/confirm.d.ts +15 -16
- package/dist/native/lib/confirm.js +9 -10
- package/dist/native/lib/control.d.ts +9 -9
- package/dist/native/lib/external-store.d.ts +4 -5
- package/dist/native/lib/keyboard.d.ts +7 -7
- package/dist/native/lib/keyboard.js +7 -7
- package/dist/native/lib/labels.d.ts +6 -6
- package/dist/native/lib/labels.js +6 -6
- package/dist/native/lib/loading.d.ts +3 -3
- package/dist/native/lib/loading.js +3 -3
- package/dist/native/lib/network.d.ts +5 -6
- package/dist/native/lib/network.js +5 -6
- package/dist/native/lib/scheme.d.ts +7 -7
- package/dist/native/lib/scheme.js +3 -3
- package/dist/native/lib/snackbar.d.ts +12 -13
- package/dist/native/lib/snackbar.js +7 -8
- package/dist/native/lib/theme.d.ts +15 -15
- package/dist/native/lib/theme.js +15 -15
- package/dist/native/lib/timezone.d.ts +13 -13
- package/dist/native/lib/timezone.js +13 -13
- package/dist/native/lib/token-color.d.ts +1 -1
- package/dist/native/lib/token-color.js +1 -1
- package/dist/native/lib/tuning-context.d.ts +2 -2
- package/dist/native/lib/tuning.d.ts +10 -10
- package/dist/native/lib/tuning.js +8 -8
- package/dist/native/lib/typography.d.ts +3 -3
- package/dist/native/lib/typography.js +3 -3
- package/dist/native/lib/utils.d.ts +3 -3
- package/dist/native/lib/utils.js +3 -3
- package/dist/native/once/confirm.d.ts +2 -2
- package/dist/native/once/confirm.js +2 -2
- package/dist/native/once/error-boundary.d.ts +3 -3
- package/dist/native/once/error-boundary.js +2 -2
- package/dist/native/once/loading-lock.d.ts +3 -3
- package/dist/native/once/loading-lock.js +3 -3
- package/dist/native/once/offline-banner.d.ts +6 -6
- package/dist/native/once/offline-banner.js +5 -5
- package/dist/native/once/snackbar.d.ts +7 -7
- package/dist/native/once/snackbar.js +5 -5
- package/dist/native/styles.css +21 -21
- package/dist/shared/analytics.d.ts +23 -23
- package/dist/shared/button.d.ts +1 -1
- package/dist/shared/form.d.ts +7 -7
- package/dist/shared/form.js +2 -2
- package/dist/tokens/contrast-pairs.d.ts +9 -9
- package/dist/tokens/contrast-pairs.js +10 -10
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/styles.gen.css +87 -87
- package/dist/tokens/tokens.gen.d.ts +2 -2
- package/dist/tokens/tokens.gen.js +2 -2
- package/dist/tuning/catalog.d.ts +8 -8
- package/dist/tuning/catalog.js +9 -9
- package/dist/tuning/color.d.ts +4 -4
- package/dist/tuning/color.js +5 -5
- package/dist/tuning/css.d.ts +13 -13
- package/dist/tuning/css.js +17 -17
- package/dist/tuning/model.d.ts +11 -11
- package/dist/tuning/model.js +11 -11
- package/dist/tuning/native.d.ts +18 -18
- package/dist/tuning/native.js +18 -18
- package/dist/tuning/schema.d.ts +15 -15
- package/dist/tuning/schema.js +22 -22
- package/dist/tuning/types.d.ts +25 -25
- package/dist/tuning/types.js +6 -6
- package/dist/web/analytics/line-chart.d.ts +6 -6
- package/dist/web/analytics/line-chart.js +3 -3
- package/dist/web/analytics/metric-card.d.ts +6 -6
- package/dist/web/analytics/metric-card.js +5 -5
- package/dist/web/analytics/multi-line-chart.d.ts +23 -23
- package/dist/web/analytics/multi-line-chart.js +33 -33
- package/dist/web/atom/avatar.d.ts +1 -1
- package/dist/web/atom/checkbox.d.ts +6 -6
- package/dist/web/atom/checkbox.js +2 -2
- package/dist/web/atom/colored-value.d.ts +4 -4
- package/dist/web/atom/colored-value.js +4 -4
- package/dist/web/atom/help.d.ts +1 -1
- package/dist/web/atom/segmented-control.d.ts +13 -14
- package/dist/web/atom/segmented-control.js +6 -7
- package/dist/web/atom/select.d.ts +7 -7
- package/dist/web/atom/select.js +5 -5
- package/dist/web/atom/slider.d.ts +3 -3
- package/dist/web/atom/slider.js +2 -2
- package/dist/web/atom/switch.d.ts +3 -3
- package/dist/web/atom/text-area.d.ts +9 -8
- package/dist/web/atom/text-area.js +9 -8
- package/dist/web/atom/text-field.d.ts +5 -4
- package/dist/web/atom/text-field.js +5 -4
- package/dist/web/atom/toggle-chip.d.ts +6 -6
- package/dist/web/atom/toggle-chip.js +4 -4
- package/dist/web/atom/tooltip.d.ts +6 -6
- package/dist/web/atom/tooltip.js +2 -2
- package/dist/web/base/accordion.js +1 -1
- package/dist/web/base/breadcrumb.d.ts +1 -1
- package/dist/web/base/breadcrumb.js +1 -1
- package/dist/web/base/card.d.ts +3 -3
- package/dist/web/base/card.js +2 -2
- package/dist/web/base/dialog.d.ts +1 -1
- package/dist/web/base/dialog.js +1 -1
- package/dist/web/base/form.d.ts +7 -7
- package/dist/web/base/form.js +5 -5
- package/dist/web/base/pagination.d.ts +5 -5
- package/dist/web/base/pagination.js +1 -1
- package/dist/web/base/sheet.d.ts +1 -1
- package/dist/web/base/sheet.js +1 -1
- package/dist/web/base/slider.d.ts +1 -1
- package/dist/web/base/sonner.d.ts +2 -2
- package/dist/web/base/sonner.js +2 -2
- package/dist/web/base/spinner.js +1 -1
- package/dist/web/form/checkbox.d.ts +8 -8
- package/dist/web/form/checkbox.js +3 -3
- package/dist/web/form/radio-group.js +3 -3
- package/dist/web/form/select.js +1 -1
- package/dist/web/form/slider.d.ts +3 -3
- package/dist/web/form/slider.js +3 -3
- package/dist/web/form/switch.d.ts +3 -3
- package/dist/web/form/switch.js +4 -4
- package/dist/web/form/text-area.js +1 -1
- package/dist/web/form/text-input.d.ts +1 -1
- package/dist/web/form/text-input.js +1 -1
- package/dist/web/layout/accordion.d.ts +5 -5
- package/dist/web/layout/accordion.js +2 -2
- package/dist/web/layout/alert-modal.d.ts +11 -11
- package/dist/web/layout/alert-modal.js +7 -7
- package/dist/web/layout/card.d.ts +1 -1
- package/dist/web/layout/information.d.ts +9 -9
- package/dist/web/layout/information.js +7 -7
- package/dist/web/layout/modal.d.ts +1 -1
- package/dist/web/layout/page-frame.d.ts +14 -14
- package/dist/web/layout/page-frame.js +7 -7
- package/dist/web/layout/scroll-area.d.ts +1 -1
- package/dist/web/layout/sheet.d.ts +4 -4
- package/dist/web/layout/simple-table.d.ts +18 -18
- package/dist/web/layout/simple-table.js +2 -2
- package/dist/web/layout/tabs.d.ts +4 -4
- package/dist/web/layout/titled-modal.d.ts +10 -11
- package/dist/web/layout/titled-modal.js +7 -8
- package/dist/web/lib/css-vars.d.ts +6 -6
- package/dist/web/lib/css-vars.js +5 -5
- package/dist/web/lib/dialog.d.ts +4 -4
- package/dist/web/lib/labels.d.ts +8 -8
- package/dist/web/lib/labels.js +8 -8
- package/dist/web/lib/modal-open-focus.d.ts +7 -7
- package/dist/web/lib/modal-open-focus.js +9 -9
- package/dist/web/lib/restore-focus.d.ts +4 -4
- package/dist/web/lib/restore-focus.js +4 -4
- package/dist/web/styles.css +33 -33
- package/package.json +2 -2
package/dist/tuning/model.js
CHANGED
|
@@ -2,25 +2,25 @@ import { parseTokenColor } from "./color.js";
|
|
|
2
2
|
import { FONT_KEYS, FONT_TOKEN, MODES, RADIUS_ROLES, emptyTuning } from "./types.js";
|
|
3
3
|
|
|
4
4
|
//#region src/tuning/model.ts
|
|
5
|
-
/**
|
|
5
|
+
/** The mode that actually holds a color token. Brand colors are common to both, so a dark specification is folded into `light`. */
|
|
6
6
|
function modeOf(catalog, name, mode) {
|
|
7
7
|
return mode === "dark" && catalog.colors.find((color) => color.name === name)?.hasDark === false ? "light" : mode;
|
|
8
8
|
}
|
|
9
|
-
/**
|
|
9
|
+
/** The default font value. */
|
|
10
10
|
function defaultFont(catalog, key) {
|
|
11
11
|
return catalog.defaults.light[FONT_TOKEN[key]] ?? "";
|
|
12
12
|
}
|
|
13
|
-
/**
|
|
13
|
+
/** The radius (px) per role. Falls back to the default (control 6, surface 10) when unspecified. */
|
|
14
14
|
function radiusPx(tuning, catalog, role) {
|
|
15
15
|
return tuning.radius[role] ?? catalog.radius[role];
|
|
16
16
|
}
|
|
17
|
-
/**
|
|
17
|
+
/** The body line height (px). Proportional to the size (the ratio of the default 14px / 22px). */
|
|
18
18
|
function bodyLineHeight(catalog, size) {
|
|
19
19
|
return Math.round(size * catalog.body.lineHeight / catalog.body.size);
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
23
|
-
*
|
|
22
|
+
* Drops items equal to the defaults so that the same content has a single form (run before saving, exporting, and comparing).
|
|
23
|
+
* Colors are aligned to the canonical form (lowercase `#rrggbb`). Unreadable colors are kept as they are (validation is the job of `parseTuning`).
|
|
24
24
|
*/
|
|
25
25
|
function normalize(tuning, catalog) {
|
|
26
26
|
const out = emptyTuning();
|
|
@@ -50,18 +50,18 @@ function toCanonical(value, alpha) {
|
|
|
50
50
|
const parsed = parseTokenColor(value, { alpha });
|
|
51
51
|
return parsed.ok ? parsed.value : value;
|
|
52
52
|
}
|
|
53
|
-
/**
|
|
53
|
+
/** Whether it equals the defaults (has no difference). */
|
|
54
54
|
function isEmpty(tuning, catalog) {
|
|
55
55
|
return countChanges(tuning, catalog) === 0;
|
|
56
56
|
}
|
|
57
|
-
/**
|
|
57
|
+
/** The number of differences from the defaults (1 per item of color, reference, radius, typeface, and shadow). */
|
|
58
58
|
function countChanges(tuning, catalog) {
|
|
59
59
|
const n = normalize(tuning, catalog);
|
|
60
60
|
return Object.keys(n.tokens.light).length + Object.keys(n.tokens.dark).length + Object.keys(n.semantic).length + Object.keys(n.radius).length + Object.keys(n.font).length + (n.shadow === "default" ? 0 : 1);
|
|
61
61
|
}
|
|
62
62
|
/**
|
|
63
|
-
*
|
|
64
|
-
*
|
|
63
|
+
* The actual value of a token. **It follows references (`var()`)**: a semantic token takes the actual value of its target (the override if there is one, the default otherwise).
|
|
64
|
+
* If you tune the ramp it refers to, the semantic tokens pointing at it change too (resolved the same way as the runtime CSS).
|
|
65
65
|
*/
|
|
66
66
|
function colorValue(tuning, catalog, mode, name) {
|
|
67
67
|
const ref = (Object.hasOwn(tuning.semantic, name) ? tuning.semantic[name] : void 0) ?? (Object.hasOwn(catalog.semantic, name) ? catalog.semantic[name] : void 0);
|
|
@@ -73,7 +73,7 @@ function colorValue(tuning, catalog, mode, name) {
|
|
|
73
73
|
if (fallback === void 0) throw new Error(`未定義のトークン: --${name}`);
|
|
74
74
|
return fallback;
|
|
75
75
|
}
|
|
76
|
-
/**
|
|
76
|
+
/** A table of the actual values of all tokens (color, typeface, tuned radius). The values after the tuning is applied, in the same shape as `tokens`. */
|
|
77
77
|
function effectiveTokens(tuning, catalog) {
|
|
78
78
|
const out = {
|
|
79
79
|
light: {},
|
package/dist/tuning/native.d.ts
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
import { Mode, Tuning, TuningCatalog } from "./types.js";
|
|
2
2
|
//#region src/tuning/native.d.ts
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* react-native-css
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
|
|
5
|
+
* react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
|
|
6
|
+
* do not read a CSS variable on a real device and **do not follow runtime overrides (`toNativeVariables`)**. `useTokenColor`, which reads colors from TS, does follow them.
|
|
7
|
+
* `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
|
|
8
8
|
*/
|
|
9
9
|
export declare const NATIVE_BUILD_FIXED_TOKENS: readonly ["action", "action-hover", "action-foreground", "primary", "primary-foreground", "ring", "sidebar-primary", "sidebar-primary-foreground", "sidebar-ring", "destructive-solid-foreground"];
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* `native/lib/tokens-check.ts`
|
|
11
|
+
* The brand colors (`lt-three`, `lt-three-foreground`). They are common to light and dark and fixed at build time, so classes such as `bg-lt-three`
|
|
12
|
+
* do not follow runtime overrides (by design, so that they do not invert with the theme). They are kept apart from `NATIVE_BUILD_FIXED_TOKENS`
|
|
13
|
+
* because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
|
|
14
14
|
*/
|
|
15
15
|
export declare const NATIVE_BUILD_FIXED_BRAND_TOKENS: readonly ["lt-three", "lt-three-foreground"];
|
|
16
|
-
/**
|
|
16
|
+
/** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
|
|
17
17
|
export declare function firstFontFamily(value: string): string | undefined;
|
|
18
18
|
/**
|
|
19
|
-
* native
|
|
20
|
-
* -
|
|
21
|
-
*
|
|
22
|
-
* -
|
|
23
|
-
* -
|
|
19
|
+
* The CSS variables handed to native (the `value` of react-native-css's `VariableContextProvider`). For the given mode, **only those that differ from the defaults**.
|
|
20
|
+
* - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
|
|
21
|
+
* as separate literals under the same change (in react-native-web, `--card: var(--raised)` is already resolved at `:root` and does not follow an override of the ramp alone)
|
|
22
|
+
* - Radius (`--radius-control` / `--radius-surface`): px
|
|
23
|
+
* - Typeface (`--font-geist` and so on): only the first name
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
25
|
+
* **What takes effect on a real device is classes that use color tokens with different values in light and dark (such as `bg-card`; on a real device they become references to the ramp) and the typeface**.
|
|
26
|
+
* Radius and body size are folded into literals at build time, and the color classes of `NATIVE_BUILD_FIXED_TOKENS` are folded too, so they have no effect on a real device
|
|
27
|
+
* (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
|
|
28
28
|
*/
|
|
29
29
|
export declare function toNativeVariables(tuning: Tuning, catalog: TuningCatalog, mode: Mode): Record<`--${string}`, string>;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
31
|
+
* Descriptions (in Japanese) of the tuning items that **have no effect at runtime on a real native device**. Empty means everything takes effect (everything does in react-native-web).
|
|
32
|
+
* They are shown on the tuning screen so that it is clear the lack of effect is by design. The values stay in the JSON, so they take effect when read on web.
|
|
33
33
|
*/
|
|
34
34
|
export declare function nativeLimits(tuning: Tuning, catalog: TuningCatalog): string[];
|
|
35
35
|
//#endregion
|
package/dist/tuning/native.js
CHANGED
|
@@ -3,10 +3,10 @@ import { effectiveTokens, normalize } from "./model.js";
|
|
|
3
3
|
|
|
4
4
|
//#region src/tuning/native.ts
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* react-native-css
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
|
|
7
|
+
* react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
|
|
8
|
+
* do not read a CSS variable on a real device and **do not follow runtime overrides (`toNativeVariables`)**. `useTokenColor`, which reads colors from TS, does follow them.
|
|
9
|
+
* `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
|
|
10
10
|
*/
|
|
11
11
|
const NATIVE_BUILD_FIXED_TOKENS = [
|
|
12
12
|
"action",
|
|
@@ -21,27 +21,27 @@ const NATIVE_BUILD_FIXED_TOKENS = [
|
|
|
21
21
|
"destructive-solid-foreground"
|
|
22
22
|
];
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* `native/lib/tokens-check.ts`
|
|
24
|
+
* The brand colors (`lt-three`, `lt-three-foreground`). They are common to light and dark and fixed at build time, so classes such as `bg-lt-three`
|
|
25
|
+
* do not follow runtime overrides (by design, so that they do not invert with the theme). They are kept apart from `NATIVE_BUILD_FIXED_TOKENS`
|
|
26
|
+
* because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
|
|
27
27
|
*/
|
|
28
28
|
const NATIVE_BUILD_FIXED_BRAND_TOKENS = ["lt-three", "lt-three-foreground"];
|
|
29
|
-
/**
|
|
29
|
+
/** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
|
|
30
30
|
function firstFontFamily(value) {
|
|
31
31
|
const first = value.split(",")[0]?.trim() ?? "";
|
|
32
32
|
if (first === "" || first.startsWith("var(")) return void 0;
|
|
33
33
|
return first.replace(/^["']|["']$/g, "");
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
|
-
* native
|
|
37
|
-
* -
|
|
38
|
-
*
|
|
39
|
-
* -
|
|
40
|
-
* -
|
|
36
|
+
* The CSS variables handed to native (the `value` of react-native-css's `VariableContextProvider`). For the given mode, **only those that differ from the defaults**.
|
|
37
|
+
* - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
|
|
38
|
+
* as separate literals under the same change (in react-native-web, `--card: var(--raised)` is already resolved at `:root` and does not follow an override of the ramp alone)
|
|
39
|
+
* - Radius (`--radius-control` / `--radius-surface`): px
|
|
40
|
+
* - Typeface (`--font-geist` and so on): only the first name
|
|
41
41
|
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
42
|
+
* **What takes effect on a real device is classes that use color tokens with different values in light and dark (such as `bg-card`; on a real device they become references to the ramp) and the typeface**.
|
|
43
|
+
* Radius and body size are folded into literals at build time, and the color classes of `NATIVE_BUILD_FIXED_TOKENS` are folded too, so they have no effect on a real device
|
|
44
|
+
* (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
|
|
45
45
|
*/
|
|
46
46
|
function toNativeVariables(tuning, catalog, mode) {
|
|
47
47
|
const n = normalize(tuning, catalog);
|
|
@@ -60,8 +60,8 @@ function toNativeVariables(tuning, catalog, mode) {
|
|
|
60
60
|
return out;
|
|
61
61
|
}
|
|
62
62
|
/**
|
|
63
|
-
*
|
|
64
|
-
*
|
|
63
|
+
* Descriptions (in Japanese) of the tuning items that **have no effect at runtime on a real native device**. Empty means everything takes effect (everything does in react-native-web).
|
|
64
|
+
* They are shown on the tuning screen so that it is clear the lack of effect is by design. The values stay in the JSON, so they take effect when read on web.
|
|
65
65
|
*/
|
|
66
66
|
function nativeLimits(tuning, catalog) {
|
|
67
67
|
const n = normalize(tuning, catalog);
|
package/dist/tuning/schema.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { Tuning, TuningCatalog } from "./types.js";
|
|
2
2
|
import { z } from "zod";
|
|
3
3
|
//#region src/tuning/schema.d.ts
|
|
4
|
-
/**
|
|
4
|
+
/** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
|
|
5
5
|
export declare const FORMAT = "love3-tuning";
|
|
6
6
|
export declare const VERSION = 1;
|
|
7
|
-
/**
|
|
7
|
+
/** The key of the storage location (localStorage). */
|
|
8
8
|
export declare const STORAGE_KEY = "love3-preview:tuning";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* The skeleton of the format. **Unknown fields are rejected** (`strictObject`). Checks that depend on the design system, such as token names and color contents, are added by `parseTuning`.
|
|
11
|
+
* Every field can be omitted (write only the difference from the defaults).
|
|
12
12
|
*/
|
|
13
13
|
declare const envelope: z.ZodObject<{
|
|
14
14
|
format: z.ZodLiteral<"love3-tuning">;
|
|
@@ -35,13 +35,13 @@ declare const envelope: z.ZodObject<{
|
|
|
35
35
|
}>>;
|
|
36
36
|
}, z.core.$strict>;
|
|
37
37
|
type Envelope = z.output<typeof envelope>;
|
|
38
|
-
/**
|
|
38
|
+
/** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
|
|
39
39
|
export declare const MAX_IMPORT_BYTES: number;
|
|
40
|
-
/**
|
|
40
|
+
/** The upper limit of the number of entries in one table (`tokens.light` / `tokens.dark` / `semantic`). There are fewer than 50 names that can be tuned. */
|
|
41
41
|
export declare const MAX_ENTRIES = 200;
|
|
42
|
-
/**
|
|
42
|
+
/** Lists rejection reasons up to this many (the rest become "N more"). */
|
|
43
43
|
export declare const MAX_REASONS = 20;
|
|
44
|
-
/**
|
|
44
|
+
/** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
|
|
45
45
|
export declare function tooLarge(text: string): boolean;
|
|
46
46
|
export declare const TOO_LARGE_REASON = "大きすぎます(256 KB まで)";
|
|
47
47
|
export declare function fontProblem(value: string): string | undefined;
|
|
@@ -53,17 +53,17 @@ export type ParseResult = {
|
|
|
53
53
|
reasons: string[];
|
|
54
54
|
};
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
57
|
-
*
|
|
56
|
+
* Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
|
|
57
|
+
* The rejection reasons are all the problems found, in Japanese, each with the location of the item.
|
|
58
58
|
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
59
|
+
* What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
|
|
60
|
+
* invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
|
|
61
|
+
* out-of-range radius and body size, and typefaces that cannot be injected. On success, it returns the form with items equal to the defaults dropped (`normalize`).
|
|
62
62
|
*/
|
|
63
63
|
export declare function parseTuning(text: string, catalog: TuningCatalog): ParseResult;
|
|
64
|
-
/**
|
|
64
|
+
/** The object for export containing only the difference (empty sections are omitted). */
|
|
65
65
|
export declare function toExportObject(tuning: Tuning, catalog: TuningCatalog): Record<string, unknown>;
|
|
66
|
-
/**
|
|
66
|
+
/** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
|
|
67
67
|
export declare function toJson(tuning: Tuning, catalog: TuningCatalog): string;
|
|
68
68
|
//#endregion
|
|
69
69
|
export type { Envelope };
|
package/dist/tuning/schema.js
CHANGED
|
@@ -5,17 +5,17 @@ import { normalize } from "./model.js";
|
|
|
5
5
|
import { z } from "zod";
|
|
6
6
|
|
|
7
7
|
//#region src/tuning/schema.ts
|
|
8
|
-
/**
|
|
8
|
+
/** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
|
|
9
9
|
const FORMAT = "love3-tuning";
|
|
10
10
|
const VERSION = 1;
|
|
11
|
-
/**
|
|
11
|
+
/** The key of the storage location (localStorage). */
|
|
12
12
|
const STORAGE_KEY = "love3-preview:tuning";
|
|
13
13
|
const colorMap = z.record(z.string(), z.string());
|
|
14
14
|
const radiusPx = z.number().min(0, { error: "角丸は 0 以上です" }).max(64, { error: `角丸は ${64}px 以下です` });
|
|
15
15
|
const fontValue = z.string();
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
17
|
+
* The skeleton of the format. **Unknown fields are rejected** (`strictObject`). Checks that depend on the design system, such as token names and color contents, are added by `parseTuning`.
|
|
18
|
+
* Every field can be omitted (write only the difference from the defaults).
|
|
19
19
|
*/
|
|
20
20
|
const envelope = z.strictObject({
|
|
21
21
|
format: z.literal(FORMAT, { error: (issue) => `format は "${FORMAT}" にしてください(実際: ${show(issue.input)})` }),
|
|
@@ -44,26 +44,26 @@ const envelope = z.strictObject({
|
|
|
44
44
|
function show(value) {
|
|
45
45
|
return typeof value === "string" ? `"${value}"` : JSON.stringify(value) ?? String(value);
|
|
46
46
|
}
|
|
47
|
-
/**
|
|
47
|
+
/** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
|
|
48
48
|
const MAX_IMPORT_BYTES = 262144;
|
|
49
|
-
/**
|
|
49
|
+
/** The upper limit of the number of entries in one table (`tokens.light` / `tokens.dark` / `semantic`). There are fewer than 50 names that can be tuned. */
|
|
50
50
|
const MAX_ENTRIES = 200;
|
|
51
|
-
/**
|
|
51
|
+
/** Lists rejection reasons up to this many (the rest become "N more"). */
|
|
52
52
|
const MAX_REASONS = 20;
|
|
53
53
|
const BYTE_ENCODER = new TextEncoder();
|
|
54
|
-
/**
|
|
54
|
+
/** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
|
|
55
55
|
function tooLarge(text) {
|
|
56
56
|
return text.length > 262144 || BYTE_ENCODER.encode(text).length > 262144;
|
|
57
57
|
}
|
|
58
58
|
const TOO_LARGE_REASON = `大きすぎます(${MAX_IMPORT_BYTES / 1024} KB まで)`;
|
|
59
59
|
/**
|
|
60
|
-
*
|
|
61
|
-
* -
|
|
62
|
-
* -
|
|
63
|
-
* - `var(--font-…)`
|
|
60
|
+
* An **allowlist** for typeface values (CSS font-family). Only comma-separated lists of the following parts pass:
|
|
61
|
+
* - Names with closed quotes (`"Geist Variable"` / `'Yu Gothic'`). `\`, `;`, `{`, `}`, `<`, `>`, and newlines are not allowed inside
|
|
62
|
+
* - Bare names (letters, digits, `-`, `_`, and spaces; non-ASCII is allowed too; `sans-serif`, `ui-monospace`, and so on)
|
|
63
|
+
* - `var(--font-…)` references (the default form such as `--font-mono: var(--font-geist-mono)`)
|
|
64
64
|
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
65
|
+
* **Brackets outside quotes (`(` `)` `[` `]`) and unclosed quotes are rejected.** If they were let through, a `;` or `}` would be swallowed by the bracket or quote,
|
|
66
|
+
* and the following declarations or the whole `.dark {}` block would disappear (reproduced with `Arial(`). Returns the reason (undefined if safe).
|
|
67
67
|
*/
|
|
68
68
|
function unreadable(value, index) {
|
|
69
69
|
return `書体の「${value.slice(index, index + 12).trim()}」から先を読めません。使えるのは、閉じたクォート付きの名前・素の名前(英数字・-・_・空白)・カンマ・var(--font-…) だけです(括弧 ( ) [ ] ; や閉じていない引用符は使えません)`;
|
|
@@ -86,12 +86,12 @@ function fontProblem(value) {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
90
|
-
*
|
|
89
|
+
* Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
|
|
90
|
+
* The rejection reasons are all the problems found, in Japanese, each with the location of the item.
|
|
91
91
|
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
92
|
+
* What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
|
|
93
|
+
* invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
|
|
94
|
+
* out-of-range radius and body size, and typefaces that cannot be injected. On success, it returns the form with items equal to the defaults dropped (`normalize`).
|
|
95
95
|
*/
|
|
96
96
|
function parseTuning(text, catalog) {
|
|
97
97
|
if (tooLarge(text)) return {
|
|
@@ -194,7 +194,7 @@ function parseTuning(text, catalog) {
|
|
|
194
194
|
tuning: normalize(tuning, catalog)
|
|
195
195
|
};
|
|
196
196
|
}
|
|
197
|
-
/**
|
|
197
|
+
/** The object for export containing only the difference (empty sections are omitted). */
|
|
198
198
|
function toExportObject(tuning, catalog) {
|
|
199
199
|
const n = normalize(tuning, catalog);
|
|
200
200
|
const out = {
|
|
@@ -211,11 +211,11 @@ function toExportObject(tuning, catalog) {
|
|
|
211
211
|
if (n.shadow !== "default") out.shadow = n.shadow;
|
|
212
212
|
return out;
|
|
213
213
|
}
|
|
214
|
-
/**
|
|
214
|
+
/** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
|
|
215
215
|
function toJson(tuning, catalog) {
|
|
216
216
|
return JSON.stringify(toExportObject(tuning, catalog), null, 2);
|
|
217
217
|
}
|
|
218
|
-
/**
|
|
218
|
+
/** The table (object) at a given path in the parsed JSON. undefined if absent. */
|
|
219
219
|
function rawTable(json, path) {
|
|
220
220
|
let current = json;
|
|
221
221
|
for (const key of path) {
|
package/dist/tuning/types.d.ts
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
//#region src/tuning/types.d.ts
|
|
2
|
-
/**
|
|
2
|
+
/** Light and dark. */
|
|
3
3
|
export type Mode = "light" | "dark";
|
|
4
4
|
export declare const MODES: readonly Mode[];
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* - `control`:
|
|
8
|
-
* - `surface`:
|
|
6
|
+
* Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
|
|
7
|
+
* - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
|
|
8
|
+
* - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
|
|
9
9
|
*/
|
|
10
10
|
export declare const RADIUS_ROLES: readonly ["control", "surface"];
|
|
11
11
|
export type RadiusRole = (typeof RADIUS_ROLES)[number];
|
|
12
|
-
/**
|
|
12
|
+
/** The upper limit of the radius (px). Both the slider and numeric input stop here. */
|
|
13
13
|
export declare const RADIUS_MAX = 64;
|
|
14
|
-
/**
|
|
14
|
+
/** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
|
|
15
15
|
export declare const FONT_KEYS: readonly ["geist", "geistMono", "jp"];
|
|
16
16
|
export type FontKey = (typeof FONT_KEYS)[number];
|
|
17
17
|
export declare const FONT_TOKEN: Readonly<Record<FontKey, string>>;
|
|
18
|
-
/**
|
|
18
|
+
/** The range of the body size (px). */
|
|
19
19
|
export declare const BODY_SIZE_MIN = 8;
|
|
20
20
|
export declare const BODY_SIZE_MAX = 32;
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
23
|
-
* `preset`
|
|
22
|
+
* Shadow presets. `default` is the love3 default (soft shadows using `--shadow-color`). `none` removes all shadows.
|
|
23
|
+
* `preset` swaps in Tailwind's default shadows.
|
|
24
24
|
*/
|
|
25
25
|
export type ShadowPreset = "default" | "none" | "preset";
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* The content of a tuning. It holds **only the difference from the defaults** (empty = the defaults as they are). The same shape as the canonical form for saving and exporting.
|
|
28
28
|
*
|
|
29
|
-
* - `tokens`:
|
|
30
|
-
* - `radius`:
|
|
31
|
-
* - `semantic`:
|
|
32
|
-
* - `font`:
|
|
33
|
-
* - `shadow`:
|
|
29
|
+
* - `tokens`: overrides of color tokens, per light and dark. Brand colors (`lt-three*`) are common to both, so they are held only in `light`
|
|
30
|
+
* - `radius`: the radius (px) per role. `control` (small interactive elements) and `surface` (surfaces and containers). Falls back to the default (`TuningCatalog.radius`) when absent
|
|
31
|
+
* - `semantic`: what the semantic tokens (`background` and so on) refer to (names of ramp, state, and brand tokens)
|
|
32
|
+
* - `font`: the typeface (a CSS font-family value) and the body size (px)
|
|
33
|
+
* - `shadow`: the shadow preset (the default is `default` = the love3 soft shadows)
|
|
34
34
|
*/
|
|
35
35
|
export interface Tuning {
|
|
36
36
|
tokens: Record<Mode, Record<string, string>>;
|
|
@@ -42,31 +42,31 @@ export interface Tuning {
|
|
|
42
42
|
shadow: ShadowPreset;
|
|
43
43
|
}
|
|
44
44
|
export declare function emptyTuning(): Tuning;
|
|
45
|
-
/**
|
|
45
|
+
/** The groups of color tokens. */
|
|
46
46
|
export type ColorGroup = "ramp" | "action" | "brand" | "state" | "chart";
|
|
47
47
|
export interface ColorToken {
|
|
48
48
|
name: string;
|
|
49
49
|
group: ColorGroup;
|
|
50
|
-
/**
|
|
50
|
+
/** Whether it can have a separate value in dark. Brand colors are common to both, so they do not. */
|
|
51
51
|
hasDark: boolean;
|
|
52
|
-
/**
|
|
52
|
+
/** Whether translucency is allowed (scrim). Everything else is an opaque `#rrggbb` only. */
|
|
53
53
|
alpha: boolean;
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
56
|
+
* What can be tuned, and the defaults. Built from the design system (`buildCatalog`). The logic looks only at this shape, so it does not depend on the design system and can be tested in Node.
|
|
57
57
|
*/
|
|
58
58
|
export interface TuningCatalog {
|
|
59
|
-
/**
|
|
59
|
+
/** The default actual values (with `var()` resolved; the love3 `tokens`). */
|
|
60
60
|
defaults: Readonly<Record<Mode, Readonly<Record<string, string>>>>;
|
|
61
|
-
/**
|
|
61
|
+
/** The color tokens (raw ramp, primary action, brand, state, chart), in definition order. */
|
|
62
62
|
colors: readonly ColorToken[];
|
|
63
|
-
/**
|
|
63
|
+
/** Semantic token name → default reference (`background` → `paper`), in definition order. */
|
|
64
64
|
semantic: Readonly<Record<string, string>>;
|
|
65
|
-
/**
|
|
65
|
+
/** The names that can be chosen as the target of a semantic reference (opaque color tokens). */
|
|
66
66
|
refOptions: readonly string[];
|
|
67
|
-
/**
|
|
67
|
+
/** The default radius (px) per role. Read from the CSS `@theme` (`--radius-control` / `--radius-surface`). */
|
|
68
68
|
radius: Readonly<Record<RadiusRole, number>>;
|
|
69
|
-
/**
|
|
69
|
+
/** The default body size (px) and line height (px). */
|
|
70
70
|
body: {
|
|
71
71
|
size: number;
|
|
72
72
|
lineHeight: number;
|
package/dist/tuning/types.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
//#region src/tuning/types.ts
|
|
2
2
|
const MODES = ["light", "dark"];
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* - `control`:
|
|
6
|
-
* - `surface`:
|
|
4
|
+
* Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
|
|
5
|
+
* - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
|
|
6
|
+
* - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
|
|
7
7
|
*/
|
|
8
8
|
const RADIUS_ROLES = ["control", "surface"];
|
|
9
|
-
/**
|
|
9
|
+
/** The upper limit of the radius (px). Both the slider and numeric input stop here. */
|
|
10
10
|
const RADIUS_MAX = 64;
|
|
11
|
-
/**
|
|
11
|
+
/** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
|
|
12
12
|
const FONT_KEYS = [
|
|
13
13
|
"geist",
|
|
14
14
|
"geistMono",
|
|
@@ -19,7 +19,7 @@ const FONT_TOKEN = {
|
|
|
19
19
|
geistMono: "font-geist-mono",
|
|
20
20
|
jp: "font-jp"
|
|
21
21
|
};
|
|
22
|
-
/**
|
|
22
|
+
/** The range of the body size (px). */
|
|
23
23
|
const BODY_SIZE_MIN = 8;
|
|
24
24
|
const BODY_SIZE_MAX = 32;
|
|
25
25
|
function emptyTuning() {
|
|
@@ -2,19 +2,19 @@ import { ChartCommonProps, LineChartSharedProps } from "../../shared/analytics.j
|
|
|
2
2
|
import { CSSProperties } from "react";
|
|
3
3
|
//#region src/web/analytics/line-chart.d.ts
|
|
4
4
|
export type LineChartProps = ChartCommonProps & LineChartSharedProps & {
|
|
5
|
-
/**
|
|
5
|
+
/** Style passed to the outer element (corresponds to native's `style: ViewStyle`). */
|
|
6
6
|
style?: CSSProperties;
|
|
7
7
|
className?: string;
|
|
8
|
-
/**
|
|
8
|
+
/** Formatting of the y-axis ticks and the tooltip values (a web addition. Native's `LineChart` is formatted by the OS chart). */
|
|
9
9
|
formatValue?: (value: number) => string;
|
|
10
|
-
/**
|
|
10
|
+
/** Text shown when there is no data (a web addition). */
|
|
11
11
|
emptyText?: string;
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
14
|
+
* A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
|
|
15
|
+
* Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
|
|
16
16
|
*
|
|
17
|
-
*
|
|
17
|
+
* Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
|
|
18
18
|
*/
|
|
19
19
|
export declare function LineChart({ data, color, ...rest }: LineChartProps): import("react").JSX.Element;
|
|
20
20
|
//#endregion
|
|
@@ -5,10 +5,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
|
|
6
6
|
//#region src/web/analytics/line-chart.tsx
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
|
|
9
|
+
* Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
|
|
10
10
|
*
|
|
11
|
-
*
|
|
11
|
+
* Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
|
|
12
12
|
*/
|
|
13
13
|
function LineChart({ data, color = "var(--chart-1)", ...rest }) {
|
|
14
14
|
const series = useMemo(() => [{
|
|
@@ -2,17 +2,17 @@ import { MetricCardSharedProps } from "../../shared/analytics.js";
|
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
//#region src/web/analytics/metric-card.d.ts
|
|
4
4
|
export type MetricCardProps = Omit<MetricCardSharedProps, "label"> & {
|
|
5
|
-
/**
|
|
5
|
+
/** Name of the metric. Besides a string you can pass an element, such as a heading with a help trigger (native takes a string). */
|
|
6
6
|
label: ReactNode;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
* raised
|
|
9
|
+
* A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
|
|
10
|
+
* A raised surface + a thin 1px border + the surface corner radius, with no shadow.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
12
|
+
* Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
|
|
13
|
+
* The value stays on one line and is truncated when it does not fit (it does not wrap).
|
|
14
14
|
*
|
|
15
|
-
* `trend`
|
|
15
|
+
* When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
|
|
16
16
|
*/
|
|
17
17
|
export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
|
|
18
18
|
//#endregion
|
|
@@ -3,13 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
|
|
4
4
|
//#region src/web/analytics/metric-card.tsx
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* raised
|
|
6
|
+
* A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
|
|
7
|
+
* A raised surface + a thin 1px border + the surface corner radius, with no shadow.
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
|
|
10
|
+
* The value stays on one line and is truncated when it does not fit (it does not wrap).
|
|
11
11
|
*
|
|
12
|
-
* `trend`
|
|
12
|
+
* When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
|
|
13
13
|
*/
|
|
14
14
|
function MetricCard({ label, value, subValue, trend, className }) {
|
|
15
15
|
const tone = trend === void 0 || trend === 0 ? void 0 : trend > 0 ? "up" : "down";
|