@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

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.
Files changed (226) hide show
  1. package/dist/Banner/Banner.d.ts.map +1 -1
  2. package/dist/Banner/Banner.js +1 -8
  3. package/dist/Calendar/Calendar.d.ts.map +1 -1
  4. package/dist/Calendar/Calendar.js +11 -31
  5. package/dist/Calendar/styles.d.ts +2 -2
  6. package/dist/Calendar/styles.d.ts.map +1 -1
  7. package/dist/Calendar/styles.js +2 -2
  8. package/dist/Carousel/Carousel.d.ts.map +1 -1
  9. package/dist/Carousel/Carousel.js +0 -1
  10. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  11. package/dist/Chat/ChatToolCalls.js +1 -8
  12. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  13. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  14. package/dist/CheckboxInput/CheckboxInput.js +1 -3
  15. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  16. package/dist/ClickableCard/ClickableCard.js +3 -26
  17. package/dist/CodeBlock/CodeBlock.d.ts +1 -10
  18. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  19. package/dist/CodeBlock/CodeBlock.js +5 -23
  20. package/dist/Collapsible/Collapsible.d.ts +3 -9
  21. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  22. package/dist/Collapsible/Collapsible.js +13 -101
  23. package/dist/Collapsible/CollapsibleGroup.d.ts +7 -39
  24. package/dist/Collapsible/CollapsibleGroup.d.ts.map +1 -1
  25. package/dist/Collapsible/CollapsibleGroup.js +9 -70
  26. package/dist/Collapsible/CollapsibleGroupContext.d.ts +0 -31
  27. package/dist/Collapsible/CollapsibleGroupContext.d.ts.map +1 -1
  28. package/dist/Collapsible/CollapsibleGroupContext.js +3 -33
  29. package/dist/Collapsible/index.d.ts +0 -1
  30. package/dist/Collapsible/index.d.ts.map +1 -1
  31. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  32. package/dist/ContextMenu/ContextMenu.js +0 -2
  33. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  34. package/dist/DateTimeInput/DateTimeInput.js +0 -2
  35. package/dist/Grid/Grid.d.ts +3 -4
  36. package/dist/Grid/Grid.d.ts.map +1 -1
  37. package/dist/Grid/Grid.js +9 -26
  38. package/dist/Icon/Icon.d.ts.map +1 -1
  39. package/dist/Icon/Icon.js +1 -5
  40. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  41. package/dist/Lightbox/Lightbox.js +2 -26
  42. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  43. package/dist/NumberInput/NumberInput.js +16 -32
  44. package/dist/Pagination/Pagination.d.ts.map +1 -1
  45. package/dist/Pagination/Pagination.js +36 -87
  46. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  47. package/dist/PowerSearch/PowerSearch.js +21 -39
  48. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  49. package/dist/ProgressBar/ProgressBar.js +1 -2
  50. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  51. package/dist/Resizable/ResizeHandle.js +2 -10
  52. package/dist/SideNav/SideNav.d.ts.map +1 -1
  53. package/dist/SideNav/SideNav.js +2 -6
  54. package/dist/TabList/TabMenu.d.ts.map +1 -1
  55. package/dist/TabList/TabMenu.js +7 -34
  56. package/dist/Table/BaseTable.d.ts.map +1 -1
  57. package/dist/Table/BaseTable.js +2 -12
  58. package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
  59. package/dist/Table/plugins/columnResize/useTableColumnResize.js +2 -5
  60. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  61. package/dist/Table/plugins/pagination/paginateData.js +1 -5
  62. package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
  63. package/dist/Table/plugins/selection/useTableSelectionState.js +1 -11
  64. package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
  65. package/dist/Table/plugins/sortable/useTableSortableState.js +4 -8
  66. package/dist/Thumbnail/Thumbnail.d.ts +2 -3
  67. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  68. package/dist/Thumbnail/Thumbnail.js +0 -1
  69. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  70. package/dist/TimeInput/TimeInput.js +1 -6
  71. package/dist/Toast/Toast.d.ts.map +1 -1
  72. package/dist/Toast/Toast.js +3 -11
  73. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  74. package/dist/Toast/ToastViewport.js +0 -12
  75. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  76. package/dist/Typeahead/BaseTypeahead.js +2 -5
  77. package/dist/astryx.css +0 -7
  78. package/dist/astryx.umd.js +48 -48
  79. package/dist/astryx.umd.js.map +4 -4
  80. package/dist/hooks/focusableSelector.d.ts +1 -1
  81. package/dist/hooks/focusableSelector.d.ts.map +1 -1
  82. package/dist/hooks/focusableSelector.js +1 -1
  83. package/dist/hooks/useFocusTrap.d.ts +0 -3
  84. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  85. package/dist/hooks/useFocusTrap.js +1 -38
  86. package/dist/theme/defineTheme.d.ts +1 -1
  87. package/dist/theme/defineTheme.d.ts.map +1 -1
  88. package/dist/theme/expandColorScale.d.ts.map +1 -1
  89. package/dist/theme/expandColorScale.js +3 -10
  90. package/dist/theme/hct.d.ts +15 -0
  91. package/dist/theme/hct.d.ts.map +1 -1
  92. package/dist/theme/hct.js +9 -9
  93. package/dist/theme/tokens.d.ts +2 -10
  94. package/dist/theme/tokens.d.ts.map +1 -1
  95. package/dist/theme/tokens.js +4 -220
  96. package/dist/utils/index.d.ts +0 -2
  97. package/dist/utils/index.d.ts.map +1 -1
  98. package/dist/utils/index.js +1 -2
  99. package/dist/utils/timeParser.d.ts.map +1 -1
  100. package/dist/utils/timeParser.js +5 -8
  101. package/package.json +1 -1
  102. package/src/Avatar/Avatar.doc.mjs +0 -11
  103. package/src/Banner/Banner.doc.mjs +0 -8
  104. package/src/Banner/Banner.test.tsx +0 -38
  105. package/src/Banner/Banner.tsx +1 -8
  106. package/src/Calendar/Calendar.doc.mjs +1 -1
  107. package/src/Calendar/Calendar.test.tsx +4 -112
  108. package/src/Calendar/Calendar.tsx +5 -26
  109. package/src/Calendar/styles.ts +2 -12
  110. package/src/Carousel/Carousel.doc.mjs +12 -12
  111. package/src/Carousel/Carousel.test.tsx +0 -13
  112. package/src/Carousel/Carousel.tsx +0 -1
  113. package/src/Chat/Chat.doc.mjs +1 -1
  114. package/src/Chat/ChatToolCalls.test.tsx +0 -55
  115. package/src/Chat/ChatToolCalls.tsx +12 -10
  116. package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
  117. package/src/CheckboxInput/CheckboxInput.test.tsx +4 -71
  118. package/src/CheckboxInput/CheckboxInput.tsx +0 -2
  119. package/src/Citation/Citation.doc.mjs +0 -5
  120. package/src/ClickableCard/ClickableCard.tsx +2 -45
  121. package/src/CodeBlock/CodeBlock.doc.mjs +2 -7
  122. package/src/CodeBlock/CodeBlock.test.tsx +3 -87
  123. package/src/CodeBlock/CodeBlock.tsx +3 -43
  124. package/src/Collapsible/Collapsible.doc.mjs +4 -8
  125. package/src/Collapsible/Collapsible.tsx +10 -86
  126. package/src/Collapsible/CollapsibleGroup.doc.mjs +3 -27
  127. package/src/Collapsible/CollapsibleGroup.test.tsx +0 -288
  128. package/src/Collapsible/CollapsibleGroup.tsx +9 -107
  129. package/src/Collapsible/CollapsibleGroupContext.tsx +2 -42
  130. package/src/Collapsible/index.ts +0 -4
  131. package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +0 -5
  132. package/src/CommandPalette/CommandPaletteGroup.doc.mjs +0 -10
  133. package/src/CommandPalette/CommandPaletteInput.doc.mjs +0 -6
  134. package/src/CommandPalette/CommandPaletteItem.doc.mjs +0 -6
  135. package/src/CommandPalette/CommandPaletteList.doc.mjs +0 -9
  136. package/src/ContextMenu/ContextMenu.doc.mjs +0 -15
  137. package/src/ContextMenu/ContextMenu.test.tsx +0 -15
  138. package/src/ContextMenu/ContextMenu.tsx +0 -2
  139. package/src/ContextMenu/ContextMenuItem.doc.mjs +0 -6
  140. package/src/DateTimeInput/DateTimeInput.test.tsx +0 -70
  141. package/src/DateTimeInput/DateTimeInput.tsx +0 -2
  142. package/src/Dialog/DialogHeader.doc.mjs +0 -45
  143. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
  144. package/src/Field/FieldLabel.test.tsx +2 -2
  145. package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +3 -0
  146. package/src/Grid/Grid.test.tsx +18 -43
  147. package/src/Grid/Grid.tsx +9 -26
  148. package/src/Icon/Icon.test.tsx +29 -41
  149. package/src/Icon/Icon.tsx +2 -6
  150. package/src/Layout/LayoutContent.doc.mjs +0 -12
  151. package/src/Layout/LayoutPanel.doc.mjs +0 -40
  152. package/src/Lightbox/Lightbox.doc.mjs +0 -5
  153. package/src/Lightbox/Lightbox.test.tsx +2 -123
  154. package/src/Lightbox/Lightbox.tsx +1 -29
  155. package/src/NavMenu/NavMenu.doc.mjs +0 -15
  156. package/src/NumberInput/NumberInput.test.tsx +3 -48
  157. package/src/NumberInput/NumberInput.tsx +15 -32
  158. package/src/Overlay/Overlay.doc.mjs +0 -6
  159. package/src/Pagination/Pagination.test.tsx +0 -143
  160. package/src/Pagination/Pagination.tsx +23 -75
  161. package/src/Popover/Popover.test.tsx +0 -65
  162. package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
  163. package/src/PowerSearch/PowerSearch.test.tsx +1 -109
  164. package/src/PowerSearch/PowerSearch.tsx +16 -37
  165. package/src/ProgressBar/ProgressBar.test.tsx +0 -10
  166. package/src/ProgressBar/ProgressBar.tsx +1 -2
  167. package/src/Resizable/ResizeHandle.tsx +2 -10
  168. package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
  169. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  170. package/src/SideNav/SideNav.doc.mjs +1 -7
  171. package/src/SideNav/SideNav.test.tsx +0 -20
  172. package/src/SideNav/SideNav.tsx +2 -6
  173. package/src/TabList/TabList.test.tsx +1 -185
  174. package/src/TabList/TabMenu.tsx +9 -45
  175. package/src/Table/BaseTable.tsx +1 -11
  176. package/src/Table/Table.test.tsx +0 -51
  177. package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +0 -13
  178. package/src/Table/plugins/columnResize/useTableColumnResize.tsx +1 -3
  179. package/src/Table/plugins/pagination/paginateData.ts +1 -5
  180. package/src/Table/plugins/pagination/useTablePagination.test.tsx +0 -13
  181. package/src/Table/plugins/selection/useTableSelectionState.test.tsx +0 -23
  182. package/src/Table/plugins/selection/useTableSelectionState.tsx +6 -11
  183. package/src/Table/plugins/sortable/useTableSortableState.test.tsx +1 -35
  184. package/src/Table/plugins/sortable/useTableSortableState.tsx +4 -8
  185. package/src/TextArea/TextArea.test.tsx +3 -3
  186. package/src/TextInput/TextInput.test.tsx +3 -3
  187. package/src/Thumbnail/Thumbnail.test.tsx +2 -36
  188. package/src/Thumbnail/Thumbnail.tsx +2 -4
  189. package/src/TimeInput/TimeInput.test.tsx +0 -37
  190. package/src/TimeInput/TimeInput.tsx +1 -11
  191. package/src/Timestamp/Timestamp.doc.mjs +1 -1
  192. package/src/Toast/Toast.tsx +3 -11
  193. package/src/Toast/ToastViewport.test.tsx +0 -64
  194. package/src/Toast/ToastViewport.tsx +0 -12
  195. package/src/ToggleButton/ToggleButton.doc.mjs +0 -1
  196. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  197. package/src/TopNav/TopNav.doc.mjs +1 -1
  198. package/src/TreeList/TreeList.doc.mjs +2 -2
  199. package/src/Typeahead/BaseTypeahead.doc.mjs +0 -19
  200. package/src/Typeahead/BaseTypeahead.tsx +2 -5
  201. package/src/Typeahead/Typeahead.doc.mjs +1 -1
  202. package/src/Typeahead/Typeahead.test.tsx +1 -45
  203. package/src/hooks/focusableSelector.ts +1 -1
  204. package/src/hooks/useFocusTrap.doc.mjs +2 -4
  205. package/src/hooks/useFocusTrap.test.tsx +1 -149
  206. package/src/hooks/useFocusTrap.ts +1 -50
  207. package/src/theme/SyntaxTheme.doc.mjs +4 -4
  208. package/src/theme/defineTheme.ts +13 -4
  209. package/src/theme/derivedVarRegistry.test.ts +2 -2
  210. package/src/theme/expandColorScale.test.ts +0 -29
  211. package/src/theme/expandColorScale.ts +6 -11
  212. package/src/theme/hct.ts +17 -9
  213. package/src/theme/tokens.test.ts +9 -182
  214. package/src/theme/tokens.ts +4 -239
  215. package/src/theme/useTheme.test.tsx +0 -20
  216. package/src/utils/index.ts +0 -3
  217. package/src/utils/timeParser.test.ts +0 -13
  218. package/src/utils/timeParser.ts +5 -8
  219. package/dist/utils/color.d.ts +0 -42
  220. package/dist/utils/color.d.ts.map +0 -1
  221. package/dist/utils/color.js +0 -150
  222. package/src/Resizable/ResizeHandle.test.tsx +0 -180
  223. package/src/__tests__/TestIcon.tsx +0 -26
  224. package/src/docPropReferences.test.ts +0 -178
  225. package/src/utils/color.test.ts +0 -133
  226. package/src/utils/color.ts +0 -148
@@ -20,7 +20,9 @@ const testTheme = defineTheme({
20
20
 
21
21
  describe('tokenVar', () => {
22
22
  it('returns a CSS var() reference for known token names', () => {
23
- expect(tokenVar('--color-text-primary')).toBe('var(--color-text-primary)');
23
+ expect(tokenVar('--color-text-primary')).toBe(
24
+ 'var(--color-text-primary)',
25
+ );
24
26
  });
25
27
 
26
28
  it('returns a CSS var() reference for custom token names', () => {
@@ -30,7 +32,9 @@ describe('tokenVar', () => {
30
32
 
31
33
  describe('tokenVars', () => {
32
34
  it('contains var() references for known tokens', () => {
33
- expect(tokenVars['--color-text-primary']).toBe('var(--color-text-primary)');
35
+ expect(tokenVars['--color-text-primary']).toBe(
36
+ 'var(--color-text-primary)',
37
+ );
34
38
  expect(tokenVars['--spacing-4']).toBe('var(--spacing-4)');
35
39
  });
36
40
  });
@@ -83,9 +87,9 @@ describe('resolveThemeTokens', () => {
83
87
 
84
88
  describe('resolveThemeToken', () => {
85
89
  it('resolves one token', () => {
86
- expect(resolveThemeToken(testTheme, '--color-accent', {mode: 'dark'})).toBe(
87
- '#FF5555',
88
- );
90
+ expect(
91
+ resolveThemeToken(testTheme, '--color-accent', {mode: 'dark'}),
92
+ ).toBe('#FF5555');
89
93
  });
90
94
 
91
95
  it('returns fallback for unknown token names', () => {
@@ -103,180 +107,3 @@ describe('resolveThemeToken', () => {
103
107
  ).toBe('');
104
108
  });
105
109
  });
106
-
107
- describe('resolveThemeTokens — reference resolution', () => {
108
- it('resolves a token that references another token to a raw value', () => {
109
- const theme = defineTheme({
110
- name: 'ref',
111
- tokens: {
112
- '--color-accent': ['#0058D2', '#BBC2FF'],
113
- '--color-text-accent': 'var(--color-accent)',
114
- },
115
- });
116
-
117
- const light = resolveThemeTokens(theme, {mode: 'light'});
118
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
119
-
120
- expect(light['--color-text-accent']).toBe('#0058D2');
121
- expect(dark['--color-text-accent']).toBe('#BBC2FF');
122
- });
123
-
124
- it('resolves reference chains iteratively', () => {
125
- const theme = defineTheme({
126
- name: 'chain',
127
- tokens: {
128
- '--color-accent': ['#112233', '#445566'],
129
- '--color-icon-accent': 'var(--color-accent)',
130
- '--color-text-accent': 'var(--color-icon-accent)',
131
- },
132
- });
133
-
134
- const light = resolveThemeTokens(theme, {mode: 'light'});
135
- expect(light['--color-icon-accent']).toBe('#112233');
136
- expect(light['--color-text-accent']).toBe('#112233');
137
- });
138
-
139
- it('uses the var() fallback when the referenced token is unknown', () => {
140
- const theme = defineTheme({
141
- name: 'fallback',
142
- tokens: {
143
- '--color-text-accent': 'var(--not-a-token, #ABCDEF)',
144
- },
145
- });
146
-
147
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
148
- expect(tokens['--color-text-accent']).toBe('#ABCDEF');
149
- });
150
-
151
- it('leaves an unresolvable reference as a literal var()', () => {
152
- const theme = defineTheme({
153
- name: 'unresolvable',
154
- tokens: {
155
- '--color-text-accent': 'var(--not-a-token)',
156
- },
157
- });
158
-
159
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
160
- expect(tokens['--color-text-accent']).toBe('var(--not-a-token)');
161
- });
162
-
163
- it('does not loop forever on a reference cycle', () => {
164
- const theme = defineTheme({
165
- name: 'cycle',
166
- tokens: {
167
- '--color-text-accent': 'var(--color-icon-accent)',
168
- '--color-icon-accent': 'var(--color-text-accent)',
169
- },
170
- });
171
-
172
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
173
- // The cycle collapses to a literal reference rather than hanging.
174
- expect(tokens['--color-text-accent']).toContain('var(');
175
- expect(tokens['--color-icon-accent']).toContain('var(');
176
- });
177
- });
178
-
179
- describe('resolveThemeTokens — CSS color functions', () => {
180
- it('evaluates color-mix with transparent to an rgba() value', () => {
181
- const theme = defineTheme({
182
- name: 'mix',
183
- tokens: {
184
- '--color-accent': ['#0058D2', '#BBC2FF'],
185
- '--color-accent-muted':
186
- 'color-mix(in srgb, var(--color-accent) 20%, transparent)',
187
- },
188
- });
189
-
190
- const light = resolveThemeTokens(theme, {mode: 'light'});
191
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
192
-
193
- expect(light['--color-accent-muted']).toBe('rgba(0, 88, 210, 0.2)');
194
- expect(dark['--color-accent-muted']).toBe('rgba(187, 194, 255, 0.2)');
195
- });
196
-
197
- it('resolves the muted token inside a light-dark() tuple per mode', () => {
198
- const theme = defineTheme({
199
- name: 'ld-mix',
200
- tokens: {
201
- '--color-accent': ['#FF0000', '#00FF00'],
202
- '--color-accent-muted': [
203
- 'color-mix(in srgb, var(--color-accent) 20%, transparent)',
204
- 'color-mix(in srgb, var(--color-accent) 25%, transparent)',
205
- ],
206
- },
207
- });
208
-
209
- const light = resolveThemeTokens(theme, {mode: 'light'});
210
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
211
-
212
- expect(light['--color-accent-muted']).toBe('rgba(255, 0, 0, 0.2)');
213
- expect(dark['--color-accent-muted']).toBe('rgba(0, 255, 0, 0.25)');
214
- });
215
-
216
- it('mixes two opaque colors by weight', () => {
217
- const theme = defineTheme({
218
- name: 'two-color',
219
- tokens: {
220
- '--color-neutral': 'color-mix(in srgb, #000000, #FFFFFF)',
221
- },
222
- });
223
-
224
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
225
- expect(tokens['--color-neutral']).toBe('#808080');
226
- });
227
-
228
- it('mixes two opaque colors with an explicit percentage', () => {
229
- const theme = defineTheme({
230
- name: 'weighted',
231
- tokens: {
232
- '--color-neutral': 'color-mix(in srgb, #000000 25%, #FFFFFF)',
233
- },
234
- });
235
-
236
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
237
- expect(tokens['--color-neutral']).toBe('#BFBFBF');
238
- });
239
-
240
- it('preserves an unsupported color space rather than guessing', () => {
241
- const theme = defineTheme({
242
- name: 'oklab',
243
- tokens: {
244
- '--color-accent': ['#0058D2', '#BBC2FF'],
245
- '--color-neutral':
246
- 'color-mix(in oklab, var(--color-accent), black 15%)',
247
- },
248
- });
249
-
250
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
251
- // var() still resolves; the unsupported mix stays as a color-mix() expression.
252
- expect(tokens['--color-neutral']).toContain('color-mix(in oklab');
253
- expect(tokens['--color-neutral']).toContain('#0058D2');
254
- });
255
- });
256
-
257
- describe('resolveThemeTokens — generated themes end to end', () => {
258
- it('resolves derived accent tokens from defineTheme({color}) to raw values', () => {
259
- const theme = defineTheme({name: 'brand', color: {accent: '#0064E0'}});
260
-
261
- const light = resolveThemeTokens(theme, {mode: 'light'});
262
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
263
-
264
- const isConcreteColor = (value: string): boolean => /^(#|rgb)/.test(value);
265
-
266
- for (const key of [
267
- '--color-accent',
268
- '--color-text-accent',
269
- '--color-icon-accent',
270
- '--color-accent-muted',
271
- ]) {
272
- expect(isConcreteColor(light[key])).toBe(true);
273
- expect(isConcreteColor(dark[key])).toBe(true);
274
- expect(light[key]).not.toContain('var(');
275
- expect(light[key]).not.toContain('color-mix');
276
- }
277
-
278
- // The derived accent tokens resolve to the base accent.
279
- expect(light['--color-text-accent']).toBe(light['--color-accent']);
280
- expect(light['--color-icon-accent']).toBe(light['--color-accent']);
281
- });
282
- });
@@ -10,11 +10,6 @@
10
10
  * build-time theme adapters, chart configuration, canvas/SVG rendering, tests,
11
11
  * or plain JS theme objects for other styling libraries.
12
12
  *
13
- * Derived tokens can reference other tokens (`var(--color-accent)`) and use CSS
14
- * color functions (`color-mix`). The resolver follows those references through
15
- * the theme iteratively and evaluates the supported color functions so callers
16
- * receive concrete raw values, not CSS expressions.
17
- *
18
13
  * SYNC: When modified, update:
19
14
  * - /packages/core/src/theme/useTheme.ts
20
15
  * - /packages/core/src/theme/index.ts
@@ -26,7 +21,6 @@ import {
26
21
  type TokenName,
27
22
  type TokenValue,
28
23
  } from './defineTheme';
29
- import {parseColor, formatColor} from '../utils/color';
30
24
 
31
25
  /** Resolved color mode used when choosing the side of light/dark token values. */
32
26
  export type ResolvedThemeMode = 'light' | 'dark';
@@ -150,243 +144,14 @@ function resolveXDSTokenValue(
150
144
  return value;
151
145
  }
152
146
 
153
- // =============================================================================
154
- // Reference resolution — turn token expressions into concrete raw values
155
- // =============================================================================
156
- //
157
- // Generated themes emit derived tokens as references to other tokens rather
158
- // than baked-in values, so a scoped CSS override of a base token re-themes the
159
- // subtree that references it. The CSS cascade resolves those references, but
160
- // non-CSS consumers (canvas, SVG, data-viz) need the concrete value. These
161
- // helpers replay the same resolution in JS: follow `var()` references through
162
- // the resolved token map (iteratively, guarding against cycles) and evaluate
163
- // the CSS color functions used by the theme generator against those values.
164
-
165
- /** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
166
- function findMatchingParen(input: string, openIndex: number): number {
167
- let depth = 0;
168
- for (let i = openIndex; i < input.length; i++) {
169
- const char = input[i];
170
- if (char === '(') {
171
- depth++;
172
- } else if (char === ')') {
173
- depth--;
174
- if (depth === 0) {
175
- return i;
176
- }
177
- }
178
- }
179
- return -1;
180
- }
181
-
182
- /** Split a color-mix component into its color and optional percentage. */
183
- function parseMixComponent(
184
- part: string,
185
- ): {color: string; percentage: number | null} | null {
186
- const trimmed = part.trim();
187
- const match = trimmed.match(/\s+([\d.]+)%$/);
188
- if (match) {
189
- return {
190
- color: trimmed.slice(0, match.index).trim(),
191
- percentage: parseFloat(match[1]),
192
- };
193
- }
194
- return {color: trimmed, percentage: null};
195
- }
196
-
197
- /**
198
- * Evaluate `color-mix(in <space>, c1 [p1], c2 [p2])` to a concrete color.
199
- *
200
- * Supports the `srgb` color space (the one the theme generator emits) using
201
- * the CSS Color 5 algorithm: normalize the percentages, interpolate the
202
- * premultiplied channels, then apply the alpha multiplier when the mix weights
203
- * sum to less than 100%. Returns null for anything it can't evaluate so the
204
- * original expression is preserved rather than guessed.
205
- */
206
- function evaluateColorMix(body: string): string | null {
207
- const spaceMatch = body.match(/^in\s+([\w-]+)\s*,\s*(.+)$/s);
208
- if (!spaceMatch) {
209
- return null;
210
- }
211
- const [, colorSpace, rest] = spaceMatch;
212
- if (colorSpace.toLowerCase() !== 'srgb') {
213
- return null;
214
- }
215
-
216
- const split = splitTopLevelComma(rest);
217
- if (split === null) {
218
- return null;
219
- }
220
- const first = parseMixComponent(split[0]);
221
- const second = parseMixComponent(split[1]);
222
- if (first === null || second === null) {
223
- return null;
224
- }
225
-
226
- const c1 = parseColor(first.color);
227
- const c2 = parseColor(second.color);
228
- if (c1 === null || c2 === null) {
229
- return null;
230
- }
231
-
232
- // Fill in omitted percentages, then normalize so they sum to 100%.
233
- let p1: number;
234
- let p2: number;
235
- if (first.percentage !== null && second.percentage !== null) {
236
- p1 = first.percentage;
237
- p2 = second.percentage;
238
- } else if (first.percentage !== null) {
239
- p1 = first.percentage;
240
- p2 = 100 - p1;
241
- } else if (second.percentage !== null) {
242
- p2 = second.percentage;
243
- p1 = 100 - p2;
244
- } else {
245
- p1 = 50;
246
- p2 = 50;
247
- }
248
- const sum = p1 + p2;
249
- if (sum <= 0) {
250
- return null;
251
- }
252
- const w1 = p1 / sum;
253
- const w2 = p2 / sum;
254
- const alphaMultiplier = sum < 100 ? sum / 100 : 1;
255
-
256
- // Interpolate in premultiplied sRGB, then un-premultiply.
257
- const mixedA = w1 * c1.a + w2 * c2.a;
258
- const premix = (k1: number, k2: number): number =>
259
- w1 * k1 * c1.a + w2 * k2 * c2.a;
260
- const rp = premix(c1.r, c2.r);
261
- const gp = premix(c1.g, c2.g);
262
- const bp = premix(c1.b, c2.b);
263
- const rgb =
264
- mixedA === 0
265
- ? {r: 0, g: 0, b: 0}
266
- : {r: rp / mixedA, g: gp / mixedA, b: bp / mixedA};
267
-
268
- return formatColor({...rgb, a: mixedA * alphaMultiplier});
269
- }
270
-
271
- /** Evaluate every supported color function in an expression, innermost first. */
272
- function evaluateColorFunctions(expr: string): string {
273
- const idx = expr.indexOf('color-mix(');
274
- if (idx === -1) {
275
- return expr;
276
- }
277
- const openIndex = idx + 'color-mix'.length;
278
- const closeIndex = findMatchingParen(expr, openIndex);
279
- if (closeIndex === -1) {
280
- return expr;
281
- }
282
- const body = evaluateColorFunctions(expr.slice(openIndex + 1, closeIndex));
283
- const evaluated = evaluateColorMix(body);
284
- const replacement = evaluated ?? `color-mix(${body})`;
285
- return (
286
- expr.slice(0, idx) +
287
- replacement +
288
- evaluateColorFunctions(expr.slice(closeIndex + 1))
289
- );
290
- }
291
-
292
- /**
293
- * Substitute `var(--name[, fallback])` references with their resolved values.
294
- * `seen` tracks the reference chain so cycles resolve to the literal reference
295
- * instead of recursing forever.
296
- */
297
- function substituteVars(
298
- expr: string,
299
- raw: Record<string, string>,
300
- cache: Record<string, string>,
301
- seen: Set<string>,
302
- ): string {
303
- const start = expr.indexOf('var(');
304
- if (start === -1) {
305
- return expr;
306
- }
307
- const openIndex = start + 'var'.length;
308
- const closeIndex = findMatchingParen(expr, openIndex);
309
- if (closeIndex === -1) {
310
- return expr;
311
- }
312
-
313
- const inner = expr.slice(openIndex + 1, closeIndex);
314
- const commaSplit = splitTopLevelComma(inner);
315
- const name = (commaSplit ? commaSplit[0] : inner).trim();
316
- const fallback = commaSplit ? commaSplit[1] : null;
317
-
318
- let replacement: string;
319
- if (seen.has(name)) {
320
- replacement = expr.slice(start, closeIndex + 1);
321
- } else if (name in raw) {
322
- seen.add(name);
323
- replacement = resolveReference(name, raw, cache, seen);
324
- seen.delete(name);
325
- } else if (fallback !== null) {
326
- replacement = substituteVars(fallback.trim(), raw, cache, seen);
327
- } else {
328
- replacement = expr.slice(start, closeIndex + 1);
329
- }
330
-
331
- const rest = substituteVars(expr.slice(closeIndex + 1), raw, cache, seen);
332
- return expr.slice(0, start) + replacement + rest;
333
- }
334
-
335
- /** Fully resolve a single expression: substitute references, then evaluate colors. */
336
- function resolveExpression(
337
- expr: string,
338
- raw: Record<string, string>,
339
- cache: Record<string, string>,
340
- seen: Set<string>,
341
- ): string {
342
- if (!expr.includes('var(') && !expr.includes('color-mix(')) {
343
- return expr;
344
- }
345
- const substituted = substituteVars(expr, raw, cache, seen);
346
- return evaluateColorFunctions(substituted);
347
- }
348
-
349
- /** Resolve one token by name, memoizing the result in `cache`. */
350
- function resolveReference(
351
- name: string,
352
- raw: Record<string, string>,
353
- cache: Record<string, string>,
354
- seen: Set<string>,
355
- ): string {
356
- if (name in cache) {
357
- return cache[name];
358
- }
359
- const value = raw[name];
360
- if (value === undefined) {
361
- return '';
362
- }
363
- const resolved = resolveExpression(value, raw, cache, seen);
364
- cache[name] = resolved;
365
- return resolved;
366
- }
367
-
368
- /** Resolve every reference/color function in a raw token map to concrete values. */
369
- function resolveReferences(
370
- raw: Record<string, string>,
371
- ): Record<string, string> {
372
- const cache: Record<string, string> = {};
373
- for (const name of Object.keys(raw)) {
374
- resolveReference(name, raw, cache, new Set<string>());
375
- }
376
- return cache;
377
- }
378
-
379
147
  /**
380
148
  * Resolve all Astryx token values for a theme and effective color mode.
381
149
  *
382
150
  * The result starts with `tokenDefaults`, applies `theme.tokens`, then
383
151
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
384
152
  * retain their original light/dark sides instead of relying on CSS parsing.
385
- * A final pass resolves any `var()` references between tokens and evaluates
386
- * the CSS color functions the theme generator emits (e.g. `color-mix`), so
387
- * derived tokens like `--color-text-accent` return concrete values rather than
388
- * `var(--color-accent)`. This mirrors the token resolution used by
389
- * `useTheme()` but does not need React context or media queries.
153
+ * This mirrors the token resolution used by `useTheme()` but does not need
154
+ * React context or media queries.
390
155
  *
391
156
  * Pass `theme` as null/undefined to resolve defaults only.
392
157
  */
@@ -402,7 +167,7 @@ export function resolveThemeTokens(
402
167
  }
403
168
 
404
169
  if (theme == null) {
405
- return resolveReferences(resolved);
170
+ return resolved;
406
171
  }
407
172
 
408
173
  for (const [key, value] of Object.entries(theme.tokens)) {
@@ -417,7 +182,7 @@ export function resolveThemeTokens(
417
182
  }
418
183
  }
419
184
 
420
- return resolveReferences(resolved);
185
+ return resolved;
421
186
  }
422
187
 
423
188
  /** Resolve one Astryx token value for a theme and effective color mode. */
@@ -122,24 +122,4 @@ describe('useTheme', () => {
122
122
  resolveThemeTokens(testTheme, {mode: 'dark'}),
123
123
  );
124
124
  });
125
-
126
- it('resolves derived accent tokens to raw values, not var()/color-mix', () => {
127
- const brandTheme = defineTheme({name: 'brand', color: {accent: '#0064E0'}});
128
- const {result} = renderHook(() => useTheme(), {
129
- wrapper: ({children}) => (
130
- <Theme theme={brandTheme} mode="light">
131
- {children}
132
- </Theme>
133
- ),
134
- });
135
-
136
- const accent = result.current.token('--color-accent');
137
- expect(result.current.token('--color-text-accent')).toBe(accent);
138
- expect(result.current.token('--color-icon-accent')).toBe(accent);
139
- expect(result.current.token('--color-accent-muted')).toMatch(/^(#|rgb)/);
140
- expect(result.current.token('--color-accent-muted')).not.toContain('var(');
141
- expect(result.current.token('--color-accent-muted')).not.toContain(
142
- 'color-mix',
143
- );
144
- });
145
125
  });
@@ -81,6 +81,3 @@ export {observeResize, unobserveResize} from './sharedResizeObserver';
81
81
  export {isRenderable} from './isRenderable';
82
82
  export {getInputARIA} from './inputAria';
83
83
  export type {InputARIA, InputARIAInputGroup} from './inputAria';
84
-
85
- export {parseHex, parseRgb, parseColor, formatHex, formatColor} from './color';
86
- export type {RGBA} from './color';
@@ -249,19 +249,6 @@ describe('isTimeInRange', () => {
249
249
  });
250
250
 
251
251
  describe('adjustTime', () => {
252
- it('returns the input unchanged for non-finite deltas', () => {
253
- // -Infinity previously spun the wrap-around loop forever;
254
- // NaN previously produced the corrupt string "NaN:NaN".
255
- expect(adjustTime('10:00' as ISOTimeString, -Infinity)).toBe('10:00');
256
- expect(adjustTime('10:00' as ISOTimeString, Infinity)).toBe('10:00');
257
- expect(adjustTime('10:00' as ISOTimeString, NaN)).toBe('10:00');
258
- });
259
-
260
- it('wraps large negative deltas in constant time', () => {
261
- expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7)).toBe('10:00');
262
- expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe('09:30');
263
- });
264
-
265
252
  it('adds minutes', () => {
266
253
  expect(adjustTime('14:30' as ISOTimeString, 15)).toBe('14:45');
267
254
  expect(adjustTime('14:30' as ISOTimeString, 30)).toBe('15:00');
@@ -361,16 +361,13 @@ export function adjustTime(
361
361
  return time;
362
362
  }
363
363
 
364
- // A non-finite delta would spin the wrap-around forever (-Infinity) or
365
- // produce "NaN:NaN" (NaN) — return the input unchanged instead.
366
- if (!Number.isFinite(deltaMinutes)) {
367
- return time;
368
- }
369
-
370
364
  let totalMinutes = parsed.hour * 60 + parsed.minute + deltaMinutes;
371
365
 
372
- // Wrap around midnight (double-modulo handles negatives in O(1))
373
- totalMinutes = ((totalMinutes % (24 * 60)) + 24 * 60) % (24 * 60);
366
+ // Wrap around midnight
367
+ while (totalMinutes < 0) {
368
+ totalMinutes += 24 * 60;
369
+ }
370
+ totalMinutes = totalMinutes % (24 * 60);
374
371
 
375
372
  const newHour = Math.floor(totalMinutes / 60);
376
373
  const newMinute = totalMinutes % 60;
@@ -1,42 +0,0 @@
1
- /**
2
- * @file color.ts
3
- * @input CSS color strings (hex, rgb()/rgba(), a small set of named colors)
4
- * @output Shared color parsing/formatting primitives used across the design system
5
- * @position Package utility; backs theme token resolution, HCT color math, and chart rendering
6
- *
7
- * A single home for the color parsers that were previously duplicated across
8
- * the theme layer, charts, and lab. Consumers get one well-tested definition of
9
- * "parse this color" rather than several subtly different regexes.
10
- */
11
- /** A color decomposed into 0-255 RGB channels and a 0-1 alpha. */
12
- export interface RGBA {
13
- r: number;
14
- g: number;
15
- b: number;
16
- a: number;
17
- }
18
- /**
19
- * Parse a hex color into {@link RGBA}. Accepts `#rgb`, `#rgba`, `#rrggbb`, and
20
- * `#rrggbbaa`, with or without the leading `#`. Returns null for anything else.
21
- */
22
- export declare function parseHex(hex: string): RGBA | null;
23
- /**
24
- * Parse an `rgb()`/`rgba()` color into {@link RGBA}. Accepts comma- or
25
- * space-separated channels, an optional `/ alpha`, and percentage channels.
26
- */
27
- export declare function parseRgb(value: string): RGBA | null;
28
- /**
29
- * Parse a concrete CSS color string into {@link RGBA}. Supports hex,
30
- * `rgb()`/`rgba()`, and the named colors used in token expressions. Returns
31
- * null for anything it can't evaluate (e.g. `var()`, `oklch()`, unknown names)
32
- * so callers can preserve the original expression rather than guessing.
33
- */
34
- export declare function parseColor(value: string): RGBA | null;
35
- /** Format RGB channels (0-255) as an uppercase `#RRGGBB` string. */
36
- export declare function formatHex(r: number, g: number, b: number): string;
37
- /**
38
- * Serialize {@link RGBA} to a compact, JS-usable CSS color: `#RRGGBB` when
39
- * fully opaque, otherwise `rgba(r, g, b, a)`.
40
- */
41
- export declare function formatColor({ r, g, b, a }: RGBA): string;
42
- //# sourceMappingURL=color.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,kEAAkE;AAClE,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAoBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAqBjD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAqCnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAarD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAIjE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,EAAE,IAAI,GAAG,MAAM,CAMtD"}