@aurora-ds/components 0.24.0 → 0.24.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.
Files changed (7) hide show
  1. package/dist/cjs/index.js +22 -25
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/utils/ui/components/data-display/status/getStatusColorStyles.utils.d.ts +1 -1
  4. package/dist/esm/index.js +22 -25
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/utils/ui/components/data-display/status/getStatusColorStyles.utils.d.ts +1 -1
  7. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -252,12 +252,10 @@ const getStatusColorStyles = (theme, color, variant, disabled) => {
252
252
  return {
253
253
  filled: {
254
254
  backgroundColor: theme.colors.disabled,
255
- color: theme.colors.disabledText,
256
255
  borderColor: 'transparent',
257
256
  },
258
257
  outlined: {
259
258
  backgroundColor: 'transparent',
260
- color: theme.colors.disabledText,
261
259
  borderColor: theme.colors.disabled,
262
260
  },
263
261
  }[variant];
@@ -266,138 +264,135 @@ const getStatusColorStyles = (theme, color, variant, disabled) => {
266
264
  default: {
267
265
  filled: {
268
266
  backgroundColor: theme.colors.defaultSubtle,
269
- color: theme.colors.default,
270
267
  borderColor: 'transparent',
271
268
  },
272
269
  outlined: {
273
270
  backgroundColor: theme.colors.defaultSubtle,
274
- color: theme.colors.default,
275
271
  borderColor: theme.colors.default,
276
272
  },
277
273
  },
278
274
  primary: {
279
275
  filled: {
280
276
  backgroundColor: theme.colors.primarySubtle,
281
- color: theme.colors.primary,
282
277
  borderColor: 'transparent',
283
278
  },
284
279
  outlined: {
285
280
  backgroundColor: theme.colors.primarySubtle,
286
- color: theme.colors.primary,
287
281
  borderColor: theme.colors.primary,
288
282
  },
289
283
  },
290
284
  success: {
291
285
  filled: {
292
286
  backgroundColor: theme.colors.successSubtle,
293
- color: theme.colors.success,
294
287
  borderColor: 'transparent',
295
288
  },
296
289
  outlined: {
297
290
  backgroundColor: theme.colors.successSubtle,
298
- color: theme.colors.success,
299
291
  borderColor: theme.colors.success,
300
292
  },
301
293
  },
302
294
  warning: {
303
295
  filled: {
304
296
  backgroundColor: theme.colors.warningSubtle,
305
- color: theme.colors.warning,
306
297
  borderColor: 'transparent',
307
298
  },
308
299
  outlined: {
309
300
  backgroundColor: theme.colors.warningSubtle,
310
- color: theme.colors.warning,
311
301
  borderColor: theme.colors.warning,
312
302
  },
313
303
  },
314
304
  error: {
315
305
  filled: {
316
306
  backgroundColor: theme.colors.errorSubtle,
317
- color: theme.colors.error,
318
307
  borderColor: 'transparent',
319
308
  },
320
309
  outlined: {
321
310
  backgroundColor: theme.colors.errorSubtle,
322
- color: theme.colors.error,
323
311
  borderColor: theme.colors.error,
324
312
  },
325
313
  },
326
314
  info: {
327
315
  filled: {
328
316
  backgroundColor: theme.colors.infoSubtle,
329
- color: theme.colors.info,
330
317
  borderColor: 'transparent',
331
318
  },
332
319
  outlined: {
333
320
  backgroundColor: theme.colors.infoSubtle,
334
- color: theme.colors.info,
335
321
  borderColor: theme.colors.info,
336
322
  },
337
323
  },
338
324
  highlight: {
339
325
  filled: {
340
326
  backgroundColor: theme.colors.highlightSubtle,
341
- color: theme.colors.highlight,
342
327
  borderColor: 'transparent',
343
328
  },
344
329
  outlined: {
345
330
  backgroundColor: theme.colors.highlightSubtle,
346
- color: theme.colors.highlight,
347
331
  borderColor: theme.colors.highlight,
348
332
  },
349
333
  },
350
334
  accent: {
351
335
  filled: {
352
336
  backgroundColor: theme.colors.accentSubtle,
353
- color: theme.colors.accent,
354
337
  borderColor: 'transparent',
355
338
  },
356
339
  outlined: {
357
340
  backgroundColor: theme.colors.accentSubtle,
358
- color: theme.colors.accent,
359
341
  borderColor: theme.colors.accent,
360
342
  },
361
343
  },
362
344
  new: {
363
345
  filled: {
364
346
  backgroundColor: theme.colors.newSubtle,
365
- color: theme.colors.new,
366
347
  borderColor: 'transparent',
367
348
  },
368
349
  outlined: {
369
350
  backgroundColor: theme.colors.newSubtle,
370
- color: theme.colors.new,
371
351
  borderColor: theme.colors.new,
372
352
  },
373
353
  },
374
354
  rose: {
375
355
  filled: {
376
356
  backgroundColor: theme.colors.roseSubtle,
377
- color: theme.colors.rose,
378
357
  borderColor: 'transparent',
379
358
  },
380
359
  outlined: {
381
360
  backgroundColor: theme.colors.roseSubtle,
382
- color: theme.colors.rose,
383
361
  borderColor: theme.colors.rose,
384
362
  },
385
363
  },
386
364
  yellow: {
387
365
  filled: {
388
366
  backgroundColor: theme.colors.yellowSubtle,
389
- color: theme.colors.yellow,
390
367
  borderColor: 'transparent',
391
368
  },
392
369
  outlined: {
393
370
  backgroundColor: theme.colors.yellowSubtle,
394
- color: theme.colors.yellow,
395
371
  borderColor: theme.colors.yellow,
396
372
  },
397
373
  },
398
374
  };
399
375
  return colorMap[color][variant];
400
376
  };
377
+ const getStatusTextColor = (theme, color, disabled) => {
378
+ if (disabled) {
379
+ return theme.colors.disabledText;
380
+ }
381
+ const colorMap = {
382
+ default: theme.colors.default,
383
+ primary: theme.colors.primary,
384
+ success: theme.colors.success,
385
+ warning: theme.colors.warning,
386
+ error: theme.colors.error,
387
+ info: theme.colors.info,
388
+ highlight: theme.colors.highlight,
389
+ accent: theme.colors.accent,
390
+ new: theme.colors.new,
391
+ rose: theme.colors.rose,
392
+ yellow: theme.colors.yellow,
393
+ };
394
+ return colorMap[color];
395
+ };
401
396
 
402
397
  /**
403
398
  * Get status size styles based on the theme, size and icon-only state
@@ -485,6 +480,8 @@ const getStatusContentSize = (size) => {
485
480
  */
486
481
  const Status = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
487
482
  const isIconOnly = Boolean(icon) && !label;
483
+ const theme$1 = theme.useTheme();
484
+ const textColor = getStatusTextColor(theme$1, color, disabled);
488
485
  return (jsxRuntime.jsxs("span", { className: STATUS_STYLES.root({
489
486
  variant,
490
487
  color,
@@ -493,7 +490,7 @@ const Status = ({ label, icon, variant = 'filled', color = 'default', size = 'md
493
490
  disabled,
494
491
  gap,
495
492
  radius,
496
- }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsxRuntime.jsx(Icon, { size: getStatusContentSize(size), children: icon })), label && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: getStatusContentSize(size), children: label }))] }));
493
+ }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsxRuntime.jsx(Icon, { size: getStatusContentSize(size), color: textColor, children: icon })), label && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: getStatusContentSize(size), color: textColor, children: label }))] }));
497
494
  };
498
495
  Status.displayName = 'Status';
499
496