@enact/limestone 1.3.0 → 1.9.4

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 (166) hide show
  1. package/.github/workflows/ci-branch.yml +21 -0
  2. package/.github/workflows/ci-pull-request.yml +16 -0
  3. package/.github/workflows/ci-reusable.yml +73 -0
  4. package/ActionGuide/ActionGuide.d.ts +5 -4
  5. package/ActionGuide/ActionGuide.module.css +1 -1
  6. package/Alert/Alert.d.ts +4 -2
  7. package/Alert/Alert.js +4 -1
  8. package/Alert/Alert.module.css +36 -0
  9. package/BodyText/BodyText.d.ts +5 -4
  10. package/BodyText/BodyText.module.css +7 -7
  11. package/Button/Button.d.ts +17 -12
  12. package/Button/Button.js +1 -1
  13. package/Button/Button.module.css +195 -268
  14. package/CHANGELOG.md +226 -0
  15. package/Card/Card.d.ts +36 -8
  16. package/Card/Card.js +157 -20
  17. package/Card/Card.module.css +277 -58
  18. package/Card/tests/Card-specs.js +30 -0
  19. package/Checkbox/Checkbox.d.ts +8 -7
  20. package/Checkbox/Checkbox.js +3 -1
  21. package/Checkbox/Checkbox.module.css +213 -120
  22. package/Checkbox/tests/Checkbox-specs.js +1 -1
  23. package/CheckboxItem/CheckboxItem.d.ts +22 -7
  24. package/CheckboxItem/CheckboxItem.js +69 -4
  25. package/Chips/Chip.js +60 -7
  26. package/Chips/Chip.module.css +3 -3
  27. package/Chips/Chips.js +26 -12
  28. package/Chips/Chips.module.css +1 -1
  29. package/Chips/tests/Chip-specs.js +19 -9
  30. package/Chips/tests/Chips-specs.js +19 -19
  31. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
  32. package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
  33. package/ContextualPopupDecorator/ContextualPopupDecorator.js +557 -549
  34. package/DatePicker/DatePicker.d.ts +4 -5
  35. package/DayPicker/DayPicker.d.ts +8 -7
  36. package/Dropdown/Dropdown.d.ts +11 -13
  37. package/Dropdown/Dropdown.module.css +9 -9
  38. package/Dropdown/DropdownList.js +16 -11
  39. package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
  40. package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
  41. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
  42. package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
  43. package/Heading/Heading.d.ts +8 -7
  44. package/Heading/Heading.module.css +5 -5
  45. package/Icon/Icon.d.ts +14 -4
  46. package/Icon/Icon.js +48 -2
  47. package/Icon/Icon.module.css +1 -1
  48. package/Icon/IconList.js +25 -1
  49. package/IconItem/IconItem.d.ts +13 -12
  50. package/IconItem/IconItem.js +15 -0
  51. package/IconItem/IconItem.module.css +107 -1
  52. package/Image/Image.d.ts +5 -4
  53. package/ImageItem/ImageItem.d.ts +11 -10
  54. package/ImageItem/ImageItem.js +37 -31
  55. package/ImageItem/ImageItem.module.css +30 -30
  56. package/ImageItem/tests/ImageItem-specs.js +3 -10
  57. package/Input/Input.js +9 -2
  58. package/Input/Input.module.css +37 -8
  59. package/Input/InputField.js +5 -1
  60. package/Input/InputField.module.css +17 -2
  61. package/Input/InputFieldSpotlightDecorator.js +213 -229
  62. package/Input/index.d.ts +15 -18
  63. package/Input/tests/InputField-specs.js +21 -0
  64. package/Item/Item.d.ts +16 -9
  65. package/Item/Item.js +20 -2
  66. package/Item/Item.module.css +1 -1
  67. package/KeyGuide/KeyGuide.d.ts +8 -7
  68. package/KeyGuide/KeyGuide.module.css +25 -1
  69. package/Marquee/Marquee.d.ts +2 -4
  70. package/MediaOverlay/MediaOverlay.d.ts +12 -11
  71. package/MediaOverlay/MediaOverlay.js +43 -21
  72. package/MediaOverlay/MediaOverlay.module.css +114 -15
  73. package/MediaPlayer/MediaControls.js +195 -13
  74. package/MediaPlayer/MediaControls.module.css +3 -2
  75. package/MediaPlayer/MediaSlider.module.css +7 -20
  76. package/MediaPlayer/index.d.ts +59 -7
  77. package/PageViews/PageViews.js +165 -80
  78. package/PageViews/PageViewsRouter.js +9 -0
  79. package/PageViews/tests/PageViews-specs.js +84 -0
  80. package/Panels/Header.js +48 -30
  81. package/Panels/Header.module.css +83 -31
  82. package/Panels/Panel.module.css +1 -1
  83. package/Panels/index.d.ts +7 -8
  84. package/Picker/Picker.d.ts +4 -5
  85. package/Picker/Picker.module.css +2 -2
  86. package/Popup/Popup.js +242 -240
  87. package/Popup/Popup.module.css +24 -24
  88. package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
  89. package/PopupTabLayout/PopupTabLayout.js +15 -9
  90. package/PopupTabLayout/PopupTabLayout.module.css +53 -16
  91. package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
  92. package/ProgressBar/ProgressBar.d.ts +5 -4
  93. package/ProgressBar/ProgressBarTooltip.module.css +12 -12
  94. package/ProgressButton/ProgressButton.d.ts +4 -5
  95. package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
  96. package/RadioItem/RadioItem.d.ts +18 -5
  97. package/RadioItem/RadioItem.js +67 -2
  98. package/RadioItem/RadioItem.module.css +36 -36
  99. package/RangePicker/RangePicker.module.css +2 -2
  100. package/Scroller/EditableWrapper.js +11 -4
  101. package/Scroller/Scroller.d.ts +20 -16
  102. package/Scroller/Scroller.js +9 -3
  103. package/Scroller/Scroller.module.css +4 -4
  104. package/Slider/Slider.d.ts +16 -14
  105. package/Slider/Slider.js +37 -4
  106. package/Slider/Slider.module.css +314 -91
  107. package/Slider/tests/Slider-specs.js +2 -1
  108. package/Spinner/Spinner.d.ts +5 -4
  109. package/Spinner/Spinner.module.css +9 -9
  110. package/Steps/Steps.d.ts +5 -4
  111. package/Steps/Steps.js +9 -5
  112. package/Switch/Switch.d.ts +8 -7
  113. package/Switch/Switch.module.css +100 -13
  114. package/SwitchItem/SwitchItem.d.ts +9 -6
  115. package/TabLayout/RefocusDecorator.js +15 -9
  116. package/TabLayout/TabGroup.js +3 -2
  117. package/TabLayout/TabGroup.module.css +2 -2
  118. package/TabLayout/TabLayout.d.ts +6 -0
  119. package/TabLayout/TabLayout.js +11 -1
  120. package/TabLayout/TabLayout.module.css +18 -0
  121. package/TabLayout/tests/TabLayout-specs.js +52 -0
  122. package/ThemeDecorator/ThemeDecorator.d.ts +9 -10
  123. package/ThemeDecorator/fontGenerator.js +1 -1
  124. package/ThemeDecorator/screenTypes.json +1 -0
  125. package/TimePicker/TimePicker.module.css +1 -1
  126. package/TooltipDecorator/Tooltip.module.css +1 -2
  127. package/TooltipDecorator/tests/util-specs.js +12 -0
  128. package/TooltipDecorator/useTooltip.js +1 -1
  129. package/TooltipDecorator/util.js +18 -11
  130. package/VideoPlayer/Feedback.js +3 -0
  131. package/VideoPlayer/Feedback.module.css +5 -9
  132. package/VideoPlayer/FeedbackIcons.js +1 -1
  133. package/VideoPlayer/FeedbackTooltip.module.css +55 -11
  134. package/VideoPlayer/VideoPlayer.d.ts +44 -18
  135. package/VideoPlayer/VideoPlayer.js +128 -23
  136. package/VideoPlayer/VideoPlayer.module.css +28 -11
  137. package/VirtualList/VirtualList.d.ts +9 -2
  138. package/VirtualList/VirtualList.js +31 -6
  139. package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
  140. package/VirtualList/tests/VirtualList-specs.js +28 -1
  141. package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
  142. package/VirtualList/tests/useEvent-specs.js +39 -0
  143. package/VirtualList/useEvent.js +45 -10
  144. package/VirtualList/useThemeVirtualList.js +3 -0
  145. package/WizardPanels/WizardPanels.module.css +2 -2
  146. package/WizardPanels/index.d.ts +4 -2
  147. package/fonts/Limestone_Icons.ttf +0 -0
  148. package/internal/$L/$L.js +3 -3
  149. package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
  150. package/internal/DateTime/DateTime.module.css +1 -0
  151. package/internal/Panels/PanelsRouter.js +16 -5
  152. package/internal/Picker/Picker.module.css +2 -2
  153. package/internal/SharedStateDecorator/SharedStateDecorator.js +76 -99
  154. package/internal/validators/validators.js +21 -2
  155. package/package.json +14 -14
  156. package/styles/colors-highcontrast.less +9 -1
  157. package/styles/colors.less +11 -7
  158. package/styles/motion-mixins.less +66 -0
  159. package/styles/motions.less +78 -0
  160. package/styles/variables.less +176 -150
  161. package/useScroll/HoverToScroll.js +8 -5
  162. package/useScroll/ScrollbarTrack.module.css +8 -8
  163. package/useScroll/useEvent.js +7 -1
  164. package/useScroll/useScroll.js +2 -0
  165. package/useScroll/useScroll.module.css +6 -6
  166. package/.travis.yml +0 -40
package/ContextualPopupDecorator/ContextualPopup.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  :global(.enact-locale-non-latin) .contextualPopup {
13
13
  font-family: "Limestone";
14
14
  font-weight: var(--primitive-font-weight-light);
15
- font-size: 1.125rem;
15
+ font-size: var(--primitive-font-size-54);
16
16
  font-style: normal;
17
17
  }
18
18
  :global(.enact-locale-km) .contextualPopup {
@@ -47,7 +47,7 @@
47
47
  position: absolute;
48
48
  min-height: 4rem;
49
49
  min-width: 4rem;
50
- padding: 0.75rem 0;
50
+ padding: var(--primitive-spacing-36) 0;
51
51
  background-clip: padding-box;
52
52
  box-sizing: border-box;
53
53
  }
@@ -56,52 +56,52 @@
56
56
  /* Needed to prevent global class being added in the DOM */
57
57
  }
58
58
  .contextualPopup .container.above.overlap {
59
- margin-top: 0.75rem;
59
+ margin-top: var(--primitive-spacing-36);
60
60
  }
61
61
  .contextualPopup .container.above.small {
62
- margin-top: -0.375rem;
62
+ margin-top: calc(var(--primitive-spacing-18) * -1);
63
63
  }
64
64
  .contextualPopup .container.above.large {
65
- margin-top: -0.75rem;
65
+ margin-top: calc(var(--primitive-spacing-36) * -1);
66
66
  }
67
67
  .contextualPopup .container.below.overlap {
68
- margin-top: -0.75rem;
68
+ margin-top: calc(var(--primitive-spacing-36) * -1);
69
69
  }
70
70
  .contextualPopup .container.below.small {
71
- margin-top: 0.375rem;
71
+ margin-top: var(--primitive-spacing-18);
72
72
  }
73
73
  .contextualPopup .container.below.large {
74
- margin-top: 0.75rem;
74
+ margin-top: var(--primitive-spacing-36);
75
75
  }
76
76
  .contextualPopup .container.right.top.overlap,
77
77
  .contextualPopup .container.right.middle.overlap,
78
78
  .contextualPopup .container.right.bottom.overlap {
79
- margin-left: -0.75rem;
79
+ margin-left: calc(var(--primitive-spacing-36) * -1);
80
80
  }
81
81
  .contextualPopup .container.right.top.small,
82
82
  .contextualPopup .container.right.middle.small,
83
83
  .contextualPopup .container.right.bottom.small {
84
- margin-left: 0.375rem;
84
+ margin-left: var(--primitive-spacing-18);
85
85
  }
86
86
  .contextualPopup .container.right.top.large,
87
87
  .contextualPopup .container.right.middle.large,
88
88
  .contextualPopup .container.right.bottom.large {
89
- margin-left: 0.75rem;
89
+ margin-left: var(--primitive-spacing-36);
90
90
  }
91
91
  .contextualPopup .container.left.top.overlap,
92
92
  .contextualPopup .container.left.middle.overlap,
93
93
  .contextualPopup .container.left.bottom.overlap {
94
- margin-left: 0.75rem;
94
+ margin-left: var(--primitive-spacing-36);
95
95
  }
96
96
  .contextualPopup .container.left.top.small,
97
97
  .contextualPopup .container.left.middle.small,
98
98
  .contextualPopup .container.left.bottom.small {
99
- margin-left: -0.375rem;
99
+ margin-left: calc(var(--primitive-spacing-18) * -1);
100
100
  }
101
101
  .contextualPopup .container.left.top.large,
102
102
  .contextualPopup .container.left.middle.large,
103
103
  .contextualPopup .container.left.bottom.large {
104
- margin-left: -0.75rem;
104
+ margin-left: calc(var(--primitive-spacing-36) * -1);
105
105
  }
106
106
  .contextualPopup .container.fixedSize {
107
107
  overflow: hidden;
@@ -134,7 +134,7 @@
134
134
  }
135
135
  .contextualPopup:global(.neutral) .arrow {
136
136
  stroke: var(--semantic-color-stroke-overlay-default);
137
- stroke-width: 0.021rem;
137
+ stroke-width: 0.063rem;
138
138
  }
139
139
  .contextualPopup:global(.neutral) .arrow .arrowFill {
140
140
  fill: var(--semantic-color-surface-context-group);
@@ -142,8 +142,8 @@
142
142
  .contextualPopup:global(.neutral) .outline {
143
143
  outline-color: var(--semantic-color-stroke-overlay-default);
144
144
  outline-style: solid;
145
- outline-width: 0.021rem;
146
- outline-offset: -0.021rem;
145
+ outline-width: 0.063rem;
146
+ outline-offset: calc(0.063rem * -1);
147
147
  }
148
148
  :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .container {
149
149
  background-color: var(--semantic-color-surface-context-group);
@@ -155,17 +155,17 @@
155
155
  box-shadow: none;
156
156
  }
157
157
  :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow {
158
- stroke: #7c848b;
159
- stroke-width: 0.021rem;
158
+ stroke: var(--semantic-color-stroke-main);
159
+ stroke-width: 0.063rem;
160
160
  }
161
161
  :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow .arrowFill {
162
162
  fill: var(--semantic-color-surface-context-group);
163
163
  }
164
164
  :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .outline {
165
- outline-color: #7c848b;
165
+ outline-color: var(--semantic-color-stroke-main);
166
166
  outline-style: solid;
167
- outline-width: 0.021rem;
168
- outline-offset: -0.021rem;
167
+ outline-width: 0.063rem;
168
+ outline-offset: calc(0.063rem * -1);
169
169
  }
170
170
  .contextualPopup:global(.light) .container {
171
171
  background-color: var(--semantic-color-surface-context-group);
@@ -178,7 +178,7 @@
178
178
  }
179
179
  .contextualPopup:global(.light) .arrow {
180
180
  stroke: var(--semantic-color-stroke-overlay-default);
181
- stroke-width: 0.021rem;
181
+ stroke-width: 0.063rem;
182
182
  }
183
183
  .contextualPopup:global(.light) .arrow .arrowFill {
184
184
  fill: var(--semantic-color-surface-context-group);
@@ -186,8 +186,8 @@
186
186
  .contextualPopup:global(.light) .outline {
187
187
  outline-color: var(--semantic-color-stroke-overlay-default);
188
188
  outline-style: solid;
189
- outline-width: 0.021rem;
190
- outline-offset: -0.021rem;
189
+ outline-width: 0.063rem;
190
+ outline-offset: calc(0.063rem * -1);
191
191
  }
192
192
  .contextualPopup:global(.game) {
193
193
  --semantic-color-surface-default: #2d224c;
@@ -205,7 +205,7 @@
205
205
  }
206
206
  .contextualPopup:global(.game) .arrow {
207
207
  stroke: var(--semantic-color-stroke-overlay-default);
208
- stroke-width: 0.021rem;
208
+ stroke-width: 0.063rem;
209
209
  }
210
210
  .contextualPopup:global(.game) .arrow .arrowFill {
211
211
  fill: var(--semantic-color-surface-context-group);
@@ -213,8 +213,8 @@
213
213
  .contextualPopup:global(.game) .outline {
214
214
  outline-color: var(--semantic-color-stroke-overlay-default);
215
215
  outline-style: solid;
216
- outline-width: 0.021rem;
217
- outline-offset: -0.021rem;
216
+ outline-width: 0.063rem;
217
+ outline-offset: calc(0.063rem * -1);
218
218
  }
219
219
  :global(.green) .contextualPopup:global(.game) {
220
220
  --semantic-color-surface-default: #1F2C24;
@@ -231,7 +231,7 @@
231
231
  }
232
232
  :global(.green) .contextualPopup:global(.game) .arrow {
233
233
  stroke: var(--semantic-color-stroke-overlay-default);
234
- stroke-width: 0.021rem;
234
+ stroke-width: 0.063rem;
235
235
  }
236
236
  :global(.green) .contextualPopup:global(.game) .arrow .arrowFill {
237
237
  fill: var(--semantic-color-surface-context-group);
@@ -239,8 +239,8 @@
239
239
  :global(.green) .contextualPopup:global(.game) .outline {
240
240
  outline-color: var(--semantic-color-stroke-overlay-default);
241
241
  outline-style: solid;
242
- outline-width: 0.021rem;
243
- outline-offset: -0.021rem;
242
+ outline-width: 0.063rem;
243
+ outline-offset: calc(0.063rem * -1);
244
244
  }
245
245
  :global(.orange) .contextualPopup:global(.game) {
246
246
  --semantic-color-surface-default: #422923;
@@ -257,7 +257,7 @@
257
257
  }
258
258
  :global(.orange) .contextualPopup:global(.game) .arrow {
259
259
  stroke: var(--semantic-color-stroke-overlay-default);
260
- stroke-width: 0.021rem;
260
+ stroke-width: 0.063rem;
261
261
  }
262
262
  :global(.orange) .contextualPopup:global(.game) .arrow .arrowFill {
263
263
  fill: var(--semantic-color-surface-context-group);
@@ -265,6 +265,6 @@
265
265
  :global(.orange) .contextualPopup:global(.game) .outline {
266
266
  outline-color: var(--semantic-color-stroke-overlay-default);
267
267
  outline-style: solid;
268
- outline-width: 0.021rem;
269
- outline-offset: -0.021rem;
268
+ outline-width: 0.063rem;
269
+ outline-offset: calc(0.063rem * -1);
270
270
  }