@cloudscape-design/components-themeable 3.0.347 → 3.0.349

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 (220) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +2 -0
  3. package/lib/internal/scss/app-layout/visual-refresh/layout.scss +3 -3
  4. package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -0
  5. package/lib/internal/scss/app-layout/visual-refresh/tools.scss +1 -0
  6. package/lib/internal/scss/box/text.scss +1 -1
  7. package/lib/internal/scss/button/styles.scss +1 -1
  8. package/lib/internal/scss/button-dropdown/category-elements/styles.scss +2 -3
  9. package/lib/internal/scss/button-dropdown/item-element/styles.scss +2 -2
  10. package/lib/internal/scss/cards/styles.scss +3 -9
  11. package/lib/internal/scss/container/shared.scss +2 -2
  12. package/lib/internal/scss/container/styles.scss +3 -0
  13. package/lib/internal/scss/expandable-section/styles.scss +2 -2
  14. package/lib/internal/scss/header/styles.scss +61 -58
  15. package/lib/internal/scss/modal/styles.scss +1 -1
  16. package/lib/internal/scss/segmented-control/segment.scss +1 -1
  17. package/lib/internal/scss/side-navigation/styles.scss +4 -0
  18. package/lib/internal/scss/table/styles.scss +6 -14
  19. package/lib/internal/scss/tabs/tab-header-bar.scss +4 -1
  20. package/lib/internal/scss/tiles/styles.scss +8 -2
  21. package/lib/internal/scss/wizard/styles.scss +5 -5
  22. package/lib/internal/template/app-layout/styles.css.js +17 -17
  23. package/lib/internal/template/app-layout/styles.scoped.css +21 -21
  24. package/lib/internal/template/app-layout/styles.selectors.js +17 -17
  25. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +69 -69
  26. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +173 -169
  27. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +69 -69
  28. package/lib/internal/template/area-chart/chart-container.d.ts +2 -2
  29. package/lib/internal/template/area-chart/chart-container.d.ts.map +1 -1
  30. package/lib/internal/template/area-chart/chart-container.js +1 -1
  31. package/lib/internal/template/area-chart/chart-container.js.map +1 -1
  32. package/lib/internal/template/area-chart/interfaces.d.ts +5 -1
  33. package/lib/internal/template/area-chart/interfaces.d.ts.map +1 -1
  34. package/lib/internal/template/area-chart/interfaces.js.map +1 -1
  35. package/lib/internal/template/area-chart/internal.d.ts +1 -1
  36. package/lib/internal/template/area-chart/internal.d.ts.map +1 -1
  37. package/lib/internal/template/area-chart/internal.js +2 -2
  38. package/lib/internal/template/area-chart/internal.js.map +1 -1
  39. package/lib/internal/template/attribute-editor/interfaces.d.ts +7 -0
  40. package/lib/internal/template/attribute-editor/interfaces.d.ts.map +1 -1
  41. package/lib/internal/template/attribute-editor/interfaces.js.map +1 -1
  42. package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
  43. package/lib/internal/template/attribute-editor/internal.js +2 -2
  44. package/lib/internal/template/attribute-editor/internal.js.map +1 -1
  45. package/lib/internal/template/attribute-editor/row.d.ts +3 -2
  46. package/lib/internal/template/attribute-editor/row.d.ts.map +1 -1
  47. package/lib/internal/template/attribute-editor/row.js +2 -2
  48. package/lib/internal/template/attribute-editor/row.js.map +1 -1
  49. package/lib/internal/template/box/styles.css.js +189 -189
  50. package/lib/internal/template/box/styles.scoped.css +258 -258
  51. package/lib/internal/template/box/styles.selectors.js +189 -189
  52. package/lib/internal/template/button/styles.css.js +20 -20
  53. package/lib/internal/template/button/styles.scoped.css +154 -154
  54. package/lib/internal/template/button/styles.selectors.js +20 -20
  55. package/lib/internal/template/button-dropdown/category-elements/styles.css.js +13 -13
  56. package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +25 -25
  57. package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +13 -13
  58. package/lib/internal/template/button-dropdown/item-element/styles.css.js +14 -14
  59. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +20 -20
  60. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +14 -14
  61. package/lib/internal/template/cards/styles.css.js +38 -38
  62. package/lib/internal/template/cards/styles.scoped.css +57 -62
  63. package/lib/internal/template/cards/styles.selectors.js +38 -38
  64. package/lib/internal/template/container/styles.css.js +28 -28
  65. package/lib/internal/template/container/styles.scoped.css +57 -54
  66. package/lib/internal/template/container/styles.selectors.js +28 -28
  67. package/lib/internal/template/content-layout/styles.css.js +7 -7
  68. package/lib/internal/template/content-layout/styles.scoped.css +13 -13
  69. package/lib/internal/template/content-layout/styles.selectors.js +7 -7
  70. package/lib/internal/template/expandable-section/styles.css.js +29 -29
  71. package/lib/internal/template/expandable-section/styles.scoped.css +61 -61
  72. package/lib/internal/template/expandable-section/styles.selectors.js +29 -29
  73. package/lib/internal/template/flashbar/styles.css.js +46 -46
  74. package/lib/internal/template/flashbar/styles.scoped.css +146 -146
  75. package/lib/internal/template/flashbar/styles.selectors.js +46 -46
  76. package/lib/internal/template/form-field/internal.js +3 -2
  77. package/lib/internal/template/form-field/internal.js.map +1 -1
  78. package/lib/internal/template/header/internal.d.ts.map +1 -1
  79. package/lib/internal/template/header/internal.js +5 -5
  80. package/lib/internal/template/header/internal.js.map +1 -1
  81. package/lib/internal/template/header/styles.css.js +33 -44
  82. package/lib/internal/template/header/styles.scoped.css +85 -91
  83. package/lib/internal/template/header/styles.selectors.js +33 -44
  84. package/lib/internal/template/help-panel/styles.css.js +4 -4
  85. package/lib/internal/template/help-panel/styles.scoped.css +80 -80
  86. package/lib/internal/template/help-panel/styles.selectors.js +4 -4
  87. package/lib/internal/template/icon/styles.css.js +21 -21
  88. package/lib/internal/template/icon/styles.scoped.css +54 -54
  89. package/lib/internal/template/icon/styles.selectors.js +21 -21
  90. package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
  91. package/lib/internal/template/internal/analytics/components/analytics-funnel.js +14 -13
  92. package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
  93. package/lib/internal/template/internal/analytics/context/analytics-context.d.ts +6 -7
  94. package/lib/internal/template/internal/analytics/context/analytics-context.d.ts.map +1 -1
  95. package/lib/internal/template/internal/analytics/context/analytics-context.js +2 -6
  96. package/lib/internal/template/internal/analytics/context/analytics-context.js.map +1 -1
  97. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts +4 -7
  98. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  99. package/lib/internal/template/internal/analytics/hooks/use-funnel.js +9 -7
  100. package/lib/internal/template/internal/analytics/hooks/use-funnel.js.map +1 -1
  101. package/lib/internal/template/internal/base-component/styles.scoped.css +92 -80
  102. package/lib/internal/template/internal/components/button-trigger/index.d.ts +2 -1
  103. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  104. package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
  105. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  106. package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts +10 -2
  107. package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts.map +1 -1
  108. package/lib/internal/template/internal/components/cartesian-chart/interfaces.js.map +1 -1
  109. package/lib/internal/template/internal/components/dropdown/index.d.ts +1 -1
  110. package/lib/internal/template/internal/components/dropdown/index.d.ts.map +1 -1
  111. package/lib/internal/template/internal/components/dropdown/index.js +4 -4
  112. package/lib/internal/template/internal/components/dropdown/index.js.map +1 -1
  113. package/lib/internal/template/internal/components/dropdown/interfaces.d.ts +8 -0
  114. package/lib/internal/template/internal/components/dropdown/interfaces.d.ts.map +1 -1
  115. package/lib/internal/template/internal/components/dropdown/interfaces.js.map +1 -1
  116. package/lib/internal/template/internal/components/menu-dropdown/styles.css.js +7 -7
  117. package/lib/internal/template/internal/components/menu-dropdown/styles.scoped.css +14 -14
  118. package/lib/internal/template/internal/components/menu-dropdown/styles.selectors.js +7 -7
  119. package/lib/internal/template/internal/environment.js +1 -1
  120. package/lib/internal/template/internal/generated/theming/index.cjs +164 -120
  121. package/lib/internal/template/internal/generated/theming/index.js +164 -120
  122. package/lib/internal/template/link/internal.d.ts.map +1 -1
  123. package/lib/internal/template/link/internal.js +3 -2
  124. package/lib/internal/template/link/internal.js.map +1 -1
  125. package/lib/internal/template/link/styles.css.js +20 -20
  126. package/lib/internal/template/link/styles.scoped.css +83 -83
  127. package/lib/internal/template/link/styles.selectors.js +20 -20
  128. package/lib/internal/template/mixed-line-bar-chart/internal.d.ts +1 -1
  129. package/lib/internal/template/mixed-line-bar-chart/internal.d.ts.map +1 -1
  130. package/lib/internal/template/mixed-line-bar-chart/internal.js +2 -2
  131. package/lib/internal/template/mixed-line-bar-chart/internal.js.map +1 -1
  132. package/lib/internal/template/modal/styles.css.js +23 -23
  133. package/lib/internal/template/modal/styles.scoped.css +40 -40
  134. package/lib/internal/template/modal/styles.selectors.js +23 -23
  135. package/lib/internal/template/pagination/styles.css.js +9 -9
  136. package/lib/internal/template/pagination/styles.scoped.css +24 -24
  137. package/lib/internal/template/pagination/styles.selectors.js +9 -9
  138. package/lib/internal/template/popover/styles.css.js +50 -50
  139. package/lib/internal/template/popover/styles.scoped.css +65 -65
  140. package/lib/internal/template/popover/styles.selectors.js +50 -50
  141. package/lib/internal/template/property-filter/index.d.ts.map +1 -1
  142. package/lib/internal/template/property-filter/index.js +4 -3
  143. package/lib/internal/template/property-filter/index.js.map +1 -1
  144. package/lib/internal/template/property-filter/interfaces.d.ts +16 -5
  145. package/lib/internal/template/property-filter/interfaces.d.ts.map +1 -1
  146. package/lib/internal/template/property-filter/interfaces.js.map +1 -1
  147. package/lib/internal/template/s3-resource-selector/index.d.ts.map +1 -1
  148. package/lib/internal/template/s3-resource-selector/index.js +2 -2
  149. package/lib/internal/template/s3-resource-selector/index.js.map +1 -1
  150. package/lib/internal/template/s3-resource-selector/interfaces.d.ts +7 -0
  151. package/lib/internal/template/s3-resource-selector/interfaces.d.ts.map +1 -1
  152. package/lib/internal/template/s3-resource-selector/interfaces.js.map +1 -1
  153. package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts +1 -0
  154. package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
  155. package/lib/internal/template/s3-resource-selector/s3-in-context/index.js +2 -2
  156. package/lib/internal/template/s3-resource-selector/s3-in-context/index.js.map +1 -1
  157. package/lib/internal/template/segmented-control/styles.css.js +14 -14
  158. package/lib/internal/template/segmented-control/styles.scoped.css +35 -35
  159. package/lib/internal/template/segmented-control/styles.selectors.js +14 -14
  160. package/lib/internal/template/select/utils/use-select.d.ts +5 -7
  161. package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
  162. package/lib/internal/template/select/utils/use-select.js +6 -0
  163. package/lib/internal/template/select/utils/use-select.js.map +1 -1
  164. package/lib/internal/template/side-navigation/internal.d.ts.map +1 -1
  165. package/lib/internal/template/side-navigation/internal.js +3 -1
  166. package/lib/internal/template/side-navigation/internal.js.map +1 -1
  167. package/lib/internal/template/side-navigation/styles.css.js +28 -27
  168. package/lib/internal/template/side-navigation/styles.scoped.css +52 -48
  169. package/lib/internal/template/side-navigation/styles.selectors.js +28 -27
  170. package/lib/internal/template/spinner/styles.css.js +13 -13
  171. package/lib/internal/template/spinner/styles.scoped.css +22 -22
  172. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  173. package/lib/internal/template/split-panel/styles.css.js +56 -56
  174. package/lib/internal/template/split-panel/styles.scoped.css +80 -80
  175. package/lib/internal/template/split-panel/styles.selectors.js +56 -56
  176. package/lib/internal/template/table/header-cell/styles.css.js +24 -24
  177. package/lib/internal/template/table/header-cell/styles.scoped.css +41 -41
  178. package/lib/internal/template/table/header-cell/styles.selectors.js +24 -24
  179. package/lib/internal/template/table/styles.css.js +34 -34
  180. package/lib/internal/template/table/styles.scoped.css +45 -52
  181. package/lib/internal/template/table/styles.selectors.js +34 -34
  182. package/lib/internal/template/tabs/styles.css.js +21 -21
  183. package/lib/internal/template/tabs/styles.scoped.css +44 -41
  184. package/lib/internal/template/tabs/styles.selectors.js +21 -21
  185. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  186. package/lib/internal/template/tag-editor/styles.scoped.css +11 -11
  187. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  188. package/lib/internal/template/text-content/styles.css.js +1 -1
  189. package/lib/internal/template/text-content/styles.scoped.css +71 -71
  190. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  191. package/lib/internal/template/tiles/styles.css.js +29 -28
  192. package/lib/internal/template/tiles/styles.scoped.css +76 -70
  193. package/lib/internal/template/tiles/styles.selectors.js +29 -28
  194. package/lib/internal/template/tiles/tile.d.ts.map +1 -1
  195. package/lib/internal/template/tiles/tile.js +3 -1
  196. package/lib/internal/template/tiles/tile.js.map +1 -1
  197. package/lib/internal/template/top-navigation/1.0-beta/styles.css.js +25 -25
  198. package/lib/internal/template/top-navigation/1.0-beta/styles.scoped.css +45 -45
  199. package/lib/internal/template/top-navigation/1.0-beta/styles.selectors.js +25 -25
  200. package/lib/internal/template/top-navigation/styles.css.js +47 -47
  201. package/lib/internal/template/top-navigation/styles.scoped.css +74 -74
  202. package/lib/internal/template/top-navigation/styles.selectors.js +47 -47
  203. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
  204. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +22 -22
  205. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
  206. package/lib/internal/template/wizard/interfaces.d.ts +10 -3
  207. package/lib/internal/template/wizard/interfaces.d.ts.map +1 -1
  208. package/lib/internal/template/wizard/interfaces.js.map +1 -1
  209. package/lib/internal/template/wizard/internal.d.ts +1 -1
  210. package/lib/internal/template/wizard/internal.d.ts.map +1 -1
  211. package/lib/internal/template/wizard/internal.js +5 -5
  212. package/lib/internal/template/wizard/internal.js.map +1 -1
  213. package/lib/internal/template/wizard/styles.css.js +31 -31
  214. package/lib/internal/template/wizard/styles.scoped.css +67 -67
  215. package/lib/internal/template/wizard/styles.selectors.js +31 -31
  216. package/lib/internal/template/wizard/wizard-form.d.ts +2 -1
  217. package/lib/internal/template/wizard/wizard-form.d.ts.map +1 -1
  218. package/lib/internal/template/wizard/wizard-form.js +2 -2
  219. package/lib/internal/template/wizard/wizard-form.js.map +1 -1
  220. package/package.json +1 -1
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "565cbf2b30355de4a97938b3665ff6bb1de359a6"
2
+ "commit": "f2157d08391a051b016df6a34ee27029a2b2084d"
3
3
  }
@@ -61,6 +61,7 @@
61
61
  height: 100%;
62
62
  overflow-y: hidden;
63
63
  overflow-x: hidden;
64
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
64
65
  overscroll-behavior-y: contain;
65
66
 
66
67
  &:not(.has-multiple-triggers).has-open-drawer {
@@ -124,6 +125,7 @@
124
125
  height: 100%;
125
126
  overflow-y: auto;
126
127
  overflow-x: hidden;
128
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
127
129
  overscroll-behavior-y: contain;
128
130
  pointer-events: auto;
129
131
  word-wrap: break-word;
@@ -211,7 +211,7 @@ explicitly set in script.
211
211
 
212
212
  // The Header gap is slightly smaller when it comes after the Breadcrumbs
213
213
  &.has-breadcrumbs.has-header {
214
- #{custom-props.$headerGap}: #{awsui.$space-scaled-xxs};
214
+ #{custom-props.$headerGap}: #{awsui.$space-scaled-xs};
215
215
  }
216
216
 
217
217
  // Set the Main gap when it follows the Notifications
@@ -236,13 +236,13 @@ explicitly set in script.
236
236
 
237
237
  // Set the Main gap when it follows the Header
238
238
  &.has-header {
239
- #{custom-props.$mainGap}: #{awsui.$space-scaled-xl};
239
+ #{custom-props.$mainGap}: #{awsui.$space-content-header-padding-bottom};
240
240
  }
241
241
 
242
242
  // Set the Main gap when it is the first page content
243
243
  &.content-first-child-main:not(.is-overlap-disabled),
244
244
  &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
245
- #{custom-props.$mainGap}: #{awsui.$space-scaled-xs};
245
+ #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
246
246
  }
247
247
 
248
248
  // Set an extension of the overlap and an additional gap on top to be used by content-layout without header
@@ -92,6 +92,7 @@ nav.navigation {
92
92
  height: 100%;
93
93
  overflow-x: hidden;
94
94
  overflow-y: auto;
95
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
95
96
  overscroll-behavior-y: contain;
96
97
  position: relative;
97
98
  word-wrap: break-word;
@@ -66,6 +66,7 @@ viewport size and state of the Tools drawer.
66
66
  height: 100%;
67
67
  overflow-y: auto;
68
68
  overflow-x: hidden;
69
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
69
70
  overscroll-behavior-y: contain;
70
71
  pointer-events: auto;
71
72
  position: relative;
@@ -41,7 +41,7 @@
41
41
  &.key-label-variant {
42
42
  @include styles.font-label;
43
43
  color: awsui.$color-text-label;
44
- margin-bottom: awsui.$space-scaled-xxxs;
44
+ margin-bottom: awsui.$space-key-value-gap;
45
45
  }
46
46
  &.value-large-variant {
47
47
  @include styles.font-display-l;
@@ -80,7 +80,7 @@
80
80
  letter-spacing: awsui.$font-button-letter-spacing;
81
81
  border-radius: awsui.$border-radius-button;
82
82
  border: styles.$control-border-width solid;
83
- padding: styles.$control-padding-vertical awsui.$space-l;
83
+ padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
84
84
  display: inline-block; // for <a> as a button
85
85
  text-decoration: none;
86
86
  cursor: pointer;
@@ -6,7 +6,6 @@
6
6
  @use '../../internal/styles' as styles;
7
7
  @use '../../internal/styles/tokens' as awsui;
8
8
 
9
- $option-padding-horizontal: awsui.$space-l;
10
9
  .header {
11
10
  position: relative;
12
11
  margin: 0;
@@ -21,7 +20,7 @@ $option-padding-horizontal: awsui.$space-l;
21
20
  // to compensate for the loss of padding due to the removal of the left and right borders
22
21
  // and differences in default divider + selected border widths (visual refresh)
23
22
  padding: styles.$option-padding-with-border-placeholder-vertical
24
- calc(#{$option-padding-horizontal} + #{awsui.$border-item-width});
23
+ calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
25
24
  z-index: 1;
26
25
 
27
26
  &.disabled {
@@ -46,7 +45,7 @@ $option-padding-horizontal: awsui.$space-l;
46
45
  background-color: awsui.$color-background-dropdown-item-hover;
47
46
  color: awsui.$color-text-dropdown-item-highlighted;
48
47
  // reset padding when adding border back in
49
- padding: styles.$option-padding-vertical $option-padding-horizontal;
48
+ padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
50
49
  border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
51
50
  border-radius: awsui.$border-radius-item;
52
51
  z-index: 2;
@@ -77,7 +77,7 @@
77
77
  @include styles.text-wrapping;
78
78
  display: flex;
79
79
  align-items: flex-start;
80
- padding: styles.$option-padding-vertical awsui.$space-l;
80
+ padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
81
81
  color: inherit;
82
82
  text-decoration: none;
83
83
 
@@ -88,7 +88,7 @@
88
88
  /* stylelint-disable-next-line selector-max-type */
89
89
  .has-category-header > &,
90
90
  .has-category-header > span > & {
91
- padding-left: awsui.$space-xxl;
91
+ padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
92
92
  }
93
93
  }
94
94
 
@@ -21,7 +21,7 @@
21
21
  padding-top: 0;
22
22
  padding-left: 0;
23
23
  padding-right: 0;
24
- padding-bottom: #{awsui.$space-container-header-vertical};
24
+ padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
25
25
  }
26
26
  }
27
27
 
@@ -49,7 +49,7 @@
49
49
  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
50
50
  top: 0;
51
51
  right: 0;
52
- padding: awsui.$space-scaled-l awsui.$space-card-horizontal;
52
+ padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
53
53
  }
54
54
 
55
55
  .loading,
@@ -77,13 +77,7 @@
77
77
  position: relative;
78
78
  background-color: awsui.$color-background-container-content;
79
79
  margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
80
- padding: awsui.$space-scaled-l awsui.$space-card-horizontal awsui.$space-scaled-l;
81
- // HACK: IE shadow comes with full border that we need to take into account
82
- @media screen and (-ms-high-contrast: active) {
83
- padding: calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width})
84
- calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
85
- calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
86
- }
80
+ padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
87
81
  @include styles.container-shadow;
88
82
  width: 100%;
89
83
  min-width: 0;
@@ -7,8 +7,8 @@
7
7
  @use '../internal/styles/tokens' as awsui;
8
8
 
9
9
  $header-padding-horizontal: awsui.$space-container-horizontal;
10
- $header-padding-vertical: awsui.$space-container-header-vertical;
11
- $header-padding: $header-padding-vertical $header-padding-horizontal;
10
+ $header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
11
+ awsui.$space-container-header-bottom;
12
12
  $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
13
13
 
14
14
  // HACK: Remediate focus border for expandable section
@@ -158,6 +158,9 @@
158
158
 
159
159
  &.with-paddings {
160
160
  padding: shared.$header-padding;
161
+ &.header-variant-cards {
162
+ padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
163
+ }
161
164
  }
162
165
 
163
166
  &.with-hidden-content {
@@ -105,8 +105,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
105
105
  }
106
106
 
107
107
  &-container {
108
- padding-top: container.$header-padding-vertical;
109
- padding-bottom: container.$header-padding-vertical;
108
+ padding-top: awsui.$space-container-header-top;
109
+ padding-bottom: awsui.$space-container-header-bottom;
110
110
  padding-right: container.$header-padding-horizontal;
111
111
 
112
112
  &.header-deprecated {
@@ -13,31 +13,23 @@
13
13
  width: 100%;
14
14
  flex-wrap: wrap;
15
15
  justify-content: space-between;
16
-
17
- &-no-actions {
18
- &.root-variant-h1 {
19
- padding-bottom: 0;
20
- &-refresh {
21
- padding-bottom: awsui.$space-xxxs;
22
- }
23
- }
16
+ column-gap: awsui.$space-xs;
17
+ &.refresh {
18
+ row-gap: awsui.$space-scaled-xxs;
24
19
  }
25
20
 
26
21
  &-no-actions,
27
22
  &-has-description {
28
- &.root-variant-h2 {
23
+ &.root-variant-h2:not(.refresh),
24
+ &.root-variant-h3:not(.refresh) {
29
25
  padding-bottom: awsui.$space-scaled-xxs;
30
- &-refresh {
31
- padding-bottom: awsui.$space-xxxs;
32
- }
33
- }
34
- &.root-variant-h3 {
35
- padding-bottom: awsui.$space-scaled-xxs;
36
- &-refresh {
37
- padding-bottom: 0;
38
- }
39
26
  }
40
27
  }
28
+ // H3s are most often used inside containers, so minimal headings have extra padding below
29
+ // to prevent info links from having overlapping touch targets with surrounding elements.
30
+ &-no-actions:not(.root-has-description).refresh.root-variant-h3 {
31
+ padding-bottom: awsui.$space-scaled-xs;
32
+ }
41
33
 
42
34
  &-no-wrap {
43
35
  flex-wrap: nowrap;
@@ -49,32 +41,31 @@
49
41
  word-wrap: break-word;
50
42
  max-width: 100%;
51
43
 
52
- :not(.root-no-actions) > & {
53
- margin-right: awsui.$space-xs;
44
+ &.refresh {
45
+ display: flex;
46
+ flex-direction: column;
47
+ // Can't use justify-content: center because it won't align with configurable dashboard handle icon
54
48
  }
55
49
 
56
50
  &-variant-h1 {
57
51
  padding: awsui.$space-scaled-2x-xxs 0;
58
- &-refresh {
59
- padding: awsui.$space-xxs 0;
52
+ &.refresh {
53
+ padding: 0;
54
+ row-gap: awsui.$space-scaled-xxs;
60
55
  }
61
56
  }
62
- :not(.root-no-actions) > &-variant-h1-refresh {
63
- padding-top: awsui.$space-scaled-xxxs;
64
- }
65
57
 
66
58
  // So that headers with only a title have the same height as headers with actions and descriptions
67
59
  &-variant-h2,
68
60
  &-variant-h3 {
69
- padding-top: awsui.$space-scaled-xxs;
70
- :not(.root-has-description) > & {
71
- padding-bottom: awsui.$space-xxxs;
61
+ &:not(.refresh) {
62
+ padding-top: awsui.$space-scaled-xxs;
63
+ :not(.root-has-description) > & {
64
+ padding-bottom: awsui.$space-xxxs;
65
+ }
72
66
  }
73
- }
74
- &-variant-h2-refresh {
75
- padding-top: 0;
76
- :not(.root-has-description) > & {
77
- padding-bottom: 0;
67
+ &.refresh {
68
+ row-gap: awsui.$space-scaled-xxxs;
78
69
  }
79
70
  }
80
71
  }
@@ -84,25 +75,29 @@
84
75
  // https://github.com/philipwalton/flexbugs/issues/170
85
76
  display: flex;
86
77
  align-items: flex-start;
87
- &-variant-h1 {
78
+
79
+ // Calculate padding so the heading text is better aligned with the buttons.
80
+ // Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
81
+ &-variant-h1.refresh {
82
+ padding: calc((#{awsui.$font-heading-xl-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
83
+ }
84
+ &-variant-h2.refresh {
85
+ padding: calc((#{awsui.$font-heading-l-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
86
+ }
87
+ &-variant-h3.refresh {
88
+ padding: calc((#{awsui.$font-heading-m-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
89
+ }
90
+
91
+ &-variant-h1:not(.refresh) {
88
92
  padding: awsui.$space-scaled-xs 0;
89
- &-refresh {
90
- padding: awsui.$space-xs 0;
91
- }
92
93
  }
93
- &-variant-h2,
94
- &-variant-h3 {
94
+ &-variant-h2:not(.refresh),
95
+ &-variant-h3:not(.refresh) {
95
96
  padding: awsui.$space-scaled-xxs 0;
96
97
  .root-has-description > & {
97
98
  padding-bottom: 0;
98
99
  }
99
100
  }
100
- &-variant-h2-refresh {
101
- padding-bottom: awsui.$space-xxxs;
102
- }
103
- &-variant-h3-refresh {
104
- padding-bottom: 0;
105
- }
106
101
  }
107
102
 
108
103
  .title {
@@ -111,19 +106,27 @@
111
106
 
112
107
  &-variant-h1 {
113
108
  font-size: awsui.$font-heading-xl-size;
114
- }
115
- &-variant-h2,
116
- &-variant-h3 {
117
- padding: awsui.$space-scaled-xxs 0;
109
+ // Use padding rather than center align so that all headers of the same size start at the same height in the container,
110
+ // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
111
+ &.refresh {
112
+ padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
113
+ }
118
114
  }
119
115
  &-variant-h2 {
120
116
  font-size: awsui.$font-heading-l-size;
121
- &-refresh {
122
- padding-top: awsui.$space-scaled-2x-xxs;
117
+ &.refresh {
118
+ padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
123
119
  }
124
120
  }
125
121
  &-variant-h3 {
126
122
  font-size: awsui.$font-heading-m-size;
123
+ &.refresh {
124
+ padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
125
+ }
126
+ }
127
+ &-variant-h2:not(.refresh),
128
+ &-variant-h3:not(.refresh) {
129
+ padding: awsui.$space-scaled-xxs 0;
127
130
  }
128
131
  }
129
132
 
@@ -140,21 +143,21 @@
140
143
 
141
144
  &-variant-h1 {
142
145
  @include styles.font-body-m;
143
- padding-top: awsui.$space-scaled-xxs;
144
- &-refresh {
145
- padding-top: awsui.$space-scaled-xs;
146
+ &:not(.refresh) {
147
+ padding-top: awsui.$space-scaled-xxs;
146
148
  }
147
149
  }
148
150
  &-variant-h2 {
149
151
  font-size: awsui.$font-header-h2-description-size;
150
152
  line-height: awsui.$font-header-h2-description-line-height;
151
- padding-bottom: awsui.$space-scaled-xxs;
153
+ &:not(.refresh) {
154
+ padding-bottom: awsui.$space-scaled-xxs;
155
+ }
152
156
  }
153
157
  &-variant-h3 {
154
158
  @include styles.font-body-s;
155
- padding-bottom: awsui.$space-scaled-xxs;
156
- &-refresh {
157
- padding-top: awsui.$space-xxxs;
159
+ &:not(.refresh) {
160
+ padding-bottom: awsui.$space-scaled-xxs;
158
161
  }
159
162
  }
160
163
  }
@@ -93,7 +93,7 @@ $modal-z-index: 5000;
93
93
  }
94
94
 
95
95
  .header {
96
- padding: awsui.$space-s awsui.$space-modal-horizontal;
96
+ padding: awsui.$space-container-header-top awsui.$space-modal-horizontal awsui.$space-container-header-bottom;
97
97
  background-color: awsui.$color-background-container-header;
98
98
  border-bottom: 1px solid awsui.$color-border-container-divider;
99
99
  border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;
@@ -39,7 +39,7 @@ $selected-color: awsui.$color-text-segment-active;
39
39
  @include styles.font-button;
40
40
  letter-spacing: 0.25px;
41
41
  border: styles.$control-border-width solid $default-border-color;
42
- padding: styles.$control-padding-vertical awsui.$space-l;
42
+ padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
43
43
  border-right-width: 0;
44
44
  background: $default-background;
45
45
  color: $default-color;
@@ -87,6 +87,10 @@
87
87
  .section {
88
88
  margin-top: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
89
89
  margin-bottom: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
90
+ &.refresh {
91
+ margin-top: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
92
+ margin-bottom: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
93
+ }
90
94
 
91
95
  // HACK: Remove padding from section header and content to rely on margin collapsing rules.
92
96
  /* stylelint-disable-next-line selector-max-type */
@@ -17,7 +17,7 @@
17
17
  display: flex;
18
18
  align-items: flex-end;
19
19
  flex-wrap: wrap;
20
- padding: awsui.$space-scaled-xs 0 awsui.$space-scaled-xxs;
20
+ padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
21
21
 
22
22
  &-filtering {
23
23
  @supports (flex-basis: fit-content) {
@@ -63,8 +63,6 @@
63
63
  position: relative;
64
64
  box-sizing: border-box;
65
65
  width: 100%;
66
- padding-top: awsui.$space-table-content-top;
67
- padding-bottom: awsui.$space-table-content-bottom;
68
66
  overflow-x: auto;
69
67
 
70
68
  scrollbar-width: none; /* Hide scrollbar in Firefox */
@@ -75,15 +73,8 @@
75
73
  padding-right: awsui.$space-table-horizontal;
76
74
  }
77
75
  }
78
- &.variant-embedded,
79
- &.variant-borderless {
80
- padding-bottom: awsui.$space-table-embedded-content-bottom;
81
- }
82
- &.has-header {
83
- padding-top: 0px;
84
- }
85
- &.has-footer {
86
- padding-bottom: 0px;
76
+ &.variant-container:not(.has-footer) {
77
+ padding-bottom: awsui.$space-table-content-bottom;
87
78
  }
88
79
  &:not(.has-header) {
89
80
  border-top-right-radius: awsui.$border-radius-container;
@@ -182,11 +173,12 @@ the default white background of the container component.
182
173
  }
183
174
 
184
175
  .header-controls {
185
- padding-top: awsui.$space-container-header-vertical;
186
- padding-bottom: awsui.$space-container-header-vertical;
176
+ padding-top: awsui.$space-container-header-top;
177
+ padding-bottom: awsui.$space-container-header-bottom;
187
178
 
188
179
  &.variant-full-page {
189
180
  padding-top: 0;
181
+ padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
190
182
  }
191
183
  &.variant-stacked,
192
184
  &.variant-container {
@@ -100,8 +100,10 @@ $label-horizontal-spacing: awsui.$space-l;
100
100
  font-size: awsui.$font-tabs-size;
101
101
  line-height: awsui.$font-tabs-line-height;
102
102
  font-weight: awsui.$font-wayfinding-link-active-weight;
103
- @include styles.font-smoothing;
104
103
  color: awsui.$color-text-interactive-default;
104
+ &.refresh {
105
+ padding: calc(awsui.$space-static-xs - 1px) 0 awsui.$space-static-xs 0;
106
+ }
105
107
 
106
108
  &:hover {
107
109
  color: awsui.$color-text-accent;
@@ -110,6 +112,7 @@ $label-horizontal-spacing: awsui.$space-l;
110
112
  &:focus {
111
113
  outline: none;
112
114
  }
115
+ @include styles.font-smoothing;
113
116
 
114
117
  @include focus-visible.when-visible {
115
118
  z-index: 1;
@@ -30,15 +30,21 @@ $gutter: awsui.$space-grid-gutter;
30
30
 
31
31
  .tile-container {
32
32
  box-sizing: border-box;
33
+ display: flex;
34
+ flex-direction: column;
33
35
  border: styles.$control-border-width solid awsui.$color-border-input-default;
34
36
  border-radius: awsui.$border-radius-tiles;
35
37
  background: awsui.$color-background-input-default;
36
38
  padding: awsui.$space-xs awsui.$space-scaled-m;
37
- display: flex;
38
- flex-direction: column;
39
+ &.refresh {
40
+ padding: awsui.$space-xs awsui.$space-s;
41
+ }
39
42
 
40
43
  &.has-metadata {
41
44
  padding-bottom: awsui.$space-s;
45
+ &.refresh {
46
+ padding-bottom: awsui.$space-scaled-s;
47
+ }
42
48
  }
43
49
 
44
50
  &.selected {
@@ -40,13 +40,13 @@
40
40
  position: relative;
41
41
  @include styles.container-shadow;
42
42
  margin: 0;
43
- padding: awsui.$space-scaled-l awsui.$space-l;
43
+ padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
44
44
  width: 280px;
45
45
  box-sizing: border-box;
46
46
 
47
47
  > li {
48
48
  display: grid;
49
- column-gap: awsui.$space-s;
49
+ column-gap: awsui.$space-xs;
50
50
  grid-template-columns: awsui.$space-l 1fr;
51
51
  grid-template-rows: repeat(2, auto);
52
52
 
@@ -67,7 +67,7 @@
67
67
 
68
68
  > a {
69
69
  align-items: start;
70
- column-gap: awsui.$space-s;
70
+ column-gap: awsui.$space-xs;
71
71
  cursor: pointer;
72
72
  display: grid;
73
73
  font-size: awsui.$font-body-m-size;
@@ -100,7 +100,7 @@
100
100
  }
101
101
 
102
102
  > li:not(:first-child) > .number {
103
- margin-top: awsui.$space-scaled-xl;
103
+ margin-top: awsui.$space-m;
104
104
  }
105
105
 
106
106
  > li:last-child > hr {
@@ -221,7 +221,7 @@
221
221
  }
222
222
 
223
223
  > .form-header > .form-header-content {
224
- padding-top: awsui.$space-scaled-m;
224
+ padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
225
225
  padding-bottom: awsui.$space-scaled-m;
226
226
  }
227
227
 
@@ -1,22 +1,22 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "resize-active": "awsui_resize-active_lm6vo_2ctod_98",
5
- "resize-side": "awsui_resize-side_lm6vo_2ctod_104",
6
- "resize-bottom": "awsui_resize-bottom_lm6vo_2ctod_107",
7
- "with-motion": "awsui_with-motion_lm6vo_2ctod_112",
8
- "root": "awsui_root_lm6vo_2ctod_127",
9
- "layout-wrapper": "awsui_layout-wrapper_lm6vo_2ctod_128",
10
- "root-no-scroll": "awsui_root-no-scroll_lm6vo_2ctod_135",
11
- "layout": "awsui_layout_lm6vo_2ctod_128",
12
- "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_2ctod_146",
13
- "layout-main": "awsui_layout-main_lm6vo_2ctod_150",
14
- "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_2ctod_156",
15
- "unfocusable": "awsui_unfocusable_lm6vo_2ctod_161",
16
- "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_2ctod_165",
17
- "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_2ctod_170",
18
- "content-wrapper": "awsui_content-wrapper_lm6vo_2ctod_174",
19
- "content-overlapped": "awsui_content-overlapped_lm6vo_2ctod_178",
20
- "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_2ctod_182"
4
+ "resize-active": "awsui_resize-active_lm6vo_iriab_98",
5
+ "resize-side": "awsui_resize-side_lm6vo_iriab_104",
6
+ "resize-bottom": "awsui_resize-bottom_lm6vo_iriab_107",
7
+ "with-motion": "awsui_with-motion_lm6vo_iriab_112",
8
+ "root": "awsui_root_lm6vo_iriab_127",
9
+ "layout-wrapper": "awsui_layout-wrapper_lm6vo_iriab_128",
10
+ "root-no-scroll": "awsui_root-no-scroll_lm6vo_iriab_135",
11
+ "layout": "awsui_layout_lm6vo_iriab_128",
12
+ "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_iriab_146",
13
+ "layout-main": "awsui_layout-main_lm6vo_iriab_150",
14
+ "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_iriab_156",
15
+ "unfocusable": "awsui_unfocusable_lm6vo_iriab_161",
16
+ "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_iriab_165",
17
+ "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_iriab_170",
18
+ "content-wrapper": "awsui_content-wrapper_lm6vo_iriab_174",
19
+ "content-overlapped": "awsui_content-overlapped_lm6vo_iriab_178",
20
+ "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_iriab_182"
21
21
  };
22
22