@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f
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/CHANGELOG.md +60 -0
- package/README.md +79 -45
- package/dist/Banner/Banner.d.ts +3 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +13 -3
- package/dist/BottomSheet/BottomSheet.d.ts +66 -0
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheet.js +392 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +60 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetPanel.js +398 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts +61 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.js +410 -0
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts +21 -0
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetSwitcherContext.js +13 -0
- package/dist/BottomSheet/index.d.ts +11 -0
- package/dist/BottomSheet/index.d.ts.map +1 -0
- package/dist/BottomSheet/index.js +12 -0
- package/dist/BottomSheet/snapOffsets.d.ts +72 -0
- package/dist/BottomSheet/snapOffsets.d.ts.map +1 -0
- package/dist/BottomSheet/snapOffsets.js +130 -0
- package/dist/BottomSheet/useMobileKeyboard.d.ts +35 -0
- package/dist/BottomSheet/useMobileKeyboard.d.ts.map +1 -0
- package/dist/BottomSheet/useMobileKeyboard.js +373 -0
- package/dist/BottomSheet/useSheetGestures.d.ts +180 -0
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -0
- package/dist/BottomSheet/useSheetGestures.js +989 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +3 -4
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +12 -6
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +4 -2
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +9 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +31 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +2 -1
- package/dist/Field/InputClearButton.d.ts +2 -1
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -1
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +9 -3
- package/dist/MobileNav/MobileNav.d.ts +12 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +102 -30
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +21 -7
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +9 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +14 -3
- package/dist/StatusDot/StatusDot.d.ts +43 -3
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +42 -5
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +8 -1
- package/dist/Tokenizer/Tokenizer.js +11 -5
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +4 -1
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +5 -3
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +10 -1
- package/dist/astryx.css +21 -0
- package/dist/hooks/index.d.ts +8 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +8 -1
- package/dist/hooks/useFocusTrap.d.ts +0 -11
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +1 -11
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/defineTheme.d.ts +22 -4
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/expandColorScale.d.ts +17 -2
- package/dist/theme/expandColorScale.d.ts.map +1 -1
- package/dist/theme/expandColorScale.js +63 -33
- package/dist/utils/ime.d.ts +5 -0
- package/dist/utils/ime.d.ts.map +1 -0
- package/dist/utils/ime.js +63 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +2 -1
- package/locales/af-ZA.json +958 -0
- package/locales/ar-SA.json +998 -0
- package/locales/ca-ES.json +974 -0
- package/locales/cs-CZ.json +990 -0
- package/locales/da-DK.json +966 -0
- package/locales/de-DE.json +966 -0
- package/locales/el-GR.json +990 -0
- package/locales/en.json +48 -0
- package/locales/es-ES.json +978 -0
- package/locales/fi-FI.json +990 -0
- package/locales/fr-FR.json +928 -0
- package/locales/he-IL.json +990 -0
- package/locales/hu-HU.json +990 -0
- package/locales/it-IT.json +978 -0
- package/locales/ja-JP.json +998 -0
- package/locales/ko-KR.json +990 -0
- package/locales/nl-NL.json +954 -0
- package/locales/no-NO.json +978 -0
- package/locales/pl-PL.json +982 -0
- package/locales/pseudo.json +36 -0
- package/locales/pt-BR.json +982 -0
- package/locales/pt-PT.json +982 -0
- package/locales/ro-RO.json +982 -0
- package/locales/ru-RU.json +990 -0
- package/locales/sr-SP.json +990 -0
- package/locales/sv-SE.json +986 -0
- package/locales/tr-TR.json +990 -0
- package/locales/uk-UA.json +990 -0
- package/locales/vi-VN.json +986 -0
- package/locales/zh-CN.json +998 -0
- package/locales/zh-TW.json +998 -0
- package/package.json +9 -8
- package/src/Banner/Banner.doc.mjs +3 -3
- package/src/Banner/Banner.test.tsx +40 -0
- package/src/Banner/Banner.tsx +27 -2
- package/src/BottomSheet/BottomSheet.doc.mjs +266 -0
- package/src/BottomSheet/BottomSheet.test.tsx +2114 -0
- package/src/BottomSheet/BottomSheet.tsx +545 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +240 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +547 -0
- package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +219 -0
- package/src/BottomSheet/BottomSheetSwitcher.test.tsx +850 -0
- package/src/BottomSheet/BottomSheetSwitcher.tsx +628 -0
- package/src/BottomSheet/BottomSheetSwitcherContext.ts +51 -0
- package/src/BottomSheet/index.ts +15 -0
- package/src/BottomSheet/snapOffsets.test.ts +187 -0
- package/src/BottomSheet/snapOffsets.ts +159 -0
- package/src/BottomSheet/useMobileKeyboard.ts +499 -0
- package/src/BottomSheet/useSheetGestures.test.ts +1059 -0
- package/src/BottomSheet/useSheetGestures.ts +1459 -0
- package/src/Chat/ChatComposerInput.tsx +3 -4
- package/src/ComplexSelector/ComplexSelector.tsx +12 -5
- package/src/ContextMenu/ContextMenu.tsx +4 -2
- package/src/DateInput/DateInput.test.tsx +21 -0
- package/src/DateInput/DateInput.tsx +9 -1
- package/src/DateTimeInput/DateTimeInput.doc.mjs +4 -0
- package/src/DateTimeInput/DateTimeInput.test.tsx +137 -0
- package/src/DateTimeInput/DateTimeInput.tsx +39 -2
- package/src/Dialog/Dialog.tsx +2 -1
- package/src/Field/Field.doc.mjs +1 -0
- package/src/Field/InputClearButton.test.tsx +25 -0
- package/src/Field/InputClearButton.tsx +4 -1
- package/src/FileInput/FileInput.test.tsx +53 -9
- package/src/Lightbox/Lightbox.test.tsx +49 -28
- package/src/Lightbox/Lightbox.tsx +7 -3
- package/src/MobileNav/MobileNav.tsx +128 -37
- package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +426 -0
- package/src/MobileNav/MobileNavCloseTiming.test.ts +58 -0
- package/src/MobileNav/MobileNavCloseVisibility.test.tsx +172 -0
- package/src/MultiSelector/MultiSelector.test.tsx +195 -51
- package/src/MultiSelector/MultiSelector.tsx +22 -8
- package/src/NumberInput/NumberInput.test.tsx +18 -0
- package/src/NumberInput/NumberInput.tsx +9 -1
- package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
- package/src/Selector/Selector.test.tsx +85 -26
- package/src/Selector/Selector.tsx +13 -4
- package/src/StatusDot/StatusDot.doc.mjs +13 -0
- package/src/StatusDot/StatusDot.test.tsx +115 -8
- package/src/StatusDot/StatusDot.tsx +74 -9
- package/src/Switch/Switch.test.tsx +16 -0
- package/src/Switch/Switch.tsx +7 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +20 -2
- package/src/TimeInput/TimeInput.test.tsx +23 -0
- package/src/TimeInput/TimeInput.tsx +8 -0
- package/src/Tokenizer/Tokenizer.test.tsx +50 -32
- package/src/Tokenizer/Tokenizer.tsx +5 -5
- package/src/Tooltip/useTooltip.tsx +4 -1
- package/src/Typeahead/BaseTypeahead.tsx +10 -3
- package/src/Typeahead/Typeahead.test.tsx +116 -7
- package/src/Typeahead/Typeahead.tsx +10 -1
- package/src/__tests__/stubMatchMedia.test.ts +79 -0
- package/src/__tests__/stubMatchMedia.ts +95 -0
- package/src/hooks/index.ts +9 -5
- package/src/hooks/useFocusTrap.ts +1 -14
- package/src/hooks/useInputStatusIcon.test.tsx +19 -0
- package/src/hooks/useInputStatusIcon.tsx +7 -0
- package/src/index.ts +1 -0
- package/src/theme/defineTheme.ts +22 -4
- package/src/theme/expandColorScale.test.ts +138 -0
- package/src/theme/expandColorScale.ts +89 -44
- package/src/utils/ime.test.ts +32 -0
- package/src/utils/ime.ts +69 -0
- package/src/utils/index.ts +2 -0
- package/dist/astryx.umd.js +0 -147
- package/dist/astryx.umd.js.map +0 -7
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
* @output Token overrides for derivable color tokens
|
|
7
7
|
* @position Theme utility; consumed by defineTheme.ts
|
|
8
8
|
*
|
|
9
|
-
* Generates color token overrides from
|
|
10
|
-
*
|
|
9
|
+
* Generates color token overrides from an accent seed using the HCT
|
|
10
|
+
* perceptual color model. Only produces tokens that meaningfully
|
|
11
11
|
* derive from the accent — status colors, categorical hues, and fixed
|
|
12
12
|
* tokens (on-dark/on-light) fall through to colorDefaults.
|
|
13
13
|
*
|
|
@@ -15,11 +15,19 @@
|
|
|
15
15
|
* ramp (seeded from the default accent's hue) while the accent tokens
|
|
16
16
|
* themselves fall through to colorDefaults, same as the tokens above.
|
|
17
17
|
*
|
|
18
|
+
* `accent` also accepts a `[light, dark]` tuple (matching `TokenValue` in
|
|
19
|
+
* defineTheme). A tuple seeds each color scheme from its own half: the
|
|
20
|
+
* light side of every generated `light-dark()` pair derives from the light
|
|
21
|
+
* accent's palettes, the dark side from the dark accent's. A plain string
|
|
22
|
+
* seeds both sides identically, token for token the same output as before
|
|
23
|
+
* tuples existed.
|
|
24
|
+
*
|
|
18
25
|
* WCAG contrast guarantees (asserted in expandColorScale.test.ts):
|
|
19
26
|
* - Text tones are guaranteed >= 4.5:1 against their surfaces by tone
|
|
20
27
|
* spacing alone — HCT tone is CIE L*, which fixes relative luminance
|
|
21
28
|
* regardless of hue/chroma, so the fixed tone assignments hold for any
|
|
22
|
-
* accent/neutralStyle (WCAG 1.4.3)
|
|
29
|
+
* accent/neutralStyle (WCAG 1.4.3), and each half of a tuple pairs with
|
|
30
|
+
* surfaces derived from that same seed.
|
|
23
31
|
* - --color-border-emphasized (form-control boundaries) is tone-bumped
|
|
24
32
|
* until it reaches >= 3:1 against the generated surface (WCAG 1.4.11).
|
|
25
33
|
* - --color-border, --color-skeleton, and --color-track are intentionally
|
|
@@ -46,6 +54,9 @@ import { hexToHct, hctToHex, tonalPalette, hexWithAlpha } from "./hct.js";
|
|
|
46
54
|
* // Minimal — just a seed color
|
|
47
55
|
* { accent: '#0064E0' }
|
|
48
56
|
*
|
|
57
|
+
* // Per-scheme seeds: light palettes from '#0064E0', dark from '#48CAE4'
|
|
58
|
+
* { accent: ['#0064E0', '#48CAE4'] }
|
|
59
|
+
*
|
|
49
60
|
* // With customization
|
|
50
61
|
* { accent: '#B7410E', neutralStyle: 'warm', contrast: 'high' }
|
|
51
62
|
*
|
|
@@ -126,6 +137,11 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
|
|
|
126
137
|
* --color-on-dark/on-light) are NOT generated — they fall through
|
|
127
138
|
* to colorDefaults.
|
|
128
139
|
*
|
|
140
|
+
* A `[light, dark]` tuple accent seeds each scheme separately: the light
|
|
141
|
+
* half of every generated `light-dark()` pair comes from the light seed's
|
|
142
|
+
* palettes, the dark half from the dark seed's. A string accent seeds both
|
|
143
|
+
* halves from the same palettes, exactly as before tuples were supported.
|
|
144
|
+
*
|
|
129
145
|
* Without an `accent`, the accent tokens join that fall-through set: the
|
|
130
146
|
* neutrals are seeded from the default accent's hue, and --color-accent,
|
|
131
147
|
* --color-accent-muted and --color-on-accent keep their colorDefaults values.
|
|
@@ -135,6 +151,9 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
|
|
|
135
151
|
* const tokens = expandColorScale({ accent: '#0064E0' });
|
|
136
152
|
* // tokens['--color-accent'] === 'light-dark(#..., #...)'
|
|
137
153
|
*
|
|
154
|
+
* const perScheme = expandColorScale({ accent: ['#0064E0', '#48CAE4'] });
|
|
155
|
+
* // light half derives from #0064E0, dark half from #48CAE4
|
|
156
|
+
*
|
|
138
157
|
* const neutralOnly = expandColorScale({ neutralStyle: 'warm' });
|
|
139
158
|
* // neutralOnly['--color-accent'] === undefined
|
|
140
159
|
* ```
|
|
@@ -145,14 +164,26 @@ export function expandColorScale(config) {
|
|
|
145
164
|
neutralStyle = 'cool',
|
|
146
165
|
contrast = 'standard'
|
|
147
166
|
} = config;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
167
|
+
|
|
168
|
+
// Normalize to per-scheme seeds. A string accent (or an absent one) uses
|
|
169
|
+
// the same seed for both halves, which keeps single-seed output identical
|
|
170
|
+
// to the pre-tuple implementation.
|
|
171
|
+
const [lightAccent, darkAccent] = Array.isArray(accent) ? accent : [accent, accent];
|
|
172
|
+
const lightSeed = hexToHct(lightAccent ?? DEFAULT_ACCENT_SEED);
|
|
173
|
+
const sameSeed = darkAccent === lightAccent;
|
|
174
|
+
const darkSeed = sameSeed ? lightSeed : hexToHct(darkAccent ?? DEFAULT_ACCENT_SEED);
|
|
151
175
|
const neutralChroma = NEUTRAL_CHROMA[neutralStyle] ?? 5;
|
|
152
176
|
const neutralVariantChroma = NEUTRAL_VARIANT_CHROMA[neutralStyle] ?? 8;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
177
|
+
|
|
178
|
+
// Palette naming: *L palettes feed the light (first) half of each ld()
|
|
179
|
+
// pair below, *D palettes the dark (second) half. With a single seed the
|
|
180
|
+
// D palettes alias the L ones.
|
|
181
|
+
const PL = tonalPalette(lightSeed.hue, Math.max(lightSeed.chroma, 48));
|
|
182
|
+
const NL = tonalPalette(lightSeed.hue, neutralChroma);
|
|
183
|
+
const NVL = tonalPalette(lightSeed.hue, neutralVariantChroma);
|
|
184
|
+
const PD = sameSeed ? PL : tonalPalette(darkSeed.hue, Math.max(darkSeed.chroma, 48));
|
|
185
|
+
const ND = sameSeed ? NL : tonalPalette(darkSeed.hue, neutralChroma);
|
|
186
|
+
const NVD = sameSeed ? NVL : tonalPalette(darkSeed.hue, neutralVariantChroma);
|
|
156
187
|
const isHigh = contrast === 'high';
|
|
157
188
|
const textPrimaryLightTone = isHigh ? 0 : 10;
|
|
158
189
|
const textPrimaryDarkTone = isHigh ? 99 : 90;
|
|
@@ -173,7 +204,7 @@ export function expandColorScale(config) {
|
|
|
173
204
|
// contrast starts at 70/30 and walks toward mid-scale only as far as needed.
|
|
174
205
|
const borderEmphasizedStartLight = isHigh ? 50 : 70;
|
|
175
206
|
const borderEmphasizedStartDark = isHigh ? 50 : 30;
|
|
176
|
-
const borderEmphasized = ld(ensureContrastTone(
|
|
207
|
+
const borderEmphasized = ld(ensureContrastTone(lightSeed.hue, neutralVariantChroma, borderEmphasizedStartLight, -1, NL[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(darkSeed.hue, neutralVariantChroma, borderEmphasizedStartDark, 1, ND[10], NON_TEXT_MIN_CONTRAST));
|
|
177
208
|
return {
|
|
178
209
|
// Core semantic — only with a seed accent. Without one these fall through
|
|
179
210
|
// to colorDefaults, whose --color-accent is NOT what the default seed
|
|
@@ -181,47 +212,46 @@ export function expandColorScale(config) {
|
|
|
181
212
|
// recolor every neutral-only theme. Nullish and not truthy, matching the
|
|
182
213
|
// seed above, so a supplied-but-malformed accent keeps its old behavior.
|
|
183
214
|
...(accent != null ? {
|
|
184
|
-
'--color-accent': ld(
|
|
215
|
+
'--color-accent': ld(PL[40], PD[80]),
|
|
185
216
|
// Derived accent tokens reference --color-accent instead of baking its
|
|
186
217
|
// resolved hex, so a scoped override of the base token re-accents the
|
|
187
218
|
// whole subtree at runtime. --color-on-accent stays baked: it is a
|
|
188
219
|
// contrast computation against the accent, which CSS cannot express.
|
|
189
220
|
'--color-accent-muted': ld(accentWithAlpha(0.2), accentWithAlpha(0.25)),
|
|
190
|
-
'--color-on-accent': ld(
|
|
221
|
+
'--color-on-accent': ld(PL[100], PD[20])
|
|
191
222
|
} : null),
|
|
192
|
-
'--color-neutral': ld(hexWithAlpha(
|
|
193
|
-
'--color-background-surface': ld(
|
|
194
|
-
'--color-background-body': ld(
|
|
195
|
-
'--color-overlay': ld(hexWithAlpha(
|
|
196
|
-
'--color-overlay-hover': ld(hexWithAlpha(
|
|
197
|
-
'--color-overlay-pressed': ld(hexWithAlpha(
|
|
198
|
-
'--color-background-muted': ld(hexWithAlpha(
|
|
223
|
+
'--color-neutral': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[90], 0.2)),
|
|
224
|
+
'--color-background-surface': ld(NL[99], ND[10]),
|
|
225
|
+
'--color-background-body': ld(NL[95], ND[5]),
|
|
226
|
+
'--color-overlay': ld(hexWithAlpha(NL[10], 0.4), hexWithAlpha(ND[10], 0.6)),
|
|
227
|
+
'--color-overlay-hover': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[100], 0.05)),
|
|
228
|
+
'--color-overlay-pressed': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[100], 0.1)),
|
|
229
|
+
'--color-background-muted': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[10], 0.5)),
|
|
199
230
|
// Text
|
|
200
|
-
'--color-text-primary': ld(
|
|
201
|
-
'--color-text-secondary': ld(
|
|
202
|
-
'--color-text-disabled': ld(
|
|
231
|
+
'--color-text-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
|
|
232
|
+
'--color-text-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
|
|
233
|
+
'--color-text-disabled': ld(NVL[60], NVD[40]),
|
|
203
234
|
'--color-text-accent': 'var(--color-accent)',
|
|
204
235
|
// Icon
|
|
205
236
|
'--color-icon-accent': 'var(--color-accent)',
|
|
206
|
-
'--color-icon-primary': ld(
|
|
207
|
-
'--color-icon-secondary': ld(
|
|
208
|
-
'--color-icon-disabled': ld(
|
|
237
|
+
'--color-icon-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
|
|
238
|
+
'--color-icon-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
|
|
239
|
+
'--color-icon-disabled': ld(NVL[60], NVD[40]),
|
|
209
240
|
// Surface variants
|
|
210
|
-
'--color-background-card': ld(
|
|
211
|
-
'--color-background-popover': ld(
|
|
212
|
-
'--color-background-inverted': ld(
|
|
213
|
-
// Border
|
|
241
|
+
'--color-background-card': ld(NL[99], ND[10]),
|
|
242
|
+
'--color-background-popover': ld(NL[99], ND[20]),
|
|
243
|
+
'--color-background-inverted': ld(NL[10], ND[99]),
|
|
214
244
|
// Border
|
|
215
245
|
// Decorative hairline — not a WCAG 1.4.11 boundary. High contrast
|
|
216
246
|
// doubles the alpha so structural boundaries stay perceivable.
|
|
217
|
-
'--color-border': ld(hexWithAlpha(
|
|
247
|
+
'--color-border': ld(hexWithAlpha(NL[10], borderSubtleAlpha), hexWithAlpha(ND[95], borderSubtleAlpha)),
|
|
218
248
|
'--color-border-emphasized': borderEmphasized,
|
|
219
249
|
// Effects
|
|
220
|
-
'--color-skeleton': ld(
|
|
250
|
+
'--color-skeleton': ld(NVL[70], NVD[30]),
|
|
221
251
|
// Channel-on-body surface (ProgressBar/Slider tracks, Switch off-state).
|
|
222
252
|
// Defaults to the same NV[70]/NV[30] ramp stop as --color-skeleton.
|
|
223
|
-
'--color-track': ld(
|
|
224
|
-
'--color-shadow': ld(hexWithAlpha(
|
|
253
|
+
'--color-track': ld(NVL[70], NVD[30]),
|
|
254
|
+
'--color-shadow': ld(hexWithAlpha(NL[0], 0.1), hexWithAlpha(ND[0], 0.3)),
|
|
225
255
|
'--color-tint-hover': ld('black', 'white')
|
|
226
256
|
};
|
|
227
257
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ime.d.ts","sourceRoot":"","sources":["../../src/utils/ime.ts"],"names":[],"mappings":"AA6DA,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,OAAO,CAIV"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file ime.ts
|
|
5
|
+
* @input Receives a keyboard event (React SyntheticEvent's `nativeEvent`, or a
|
|
6
|
+
* native DOM KeyboardEvent) with optional `isComposing` / `keyCode`.
|
|
7
|
+
* @output Exports `isImeKeyEvent`, the canonical predicate for "this keydown is
|
|
8
|
+
* part of an in-progress IME composition and must not be treated as a command".
|
|
9
|
+
* @position Shared low-level utility; consumed by every editable/overlay surface
|
|
10
|
+
* that handles Enter/Escape/arrows in `onKeyDown` (Typeahead, PowerSearch,
|
|
11
|
+
* Dialog, ContextMenu, Tooltip, Chat composer, focus-trap Escape, ...).
|
|
12
|
+
*
|
|
13
|
+
* ── Why this exists (read once, here — do not re-explain at call sites) ──
|
|
14
|
+
*
|
|
15
|
+
* When a CJK user (Korean / Japanese / Chinese) is composing text via an IME,
|
|
16
|
+
* the browser fires a `keydown` event to COMMIT or CANCEL the pending
|
|
17
|
+
* composition (Enter commits the highlighted candidate; Escape cancels it;
|
|
18
|
+
* ArrowUp/Down/Home/End navigate the candidate window). Crucially this
|
|
19
|
+
* `keydown` fires BEFORE the `compositionend` event that actually writes the
|
|
20
|
+
* committed text into the field. So a naive `onKeyDown` handler sees a bare
|
|
21
|
+
* "Enter" or "Escape" and misreads the composition-commit/cancel as an
|
|
22
|
+
* application command — accepting a typeahead suggestion, submitting a chat
|
|
23
|
+
* message, closing a dialog/menu/tooltip, or saving a filter — mid-composition.
|
|
24
|
+
* The fix is to detect the composing keydown and early-return before running
|
|
25
|
+
* any command logic.
|
|
26
|
+
*
|
|
27
|
+
* Two signals, both needed:
|
|
28
|
+
*
|
|
29
|
+
* 1. `event.isComposing === true` — the modern, spec'd signal
|
|
30
|
+
* (https://www.w3.org/TR/uievents/#dom-keyboardevent-iscomposing). This is
|
|
31
|
+
* the primary check and is reliable in current evergreen browsers.
|
|
32
|
+
*
|
|
33
|
+
* 2. `event.keyCode === 229` — the legacy fallback. `229` is the sentinel
|
|
34
|
+
* keyCode browsers report for "the key event is being processed by an IME".
|
|
35
|
+
* It is still load-bearing: some IMEs and older Safari fire the composing
|
|
36
|
+
* `keydown` with `isComposing` NOT yet set to `true`, but DO report
|
|
37
|
+
* keyCode 229. Keeping both makes the guard robust across the browser
|
|
38
|
+
* matrix we support. Do not drop the 229 fallback without a browser-matrix
|
|
39
|
+
* audit.
|
|
40
|
+
*
|
|
41
|
+
* ── Which event object to pass ──
|
|
42
|
+
*
|
|
43
|
+
* React's SyntheticEvent for KeyboardEvent *does* surface `isComposing`, but to
|
|
44
|
+
* avoid any cross-browser normalization gap prefer passing the *native* event
|
|
45
|
+
* (`e.nativeEvent`) from React handlers — that is what BaseTypeahead,
|
|
46
|
+
* PowerSearch, and the Chat composer do. Native DOM listeners (Dialog,
|
|
47
|
+
* ContextMenu, Tooltip, focus-trap) pass the DOM `KeyboardEvent` directly.
|
|
48
|
+
* The parameter is intentionally structurally typed so both shapes are accepted.
|
|
49
|
+
*
|
|
50
|
+
* Note: `keyCode` is deprecated on the DOM `KeyboardEvent` type but is still
|
|
51
|
+
* present at runtime; we read it defensively via the optional structural field.
|
|
52
|
+
*/
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* The sentinel `keyCode` browsers report while a key event is being processed
|
|
56
|
+
* by an IME (the composing keydown that fires before `compositionend`). See the
|
|
57
|
+
* file header for why this legacy signal is still load-bearing alongside
|
|
58
|
+
* `isComposing`.
|
|
59
|
+
*/
|
|
60
|
+
const IME_PROCESSING_KEY_CODE = 229;
|
|
61
|
+
export function isImeKeyEvent(event) {
|
|
62
|
+
return event.isComposing === true || event.keyCode === IME_PROCESSING_KEY_CODE;
|
|
63
|
+
}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -31,4 +31,5 @@ export type { RGBA } from './color';
|
|
|
31
31
|
export { devWarn, devError, warnOnce, formatDevMessage } from './devWarning';
|
|
32
32
|
export { rtlStyles } from './rtlStyles';
|
|
33
33
|
export { focusOutlineStyles, focusOutlineProps } from './focusOutline.stylex';
|
|
34
|
+
export { isImeKeyEvent } from './ime';
|
|
34
35
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,EACxB,8BAA8B,EAC9B,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAElC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC"}
|
package/dist/utils/index.js
CHANGED
|
@@ -28,4 +28,5 @@ export { rtlStyles } from "./rtlStyles.js";
|
|
|
28
28
|
|
|
29
29
|
// The shared focus ring, exported for @astryxdesign/lab — same reason
|
|
30
30
|
// rtlStyles is: a style that must be identical across packages, not copied.
|
|
31
|
-
export { focusOutlineStyles, focusOutlineProps } from "./focusOutline.stylex.js";
|
|
31
|
+
export { focusOutlineStyles, focusOutlineProps } from "./focusOutline.stylex.js";
|
|
32
|
+
export { isImeKeyEvent } from "./ime.js";
|