@descope/web-components-ui 1.0.273 → 1.0.275

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 (32) hide show
  1. package/dist/cjs/index.cjs.js +202 -101
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.esm.js +247 -112
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/umd/2481.js +1 -1
  7. package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
  8. package/dist/umd/descope-grid-index-js.js +1 -1
  9. package/package.json +1 -1
  10. package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +5 -0
  11. package/src/components/descope-grid/GridClass.js +7 -5
  12. package/src/components/descope-password/PasswordClass.js +2 -4
  13. package/src/darkTheme.js +48 -0
  14. package/src/helpers/themeHelpers/colorsHelpers.js +77 -9
  15. package/src/index.d.ts +2 -2
  16. package/src/index.js +1 -0
  17. package/src/theme/components/badge.js +1 -1
  18. package/src/theme/components/button.js +7 -5
  19. package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +9 -4
  20. package/src/theme/components/comboBox.js +1 -1
  21. package/src/theme/components/container.js +1 -1
  22. package/src/theme/components/divider.js +1 -1
  23. package/src/theme/components/grid.js +10 -10
  24. package/src/theme/components/inputWrapper.js +10 -10
  25. package/src/theme/components/loader/loaderLinear.js +1 -1
  26. package/src/theme/components/modal.js +1 -1
  27. package/src/theme/components/multiSelectComboBox.js +2 -2
  28. package/src/theme/components/password.js +1 -0
  29. package/src/theme/components/switchToggle.js +3 -4
  30. package/src/theme/components/text.js +2 -2
  31. package/src/theme/components/textArea.js +0 -7
  32. package/src/theme/globals.js +36 -11
@@ -358,25 +358,93 @@ const createHelperVars = (theme, prefix) => {
358
358
  return [res.theme, res.useVars, res.vars];
359
359
  };
360
360
 
361
- const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
362
- const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
363
- const genContrast = (c, percentage = 0.9) => {
361
+ const colorGaps = {
362
+ darkLight: 0.4,
363
+ highlight: 0.8,
364
+ contrast: 1,
365
+ edgeColor: {
366
+ darkLight: 0.25,
367
+ highlight: 0.1,
368
+ },
369
+ };
370
+
371
+ const darken = (c, percentage) => c.darken(percentage).hex();
372
+
373
+ const contrast = (c) => {
364
374
  const isDark = c.isDark();
365
375
  return c
366
- .mix(Color(isDark ? 'white' : 'black'), percentage)
376
+ .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
367
377
  .saturate(1)
368
378
  .hex();
369
379
  };
370
380
 
371
- const genColor = (color) => {
381
+ const lighten = (c, percentage) => {
382
+ const isDark = c.lightness() < 0.5;
383
+
384
+ if (isDark) {
385
+ return c.lightness(percentage * 100).hex();
386
+ }
387
+
388
+ return c.lighten(percentage).hex();
389
+ };
390
+
391
+ const isNearBlack = (color) => color.luminosity() < 0.01;
392
+ const isNearWhite = (color) => color.luminosity() > 0.99;
393
+
394
+ const generateDarkColor = (color, theme) => {
395
+ if (color.dark) return color.dark;
396
+
397
+ if (theme === 'dark') {
398
+ return isNearWhite(color)
399
+ ? darken(color, colorGaps.edgeColor.darkLight)
400
+ : lighten(color, colorGaps.darkLight);
401
+ }
402
+
403
+ return isNearBlack(color)
404
+ ? lighten(color, colorGaps.edgeColor.darkLight)
405
+ : darken(color, colorGaps.darkLight);
406
+ };
407
+
408
+ const generateLightColor = (color, theme) => {
409
+ if (color.light) return color.light;
410
+
411
+ if (theme === 'dark') {
412
+ return isNearBlack(color)
413
+ ? lighten(color, colorGaps.edgeColor.darkLight)
414
+ : darken(color, colorGaps.darkLight);
415
+ }
416
+
417
+ return isNearWhite(color)
418
+ ? darken(color, colorGaps.edgeColor.darkLight)
419
+ : lighten(color, colorGaps.darkLight);
420
+ };
421
+
422
+ const generateHighlightColor = (color, theme) => {
423
+ if (color.highlight) return color.highlight;
424
+
425
+ if (theme === 'dark') {
426
+ return isNearBlack(color)
427
+ ? lighten(color, colorGaps.edgeColor.highlight)
428
+ : darken(color, colorGaps.highlight);
429
+ }
430
+
431
+ return isNearWhite(color)
432
+ ? darken(color, colorGaps.edgeColor.highlight)
433
+ : lighten(color, colorGaps.highlight);
434
+ };
435
+
436
+ const genColor = (color, theme) => {
372
437
  const mainColor = new Color(color.main || color);
373
438
 
374
- return {
439
+ const res = {
375
440
  main: mainColor.hex(),
376
- dark: color.dark || genDark(mainColor),
377
- light: color.light || genLight(mainColor),
378
- contrast: color.contrast || genContrast(mainColor),
441
+ dark: generateDarkColor(mainColor, theme),
442
+ light: generateLightColor(mainColor, theme),
443
+ highlight: generateHighlightColor(mainColor, theme),
444
+ contrast: color.contrast || contrast(mainColor),
379
445
  };
446
+
447
+ return res;
380
448
  };
381
449
 
382
450
  const genColors = (colors) => {
@@ -391,17 +459,43 @@ const genColors = (colors) => {
391
459
 
392
460
  const direction = 'ltr';
393
461
 
394
- const colors = genColors({
462
+ const colors = {
395
463
  surface: {
396
- main: 'lightgray',
397
- light: '#fff',
398
- dark: '#000',
399
- },
400
- primary: '#006af5',
401
- secondary: '#7D14EB',
402
- success: 'green',
403
- error: '#e21d12',
404
- });
464
+ dark: '#636c74',
465
+ main: '#ffffff',
466
+ light: '#cfd3d7',
467
+ highlight: '#f4f5f6',
468
+ contrast: '#181a1c',
469
+ },
470
+ primary: {
471
+ main: '#006af5',
472
+ dark: '#004094',
473
+ light: '#71aeff',
474
+ highlight: '#f0f6ff',
475
+ contrast: '#ffffff',
476
+ },
477
+ secondary: {
478
+ dark: '#6410bc',
479
+ main: '#802ed6',
480
+ light: '#be89f5',
481
+ highlight: '#ede7f6',
482
+ contrast: '#ffffff',
483
+ },
484
+ success: {
485
+ main: '#008000',
486
+ dark: '#005700',
487
+ light: '#8bc38b',
488
+ highlight: '#f5faf5',
489
+ contrast: '#ffffff',
490
+ },
491
+ error: {
492
+ main: '#e21d12',
493
+ dark: '#b3170f',
494
+ light: '#f4807a',
495
+ highlight: '#fef1f1',
496
+ contrast: '#ffffff',
497
+ },
498
+ };
405
499
 
406
500
  const fonts = {
407
501
  font1: {
@@ -2566,15 +2660,15 @@ loadingIndicatorStyles = `
2566
2660
  }
2567
2661
  `;
2568
2662
 
2569
- const globalRefs$i = getThemeRefs(globals);
2663
+ const globalRefs$h = getThemeRefs(globals);
2570
2664
  const compVars$4 = ButtonClass.cssVarList;
2571
2665
 
2572
2666
  const mode = {
2573
- primary: globalRefs$i.colors.primary,
2574
- secondary: globalRefs$i.colors.secondary,
2575
- success: globalRefs$i.colors.success,
2576
- error: globalRefs$i.colors.error,
2577
- surface: globalRefs$i.colors.surface,
2667
+ primary: globalRefs$h.colors.primary,
2668
+ secondary: globalRefs$h.colors.secondary,
2669
+ success: globalRefs$h.colors.success,
2670
+ error: globalRefs$h.colors.error,
2671
+ surface: globalRefs$h.colors.surface,
2578
2672
  };
2579
2673
 
2580
2674
  const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
@@ -2582,15 +2676,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
2582
2676
  const button = {
2583
2677
  ...helperTheme$3,
2584
2678
 
2585
- [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
2679
+ [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
2586
2680
 
2587
2681
  [compVars$4.cursor]: 'pointer',
2588
2682
  [compVars$4.hostHeight]: '3em',
2589
2683
  [compVars$4.hostWidth]: 'auto',
2590
- [compVars$4.hostDirection]: globalRefs$i.direction,
2684
+ [compVars$4.hostDirection]: globalRefs$h.direction,
2591
2685
 
2592
- [compVars$4.borderRadius]: globalRefs$i.radius.sm,
2593
- [compVars$4.borderWidth]: globalRefs$i.border.xs,
2686
+ [compVars$4.borderRadius]: globalRefs$h.radius.sm,
2687
+ [compVars$4.borderWidth]: globalRefs$h.border.xs,
2594
2688
  [compVars$4.borderStyle]: 'solid',
2595
2689
  [compVars$4.borderColor]: 'transparent',
2596
2690
 
@@ -2633,10 +2727,10 @@ const button = {
2633
2727
  },
2634
2728
 
2635
2729
  _disabled: {
2636
- [helperVars$3.main]: globalRefs$i.colors.surface.main,
2637
- [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
2638
- [helperVars$3.light]: globalRefs$i.colors.surface.light,
2639
- [helperVars$3.contrast]: globalRefs$i.colors.surface.light,
2730
+ [helperVars$3.main]: globalRefs$h.colors.surface.light,
2731
+ [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
2732
+ [helperVars$3.light]: globalRefs$h.colors.surface.light,
2733
+ [helperVars$3.contrast]: globalRefs$h.colors.surface.main,
2640
2734
  },
2641
2735
 
2642
2736
  variant: {
@@ -2656,12 +2750,14 @@ const button = {
2656
2750
 
2657
2751
  outline: {
2658
2752
  [compVars$4.labelTextColor]: helperRefs$3.main,
2659
- [compVars$4.borderColor]: 'currentColor',
2753
+ [compVars$4.borderColor]: helperRefs$3.main,
2660
2754
  _hover: {
2661
2755
  [compVars$4.labelTextColor]: helperRefs$3.dark,
2756
+ [compVars$4.borderColor]: helperRefs$3.dark,
2662
2757
  },
2663
2758
  _active: {
2664
2759
  [compVars$4.labelTextColor]: helperRefs$3.main,
2760
+ [compVars$4.borderColor]: helperRefs$3.main,
2665
2761
  },
2666
2762
  },
2667
2763
 
@@ -2672,13 +2768,13 @@ const button = {
2672
2768
  [compVars$4.labelTextDecoration]: 'underline',
2673
2769
  },
2674
2770
  _active: {
2675
- [compVars$4.labelTextColor]: helperRefs$3.dark,
2771
+ [compVars$4.labelTextColor]: helperRefs$3.main,
2676
2772
  },
2677
2773
  },
2678
2774
  },
2679
2775
 
2680
2776
  _focused: {
2681
- [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
2777
+ [compVars$4.outlineColor]: helperRefs$3.light,
2682
2778
  },
2683
2779
  };
2684
2780
 
@@ -2932,21 +3028,21 @@ const TextFieldClass = compose(
2932
3028
  );
2933
3029
 
2934
3030
  const componentName$D = getComponentName('input-wrapper');
2935
- const globalRefs$h = getThemeRefs(globals);
3031
+ const globalRefs$g = getThemeRefs(globals);
2936
3032
 
2937
3033
  const [theme$1, refs, vars$w] = createHelperVars(
2938
3034
  {
2939
- labelTextColor: globalRefs$h.colors.surface.contrast,
2940
- valueTextColor: globalRefs$h.colors.surface.contrast,
2941
- placeholderTextColor: globalRefs$h.colors.surface.main,
3035
+ labelTextColor: globalRefs$g.colors.surface.dark,
3036
+ valueTextColor: globalRefs$g.colors.surface.contrast,
3037
+ placeholderTextColor: globalRefs$g.colors.surface.dark,
2942
3038
  requiredIndicator: "'*'",
2943
- errorMessageTextColor: globalRefs$h.colors.error.main,
3039
+ errorMessageTextColor: globalRefs$g.colors.error.main,
2944
3040
 
2945
- borderWidth: globalRefs$h.border.xs,
2946
- borderRadius: globalRefs$h.radius.xs,
3041
+ borderWidth: globalRefs$g.border.xs,
3042
+ borderRadius: globalRefs$g.radius.xs,
2947
3043
  borderColor: 'transparent',
2948
3044
 
2949
- outlineWidth: globalRefs$h.border.sm,
3045
+ outlineWidth: globalRefs$g.border.sm,
2950
3046
  outlineStyle: 'solid',
2951
3047
  outlineColor: 'transparent',
2952
3048
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -2957,11 +3053,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
2957
3053
  horizontalPadding: '0.5em',
2958
3054
  verticalPadding: '0.5em',
2959
3055
 
2960
- backgroundColor: globalRefs$h.colors.surface.light,
3056
+ backgroundColor: globalRefs$g.colors.surface.main,
2961
3057
 
2962
- fontFamily: globalRefs$h.fonts.font1.family,
3058
+ fontFamily: globalRefs$g.fonts.font1.family,
2963
3059
 
2964
- direction: globalRefs$h.direction,
3060
+ direction: globalRefs$g.direction,
2965
3061
 
2966
3062
  overlayOpacity: '0.3',
2967
3063
 
@@ -2977,27 +3073,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
2977
3073
  },
2978
3074
 
2979
3075
  _focused: {
2980
- outlineColor: globalRefs$h.colors.surface.main,
3076
+ outlineColor: globalRefs$g.colors.surface.light,
2981
3077
  _invalid: {
2982
- outlineColor: globalRefs$h.colors.error.main,
3078
+ outlineColor: globalRefs$g.colors.error.main,
2983
3079
  },
2984
3080
  },
2985
3081
 
2986
3082
  _bordered: {
2987
- outlineWidth: globalRefs$h.border.xs,
2988
- borderColor: globalRefs$h.colors.surface.main,
3083
+ outlineWidth: globalRefs$g.border.xs,
3084
+ borderColor: globalRefs$g.colors.surface.light,
2989
3085
  borderStyle: 'solid',
2990
3086
  _invalid: {
2991
- borderColor: globalRefs$h.colors.error.main,
3087
+ borderColor: globalRefs$g.colors.error.main,
2992
3088
  },
2993
3089
  },
2994
3090
 
2995
3091
  _disabled: {
2996
- labelTextColor: globalRefs$h.colors.surface.main,
2997
- borderColor: globalRefs$h.colors.surface.main,
2998
- valueTextColor: globalRefs$h.colors.surface.dark,
2999
- placeholderTextColor: globalRefs$h.colors.surface.dark,
3000
- backgroundColor: globalRefs$h.colors.surface.light,
3092
+ labelTextColor: globalRefs$g.colors.surface.light,
3093
+ borderColor: globalRefs$g.colors.surface.light,
3094
+ valueTextColor: globalRefs$g.colors.surface.light,
3095
+ placeholderTextColor: globalRefs$g.colors.surface.light,
3096
+ backgroundColor: globalRefs$g.colors.surface.main,
3001
3097
  },
3002
3098
  },
3003
3099
  componentName$D
@@ -3140,10 +3236,7 @@ const PasswordClass = compose(
3140
3236
  labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
3141
3237
  errorMessageTextColor: { ...errorMessage$a, property: 'color' },
3142
3238
 
3143
- inputValueTextColor: [
3144
- { ...inputElement$2, property: 'color' },
3145
- { ...revealButtonIcon, property: 'color' },
3146
- ],
3239
+ inputValueTextColor: { ...inputElement$2, property: 'color' },
3147
3240
  inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
3148
3241
 
3149
3242
  revealButtonOffset: [
@@ -3151,6 +3244,7 @@ const PasswordClass = compose(
3151
3244
  { ...revealButtonContainer, property: 'margin-left' },
3152
3245
  ],
3153
3246
  revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
3247
+ revealButtonColor: { ...revealButtonIcon, property: 'color' },
3154
3248
  },
3155
3249
  }),
3156
3250
  draggableMixin,
@@ -3217,7 +3311,7 @@ const PasswordClass = compose(
3217
3311
  })
3218
3312
  );
3219
3313
 
3220
- const globalRefs$g = getThemeRefs(globals);
3314
+ const globalRefs$f = getThemeRefs(globals);
3221
3315
  const vars$u = PasswordClass.cssVarList;
3222
3316
 
3223
3317
  const password = {
@@ -3241,8 +3335,9 @@ const password = {
3241
3335
  [vars$u.inputOutlineStyle]: refs.outlineStyle,
3242
3336
  [vars$u.inputOutlineColor]: refs.outlineColor,
3243
3337
  [vars$u.inputOutlineOffset]: refs.outlineOffset,
3244
- [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
3338
+ [vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
3245
3339
  [vars$u.revealButtonSize]: refs.toggleButtonSize,
3340
+ [vars$u.revealButtonColor]: refs.placeholderTextColor,
3246
3341
  };
3247
3342
 
3248
3343
  var password$1 = /*#__PURE__*/Object.freeze({
@@ -3464,7 +3559,6 @@ const TextAreaClass = compose(
3464
3559
  })
3465
3560
  );
3466
3561
 
3467
- const globalRefs$f = getThemeRefs(globals);
3468
3562
  const vars$r = TextAreaClass.cssVarList;
3469
3563
 
3470
3564
  const textArea = {
@@ -3495,10 +3589,6 @@ const textArea = {
3495
3589
  center: { [vars$r.inputTextAlign]: 'center' },
3496
3590
  },
3497
3591
 
3498
- _disabled: {
3499
- [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
3500
- },
3501
-
3502
3592
  _readonly: {
3503
3593
  [vars$r.inputResizeType]: 'none',
3504
3594
  },
@@ -3912,7 +4002,7 @@ const switchToggle = {
3912
4002
  [vars$p.trackBorderStyle]: refs.borderStyle,
3913
4003
  [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3914
4004
  [vars$p.trackBorderColor]: refs.borderColor,
3915
- [vars$p.trackBackgroundColor]: 'none',
4005
+ [vars$p.trackBackgroundColor]: refs.backgroundColor,
3916
4006
  [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
3917
4007
  [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3918
4008
  [vars$p.trackHeight]: checkboxHeight,
@@ -3921,7 +4011,7 @@ const switchToggle = {
3921
4011
  [vars$p.knobRadius]: '50%',
3922
4012
  [vars$p.knobTopOffset]: '1px',
3923
4013
  [vars$p.knobLeftOffset]: knobMargin,
3924
- [vars$p.knobColor]: refs.valueTextColor,
4014
+ [vars$p.knobColor]: refs.labelTextColor,
3925
4015
  [vars$p.knobTransitionDuration]: '0.3s',
3926
4016
 
3927
4017
  [vars$p.labelTextColor]: refs.labelTextColor,
@@ -3933,7 +4023,6 @@ const switchToggle = {
3933
4023
 
3934
4024
  _checked: {
3935
4025
  [vars$p.trackBorderColor]: refs.borderColor,
3936
- [vars$p.trackBackgroundColor]: refs.backgroundColor,
3937
4026
  [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
3938
4027
  [vars$p.knobColor]: refs.valueTextColor,
3939
4028
  [vars$p.knobTextColor]: refs.valueTextColor,
@@ -3941,7 +4030,7 @@ const switchToggle = {
3941
4030
 
3942
4031
  _disabled: {
3943
4032
  [vars$p.knobColor]: globalRefs$e.colors.surface.light,
3944
- [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
4033
+ [vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
3945
4034
  [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3946
4035
  [vars$p.labelTextColor]: refs.labelTextColor,
3947
4036
  _checked: {
@@ -4049,7 +4138,7 @@ const container = {
4049
4138
 
4050
4139
  [compVars$3.hostWidth]: '100%',
4051
4140
  [compVars$3.boxShadow]: 'none',
4052
- [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
4141
+ [compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
4053
4142
  [compVars$3.color]: globalRefs$d.colors.surface.contrast,
4054
4143
  [compVars$3.borderRadius]: '0px',
4055
4144
  [compVars$3.hostDirection]: globalRefs$d.direction,
@@ -4358,10 +4447,10 @@ const text$2 = {
4358
4447
 
4359
4448
  mode: {
4360
4449
  primary: {
4361
- [vars$k.textColor]: globalRefs$c.colors.primary.main,
4450
+ [vars$k.textColor]: globalRefs$c.colors.surface.contrast,
4362
4451
  },
4363
4452
  secondary: {
4364
- [vars$k.textColor]: globalRefs$c.colors.secondary.main,
4453
+ [vars$k.textColor]: globalRefs$c.colors.surface.dark,
4365
4454
  },
4366
4455
  error: {
4367
4456
  [vars$k.textColor]: globalRefs$c.colors.error.main,
@@ -4627,7 +4716,7 @@ const divider = {
4627
4716
  [compVars$2.flexDirection]: 'row',
4628
4717
  [compVars$2.alignSelf]: 'stretch',
4629
4718
  [compVars$2.hostWidth]: '100%',
4630
- [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
4719
+ [compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
4631
4720
  [compVars$2.stripeColorOpacity]: '0.5',
4632
4721
  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
4633
4722
  [compVars$2.labelTextWidth]: 'fit-content',
@@ -5006,7 +5095,7 @@ const loaderLinear = {
5006
5095
  [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
5007
5096
  [vars$g.barWidth]: '20%',
5008
5097
 
5009
- [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
5098
+ [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
5010
5099
  [vars$g.barBorderRadius]: '4px',
5011
5100
 
5012
5101
  [vars$g.animationDuration]: '2s',
@@ -5504,7 +5593,7 @@ const comboBox = {
5504
5593
  [vars$e.inputBackgroundColor]: refs.backgroundColor,
5505
5594
  [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
5506
5595
  [vars$e.inputHeight]: refs.inputHeight,
5507
- [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
5596
+ [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
5508
5597
  [vars$e.inputDropdownButtonCursor]: 'pointer',
5509
5598
  [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
5510
5599
  [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
@@ -7776,6 +7865,7 @@ class RawSelectItem extends createBaseClass({
7776
7865
  `;
7777
7866
 
7778
7867
  forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
7868
+ forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
7779
7869
  }
7780
7870
 
7781
7871
  handleFocus() {
@@ -7824,6 +7914,10 @@ const ButtonSelectionGroupItemClass = compose(
7824
7914
  selector: () => ButtonClass.componentName,
7825
7915
  property: ButtonClass.cssVarList.borderRadius,
7826
7916
  },
7917
+ outlineColor: {
7918
+ selector: () => ButtonClass.componentName,
7919
+ property: ButtonClass.cssVarList.outlineColor,
7920
+ },
7827
7921
  },
7828
7922
  }),
7829
7923
  draggableMixin,
@@ -7836,20 +7930,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
7836
7930
 
7837
7931
  const buttonSelectionGroupItem = {
7838
7932
  [vars$8.hostDirection]: 'inherit',
7839
- [vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
7933
+ [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
7840
7934
  [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
7841
- [vars$8.borderColor]: globalRefs$6.colors.surface.main,
7935
+ [vars$8.borderColor]: globalRefs$6.colors.surface.light,
7842
7936
  [vars$8.borderStyle]: 'solid',
7843
7937
  [vars$8.borderRadius]: globalRefs$6.radius.sm,
7938
+ [vars$8.outlineColor]: 'transparent',
7844
7939
 
7845
7940
  _hover: {
7846
- [vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7941
+ [vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
7942
+ },
7943
+
7944
+ _focused: {
7945
+ [vars$8.outlineColor]: globalRefs$6.colors.surface.light,
7847
7946
  },
7848
7947
 
7849
7948
  _selected: {
7850
7949
  [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
7851
7950
  [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
7852
- [vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
7951
+ [vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
7853
7952
  },
7854
7953
  };
7855
7954
 
@@ -8540,7 +8639,7 @@ const globalRefs$4 = getThemeRefs(globals);
8540
8639
  const compVars = ModalClass.cssVarList;
8541
8640
 
8542
8641
  const modal = {
8543
- [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
8642
+ [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
8544
8643
  [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
8545
8644
  [compVars.overlayWidth]: '540px',
8546
8645
  };
@@ -8765,12 +8864,11 @@ const GridClass = compose(
8765
8864
  ],
8766
8865
  sortIndicatorsColor: { ...sortIndicators, property: 'color' },
8767
8866
  activeSortIndicator: { ...activeSortIndicator, property: 'color' },
8768
- inputBorderColor: { ...host$1, property: 'border-color' },
8769
- inputBorderWidth: { ...host$1, property: 'border-width' },
8770
- inputBorderStyle: { ...host$1, property: 'border-style' },
8771
- inputBorderRadius: { ...host$1, property: 'border-radius' },
8867
+ borderColor: { ...host$1, property: 'border-color' },
8868
+ borderWidth: { ...host$1, property: 'border-width' },
8869
+ borderStyle: { ...host$1, property: 'border-style' },
8870
+ borderRadius: { ...host$1, property: 'border-radius' },
8772
8871
  selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
8773
- selectedTextColor: { ...selectedRow, property: 'color' },
8774
8872
  headerRowTextColor: { ...headerRowCell, property: 'color' },
8775
8873
  separatorColor: [
8776
8874
  { ...firstRow, property: 'border-bottom-color' },
@@ -8795,6 +8893,9 @@ const GridClass = compose(
8795
8893
  }
8796
8894
  vaadin-grid-cell-content {
8797
8895
  display: flex;
8896
+ }
8897
+ vaadin-grid::part(selected-row-cell) {
8898
+ background-image: none;
8798
8899
  }
8799
8900
  `,
8800
8901
  excludeAttrsSync: ['columns', 'tabindex'],
@@ -8810,28 +8911,28 @@ const grid = {
8810
8911
  [vars$4.hostHeight]: '100%',
8811
8912
  [vars$4.hostMinHeight]: '400px',
8812
8913
  [vars$4.fontWeight]: '400',
8813
- [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
8914
+ [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
8814
8915
 
8815
8916
  [vars$4.fontSize]: refs.fontSize,
8816
8917
  [vars$4.fontFamily]: refs.fontFamily,
8817
8918
 
8818
- [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
8919
+ [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
8819
8920
  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
8820
- [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
8921
+ [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
8821
8922
 
8822
- [vars$4.inputBorderWidth]: refs.borderWidth,
8823
- [vars$4.inputBorderStyle]: refs.borderStyle,
8824
- [vars$4.inputBorderRadius]: refs.borderRadius,
8825
- [vars$4.inputBorderColor]: 'transparent',
8923
+ [vars$4.borderWidth]: refs.borderWidth,
8924
+ [vars$4.borderStyle]: refs.borderStyle,
8925
+ [vars$4.borderRadius]: refs.borderRadius,
8926
+ [vars$4.borderColor]: 'transparent',
8826
8927
 
8827
8928
  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
8828
- [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
8929
+ [vars$4.separatorColor]: globalRefs$3.colors.surface.light,
8829
8930
 
8830
8931
  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
8831
- [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
8932
+ [vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
8832
8933
 
8833
8934
  _bordered: {
8834
- [vars$4.inputBorderColor]: refs.borderColor,
8935
+ [vars$4.borderColor]: refs.borderColor,
8835
8936
  },
8836
8937
  };
8837
8938
 
@@ -9642,7 +9743,7 @@ const multiSelectComboBox = {
9642
9743
  [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
9643
9744
  [vars$2.inputVerticalPadding]: refs.verticalPadding,
9644
9745
  [vars$2.inputHeight]: refs.inputHeight,
9645
- [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
9746
+ [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
9646
9747
  [vars$2.inputDropdownButtonCursor]: 'pointer',
9647
9748
  [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
9648
9749
  [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
@@ -9650,7 +9751,7 @@ const multiSelectComboBox = {
9650
9751
  [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
9651
9752
  [vars$2.chipFontSize]: refs.chipFontSize,
9652
9753
  [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
9653
- [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
9754
+ [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
9654
9755
 
9655
9756
  _readonly: {
9656
9757
  [vars$2.inputDropdownButtonCursor]: 'default',
@@ -9761,7 +9862,7 @@ const badge = {
9761
9862
  default: {
9762
9863
  [vars$1.textColor]: globalRefs.colors.surface.dark,
9763
9864
  _bordered: {
9764
- [vars$1.borderColor]: globalRefs.colors.surface.main,
9865
+ [vars$1.borderColor]: globalRefs.colors.surface.light,
9765
9866
  },
9766
9867
  },
9767
9868
  primary: {