sakana-element 2.2.0 → 2.4.0

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 (155) hide show
  1. package/README.md +98 -25
  2. package/dist/es/{Alert-C76ZWSVk.js → Alert-DfLsJvQD.js} +2 -2
  3. package/dist/es/Avatar-Ci4OKsv7.js +9 -0
  4. package/dist/es/{Badge-CoFWwBwv.js → Badge-B4wEToK6.js} +2 -2
  5. package/dist/es/{Breadcrumb-BtrwTVKW.js → Breadcrumb-BFzww8jd.js} +2 -2
  6. package/dist/es/{Button-S_31-UWJ.js → Button-DbFviVWb.js} +3 -3
  7. package/dist/es/{Card-DcW6nHYD.js → Card-ClRqKkc_.js} +2 -2
  8. package/dist/es/ChatBubble-DFEV_lVI.js +9 -0
  9. package/dist/es/Checkbox-l86YI3Fr.js +51 -0
  10. package/dist/es/{Collapse-DsS7M-m3.js → Collapse-B67v6RSE.js} +4 -4
  11. package/dist/es/{ConfigProvider-BgIewHXP.js → ConfigProvider-BCoGbcS5.js} +2 -2
  12. package/dist/es/Diff-BLiniLom.js +64 -0
  13. package/dist/es/Divider-DDSOHv8G.js +9 -0
  14. package/dist/es/Drawer-apeXw6EO.js +40 -0
  15. package/dist/es/Dropdown-By9qIErf.js +104 -0
  16. package/dist/es/{FileInput-BQ59woas.js → FileInput-CZ5jTfB_.js} +3 -3
  17. package/dist/es/Filter-B_1zU4Dq.js +40 -0
  18. package/dist/es/Form-B_XDnSjK.js +123 -0
  19. package/dist/es/{Icon-DpJyuj7c.js → Icon-D6qRB3pq.js} +1 -1
  20. package/dist/es/Indicator-C6Ip4dpP.js +9 -0
  21. package/dist/es/{Input-CiE4bPJN.js → Input-bThwBbNZ.js} +7 -7
  22. package/dist/es/Kbd-DXNjs7at.js +13 -0
  23. package/dist/es/{Link-B9B2APZq.js → Link-08Ee61Fv.js} +1 -1
  24. package/dist/es/{Loading-BW99pE5N.js → Loading-ByI9mjss.js} +13 -13
  25. package/dist/es/Message-CGG-lV5I.js +152 -0
  26. package/dist/es/Notification-B4clKY5h.js +69 -0
  27. package/dist/es/{Overlay-BRDSWspM.js → Overlay-6iPenJB1.js} +1 -1
  28. package/dist/es/Pixelate-A8J7jxDW.js +39 -0
  29. package/dist/es/Popconfirm-gcHGcOTz.js +23 -0
  30. package/dist/es/Progress-DFUBJQ4X.js +12 -0
  31. package/dist/es/Radio-CLBa1XIM.js +33 -0
  32. package/dist/es/Resizable-BWrFr2oj.js +151 -0
  33. package/dist/es/{Select-Dwqv8isB.js → Select-BtLqds1d.js} +20 -20
  34. package/dist/es/Skeleton-CGUQv3nQ.js +15 -0
  35. package/dist/es/{Switch-B1Gnv1tB.js → Switch-CZJ-S77_.js} +3 -3
  36. package/dist/es/Table-lHbxiyGq.js +10 -0
  37. package/dist/es/Tooltip-CdPqNYdn.js +74 -0
  38. package/dist/es/Validator-7ZT_nXDZ.js +40 -0
  39. package/dist/es/hooks-pU4JmsO3.js +171 -0
  40. package/dist/es/index.js +107 -70
  41. package/dist/es/utils-BXICIEsD.js +139 -0
  42. package/dist/es/{vendor-DXmGx29U.js → vendor-DrBJKLFW.js} +254 -210
  43. package/dist/index.css +1 -1
  44. package/dist/theme/Avatar.css +13 -43
  45. package/dist/theme/Badge.css +151 -151
  46. package/dist/theme/Breadcrumb.css +46 -4
  47. package/dist/theme/Button.css +72 -8
  48. package/dist/theme/Card.css +177 -93
  49. package/dist/theme/ChatBubble.css +218 -0
  50. package/dist/theme/Checkbox.css +604 -0
  51. package/dist/theme/Collapse.css +96 -96
  52. package/dist/theme/Diff.css +110 -0
  53. package/dist/theme/Divider.css +150 -0
  54. package/dist/theme/Drawer.css +206 -0
  55. package/dist/theme/Dropdown.css +359 -75
  56. package/dist/theme/FileInput.css +32 -0
  57. package/dist/theme/Filter.css +598 -0
  58. package/dist/theme/Indicator.css +159 -0
  59. package/dist/theme/Input.css +414 -406
  60. package/dist/theme/Kbd.css +104 -0
  61. package/dist/theme/Link.css +22 -3
  62. package/dist/theme/Loading.css +50 -12
  63. package/dist/theme/Message.css +250 -41
  64. package/dist/theme/Notification.css +232 -42
  65. package/dist/theme/Popconfirm.css +23 -7
  66. package/dist/theme/Progress.css +278 -0
  67. package/dist/theme/Radio.css +492 -0
  68. package/dist/theme/Resizable.css +95 -0
  69. package/dist/theme/Select.css +198 -88
  70. package/dist/theme/Skeleton.css +192 -0
  71. package/dist/theme/Switch.css +22 -3
  72. package/dist/theme/Table.css +680 -0
  73. package/dist/theme/Tooltip.css +150 -26
  74. package/dist/theme/Validator.css +25 -0
  75. package/dist/types/components/Avatar/types.d.ts +0 -2
  76. package/dist/types/components/ChatBubble/constants.d.ts +2 -0
  77. package/dist/types/components/ChatBubble/index.d.ts +27 -0
  78. package/dist/types/components/ChatBubble/types.d.ts +10 -0
  79. package/dist/types/components/Checkbox/constants.d.ts +5 -0
  80. package/dist/types/components/Checkbox/index.d.ts +94 -0
  81. package/dist/types/components/Checkbox/types.d.ts +46 -0
  82. package/dist/types/components/Collapse/index.d.ts +5 -5
  83. package/dist/types/components/Diff/constants.d.ts +4 -0
  84. package/dist/types/components/Diff/index.d.ts +67 -0
  85. package/dist/types/components/Diff/types.d.ts +29 -0
  86. package/dist/types/components/Divider/index.d.ts +30 -0
  87. package/dist/types/components/Divider/types.d.ts +10 -0
  88. package/dist/types/components/Drawer/constants.d.ts +1 -0
  89. package/dist/types/components/Drawer/index.d.ts +72 -0
  90. package/dist/types/components/Drawer/types.d.ts +20 -0
  91. package/dist/types/components/Dropdown/index.d.ts +13 -3
  92. package/dist/types/components/Dropdown/types.d.ts +3 -0
  93. package/dist/types/components/Dropdown/useDropdownKeyboard.d.ts +8 -0
  94. package/dist/types/components/FileInput/index.d.ts +5 -5
  95. package/dist/types/components/Filter/constants.d.ts +5 -0
  96. package/dist/types/components/Filter/index.d.ts +59 -0
  97. package/dist/types/components/Filter/types.d.ts +38 -0
  98. package/dist/types/components/Indicator/constants.d.ts +2 -0
  99. package/dist/types/components/Indicator/index.d.ts +28 -0
  100. package/dist/types/components/Indicator/types.d.ts +10 -0
  101. package/dist/types/components/Input/index.d.ts +10 -10
  102. package/dist/types/components/Kbd/constants.d.ts +3 -0
  103. package/dist/types/components/Kbd/index.d.ts +24 -0
  104. package/dist/types/components/Kbd/types.d.ts +10 -0
  105. package/dist/types/components/Message/methods.d.ts +2 -0
  106. package/dist/types/components/Message/types.d.ts +7 -1
  107. package/dist/types/components/MessageBox/types.d.ts +14 -2
  108. package/dist/types/components/Notification/methods.d.ts +3 -0
  109. package/dist/types/components/Notification/types.d.ts +8 -2
  110. package/dist/types/components/Pixelate/constants.d.ts +2 -0
  111. package/dist/types/components/Pixelate/index.d.ts +71 -0
  112. package/dist/types/components/Pixelate/types.d.ts +23 -0
  113. package/dist/types/components/Popconfirm/index.d.ts +18 -9
  114. package/dist/types/components/Popconfirm/types.d.ts +2 -1
  115. package/dist/types/components/Progress/constants.d.ts +2 -0
  116. package/dist/types/components/Progress/index.d.ts +50 -0
  117. package/dist/types/components/Progress/types.d.ts +22 -0
  118. package/dist/types/components/Radio/constants.d.ts +5 -0
  119. package/dist/types/components/Radio/index.d.ts +88 -0
  120. package/dist/types/components/Radio/types.d.ts +43 -0
  121. package/dist/types/components/Resizable/constants.d.ts +3 -0
  122. package/dist/types/components/Resizable/index.d.ts +135 -0
  123. package/dist/types/components/Resizable/types.d.ts +52 -0
  124. package/dist/types/components/Select/index.d.ts +32 -23
  125. package/dist/types/components/Skeleton/index.d.ts +36 -0
  126. package/dist/types/components/Skeleton/types.d.ts +12 -0
  127. package/dist/types/components/Switch/index.d.ts +5 -5
  128. package/dist/types/components/Table/index.d.ts +27 -0
  129. package/dist/types/components/Table/types.d.ts +20 -0
  130. package/dist/types/components/Tooltip/index.d.ts +9 -3
  131. package/dist/types/components/Tooltip/types.d.ts +7 -0
  132. package/dist/types/components/Validator/index.d.ts +52 -0
  133. package/dist/types/components/Validator/types.d.ts +13 -0
  134. package/dist/types/components/index.d.ts +15 -0
  135. package/dist/types/hooks/index.d.ts +3 -1
  136. package/dist/types/hooks/useDraggable.d.ts +7 -0
  137. package/dist/types/hooks/useFocusTrap.d.ts +5 -0
  138. package/dist/types/utils/index.d.ts +2 -0
  139. package/dist/types/utils/instance-management.d.ts +40 -0
  140. package/dist/types/utils/pixelate.d.ts +10 -0
  141. package/dist/types/utils/style.d.ts +1 -0
  142. package/dist/umd/index.css +1 -1
  143. package/dist/umd/index.css.gz +0 -0
  144. package/dist/umd/index.umd.cjs +4 -4
  145. package/dist/umd/index.umd.cjs.gz +0 -0
  146. package/package.json +59 -59
  147. package/dist/es/Avatar-CxsRW-wl.js +0 -9
  148. package/dist/es/Dropdown-GcomGMAI.js +0 -40
  149. package/dist/es/Form-j90EzLXU.js +0 -122
  150. package/dist/es/Message-DCNnTUje.js +0 -123
  151. package/dist/es/Notification-CBzY5904.js +0 -58
  152. package/dist/es/Popconfirm-DF6d2ORS.js +0 -23
  153. package/dist/es/Tooltip-k6gKnMyt.js +0 -74
  154. package/dist/es/hooks-BaG7l8K5.js +0 -116
  155. package/dist/es/utils-bsCscZfS.js +0 -84
package/dist/theme/Button.css CHANGED
@@ -18,7 +18,11 @@
18
18
  --px-button-active-border-color: var(--px-active-border-color);
19
19
  --px-button-active-bg-color: var(--px-active-bg-color);
20
20
  --px-button-outline-color: var(--px-color-primary-light-5);
21
- --px-button-shadow-color: var(--px-shadow-color);
21
+ --px-button-shadow-color: var(--px-shadow-color);
22
+
23
+ /* Beveled inset for 3D raised-button depth */
24
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
25
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
22
26
  }
23
27
  /* Base Button Styles - Pixel Game Aesthetic */
24
28
  .px-button[data-v-0d682c9b] {
@@ -66,7 +70,7 @@
66
70
  );
67
71
  z-index: -1;
68
72
  }
69
- /* Fill layer — inset by border width, filled with bg color */
73
+ /* Fill layer — inset by border width, filled with bg color, beveled */
70
74
  .px-button[data-v-0d682c9b]::after {
71
75
  content: '';
72
76
  position: absolute;
@@ -78,6 +82,7 @@
78
82
  100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
79
83
  4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
80
84
  );
85
+ box-shadow: var(--px-button-inset-highlight), var(--px-button-inset-shadow);
81
86
  z-index: -1;
82
87
  }
83
88
  .px-button + .px-button[data-v-0d682c9b] {
@@ -93,7 +98,9 @@
93
98
  background: var(--px-button-hover-border-color);
94
99
  }
95
100
  .px-button[data-v-0d682c9b]:hover:not(.is-disabled):not(.is-loading)::after {
96
- background: var(--px-button-hover-bg-color);
101
+ background: var(--px-button-hover-bg-color);
102
+ box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
103
+ inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
97
104
  }
98
105
  /* Active - Press down effect */
99
106
  .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading) {
@@ -105,7 +112,8 @@
105
112
  background: var(--px-button-active-border-color);
106
113
  }
107
114
  .px-button[data-v-0d682c9b]:active:not(.is-disabled):not(.is-loading)::after {
108
- background: var(--px-button-active-bg-color);
115
+ background: var(--px-button-active-bg-color);
116
+ box-shadow: var(--px-button-inset-shadow), var(--px-button-inset-highlight);
109
117
  }
110
118
  /* Focus outline */
111
119
  .px-button[data-v-0d682c9b]:focus-visible {
@@ -121,6 +129,8 @@
121
129
  }
122
130
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
123
131
  .px-button.is-dash[data-v-0d682c9b] {
132
+ --px-button-inset-highlight: none;
133
+ --px-button-inset-shadow: none;
124
134
  border: 2px dashed var(--px-button-border-color);
125
135
  filter: none;
126
136
  isolation: isolate;
@@ -153,6 +163,8 @@
153
163
  }
154
164
  /* Ghost variant - No border/background, subtle hover fill */
155
165
  .px-button.is-ghost[data-v-0d682c9b] {
166
+ --px-button-inset-highlight: none;
167
+ --px-button-inset-shadow: none;
156
168
  filter: none;
157
169
  isolation: isolate;
158
170
  --px-button-shadow-color: transparent;
@@ -188,6 +200,8 @@
188
200
  }
189
201
  /* Link variant - Underlined text, no border/background/shadow */
190
202
  .px-button.is-link[data-v-0d682c9b] {
203
+ --px-button-inset-highlight: none;
204
+ --px-button-inset-shadow: none;
191
205
  filter: none;
192
206
  --px-button-shadow-color: transparent;
193
207
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -303,6 +317,8 @@
303
317
  .px-button[disabled][data-v-0d682c9b],
304
318
  .px-button[disabled][data-v-0d682c9b]:hover,
305
319
  .px-button[disabled][data-v-0d682c9b]:focus {
320
+ --px-button-inset-highlight: none;
321
+ --px-button-inset-shadow: none;
306
322
  color: var(--px-button-disabled-text-color);
307
323
  cursor: not-allowed;
308
324
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
@@ -320,8 +336,16 @@
320
336
  width: 1em;
321
337
  height: 1em;
322
338
  }
339
+ /* Dark mode bevel override */
340
+ html.dark .px-button[data-v-0d682c9b],
341
+ .px-dark .px-button[data-v-0d682c9b] {
342
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1);
343
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
344
+ }
323
345
  /* Type variants - Colored buttons */
324
346
  .px-button--primary[data-v-0d682c9b] {
347
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
348
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
325
349
  --px-button-text-color: var(--px-color-white);
326
350
  --px-button-bg-color: var(--px-color-primary);
327
351
  --px-button-border-color: var(--px-color-primary-dark);
@@ -390,6 +414,8 @@
390
414
  --px-button-shadow-color: var(--px-color-primary-dark);
391
415
  }
392
416
  .px-button--success[data-v-0d682c9b] {
417
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
418
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
393
419
  --px-button-text-color: var(--px-color-white);
394
420
  --px-button-bg-color: var(--px-color-success);
395
421
  --px-button-border-color: var(--px-color-success-dark);
@@ -458,6 +484,8 @@
458
484
  --px-button-shadow-color: var(--px-color-success-dark);
459
485
  }
460
486
  .px-button--warning[data-v-0d682c9b] {
487
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
488
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
461
489
  --px-button-text-color: var(--px-color-white);
462
490
  --px-button-bg-color: var(--px-color-warning);
463
491
  --px-button-border-color: var(--px-color-warning-dark);
@@ -526,6 +554,8 @@
526
554
  --px-button-shadow-color: var(--px-color-warning-dark);
527
555
  }
528
556
  .px-button--info[data-v-0d682c9b] {
557
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
558
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
529
559
  --px-button-text-color: var(--px-color-white);
530
560
  --px-button-bg-color: var(--px-color-info);
531
561
  --px-button-border-color: var(--px-color-info-dark);
@@ -594,6 +624,8 @@
594
624
  --px-button-shadow-color: var(--px-color-info-dark);
595
625
  }
596
626
  .px-button--danger[data-v-0d682c9b] {
627
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
628
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
597
629
  --px-button-text-color: var(--px-color-white);
598
630
  --px-button-bg-color: var(--px-color-danger);
599
631
  --px-button-border-color: var(--px-color-danger-dark);
@@ -761,7 +793,11 @@
761
793
  --px-button-active-border-color: var(--px-active-border-color);
762
794
  --px-button-active-bg-color: var(--px-active-bg-color);
763
795
  --px-button-outline-color: var(--px-color-primary-light-5);
764
- --px-button-shadow-color: var(--px-shadow-color);
796
+ --px-button-shadow-color: var(--px-shadow-color);
797
+
798
+ /* Beveled inset for 3D raised-button depth */
799
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
800
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
765
801
  }
766
802
  /* Base Button Styles - Pixel Game Aesthetic */
767
803
  .px-button[data-v-87af5dc3] {
@@ -809,7 +845,7 @@
809
845
  );
810
846
  z-index: -1;
811
847
  }
812
- /* Fill layer — inset by border width, filled with bg color */
848
+ /* Fill layer — inset by border width, filled with bg color, beveled */
813
849
  .px-button[data-v-87af5dc3]::after {
814
850
  content: '';
815
851
  position: absolute;
@@ -821,6 +857,7 @@
821
857
  100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
822
858
  4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
823
859
  );
860
+ box-shadow: var(--px-button-inset-highlight), var(--px-button-inset-shadow);
824
861
  z-index: -1;
825
862
  }
826
863
  .px-button + .px-button[data-v-87af5dc3] {
@@ -836,7 +873,9 @@
836
873
  background: var(--px-button-hover-border-color);
837
874
  }
838
875
  .px-button[data-v-87af5dc3]:hover:not(.is-disabled):not(.is-loading)::after {
839
- background: var(--px-button-hover-bg-color);
876
+ background: var(--px-button-hover-bg-color);
877
+ box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
878
+ inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
840
879
  }
841
880
  /* Active - Press down effect */
842
881
  .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading) {
@@ -848,7 +887,8 @@
848
887
  background: var(--px-button-active-border-color);
849
888
  }
850
889
  .px-button[data-v-87af5dc3]:active:not(.is-disabled):not(.is-loading)::after {
851
- background: var(--px-button-active-bg-color);
890
+ background: var(--px-button-active-bg-color);
891
+ box-shadow: var(--px-button-inset-shadow), var(--px-button-inset-highlight);
852
892
  }
853
893
  /* Focus outline */
854
894
  .px-button[data-v-87af5dc3]:focus-visible {
@@ -864,6 +904,8 @@
864
904
  }
865
905
  /* Dash variant - Dashed border on the button itself, no pixel shadow */
866
906
  .px-button.is-dash[data-v-87af5dc3] {
907
+ --px-button-inset-highlight: none;
908
+ --px-button-inset-shadow: none;
867
909
  border: 2px dashed var(--px-button-border-color);
868
910
  filter: none;
869
911
  isolation: isolate;
@@ -896,6 +938,8 @@
896
938
  }
897
939
  /* Ghost variant - No border/background, subtle hover fill */
898
940
  .px-button.is-ghost[data-v-87af5dc3] {
941
+ --px-button-inset-highlight: none;
942
+ --px-button-inset-shadow: none;
899
943
  filter: none;
900
944
  isolation: isolate;
901
945
  --px-button-shadow-color: transparent;
@@ -931,6 +975,8 @@
931
975
  }
932
976
  /* Link variant - Underlined text, no border/background/shadow */
933
977
  .px-button.is-link[data-v-87af5dc3] {
978
+ --px-button-inset-highlight: none;
979
+ --px-button-inset-shadow: none;
934
980
  filter: none;
935
981
  --px-button-shadow-color: transparent;
936
982
  --px-button-hover-text-color: var(--px-hover-bg-color);
@@ -1046,6 +1092,8 @@
1046
1092
  .px-button[disabled][data-v-87af5dc3],
1047
1093
  .px-button[disabled][data-v-87af5dc3]:hover,
1048
1094
  .px-button[disabled][data-v-87af5dc3]:focus {
1095
+ --px-button-inset-highlight: none;
1096
+ --px-button-inset-shadow: none;
1049
1097
  color: var(--px-button-disabled-text-color);
1050
1098
  cursor: not-allowed;
1051
1099
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
@@ -1063,8 +1111,16 @@
1063
1111
  width: 1em;
1064
1112
  height: 1em;
1065
1113
  }
1114
+ /* Dark mode bevel override */
1115
+ html.dark .px-button[data-v-87af5dc3],
1116
+ .px-dark .px-button[data-v-87af5dc3] {
1117
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1);
1118
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
1119
+ }
1066
1120
  /* Type variants - Colored buttons */
1067
1121
  .px-button--primary[data-v-87af5dc3] {
1122
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1123
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1068
1124
  --px-button-text-color: var(--px-color-white);
1069
1125
  --px-button-bg-color: var(--px-color-primary);
1070
1126
  --px-button-border-color: var(--px-color-primary-dark);
@@ -1133,6 +1189,8 @@
1133
1189
  --px-button-shadow-color: var(--px-color-primary-dark);
1134
1190
  }
1135
1191
  .px-button--success[data-v-87af5dc3] {
1192
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1193
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1136
1194
  --px-button-text-color: var(--px-color-white);
1137
1195
  --px-button-bg-color: var(--px-color-success);
1138
1196
  --px-button-border-color: var(--px-color-success-dark);
@@ -1201,6 +1259,8 @@
1201
1259
  --px-button-shadow-color: var(--px-color-success-dark);
1202
1260
  }
1203
1261
  .px-button--warning[data-v-87af5dc3] {
1262
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1263
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1204
1264
  --px-button-text-color: var(--px-color-white);
1205
1265
  --px-button-bg-color: var(--px-color-warning);
1206
1266
  --px-button-border-color: var(--px-color-warning-dark);
@@ -1269,6 +1329,8 @@
1269
1329
  --px-button-shadow-color: var(--px-color-warning-dark);
1270
1330
  }
1271
1331
  .px-button--info[data-v-87af5dc3] {
1332
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1333
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1272
1334
  --px-button-text-color: var(--px-color-white);
1273
1335
  --px-button-bg-color: var(--px-color-info);
1274
1336
  --px-button-border-color: var(--px-color-info-dark);
@@ -1337,6 +1399,8 @@
1337
1399
  --px-button-shadow-color: var(--px-color-info-dark);
1338
1400
  }
1339
1401
  .px-button--danger[data-v-87af5dc3] {
1402
+ --px-button-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
1403
+ --px-button-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
1340
1404
  --px-button-text-color: var(--px-color-white);
1341
1405
  --px-button-bg-color: var(--px-color-danger);
1342
1406
  --px-button-border-color: var(--px-color-danger-dark);