@seeqdev/qomponents 0.0.230 → 0.0.232

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 (37) hide show
  1. package/dist/index.esm.js +2 -2
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/Accordion/Accordion.d.ts +2 -2
  6. package/dist/src/Alert/Alert.d.ts +2 -2
  7. package/dist/src/Badge/Badge.d.ts +2 -2
  8. package/dist/src/ButtonGroup/ButtonGroup.d.ts +2 -2
  9. package/dist/src/ButtonWithDropdown/ButtonWithDropdown.d.ts +3 -3
  10. package/dist/src/ButtonWithPopover/ButtonWithPopover.d.ts +2 -2
  11. package/dist/src/Carousel/Carousel.d.ts +2 -2
  12. package/dist/src/Checkbox/Checkbox.d.ts +2 -2
  13. package/dist/src/Collapse/Collapse.d.ts +2 -2
  14. package/dist/src/ColorPickerControl/ColorPickerControl.d.ts +2 -2
  15. package/dist/src/ColorSwatch/ColorSwatch.d.ts +2 -2
  16. package/dist/src/EditorPanel/EditorPanel.d.ts +2 -2
  17. package/dist/src/ExternalLink/ExternalLink.d.ts +2 -2
  18. package/dist/src/Icon/Icon.d.ts +2 -2
  19. package/dist/src/InputGroup/InputGroup.d.ts +2 -2
  20. package/dist/src/LoadingIndicator/LoadingIndicator.d.ts +2 -2
  21. package/dist/src/Modal/Modal.d.ts +2 -2
  22. package/dist/src/ProgressBar/ProgressBar.d.ts +2 -2
  23. package/dist/src/SeeqActionDropdown/SeeqActionDropdown.d.ts +2 -2
  24. package/dist/src/SeeqActionDropdown/variants.d.ts +4 -4
  25. package/dist/src/SegmentedControl/SegmentedControl.d.ts +2 -2
  26. package/dist/src/Select/Select.d.ts +2 -2
  27. package/dist/src/Slider/Slider.d.ts +2 -2
  28. package/dist/src/SvgIcon/SvgIcon.d.ts +2 -2
  29. package/dist/src/Tabs/Tabs.d.ts +2 -2
  30. package/dist/src/TextArea/TextArea.d.ts +2 -2
  31. package/dist/src/TextField/TextField.d.ts +10 -10
  32. package/dist/src/ToolbarButton/ToolbarButton.d.ts +2 -2
  33. package/dist/src/Tooltip/Qtip.d.ts +2 -2
  34. package/dist/src/Tooltip/Tooltip.d.ts +2 -2
  35. package/dist/src/TriggerWithDropdown/TriggerWithDropdown.d.ts +2 -2
  36. package/dist/styles.css +34 -63
  37. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1538,14 +1538,6 @@
1538
1538
  outline-style: none;
1539
1539
  }
1540
1540
  }
1541
- .tw\:hover\:-translate-y-px {
1542
- &:hover {
1543
- @media (hover: hover) {
1544
- --tw-translate-y: -1px;
1545
- translate: var(--tw-translate-x) var(--tw-translate-y);
1546
- }
1547
- }
1548
- }
1549
1541
  .tw\:hover\:cursor-pointer {
1550
1542
  &:hover {
1551
1543
  @media (hover: hover) {
@@ -1665,14 +1657,6 @@
1665
1657
  }
1666
1658
  }
1667
1659
  }
1668
- .tw\:hover\:shadow-md {
1669
- &:hover {
1670
- @media (hover: hover) {
1671
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1672
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1673
- }
1674
- }
1675
- }
1676
1660
  .tw\:focus\:z-30 {
1677
1661
  &:focus {
1678
1662
  z-index: 30;
@@ -3515,9 +3499,9 @@
3515
3499
  --sq-insights-highlight: #0086e8;
3516
3500
  --sq-insights-light: #cce7ff;
3517
3501
  --sq-segmented-control-color: var(--sq-topic-dark);
3518
- --sq-segmented-control-gradient-start: #d9ecff;
3519
- --sq-segmented-control-gradient-hover-start: #c7e3ff;
3520
- --sq-segmented-control-dark-gradient-start: var(--sq-topic-highlight);
3502
+ --sq-segmented-control-background-active: #d9ecff;
3503
+ --sq-segmented-control-background-hover: #c7e3ff;
3504
+ --sq-segmented-control-dark-background-accent: var(--sq-topic-highlight);
3521
3505
  .color_topic, .color_topic_dark {
3522
3506
  --theme-darker: var(--sq-topic-darker);
3523
3507
  --theme-dark: var(--sq-topic-dark);
@@ -3531,9 +3515,9 @@
3531
3515
  --theme-item-row: var(--sq-topic-light);
3532
3516
  --theme-highlight-background: var(--sq-topic-light);
3533
3517
  --sq-segmented-control-color: #1f5f9f;
3534
- --sq-segmented-control-gradient-start: #d9ecff;
3535
- --sq-segmented-control-gradient-hover-start: #c7e3ff;
3536
- --sq-segmented-control-dark-gradient-start: #41a5e1;
3518
+ --sq-segmented-control-background-active: #d9ecff;
3519
+ --sq-segmented-control-background-hover: #c7e3ff;
3520
+ --sq-segmented-control-dark-background-accent: #41a5e1;
3537
3521
  }
3538
3522
  .color_analysis, .color_analysis_dark {
3539
3523
  --theme-darker: var(--sq-analysis-darker);
@@ -3548,9 +3532,9 @@
3548
3532
  --theme-item-row: var(--sq-analysis-light);
3549
3533
  --theme-highlight-background: var(--sq-analysis-light);
3550
3534
  --sq-segmented-control-color: var(--sq-analysis-dark);
3551
- --sq-segmented-control-gradient-start: var(--sq-analysis-light);
3552
- --sq-segmented-control-gradient-hover-start: #dff2ee;
3553
- --sq-segmented-control-dark-gradient-start: var(--sq-analysis-highlight);
3535
+ --sq-segmented-control-background-active: var(--sq-analysis-light);
3536
+ --sq-segmented-control-background-hover: #dff2ee;
3537
+ --sq-segmented-control-dark-background-accent: var(--sq-analysis-highlight);
3554
3538
  }
3555
3539
  .color_datalab, .color_datalab_dark {
3556
3540
  --theme-darker: var(--sq-datalab-darker);
@@ -3563,9 +3547,9 @@
3563
3547
  --theme-footer-text: var(--sq-datalab-dark);
3564
3548
  --theme-highlight-background: var(--sq-datalab-light);
3565
3549
  --sq-segmented-control-color: #b95b22;
3566
- --sq-segmented-control-gradient-start: #ffe6d6;
3567
- --sq-segmented-control-gradient-hover-start: #ffd9bf;
3568
- --sq-segmented-control-dark-gradient-start: #e58a52;
3550
+ --sq-segmented-control-background-active: #ffe6d6;
3551
+ --sq-segmented-control-background-hover: #ffd9bf;
3552
+ --sq-segmented-control-dark-background-accent: #e58a52;
3569
3553
  }
3570
3554
  .color_vantage, .color_vantage_dark {
3571
3555
  --theme-darker: var(--sq-vantage-darker);
@@ -3578,9 +3562,9 @@
3578
3562
  --theme-footer-text: var(--sq-vantage-dark);
3579
3563
  --theme-highlight-background: var(--sq-vantage-light);
3580
3564
  --sq-segmented-control-color: var(--sq-vantage-dark);
3581
- --sq-segmented-control-gradient-start: var(--sq-vantage-light);
3582
- --sq-segmented-control-gradient-hover-start: #c5addd;
3583
- --sq-segmented-control-dark-gradient-start: var(--sq-vantage-highlight);
3565
+ --sq-segmented-control-background-active: var(--sq-vantage-light);
3566
+ --sq-segmented-control-background-hover: #c5addd;
3567
+ --sq-segmented-control-dark-background-accent: var(--sq-vantage-highlight);
3584
3568
  }
3585
3569
  .color_insights, .color_insights_dark {
3586
3570
  --theme-darker: var(--sq-insights-darker);
@@ -3593,9 +3577,9 @@
3593
3577
  --theme-footer-text: var(--sq-insights-dark);
3594
3578
  --theme-highlight-background: var(--sq-insights-light);
3595
3579
  --sq-segmented-control-color: var(--sq-insights-dark);
3596
- --sq-segmented-control-gradient-start: var(--sq-insights-light);
3597
- --sq-segmented-control-gradient-hover-start: #b8dcff;
3598
- --sq-segmented-control-dark-gradient-start: var(--sq-insights-highlight);
3580
+ --sq-segmented-control-background-active: var(--sq-insights-light);
3581
+ --sq-segmented-control-background-hover: #b8dcff;
3582
+ --sq-segmented-control-dark-background-accent: var(--sq-insights-highlight);
3599
3583
  }
3600
3584
  --height-inputs: 34px;
3601
3585
  --height-30: 30px;
@@ -3819,60 +3803,47 @@
3819
3803
  }
3820
3804
  @layer components {
3821
3805
  .sq-segmented-control-pill {
3822
- background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
3823
- border-color: var(--sq-tool-btn-border);
3824
- color: var(--sq-gray-text);
3806
+ background-color: var(--sqw-white);
3807
+ background-image: none;
3808
+ border-color: var(--sqw-disabled-gray);
3809
+ color: var(--sqw-text-color);
3825
3810
  }
3826
3811
  .sq-segmented-control-pill--inactive:hover {
3827
- background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
3828
- border-color: var(--sq-segmented-control-color);
3829
- @supports (color: color-mix(in lab, red, red)) {
3830
- border-color: color-mix(in srgb, var(--sq-segmented-control-color) 40%, transparent);
3831
- }
3812
+ background-color: var(--sqw-light-gray);
3832
3813
  color: var(--sqw-text-color);
3833
3814
  }
3834
3815
  .sq-segmented-control-pill.sq-segmented-control-pill--active {
3835
- background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
3816
+ background-color: var(--sq-segmented-control-background-active);
3836
3817
  border-color: var(--sq-segmented-control-color);
3837
- box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
3838
3818
  color: var(--sqw-text-color);
3839
3819
  }
3840
3820
  .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
3841
- background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-hover-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
3842
- box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
3821
+ background-color: var(--sq-segmented-control-background-hover);
3843
3822
  color: var(--sqw-text-color);
3844
3823
  }
3845
3824
  .tw-dark .sq-segmented-control-pill {
3846
- background-image: linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3847
- border-color: var(--color-sq-dark-disabled-gray);
3848
- color: var(--color-sq-dark-text);
3825
+ background-color: var(--sq-tools-background-dark);
3826
+ background-image: none;
3827
+ border-color: var(--sq-disabled-gray-dark);
3828
+ color: var(--sq-text-color-dark);
3849
3829
  }
3850
3830
  .tw-dark .sq-segmented-control-pill--inactive:hover {
3851
- background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3852
- @supports (color: color-mix(in lab, red, red)) {
3853
- background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 30%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3854
- }
3855
- border-color: var(--theme-highlight);
3856
- @supports (color: color-mix(in lab, red, red)) {
3857
- border-color: color-mix(in srgb, var(--theme-highlight) 60%, transparent);
3858
- }
3831
+ background-color: var(--sq-light-gray-dark);
3859
3832
  color: var(--sqw-white);
3860
3833
  }
3861
3834
  .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active {
3862
- background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3835
+ background-color: var(--sq-segmented-control-dark-background-accent);
3863
3836
  @supports (color: color-mix(in lab, red, red)) {
3864
- background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 54%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3837
+ background-color: color-mix( in srgb, var(--sq-segmented-control-dark-background-accent) 54%, var(--sq-tools-background-dark) );
3865
3838
  }
3866
3839
  border-color: var(--theme-highlight);
3867
- box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
3868
3840
  color: var(--sqw-white);
3869
3841
  }
3870
3842
  .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
3871
- background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3843
+ background-color: var(--sq-segmented-control-dark-background-accent);
3872
3844
  @supports (color: color-mix(in lab, red, red)) {
3873
- background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 64%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
3845
+ background-color: color-mix( in srgb, var(--sq-segmented-control-dark-background-accent) 64%, var(--sq-tools-background-dark) );
3874
3846
  }
3875
- box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
3876
3847
  color: var(--sqw-white);
3877
3848
  }
3878
3849
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.230",
3
+ "version": "0.0.232",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "source": "src/index.ts",