@riverbankcms/sdk 0.109.0 → 0.111.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 (186) hide show
  1. package/dist/{PreviewEditorSidebar-DWqwfy3_.mjs → PreviewEditorSidebar-CTR6LUhN.mjs} +178 -117
  2. package/dist/{PreviewEditorUI-B7OL4sfR.mjs → PreviewEditorUI-DZg15Zip.mjs} +3 -4
  3. package/dist/{PreviewQueryProvider-D0y2l8JN.mjs → PreviewQueryProvider-kkmjklLG.mjs} +1 -1
  4. package/dist/{SdkPreviewModeRuntime-D8Gt9Gbe.mjs → SdkPreviewModeRuntime-DeOTAFvR.mjs} +229 -219
  5. package/dist/{SiteChromeCustomizeContext-DUpalEdL.mjs → SiteChromeCustomizeContext-DOSDLCiJ.mjs} +1695 -2169
  6. package/dist/_dts/ai/src/contracts/proposals.d.ts +1716 -76
  7. package/dist/_dts/api/src/commercePortalEndpoints.d.ts +5 -5
  8. package/dist/_dts/api/src/contentRuntime.d.ts +4 -1
  9. package/dist/_dts/api/src/courses.d.ts +30 -15
  10. package/dist/_dts/api/src/endpoints.d.ts +14 -4
  11. package/dist/_dts/api/src/index.d.ts +2 -2
  12. package/dist/_dts/api/src/sdkContracts.d.ts +23 -11
  13. package/dist/_dts/api/src/siteManagementEndpoints.d.ts +5 -1
  14. package/dist/_dts/api/src/siteOperations.d.ts +11 -19
  15. package/dist/_dts/api/src/siteRuntimeEndpoints.d.ts +6 -6
  16. package/dist/_dts/api/src/webhooks.d.ts +98 -1
  17. package/dist/_dts/billing/src/site-arrangements.d.ts +3 -0
  18. package/dist/_dts/blocks/src/client/course-registration.d.ts +4 -1
  19. package/dist/_dts/blocks/src/client.d.ts +4 -1
  20. package/dist/_dts/blocks/src/contracts/proof-block-islands.d.ts +4 -4
  21. package/dist/_dts/blocks/src/index.d.ts +3 -1
  22. package/dist/_dts/blocks/src/system/blocks/course-registration.d.ts +2 -1
  23. package/dist/_dts/blocks/src/system/blocks/courses/shared/types.d.ts +2 -1
  24. package/dist/_dts/blocks/src/system/blocks/cta-full.d.ts +2 -4
  25. package/dist/_dts/blocks/src/system/blocks/event-registration.d.ts +2 -1
  26. package/dist/_dts/blocks/src/system/blocks/events/event-listing.d.ts +2 -1
  27. package/dist/_dts/blocks/src/system/blocks/events/event-spotlight.d.ts +2 -1
  28. package/dist/_dts/blocks/src/system/blocks/events/recurring-schedule.d.ts +3 -2
  29. package/dist/_dts/blocks/src/system/blocks/events/shared/types.d.ts +2 -1
  30. package/dist/_dts/blocks/src/system/blocks/file-download.d.ts +2 -1
  31. package/dist/_dts/blocks/src/system/blocks/newsletter-signup.d.ts +2 -1
  32. package/dist/_dts/blocks/src/system/blocks/shop.d.ts +2 -1
  33. package/dist/_dts/blocks/src/system/blocks/single-button.d.ts +2 -1
  34. package/dist/_dts/blocks/src/system/constants/buttonRoles.d.ts +35 -0
  35. package/dist/_dts/blocks/src/system/fields/button.d.ts +10 -21
  36. package/dist/_dts/blocks/src/system/fields/ctas.d.ts +2 -1
  37. package/dist/_dts/blocks/src/system/fragments/library/heroCtaRow.d.ts +9 -5
  38. package/dist/_dts/blocks/src/system/runtime/components/registry.client.d.ts +18 -18
  39. package/dist/_dts/blocks/src/system/runtime/components/runtime-backed-blocks.d.ts +9 -9
  40. package/dist/_dts/blocks/src/system/runtime/hooks/useHeadlessWholeSeriesRegistrationFlow.d.ts +29 -0
  41. package/dist/_dts/blocks/src/system/runtime/nodes/buttonAffordance.d.ts +1 -1
  42. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/ErrorStep.d.ts +2 -1
  43. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/PaymentFailedStep.d.ts +2 -1
  44. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/VerifyingTimeoutStep.d.ts +2 -1
  45. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/types.d.ts +21 -0
  46. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/useCourseRegistrationWizard.d.ts +4 -4
  47. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/whole-series-registration.headless.contract.d.ts +326 -0
  48. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/whole-series-registration.headless.planning.d.ts +27 -0
  49. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration.interactive.d.ts +5 -4
  50. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration/event-registration.headless.contract.d.ts +3 -2
  51. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration/types.d.ts +2 -1
  52. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration.interactive.d.ts +5 -4
  53. package/dist/_dts/blocks/src/system/runtime/nodes/file-download.d.ts +2 -3
  54. package/dist/_dts/blocks/src/system/runtime/nodes/newsletter-form.types.d.ts +2 -1
  55. package/dist/_dts/blocks/src/system/runtime/nodes/shared/contract-schemas.d.ts +6 -3
  56. package/dist/_dts/blocks/src/system/runtime/nodes/shop.interactive.d.ts +7 -6
  57. package/dist/_dts/blocks/src/system/runtime/nodes/shop.types.d.ts +2 -1
  58. package/dist/_dts/blocks/src/system/runtime/shared/types.d.ts +2 -1
  59. package/dist/_dts/content-editor/src/FooterComposerPanel.d.ts +4 -2
  60. package/dist/_dts/content-editor/src/index.d.ts +12 -12
  61. package/dist/_dts/content-editor/src/ui/editorUiStore.d.ts +17 -2
  62. package/dist/_dts/db/src/generated/supabase/database.types.d.ts +221 -53
  63. package/dist/_dts/editor-blocks/src/widgets/button/context.d.ts +3 -2
  64. package/dist/_dts/preview-next/src/client/index.d.ts +3 -2
  65. package/dist/_dts/preview-next/src/client/preview/ButtonStylePicker.d.ts +16 -0
  66. package/dist/_dts/preview-next/src/client/preview/PageBlockEditorPanel.d.ts +2 -3
  67. package/dist/_dts/preview-next/src/client/preview/PreviewDesignOpenRequestContext.d.ts +7 -0
  68. package/dist/_dts/preview-next/src/client/preview/PreviewEditorSidebar.d.ts +5 -11
  69. package/dist/_dts/preview-next/src/client/preview/PreviewShell.d.ts +5 -6
  70. package/dist/_dts/preview-next/src/client/preview/PreviewShellLayout.d.ts +6 -7
  71. package/dist/_dts/preview-next/src/client/preview/SiteChromeCustomizeContext.d.ts +7 -9
  72. package/dist/_dts/preview-next/src/client/preview/StyleConfigurator.d.ts +4 -11
  73. package/dist/_dts/preview-next/src/client/preview/StyleConfigurator.state.d.ts +7 -7
  74. package/dist/_dts/preview-next/src/client/preview/sidebarTabPreference.d.ts +0 -8
  75. package/dist/_dts/preview-next/src/client/preview/siteChromeLookRows.d.ts +1 -11
  76. package/dist/_dts/preview-next/src/client/preview/siteChromeQuickControlHistoryState.d.ts +1 -5
  77. package/dist/_dts/preview-next/src/client/preview/siteChromeSavePlan.d.ts +2 -3
  78. package/dist/_dts/preview-next/src/client/preview/siteStylePreviewPlanner.d.ts +3 -4
  79. package/dist/_dts/preview-next/src/client/preview/styleConfiguratorSnapshot.d.ts +3 -5
  80. package/dist/_dts/sdk/src/bookings/index.d.ts +5 -4
  81. package/dist/_dts/sdk/src/bookings/types.d.ts +3 -3
  82. package/dist/_dts/sdk/src/cli/commands/style.d.ts +3 -2
  83. package/dist/_dts/sdk/src/client/management/types.d.ts +2 -1
  84. package/dist/_dts/sdk/src/contracts/system-block-content.d.ts +12 -15
  85. package/dist/_dts/sdk/src/public-api/contracts.d.ts +1 -1
  86. package/dist/_dts/sdk/src/version.d.ts +1 -1
  87. package/dist/_dts/sdk/src/webhooks/index.d.ts +1 -1
  88. package/dist/_dts/sdk/src/webhooks/verify.d.ts +3 -3
  89. package/dist/_dts/site-commands/src/commands.d.ts +129 -6
  90. package/dist/_dts/theme-core/src/buttons/index.d.ts +1 -1
  91. package/dist/_dts/theme-core/src/buttons/styles/domain.d.ts +80 -0
  92. package/dist/_dts/theme-core/src/buttons/styles/index.d.ts +3 -0
  93. package/dist/_dts/theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.d.ts +49 -0
  94. package/dist/_dts/theme-core/src/buttons/styles/recipes/quietArrow.d.ts +67 -0
  95. package/dist/_dts/theme-core/src/buttons/styles/recipes/staticRecipes.d.ts +649 -0
  96. package/dist/_dts/theme-core/src/buttons/styles/registry.d.ts +753 -0
  97. package/dist/_dts/theme-core/src/buttons/styles/selection.d.ts +69 -0
  98. package/dist/_dts/theme-core/src/site-styles/curatedSiteStyles.d.ts +26 -24
  99. package/dist/_dts/theme-core/src/site-styles/footerLooks.d.ts +19 -153
  100. package/dist/_dts/theme-core/src/site-styles/headerCtaVariants.d.ts +3 -1
  101. package/dist/_dts/theme-core/src/site-styles/previewCompiler.d.ts +8 -9
  102. package/dist/_dts/theme-core/src/site-styles/runtimeCompiler.d.ts +4 -4
  103. package/dist/_dts/ui/src/palette/hex.d.ts +3 -3
  104. package/dist/cli/index.mjs +1760 -1914
  105. package/dist/cli/init-docs/content/workflow-isr-revalidation.md +1 -1
  106. package/dist/client/{DiscountCodeDisclosure-DU1ygxU2.mjs → DiscountCodeDisclosure-C4xvTBux.mjs} +1 -1
  107. package/dist/client/{EventCombined.client-DB5zagCo.mjs → EventCombined.client-Cr7G131j.mjs} +2 -3
  108. package/dist/client/{EventListing.client-CTX9JHBL.mjs → EventListing.client-CAjbseNy.mjs} +2 -2
  109. package/dist/client/{LeafletStaticMap-BYImhgiB.mjs → LeafletStaticMap-BMlWfwz3.mjs} +1 -1
  110. package/dist/client/{MagicLinkForm-CRkw_M3l.mjs → MagicLinkForm-ChdFz96y.mjs} +1 -2
  111. package/dist/client/{StepIndicator-BnmVBJJh.mjs → StepIndicator-7D3GaBeM.mjs} +2 -2
  112. package/dist/client/{accordion-CeGreumd.mjs → accordion-D8JTs2Si.mjs} +1 -1
  113. package/dist/client/{bookingForm-CSzFNrpN.mjs → bookingForm-H3DCRBHs.mjs} +6 -7
  114. package/dist/client/bookings.mjs +3069 -1447
  115. package/dist/client/{carousel-B2jDtogf.mjs → carousel-DMr_QWlz.mjs} +1 -1
  116. package/dist/client/{cart-D-jZ-vaY.mjs → cart-DWMbfBdR.mjs} +3 -3
  117. package/dist/client/{checkout-Dza-LA7N.mjs → checkout-zmfdkXLx.mjs} +3 -3
  118. package/dist/client/client.mjs +1732 -1913
  119. package/dist/client/{colorStyles-CrgzoXsm.mjs → colorStyles-gcTh5yZT.mjs} +2 -12
  120. package/dist/client/{colorTokenParts-CMugwvX_.mjs → colorTokenParts-FSS3al6l.mjs} +31 -1
  121. package/dist/client/{courseRegistration-TYkNychb.mjs → courseRegistration-Z_mn18jy.mjs} +100 -37
  122. package/dist/client/{eventCalendar-BI_90SsT.mjs → eventCalendar-CYp0YJGF.mjs} +4 -5
  123. package/dist/client/{eventCombined-mNrpryE9.mjs → eventCombined-rKyYZUa9.mjs} +2 -2
  124. package/dist/client/{eventDetails-D4GVlCIY.mjs → eventDetails-X0ZaUuMj.mjs} +3 -3
  125. package/dist/client/{eventListing-YhKN018y.mjs → eventListing-W1SuL7EP.mjs} +2 -2
  126. package/dist/client/{eventRegistration-CdHGtilr.mjs → eventRegistration-ClWricui.mjs} +6 -7
  127. package/dist/client/{form-AcAL45rA.mjs → form--eKPwAAD.mjs} +1 -2
  128. package/dist/client/{headerSection-uEC52ueD.mjs → headerSection-BSeGr-FS.mjs} +2 -3
  129. package/dist/client/hooks.mjs +1554 -1871
  130. package/dist/client/{locationMap-_wJDSUYe.mjs → locationMap-BpOrtNYn.mjs} +8 -5
  131. package/dist/client/{media-BK0O3b-U.mjs → media-DoF0dcVx.mjs} +2 -2
  132. package/dist/client/{newsletterForm-DrArsb2B.mjs → newsletterForm-Bt7it7Dy.mjs} +1 -2
  133. package/dist/client/{pricing-BSYVghwo.mjs → pricing-BTjSDDr4.mjs} +1 -1
  134. package/dist/client/{productDetail-Dyk90sMs.mjs → productDetail-ICnVTcCg.mjs} +3 -3
  135. package/dist/client/{productList-BCKThwAI.mjs → productList-ZHr6D604.mjs} +3 -3
  136. package/dist/client/{propsDecoder-CkXxkdSR.mjs → propsDecoder-wWN0tBDF.mjs} +2351 -129
  137. package/dist/client/rendering/client.mjs +1664 -1824
  138. package/dist/client/rendering/islands.mjs +20 -20
  139. package/dist/client/rendering.mjs +1697 -1909
  140. package/dist/client/{shop-DeltVH10.mjs → shop-C1u_BUn0.mjs} +5 -6
  141. package/dist/client/{shop-commerce-BD9Jsm2Z.mjs → shop-commerce-CleZdRha.mjs} +5 -6
  142. package/dist/client/{shop-commerce-store-CmXD6FDS.mjs → shop-commerce-store-ycnoB2Ce.mjs} +1 -1
  143. package/dist/client/{shopShared-B8v-lH_F.mjs → shopShared-CPhByt2a.mjs} +3 -3
  144. package/dist/client/{useDiscountCodeUi-DbWJN8ld.mjs → useDiscountCodeUi-cStSQI6C.mjs} +1 -1
  145. package/dist/client/{useEventFilters-EJIMUnqT.mjs → useEventFilters-DKPN7hSY.mjs} +26 -27
  146. package/dist/client/{usePolling-Cmh14fc7.mjs → usePolling-BKAd6pkZ.mjs} +2 -2
  147. package/dist/preview-next/before-render.mjs +37 -6
  148. package/dist/preview-next/client/runtime.mjs +4 -4
  149. package/dist/preview-next/middleware.mjs +37 -6
  150. package/dist/{previewAuthStore-CTO7CRPk.mjs → previewAuthStore-BkT1D06A.mjs} +37 -6
  151. package/dist/{sdk-runtime-Dou0GAav.mjs → sdk-runtime-hu3wr3ng.mjs} +2 -2
  152. package/dist/{separator-CI5wZNXT.mjs → separator-Bln8izQ9.mjs} +1 -1
  153. package/dist/server/components.mjs +1472 -1788
  154. package/dist/server/config-validation.mjs +1559 -1876
  155. package/dist/server/config.mjs +1559 -1876
  156. package/dist/server/data.mjs +1554 -1871
  157. package/dist/server/index.mjs +38 -7
  158. package/dist/server/next/revalidate.mjs +53 -1
  159. package/dist/server/next.mjs +1584 -1869
  160. package/dist/server/page-converter.mjs +1543 -1860
  161. package/dist/server/prebuild.mjs +1 -1
  162. package/dist/server/rendering/server.mjs +1472 -1788
  163. package/dist/server/rendering.mjs +1472 -1788
  164. package/dist/server/routing.mjs +1600 -1891
  165. package/dist/server/server.mjs +1574 -1860
  166. package/dist/server/theme-bridge.mjs +1436 -1619
  167. package/dist/server/theme.mjs +1345 -1241
  168. package/dist/server/webhooks.mjs +54 -2
  169. package/package.json +1 -1
  170. package/dist/_dts/theme-core/src/buttons/personalities/brushed-wash.d.ts +0 -16
  171. package/dist/_dts/theme-core/src/buttons/personalities/confident-chip.d.ts +0 -16
  172. package/dist/_dts/theme-core/src/buttons/personalities/earth-pill.d.ts +0 -16
  173. package/dist/_dts/theme-core/src/buttons/personalities/editorial-link.d.ts +0 -16
  174. package/dist/_dts/theme-core/src/buttons/personalities/flat-ink.d.ts +0 -20
  175. package/dist/_dts/theme-core/src/buttons/personalities/index.d.ts +0 -172
  176. package/dist/_dts/theme-core/src/buttons/personalities/ink-stamp.d.ts +0 -16
  177. package/dist/_dts/theme-core/src/buttons/personalities/joy-stamp.d.ts +0 -22
  178. package/dist/_dts/theme-core/src/buttons/personalities/ornate-ritual.d.ts +0 -16
  179. package/dist/_dts/theme-core/src/buttons/personalities/pebble.d.ts +0 -16
  180. package/dist/_dts/theme-core/src/buttons/personalities/quiet-arrow.d.ts +0 -17
  181. package/dist/_dts/theme-core/src/buttons/personalities/showtime-pill.d.ts +0 -17
  182. package/dist/_dts/theme-core/src/buttons/personalities/soft-pill.d.ts +0 -16
  183. package/dist/_dts/theme-core/src/buttons/personalities/two-tone-pill.d.ts +0 -17
  184. package/dist/_dts/theme-core/src/buttons/personalities/types.d.ts +0 -285
  185. package/dist/client/buttons-DoFV7KDL.mjs +0 -2115
  186. package/dist/client/foregroundContract-xICPq59x.mjs +0 -31
@@ -52,7 +52,7 @@ const TAG_TEMPLATES = {
52
52
  blockedDemoMutationPolicy("blocked-hidden", "This action is not available in demo sites.");
53
53
  blockedDemoMutationPolicy("blocked-disabled", "This setting is disabled in demo sites.");
54
54
  blockedDemoMutationPolicy("internal-only", "This internal operation is not available in demo sites.");
55
- TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.workflowRunById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.formById, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEventFilters, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicTeamMembers, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicPasses, TAG_TEMPLATES.publicMemberships, TAG_TEMPLATES.publicProducts, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicShop, TAG_TEMPLATES.publicCheckout, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents;
55
+ TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.workflowRunById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.formById, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEventFilters, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicTeamMembers, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicPasses, TAG_TEMPLATES.publicMemberships, TAG_TEMPLATES.publicProducts, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicShop, TAG_TEMPLATES.publicCheckout, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents;
56
56
  //#endregion
57
57
  //#region ../core/src/result.ts
58
58
  function ok(value) {
@@ -3733,7 +3733,7 @@ const gradientDirectionSchema$1 = z$1.enum([
3733
3733
  "to-br",
3734
3734
  "to-bl"
3735
3735
  ]);
3736
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3736
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
3737
3737
  z$1.object({
3738
3738
  type: z$1.literal("solid"),
3739
3739
  colorToken: opaqueButtonColourTokenSchema
@@ -3757,6 +3757,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3757
3757
  role: z$1.literal("link")
3758
3758
  })
3759
3759
  ]);
3760
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
3760
3761
  const effectApplicationSchema$1 = z$1.object({
3761
3762
  effectId: z$1.string(),
3762
3763
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -3969,265 +3970,429 @@ function isUnknownArray(value) {
3969
3970
  }
3970
3971
  buttonSizeNameSchema.options;
3971
3972
  //#endregion
3972
- //#region ../theme-core/src/buttons/personalities/types.ts
3973
- function asButtonPersonalityId(value) {
3974
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
3975
- return value;
3973
+ //#region ../theme-core/src/buttons/styles/domain.ts
3974
+ const PUBLIC_BUTTON_ROLES = [
3975
+ "primary",
3976
+ "secondary",
3977
+ "outline",
3978
+ "ghost",
3979
+ "accent"
3980
+ ];
3981
+ function defineButtonStyleRecipe(recipe) {
3982
+ return recipe;
3983
+ }
3984
+ function materializeButtonRoles(definitions) {
3985
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
3986
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
3987
+ const completeRoles = {
3988
+ primary,
3989
+ secondary
3990
+ };
3991
+ return {
3992
+ primary,
3993
+ secondary,
3994
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
3995
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
3996
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
3997
+ };
3976
3998
  }
3977
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
3978
- z$1.object({
3979
- id: buttonPersonalityIdSchema,
3980
- name: z$1.string().min(1),
3981
- description: z$1.string().min(1),
3982
- tags: styleTagsSchema,
3983
- buttonSystem: buttonSystemSchema
3984
- });
3985
- /**
3986
- * Helper for personality file modules to keep the call site short and
3987
- * type-safe. `as const satisfies ...` would also work but produces wider
3988
- * types at use sites.
3989
- */
3990
- function defineButtonPersonality(input) {
3999
+ function resolveButtonStyleRecipe(recipe, parameters) {
4000
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
4001
+ if (!parsedParameters.success) return {
4002
+ kind: "error",
4003
+ error: {
4004
+ kind: "invalid-parameters",
4005
+ styleId: recipe.id,
4006
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
4007
+ }
4008
+ };
4009
+ const definition = recipe.defineSystem(parsedParameters.data);
4010
+ const roles = materializeButtonRoles(definition.roles);
4011
+ const buttonSystem = {
4012
+ global: definition.global,
4013
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
4014
+ ...definition.sizes ? { sizes: definition.sizes } : {}
4015
+ };
4016
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
4017
+ if (!parsedButtonSystem.success) return {
4018
+ kind: "error",
4019
+ error: {
4020
+ kind: "invalid-button-system",
4021
+ styleId: recipe.id,
4022
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
4023
+ }
4024
+ };
3991
4025
  return {
3992
- id: asButtonPersonalityId(input.id),
3993
- name: input.name,
3994
- description: input.description,
3995
- tags: input.tags,
3996
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
4026
+ kind: "resolved",
4027
+ buttonSystem: parsedButtonSystem.data
4028
+ };
4029
+ }
4030
+ function materializeSupportingRole(role, definition, completeRoles) {
4031
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
4032
+ return {
4033
+ ...completeRoles[definition.from],
4034
+ ...definition.overrides,
4035
+ id: role,
4036
+ name: roleName(role),
4037
+ enabled: true,
4038
+ priority: 3
4039
+ };
4040
+ }
4041
+ function materializeCompleteRole(role, appearance) {
4042
+ return {
4043
+ ...appearance,
4044
+ id: role,
4045
+ name: roleName(role),
4046
+ enabled: true,
4047
+ priority: rolePriority(role)
3997
4048
  };
3998
4049
  }
4050
+ function roleName(role) {
4051
+ return role.charAt(0).toUpperCase() + role.slice(1);
4052
+ }
4053
+ function rolePriority(role) {
4054
+ if (role === "primary") return 1;
4055
+ if (role === "secondary") return 2;
4056
+ return 3;
4057
+ }
4058
+ //#endregion
4059
+ //#region ../theme-core/src/buttons/styles/selection.ts
4060
+ const BUTTON_STYLE_IDS = [
4061
+ "soft-pill",
4062
+ "earth-pill",
4063
+ "confident-chip",
4064
+ "editorial-link",
4065
+ "pebble",
4066
+ "ink-stamp",
4067
+ "flat-ink",
4068
+ "brushed-wash",
4069
+ "showtime-pill",
4070
+ "joy-stamp",
4071
+ "ornate-ritual",
4072
+ "quiet-arrow"
4073
+ ];
4074
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
4075
+ const emptyParametersSchema$1 = z$1.object({}).strict();
4076
+ function selectionBranch(styleId, parameters) {
4077
+ return z$1.object({
4078
+ styleId: z$1.literal(styleId),
4079
+ parameters
4080
+ }).strict();
4081
+ }
4082
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
4083
+ selectionBranch("soft-pill", emptyParametersSchema$1),
4084
+ selectionBranch("earth-pill", emptyParametersSchema$1),
4085
+ selectionBranch("confident-chip", emptyParametersSchema$1),
4086
+ selectionBranch("editorial-link", emptyParametersSchema$1),
4087
+ selectionBranch("pebble", emptyParametersSchema$1),
4088
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
4089
+ selectionBranch("flat-ink", emptyParametersSchema$1),
4090
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
4091
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
4092
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
4093
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
4094
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
4095
+ ]);
3999
4096
  //#endregion
4000
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
4001
- /**
4002
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
4003
- * Generous padding, soft shadows; pairs with vibrant organic brands.
4004
- */
4005
- const brushedWash = defineButtonPersonality({
4006
- id: "brushed-wash",
4007
- name: "Brushed Wash",
4008
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
4097
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
4098
+ const quietArrowRecipe = defineButtonStyleRecipe({
4099
+ id: "quiet-arrow",
4100
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
4009
4101
  tags: {
4010
4102
  tone: "classic",
4011
- energy: "vibrant",
4012
- motion: "standard",
4013
- era: "organic"
4103
+ energy: "calm",
4104
+ motion: "subtle",
4105
+ era: "editorial"
4014
4106
  },
4015
- buttonSystem: {
4107
+ parameterSchema: quietArrowParametersSchema,
4108
+ defaultParameters: { secondaryTreatment: "outlined" },
4109
+ controls: [{
4110
+ kind: "choice",
4111
+ parameter: "secondaryTreatment",
4112
+ label: "Secondary button treatment",
4113
+ options: [{
4114
+ value: "outlined",
4115
+ label: "Outlined"
4116
+ }, {
4117
+ value: "solid-accent",
4118
+ label: "Solid accent"
4119
+ }]
4120
+ }],
4121
+ defineSystem: (parameters) => ({
4016
4122
  global: {
4017
4123
  cornerStyle: "rounded",
4018
- shadow: "low",
4019
- textTransform: "none",
4124
+ textTransform: "uppercase",
4020
4125
  fontWeight: 500,
4021
4126
  borderWidth: 1,
4127
+ typography: "body",
4128
+ fontSize: "text-sm",
4129
+ letterSpacing: "loose",
4022
4130
  hoverTransform: "none",
4023
4131
  hoverColor: "none"
4024
4132
  },
4025
4133
  sizes: {
4026
4134
  sm: {
4027
- padding: "0.75rem 2rem",
4135
+ padding: "0.625rem 1.25rem",
4136
+ fontSize: "text-xs"
4137
+ },
4138
+ md: {
4139
+ padding: "0.8125rem 1.75rem",
4028
4140
  fontSize: "text-sm"
4029
4141
  },
4030
- md: { padding: "1rem 2.5rem" },
4031
4142
  lg: {
4032
- padding: "1.25rem 3rem",
4033
- fontSize: "text-lg"
4143
+ padding: "0.9375rem 2.125rem",
4144
+ fontSize: "text-sm"
4034
4145
  },
4035
4146
  xl: {
4036
- padding: "1.625rem 3.75rem",
4037
- fontSize: "text-xl"
4147
+ padding: "1.0625rem 2.5rem",
4148
+ fontSize: "text-base"
4038
4149
  }
4039
4150
  },
4040
- variants: [
4041
- {
4042
- id: "primary",
4043
- name: "Primary",
4044
- enabled: true,
4045
- priority: 1,
4046
- background: {
4047
- type: "gradient",
4048
- stops: ["primary", "accent"],
4049
- direction: "to-r",
4050
- foregroundToken: "primaryForeground"
4051
- },
4052
- borderRadius: "rounded-lg",
4053
- shadow: {
4054
- elevation: "low",
4055
- softness: "soft",
4056
- position: "bottom"
4151
+ roles: {
4152
+ primary: {
4153
+ kind: "complete",
4154
+ appearance: {
4155
+ background: {
4156
+ type: "solid",
4157
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
4158
+ },
4159
+ borderRadius: "rounded-xl",
4160
+ affordance: { iconId: "ArrowRight" },
4161
+ effects: { hover: [{
4162
+ effectId: "darken-background",
4163
+ options: { amount: 100 }
4164
+ }] }
4057
4165
  }
4058
4166
  },
4059
- {
4060
- id: "secondary",
4061
- name: "Secondary",
4062
- enabled: true,
4063
- priority: 2,
4064
- background: {
4065
- type: "gradient",
4066
- stops: ["secondary", "accent"],
4067
- direction: "to-br",
4068
- foregroundToken: "primaryForeground"
4069
- },
4070
- borderRadius: "rounded-lg",
4071
- shadow: {
4072
- elevation: "low",
4073
- softness: "soft",
4074
- position: "bottom"
4167
+ secondary: {
4168
+ kind: "complete",
4169
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
4170
+ background: {
4171
+ type: "solid",
4172
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4173
+ },
4174
+ borderRadius: "rounded-xl",
4175
+ affordance: { iconId: "ArrowRight" },
4176
+ effects: { hover: [{
4177
+ effectId: "darken-background",
4178
+ options: { amount: 100 }
4179
+ }] }
4180
+ } : {
4181
+ background: {
4182
+ type: "surface",
4183
+ role: "link"
4184
+ },
4185
+ borderRadius: "rounded-xl",
4186
+ border: { widthClass: "border" },
4187
+ affordance: { iconId: "ArrowRight" },
4188
+ effects: { hover: [{
4189
+ effectId: "background-on-hover",
4190
+ options: { colorToken: "surfaceAlt" }
4191
+ }] }
4075
4192
  }
4076
4193
  },
4077
- {
4078
- id: "outline",
4079
- name: "Outline",
4080
- enabled: true,
4081
- priority: 3,
4082
- background: {
4083
- type: "surface",
4084
- role: "link"
4085
- },
4086
- borderRadius: "rounded-lg",
4087
- border: { widthClass: "border" },
4088
- effects: { hover: [{
4089
- effectId: "background-on-hover",
4090
- options: { colorToken: "surface" }
4091
- }] }
4194
+ outline: {
4195
+ kind: "complete",
4196
+ appearance: {
4197
+ background: {
4198
+ type: "surface",
4199
+ role: "link"
4200
+ },
4201
+ borderRadius: "rounded-xl",
4202
+ border: { widthClass: "border" }
4203
+ }
4092
4204
  },
4093
- {
4094
- id: "ghost",
4095
- name: "Ghost",
4096
- enabled: true,
4097
- priority: 3,
4098
- background: {
4099
- type: "surface",
4100
- role: "link"
4101
- },
4102
- borderRadius: "rounded-lg",
4103
- effects: { hover: [{
4104
- effectId: "background-on-hover",
4105
- options: { colorToken: "surface" }
4106
- }] }
4205
+ ghost: {
4206
+ kind: "complete",
4207
+ appearance: {
4208
+ background: {
4209
+ type: "surface",
4210
+ role: "link"
4211
+ },
4212
+ borderRadius: "rounded-xl"
4213
+ }
4214
+ },
4215
+ accent: {
4216
+ kind: "derive",
4217
+ from: "primary",
4218
+ overrides: { background: {
4219
+ type: "solid",
4220
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4221
+ } }
4107
4222
  }
4108
- ]
4109
- }
4223
+ }
4224
+ })
4110
4225
  });
4111
4226
  //#endregion
4112
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
4113
- /**
4114
- * Confident Chip — moderate-radius solid buttons that read as competent and
4115
- * direct. Default for Clear Professional; works for any modern brand voice.
4116
- */
4117
- const confidentChip = defineButtonPersonality({
4118
- id: "confident-chip",
4119
- name: "Confident Chip",
4120
- description: "Mid-radius solid buttons with a crisp hover.",
4227
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
4228
+ const emptyParametersSchema = z$1.object({}).strict();
4229
+ function defineStaticButtonStyleRecipe(input) {
4230
+ const system = normalizeSystem(input.system);
4231
+ return defineButtonStyleRecipe({
4232
+ id: input.id,
4233
+ accessibilityLabel: input.accessibilityLabel,
4234
+ tags: input.tags,
4235
+ parameterSchema: emptyParametersSchema,
4236
+ defaultParameters: {},
4237
+ controls: [],
4238
+ defineSystem: () => system
4239
+ });
4240
+ }
4241
+ function normalizeSystem(input) {
4242
+ return {
4243
+ global: buttonGlobalSettingsSchema.parse(input.global),
4244
+ ...input.sizes ? { sizes: input.sizes } : {},
4245
+ roles: {
4246
+ primary: normalizeCompleteRole(input.roles.primary),
4247
+ secondary: normalizeCompleteRole(input.roles.secondary),
4248
+ outline: normalizeSupportingRole(input.roles.outline),
4249
+ ghost: normalizeSupportingRole(input.roles.ghost),
4250
+ accent: normalizeSupportingRole(input.roles.accent)
4251
+ }
4252
+ };
4253
+ }
4254
+ function normalizeCompleteRole(role) {
4255
+ return {
4256
+ kind: "complete",
4257
+ appearance: normalizeAppearance(role.appearance)
4258
+ };
4259
+ }
4260
+ function normalizeSupportingRole(role) {
4261
+ if (role.kind === "complete") return normalizeCompleteRole(role);
4262
+ return {
4263
+ kind: "derive",
4264
+ from: role.from,
4265
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
4266
+ };
4267
+ }
4268
+ function normalizeAppearance(appearance) {
4269
+ const { background, hoverBackgroundToken, ...rest } = appearance;
4270
+ return {
4271
+ ...rest,
4272
+ background: buttonColourTreatmentSchema.parse(background),
4273
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4274
+ };
4275
+ }
4276
+ function normalizeAppearanceOverrides(overrides) {
4277
+ const { background, hoverBackgroundToken, ...rest } = overrides;
4278
+ return {
4279
+ ...rest,
4280
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
4281
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4282
+ };
4283
+ }
4284
+ //#endregion
4285
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
4286
+ const softPillRecipe = defineStaticButtonStyleRecipe({
4287
+ id: "soft-pill",
4288
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
4121
4289
  tags: {
4122
4290
  tone: "classic",
4123
4291
  energy: "calm",
4124
- motion: "standard",
4125
- era: "modern"
4292
+ motion: "subtle",
4293
+ era: "organic"
4126
4294
  },
4127
- buttonSystem: {
4295
+ system: {
4128
4296
  global: {
4129
- cornerStyle: "rounded",
4130
- shadow: "medium",
4297
+ cornerStyle: "pill",
4298
+ shadow: "low",
4131
4299
  textTransform: "none",
4132
- fontWeight: 600,
4133
- borderWidth: 1,
4134
- hoverTransform: "none",
4300
+ fontWeight: 500,
4301
+ borderWidth: 2,
4302
+ hoverTransform: "lift",
4135
4303
  hoverColor: "none"
4136
4304
  },
4137
- variants: [
4138
- {
4139
- id: "primary",
4140
- name: "Primary",
4141
- enabled: true,
4142
- priority: 1,
4143
- background: {
4144
- type: "solid",
4145
- colorToken: "primary"
4146
- },
4147
- borderRadius: "rounded-md",
4148
- shadow: {
4149
- elevation: "medium",
4150
- softness: "soft",
4151
- position: "bottom"
4152
- },
4153
- effects: {
4154
- hover: [{
4155
- effectId: "darken-background",
4156
- options: { amount: 100 }
4157
- }],
4158
- active: [{
4159
- effectId: "scale-down",
4160
- options: { scale: "0.97" }
4161
- }]
4305
+ roles: {
4306
+ primary: {
4307
+ kind: "complete",
4308
+ appearance: {
4309
+ background: {
4310
+ type: "solid",
4311
+ colorToken: "primary"
4312
+ },
4313
+ borderRadius: "rounded-full",
4314
+ shadow: {
4315
+ elevation: "low",
4316
+ softness: "soft",
4317
+ position: "bottom"
4318
+ },
4319
+ effects: {
4320
+ hover: [{
4321
+ effectId: "lift",
4322
+ options: { translateY: "-1px" }
4323
+ }],
4324
+ active: [{
4325
+ effectId: "scale-down",
4326
+ options: { scale: "0.98" }
4327
+ }]
4328
+ }
4162
4329
  }
4163
4330
  },
4164
- {
4165
- id: "secondary",
4166
- name: "Secondary",
4167
- enabled: true,
4168
- priority: 2,
4169
- background: {
4170
- type: "solid",
4171
- colorToken: "surface"
4172
- },
4173
- borderRadius: "rounded-md",
4174
- border: { widthClass: "border" },
4175
- effects: { hover: [{
4176
- effectId: "background-on-hover",
4177
- options: { colorToken: "background" }
4178
- }] }
4331
+ secondary: {
4332
+ kind: "complete",
4333
+ appearance: {
4334
+ background: {
4335
+ type: "surface",
4336
+ role: "link"
4337
+ },
4338
+ borderRadius: "rounded-full",
4339
+ border: { widthClass: "border-2" },
4340
+ effects: { hover: [{
4341
+ effectId: "background-on-hover",
4342
+ options: { colorToken: "surface" }
4343
+ }] }
4344
+ }
4179
4345
  },
4180
- {
4181
- id: "outline",
4182
- name: "Outline",
4183
- enabled: true,
4184
- priority: 3,
4185
- background: {
4186
- type: "surface",
4187
- role: "link"
4188
- },
4189
- borderRadius: "rounded-md",
4190
- border: { widthClass: "border" },
4191
- effects: { hover: [{
4192
- effectId: "background-on-hover",
4193
- options: { colorToken: "surface" }
4194
- }] }
4346
+ outline: {
4347
+ kind: "complete",
4348
+ appearance: {
4349
+ background: {
4350
+ type: "surface",
4351
+ role: "link"
4352
+ },
4353
+ borderRadius: "rounded-full",
4354
+ border: { widthClass: "border" },
4355
+ effects: { hover: [{
4356
+ effectId: "background-on-hover",
4357
+ options: { colorToken: "surface" }
4358
+ }] }
4359
+ }
4195
4360
  },
4196
- {
4197
- id: "ghost",
4198
- name: "Ghost",
4199
- enabled: true,
4200
- priority: 3,
4201
- background: {
4202
- type: "surface",
4203
- role: "link"
4204
- },
4205
- borderRadius: "rounded-md",
4206
- effects: { hover: [{
4207
- effectId: "background-on-hover",
4208
- options: { colorToken: "surface" }
4209
- }] }
4361
+ ghost: {
4362
+ kind: "complete",
4363
+ appearance: {
4364
+ background: {
4365
+ type: "surface",
4366
+ role: "link"
4367
+ },
4368
+ borderRadius: "rounded-full",
4369
+ effects: { hover: [{
4370
+ effectId: "background-on-hover",
4371
+ options: { colorToken: "surface" }
4372
+ }] }
4373
+ }
4374
+ },
4375
+ accent: {
4376
+ kind: "derive",
4377
+ from: "primary",
4378
+ overrides: { background: {
4379
+ type: "solid",
4380
+ colorToken: "accent"
4381
+ } }
4210
4382
  }
4211
- ]
4383
+ }
4212
4384
  }
4213
4385
  });
4214
- //#endregion
4215
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
4216
- /**
4217
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
4218
- * Built for grounded editorial wellness styles such as Soft Earth.
4219
- */
4220
- const earthPill = defineButtonPersonality({
4386
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
4221
4387
  id: "earth-pill",
4222
- name: "Earth Pill",
4223
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
4388
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
4224
4389
  tags: {
4225
4390
  tone: "classic",
4226
4391
  energy: "calm",
4227
4392
  motion: "subtle",
4228
4393
  era: "organic"
4229
4394
  },
4230
- buttonSystem: {
4395
+ system: {
4231
4396
  global: {
4232
4397
  cornerStyle: "pill",
4233
4398
  shadow: "low",
@@ -4254,940 +4419,808 @@ const earthPill = defineButtonPersonality({
4254
4419
  fontSize: "text-xl"
4255
4420
  }
4256
4421
  },
4257
- variants: [
4258
- {
4259
- id: "primary",
4260
- name: "Primary",
4261
- enabled: true,
4262
- priority: 1,
4263
- background: {
4264
- type: "solid",
4265
- colorToken: "primary"
4266
- },
4267
- borderRadius: "rounded-full",
4268
- shadow: {
4269
- elevation: "low",
4270
- softness: "soft",
4271
- position: "bottom"
4272
- },
4273
- effects: {
4274
- hover: [{
4275
- effectId: "lift",
4276
- options: { translateY: "-1px" }
4277
- }, {
4278
- effectId: "background-on-hover",
4279
- options: { colorToken: "accent" }
4280
- }],
4281
- active: [{
4282
- effectId: "scale-down",
4283
- options: { scale: "0.98" }
4284
- }]
4422
+ roles: {
4423
+ primary: {
4424
+ kind: "complete",
4425
+ appearance: {
4426
+ background: {
4427
+ type: "solid",
4428
+ colorToken: "primary"
4429
+ },
4430
+ borderRadius: "rounded-full",
4431
+ shadow: {
4432
+ elevation: "low",
4433
+ softness: "soft",
4434
+ position: "bottom"
4435
+ },
4436
+ effects: {
4437
+ hover: [{
4438
+ effectId: "lift",
4439
+ options: { translateY: "-1px" }
4440
+ }, {
4441
+ effectId: "background-on-hover",
4442
+ options: { colorToken: "accent" }
4443
+ }],
4444
+ active: [{
4445
+ effectId: "scale-down",
4446
+ options: { scale: "0.98" }
4447
+ }]
4448
+ }
4285
4449
  }
4286
4450
  },
4287
- {
4288
- id: "secondary",
4289
- name: "Secondary",
4290
- enabled: true,
4291
- priority: 2,
4292
- background: {
4293
- type: "surface",
4294
- role: "link"
4295
- },
4296
- borderRadius: "rounded-full",
4297
- border: { widthClass: "border" },
4298
- effects: { hover: [{
4299
- effectId: "background-on-hover",
4300
- options: { colorToken: "muted" }
4301
- }] }
4451
+ secondary: {
4452
+ kind: "complete",
4453
+ appearance: {
4454
+ background: {
4455
+ type: "surface",
4456
+ role: "link"
4457
+ },
4458
+ borderRadius: "rounded-full",
4459
+ border: { widthClass: "border" },
4460
+ effects: { hover: [{
4461
+ effectId: "background-on-hover",
4462
+ options: { colorToken: "muted" }
4463
+ }] }
4464
+ }
4302
4465
  },
4303
- {
4304
- id: "outline",
4305
- name: "Outline",
4306
- enabled: true,
4307
- priority: 3,
4308
- background: {
4309
- type: "surface",
4310
- role: "link"
4311
- },
4312
- borderRadius: "rounded-full",
4313
- border: { widthClass: "border" },
4314
- effects: { hover: [{
4315
- effectId: "background-on-hover",
4316
- options: { colorToken: "surfaceAlt" }
4317
- }] }
4466
+ outline: {
4467
+ kind: "complete",
4468
+ appearance: {
4469
+ background: {
4470
+ type: "surface",
4471
+ role: "link"
4472
+ },
4473
+ borderRadius: "rounded-full",
4474
+ border: { widthClass: "border" },
4475
+ effects: { hover: [{
4476
+ effectId: "background-on-hover",
4477
+ options: { colorToken: "surfaceAlt" }
4478
+ }] }
4479
+ }
4318
4480
  },
4319
- {
4320
- id: "ghost",
4321
- name: "Ghost",
4322
- enabled: true,
4323
- priority: 3,
4324
- background: {
4325
- type: "surface",
4326
- role: "link"
4327
- },
4328
- borderRadius: "rounded-full",
4329
- shadow: {
4330
- elevation: "none",
4331
- softness: null,
4332
- position: "bottom"
4333
- },
4334
- sizes: {
4335
- sm: {
4336
- padding: "0.25rem 0",
4337
- fontSize: "text-sm"
4481
+ ghost: {
4482
+ kind: "complete",
4483
+ appearance: {
4484
+ background: {
4485
+ type: "surface",
4486
+ role: "link"
4338
4487
  },
4339
- md: { padding: "0.375rem 0" },
4340
- lg: {
4341
- padding: "0.5rem 0",
4342
- fontSize: "text-lg"
4488
+ borderRadius: "rounded-full",
4489
+ shadow: {
4490
+ elevation: "none",
4491
+ softness: null,
4492
+ position: "bottom"
4343
4493
  },
4344
- xl: {
4345
- padding: "0.625rem 0",
4346
- fontSize: "text-xl"
4494
+ sizes: {
4495
+ sm: {
4496
+ padding: "0.25rem 0",
4497
+ fontSize: "text-sm"
4498
+ },
4499
+ md: { padding: "0.375rem 0" },
4500
+ lg: {
4501
+ padding: "0.5rem 0",
4502
+ fontSize: "text-lg"
4503
+ },
4504
+ xl: {
4505
+ padding: "0.625rem 0",
4506
+ fontSize: "text-xl"
4507
+ }
4347
4508
  }
4348
4509
  }
4510
+ },
4511
+ accent: {
4512
+ kind: "derive",
4513
+ from: "primary",
4514
+ overrides: { background: {
4515
+ type: "solid",
4516
+ colorToken: "accent"
4517
+ } }
4349
4518
  }
4350
- ]
4519
+ }
4351
4520
  }
4352
4521
  });
4353
- //#endregion
4354
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
4355
- /**
4356
- * Editorial Link — all variants are link-style with a growing underline.
4357
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
4358
- */
4359
- const editorialLink = defineButtonPersonality({
4360
- id: "editorial-link",
4361
- name: "Editorial Link",
4362
- description: "Link-style with a growing underline. Refined, typographic.",
4522
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
4523
+ id: "confident-chip",
4524
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
4363
4525
  tags: {
4364
- tone: "minimal",
4526
+ tone: "classic",
4365
4527
  energy: "calm",
4366
- motion: "subtle",
4367
- era: "editorial"
4528
+ motion: "standard",
4529
+ era: "modern"
4368
4530
  },
4369
- buttonSystem: {
4531
+ system: {
4370
4532
  global: {
4371
- cornerStyle: "square",
4533
+ cornerStyle: "rounded",
4534
+ shadow: "medium",
4372
4535
  textTransform: "none",
4373
- fontWeight: 500,
4536
+ fontWeight: 600,
4374
4537
  borderWidth: 1,
4375
4538
  hoverTransform: "none",
4376
4539
  hoverColor: "none"
4377
4540
  },
4378
- variants: [
4379
- {
4380
- id: "primary",
4381
- name: "Primary",
4382
- enabled: true,
4383
- priority: 1,
4384
- background: {
4385
- type: "surface",
4386
- role: "link"
4387
- },
4388
- borderRadius: "rounded-none",
4389
- sizes: {
4390
- sm: { padding: "0.25rem 0" },
4391
- md: { padding: "0.5rem 0" },
4392
- lg: { padding: "0.625rem 0" },
4393
- xl: { padding: "0.75rem 0" }
4394
- },
4395
- effects: { base: [{
4396
- effectId: "border-bottom-grow",
4397
- options: {
4398
- height: 2,
4399
- colorToken: "text",
4400
- origin: "left"
4541
+ roles: {
4542
+ primary: {
4543
+ kind: "complete",
4544
+ appearance: {
4545
+ background: {
4546
+ type: "solid",
4547
+ colorToken: "primary"
4548
+ },
4549
+ borderRadius: "rounded-md",
4550
+ shadow: {
4551
+ elevation: "medium",
4552
+ softness: "soft",
4553
+ position: "bottom"
4554
+ },
4555
+ effects: {
4556
+ hover: [{
4557
+ effectId: "darken-background",
4558
+ options: { amount: 100 }
4559
+ }],
4560
+ active: [{
4561
+ effectId: "scale-down",
4562
+ options: { scale: "0.97" }
4563
+ }]
4401
4564
  }
4402
- }] }
4565
+ }
4403
4566
  },
4404
- {
4405
- id: "secondary",
4406
- name: "Secondary",
4407
- enabled: true,
4408
- priority: 2,
4409
- background: {
4410
- type: "surface",
4411
- role: "link"
4412
- },
4413
- borderRadius: "rounded-none",
4414
- sizes: {
4415
- sm: { padding: "0.25rem 0" },
4416
- md: { padding: "0.5rem 0" },
4417
- lg: { padding: "0.625rem 0" },
4418
- xl: { padding: "0.75rem 0" }
4419
- },
4420
- effects: { base: [{
4421
- effectId: "border-bottom-grow",
4422
- options: {
4423
- height: 1,
4424
- colorToken: "mutedText",
4425
- origin: "left"
4426
- }
4427
- }] }
4567
+ secondary: {
4568
+ kind: "complete",
4569
+ appearance: {
4570
+ background: {
4571
+ type: "solid",
4572
+ colorToken: "surface"
4573
+ },
4574
+ borderRadius: "rounded-md",
4575
+ border: { widthClass: "border" },
4576
+ effects: { hover: [{
4577
+ effectId: "background-on-hover",
4578
+ options: { colorToken: "background" }
4579
+ }] }
4580
+ }
4428
4581
  },
4429
- {
4430
- id: "outline",
4431
- name: "Outline",
4432
- enabled: true,
4433
- priority: 3,
4434
- background: {
4435
- type: "surface",
4436
- role: "link"
4437
- },
4438
- borderRadius: "rounded-none",
4439
- sizes: {
4440
- sm: { padding: "0.25rem 0" },
4441
- md: { padding: "0.5rem 0" },
4442
- lg: { padding: "0.625rem 0" },
4443
- xl: { padding: "0.75rem 0" }
4444
- },
4445
- effects: { base: [{
4446
- effectId: "border-bottom-grow",
4447
- options: {
4448
- height: 1,
4449
- colorToken: "accent",
4450
- origin: "left"
4451
- }
4452
- }] }
4582
+ outline: {
4583
+ kind: "complete",
4584
+ appearance: {
4585
+ background: {
4586
+ type: "surface",
4587
+ role: "link"
4588
+ },
4589
+ borderRadius: "rounded-md",
4590
+ border: { widthClass: "border" },
4591
+ effects: { hover: [{
4592
+ effectId: "background-on-hover",
4593
+ options: { colorToken: "surface" }
4594
+ }] }
4595
+ }
4453
4596
  },
4454
- {
4455
- id: "ghost",
4456
- name: "Ghost",
4457
- enabled: true,
4458
- priority: 3,
4459
- background: {
4460
- type: "surface",
4461
- role: "link"
4462
- },
4463
- borderRadius: "rounded-none",
4464
- sizes: {
4465
- sm: { padding: "0.25rem 0" },
4466
- md: { padding: "0.5rem 0" },
4467
- lg: { padding: "0.625rem 0" },
4468
- xl: { padding: "0.75rem 0" }
4597
+ ghost: {
4598
+ kind: "complete",
4599
+ appearance: {
4600
+ background: {
4601
+ type: "surface",
4602
+ role: "link"
4603
+ },
4604
+ borderRadius: "rounded-md",
4605
+ effects: { hover: [{
4606
+ effectId: "background-on-hover",
4607
+ options: { colorToken: "surface" }
4608
+ }] }
4469
4609
  }
4610
+ },
4611
+ accent: {
4612
+ kind: "derive",
4613
+ from: "primary",
4614
+ overrides: { background: {
4615
+ type: "solid",
4616
+ colorToken: "accent"
4617
+ } }
4470
4618
  }
4471
- ]
4619
+ }
4472
4620
  }
4473
4621
  });
4474
- //#endregion
4475
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
4476
- /**
4477
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
4478
- * amber accent climax, all completely flat (no drop shadow) with a modest
4479
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
4480
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
4481
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
4482
- * the page's one conversion climax.
4483
- */
4484
- const flatInk = defineButtonPersonality({
4485
- id: "flat-ink",
4486
- name: "Flat Ink",
4487
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
4622
+ const editorialSizes = {
4623
+ sm: { padding: "0.25rem 0" },
4624
+ md: { padding: "0.5rem 0" },
4625
+ lg: { padding: "0.625rem 0" },
4626
+ xl: { padding: "0.75rem 0" }
4627
+ };
4628
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
4629
+ id: "editorial-link",
4630
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
4488
4631
  tags: {
4489
- tone: "classic",
4632
+ tone: "minimal",
4490
4633
  energy: "calm",
4491
4634
  motion: "subtle",
4492
4635
  era: "editorial"
4493
4636
  },
4494
- buttonSystem: {
4637
+ system: {
4495
4638
  global: {
4496
- cornerStyle: "rounded",
4639
+ cornerStyle: "square",
4497
4640
  textTransform: "none",
4498
- fontWeight: 600,
4499
- borderWidth: 1,
4500
- typography: "body",
4501
- letterSpacing: "tight",
4502
- paddingPreset: "default",
4503
- hoverTransform: "lift",
4504
- hoverColor: "none"
4505
- },
4506
- sizes: {
4507
- sm: {
4508
- padding: "0.625rem 1.125rem",
4509
- fontSize: "text-sm"
4510
- },
4511
- md: { padding: "0.8125rem 1.375rem" },
4512
- lg: {
4513
- padding: "0.9375rem 1.625rem",
4514
- fontSize: "text-lg"
4515
- },
4516
- xl: {
4517
- padding: "1.0625rem 2rem",
4518
- fontSize: "text-xl"
4519
- }
4520
- },
4521
- variants: [
4522
- {
4523
- id: "primary",
4524
- name: "Primary",
4525
- enabled: true,
4526
- priority: 1,
4527
- background: {
4528
- type: "solid",
4529
- colorToken: "primary"
4530
- },
4531
- borderRadius: "rounded-lg",
4532
- affordance: { iconId: "ArrowRight" },
4533
- effects: { hover: [{
4534
- effectId: "lift",
4535
- options: { translateY: "-2px" }
4536
- }, {
4537
- effectId: "background-on-hover",
4538
- options: { colorToken: "secondary" }
4539
- }] }
4540
- },
4541
- {
4542
- id: "secondary",
4543
- name: "Secondary",
4544
- enabled: true,
4545
- priority: 2,
4546
- background: {
4547
- type: "surface",
4548
- role: "link"
4549
- },
4550
- borderRadius: "rounded-lg",
4551
- border: { widthClass: "border" },
4552
- effects: { hover: [{
4553
- effectId: "lift",
4554
- options: { translateY: "-2px" }
4555
- }, {
4556
- effectId: "background-on-hover",
4557
- options: { colorToken: "surfaceAlt" }
4558
- }] }
4559
- },
4560
- {
4561
- id: "accent",
4562
- name: "Accent",
4563
- enabled: true,
4564
- priority: 3,
4565
- background: {
4566
- type: "solid",
4567
- colorToken: "accent"
4568
- },
4569
- borderRadius: "rounded-lg",
4570
- affordance: { iconId: "ArrowRight" },
4571
- effects: { hover: [{
4572
- effectId: "lift",
4573
- options: { translateY: "-2px" }
4574
- }] }
4575
- }
4576
- ]
4577
- }
4578
- });
4579
- //#endregion
4580
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
4581
- /**
4582
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
4583
- * feel. Reads as bold and handmade; suits expressive craft brands.
4584
- */
4585
- const inkStamp = defineButtonPersonality({
4586
- id: "ink-stamp",
4587
- name: "Ink Stamp",
4588
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
4589
- tags: {
4590
- tone: "bold",
4591
- energy: "vibrant",
4592
- motion: "standard",
4593
- era: "organic"
4594
- },
4595
- buttonSystem: {
4596
- global: {
4597
- cornerStyle: "rounded",
4598
- textTransform: "uppercase",
4599
- fontWeight: 600,
4641
+ fontWeight: 500,
4600
4642
  borderWidth: 1,
4601
4643
  hoverTransform: "none",
4602
- hoverColor: "none",
4603
- letterSpacing: "loose"
4604
- },
4605
- sizes: {
4606
- sm: {
4607
- padding: "0.5rem 1.25rem",
4608
- fontSize: "text-xs"
4609
- },
4610
- md: {
4611
- padding: "0.75rem 1.75rem",
4612
- fontSize: "text-sm"
4613
- },
4614
- lg: {
4615
- padding: "0.875rem 2.25rem",
4616
- fontSize: "text-base"
4617
- },
4618
- xl: {
4619
- padding: "1.125rem 2.75rem",
4620
- fontSize: "text-lg"
4621
- }
4644
+ hoverColor: "none"
4622
4645
  },
4623
- variants: [
4624
- {
4625
- id: "primary",
4626
- name: "Primary",
4627
- enabled: true,
4628
- priority: 1,
4629
- background: {
4630
- type: "solid",
4631
- colorToken: "primary"
4632
- },
4633
- borderRadius: "rounded-md",
4634
- effects: {
4635
- hover: [{
4636
- effectId: "drop-shadow",
4637
- options: { intensity: "medium" }
4638
- }, {
4639
- effectId: "scale-up",
4640
- options: { scale: "1.02" }
4641
- }],
4642
- active: [{
4643
- effectId: "scale-down",
4644
- options: { scale: "0.98" }
4645
- }]
4646
+ roles: {
4647
+ primary: {
4648
+ kind: "complete",
4649
+ appearance: {
4650
+ background: {
4651
+ type: "surface",
4652
+ role: "link"
4653
+ },
4654
+ borderRadius: "rounded-none",
4655
+ sizes: editorialSizes,
4656
+ effects: { base: [{
4657
+ effectId: "border-bottom-grow",
4658
+ options: {
4659
+ height: 2,
4660
+ colorToken: "text",
4661
+ origin: "left"
4662
+ }
4663
+ }] }
4646
4664
  }
4647
4665
  },
4648
- {
4649
- id: "secondary",
4650
- name: "Secondary",
4651
- enabled: true,
4652
- priority: 2,
4653
- background: {
4654
- type: "surface",
4655
- role: "link"
4656
- },
4657
- borderRadius: "rounded-md",
4658
- border: { widthClass: "border-2" },
4659
- effects: { hover: [{
4660
- effectId: "background-on-hover",
4661
- options: { colorToken: "surface" }
4662
- }] }
4663
- },
4664
- {
4665
- id: "outline",
4666
- name: "Outline",
4667
- enabled: true,
4668
- priority: 3,
4669
- background: {
4670
- type: "surface",
4671
- role: "link"
4672
- },
4673
- borderRadius: "rounded-md",
4674
- border: { widthClass: "border-2" },
4675
- effects: { hover: [{
4676
- effectId: "background-on-hover",
4677
- options: { colorToken: "surface" }
4678
- }] }
4679
- },
4680
- {
4681
- id: "ghost",
4682
- name: "Ghost",
4683
- enabled: true,
4684
- priority: 3,
4685
- background: {
4686
- type: "surface",
4687
- role: "link"
4688
- },
4689
- borderRadius: "rounded-none",
4690
- sizes: {
4691
- sm: {
4692
- padding: "0.375rem 0",
4693
- fontSize: "text-xs"
4666
+ secondary: {
4667
+ kind: "complete",
4668
+ appearance: {
4669
+ background: {
4670
+ type: "surface",
4671
+ role: "link"
4694
4672
  },
4695
- md: {
4696
- padding: "0.5rem 0",
4697
- fontSize: "text-sm"
4673
+ borderRadius: "rounded-none",
4674
+ sizes: editorialSizes,
4675
+ effects: { base: [{
4676
+ effectId: "border-bottom-grow",
4677
+ options: {
4678
+ height: 1,
4679
+ colorToken: "mutedText",
4680
+ origin: "left"
4681
+ }
4682
+ }] }
4683
+ }
4684
+ },
4685
+ outline: {
4686
+ kind: "complete",
4687
+ appearance: {
4688
+ background: {
4689
+ type: "surface",
4690
+ role: "link"
4698
4691
  },
4699
- lg: {
4700
- padding: "0.625rem 0",
4701
- fontSize: "text-base"
4692
+ borderRadius: "rounded-none",
4693
+ sizes: editorialSizes,
4694
+ effects: { base: [{
4695
+ effectId: "border-bottom-grow",
4696
+ options: {
4697
+ height: 1,
4698
+ colorToken: "accent",
4699
+ origin: "left"
4700
+ }
4701
+ }] }
4702
+ }
4703
+ },
4704
+ ghost: {
4705
+ kind: "complete",
4706
+ appearance: {
4707
+ background: {
4708
+ type: "surface",
4709
+ role: "link"
4702
4710
  },
4703
- xl: {
4704
- padding: "0.75rem 0",
4705
- fontSize: "text-lg"
4706
- }
4707
- },
4708
- effects: { base: [{
4711
+ borderRadius: "rounded-none",
4712
+ sizes: editorialSizes
4713
+ }
4714
+ },
4715
+ accent: {
4716
+ kind: "derive",
4717
+ from: "primary",
4718
+ overrides: { effects: { base: [{
4709
4719
  effectId: "border-bottom-grow",
4710
4720
  options: {
4711
- height: 1,
4721
+ height: 2,
4712
4722
  colorToken: "accent",
4713
4723
  origin: "left"
4714
4724
  }
4715
- }] }
4725
+ }] } }
4716
4726
  }
4717
- ]
4727
+ }
4718
4728
  }
4719
4729
  });
4720
- //#endregion
4721
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
4722
- /**
4723
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
4724
- * that collapses as the button presses into it on hover. Authored for the
4725
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
4726
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
4727
- *
4728
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
4729
- * extension; the press is the shared `press-down` effect, which matches its
4730
- * translate to each variant's own shadow offset.
4731
- */
4732
- const joyStamp = defineButtonPersonality({
4733
- id: "joy-stamp",
4734
- name: "Joy Stamp",
4735
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
4730
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
4731
+ id: "pebble",
4732
+ accessibilityLabel: "Generously padded pill buttons",
4736
4733
  tags: {
4737
- tone: "bold",
4738
- energy: "vibrant",
4739
- motion: "expressive",
4734
+ tone: "classic",
4735
+ energy: "calm",
4736
+ motion: "standard",
4740
4737
  era: "organic"
4741
4738
  },
4742
- buttonSystem: {
4739
+ system: {
4743
4740
  global: {
4744
4741
  cornerStyle: "pill",
4745
- shadow: "high",
4746
4742
  textTransform: "none",
4747
- typography: "heading",
4748
- fontWeight: 700,
4749
- fontSize: "text-lg",
4743
+ fontWeight: 500,
4750
4744
  borderWidth: 2,
4751
4745
  hoverTransform: "none",
4752
4746
  hoverColor: "none"
4753
4747
  },
4754
4748
  sizes: {
4755
4749
  sm: {
4756
- padding: "0.625rem 1.25rem",
4757
- fontSize: "text-base"
4758
- },
4759
- md: {
4760
- padding: "0.875rem 1.75rem",
4761
- fontSize: "text-lg"
4750
+ padding: "0.625rem 1.75rem",
4751
+ fontSize: "text-sm"
4762
4752
  },
4753
+ md: { padding: "0.875rem 2.25rem" },
4763
4754
  lg: {
4764
- padding: "1.125rem 2.25rem",
4765
- fontSize: "text-xl"
4755
+ padding: "1.125rem 2.75rem",
4756
+ fontSize: "text-lg"
4766
4757
  },
4767
4758
  xl: {
4768
- padding: "1.25rem 2.75rem",
4769
- fontSize: "text-2xl"
4759
+ padding: "1.5rem 3.5rem",
4760
+ fontSize: "text-xl"
4770
4761
  }
4771
4762
  },
4772
- variants: [{
4773
- id: "primary",
4774
- name: "Primary",
4775
- enabled: true,
4776
- priority: 1,
4777
- background: {
4778
- type: "solid",
4779
- colorToken: "primary"
4763
+ roles: {
4764
+ primary: {
4765
+ kind: "complete",
4766
+ appearance: {
4767
+ background: {
4768
+ type: "solid",
4769
+ colorToken: "primary"
4770
+ },
4771
+ borderRadius: "rounded-full",
4772
+ effects: { hover: [{
4773
+ effectId: "darken-background",
4774
+ options: { amount: 100 }
4775
+ }] }
4776
+ }
4780
4777
  },
4781
- borderRadius: "rounded-full",
4782
- shadow: {
4783
- elevation: "high",
4784
- softness: "hard",
4785
- position: "bottom-right",
4786
- colorToken: "text"
4778
+ secondary: {
4779
+ kind: "complete",
4780
+ appearance: {
4781
+ background: {
4782
+ type: "surface",
4783
+ role: "link"
4784
+ },
4785
+ borderRadius: "rounded-full",
4786
+ border: { widthClass: "border-2" },
4787
+ effects: { hover: [{
4788
+ effectId: "background-on-hover",
4789
+ options: { colorToken: "accent" }
4790
+ }] }
4791
+ }
4787
4792
  },
4788
- effects: { hover: [{ effectId: "press-down" }] }
4789
- }, {
4790
- id: "secondary",
4791
- name: "Secondary",
4792
- enabled: true,
4793
- priority: 2,
4794
- background: {
4795
- type: "surface",
4796
- role: "link"
4797
- },
4798
- borderRadius: "rounded-full",
4799
- border: { widthClass: "border-2" },
4800
- shadow: {
4801
- elevation: "high",
4802
- softness: "hard",
4803
- position: "bottom-right",
4804
- colorToken: "secondary"
4805
- },
4806
- effects: { hover: [{ effectId: "press-down" }] }
4807
- }]
4793
+ outline: {
4794
+ kind: "complete",
4795
+ appearance: {
4796
+ background: {
4797
+ type: "surface",
4798
+ role: "link"
4799
+ },
4800
+ borderRadius: "rounded-full",
4801
+ border: { widthClass: "border" },
4802
+ effects: { hover: [{
4803
+ effectId: "background-on-hover",
4804
+ options: { colorToken: "surface" }
4805
+ }] }
4806
+ }
4807
+ },
4808
+ ghost: {
4809
+ kind: "complete",
4810
+ appearance: {
4811
+ background: {
4812
+ type: "surface",
4813
+ role: "link"
4814
+ },
4815
+ borderRadius: "rounded-full",
4816
+ sizes: {
4817
+ sm: {
4818
+ padding: "0.375rem 0.875rem",
4819
+ fontSize: "text-sm"
4820
+ },
4821
+ md: { padding: "0.5rem 1rem" },
4822
+ lg: {
4823
+ padding: "0.625rem 1.25rem",
4824
+ fontSize: "text-lg"
4825
+ },
4826
+ xl: {
4827
+ padding: "0.75rem 1.5rem",
4828
+ fontSize: "text-xl"
4829
+ }
4830
+ }
4831
+ }
4832
+ },
4833
+ accent: {
4834
+ kind: "derive",
4835
+ from: "primary",
4836
+ overrides: { background: {
4837
+ type: "solid",
4838
+ colorToken: "accent"
4839
+ } }
4840
+ }
4841
+ }
4808
4842
  }
4809
4843
  });
4810
- //#endregion
4811
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
4812
- /**
4813
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
4814
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
4815
- */
4816
- const ornateRitual = defineButtonPersonality({
4817
- id: "ornate-ritual",
4818
- name: "Ornate Ritual",
4819
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
4844
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
4845
+ id: "brushed-wash",
4846
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
4820
4847
  tags: {
4821
4848
  tone: "classic",
4822
4849
  energy: "vibrant",
4823
- motion: "subtle",
4850
+ motion: "standard",
4824
4851
  era: "organic"
4825
4852
  },
4826
- buttonSystem: {
4853
+ system: {
4827
4854
  global: {
4828
4855
  cornerStyle: "rounded",
4829
- textTransform: "uppercase",
4830
- fontWeight: 600,
4856
+ shadow: "low",
4857
+ textTransform: "none",
4858
+ fontWeight: 500,
4831
4859
  borderWidth: 1,
4832
4860
  hoverTransform: "none",
4833
- hoverColor: "none",
4834
- letterSpacing: "loose"
4861
+ hoverColor: "none"
4835
4862
  },
4836
4863
  sizes: {
4837
4864
  sm: {
4838
- padding: "0.5625rem 1.25rem",
4839
- fontSize: "text-xs"
4840
- },
4841
- md: {
4842
- padding: "0.75rem 1.75rem",
4843
- fontSize: "text-xs"
4865
+ padding: "0.75rem 2rem",
4866
+ fontSize: "text-sm"
4844
4867
  },
4868
+ md: { padding: "1rem 2.5rem" },
4845
4869
  lg: {
4846
- padding: "0.875rem 2.25rem",
4847
- fontSize: "text-sm"
4870
+ padding: "1.25rem 3rem",
4871
+ fontSize: "text-lg"
4848
4872
  },
4849
4873
  xl: {
4850
- padding: "1rem 2.75rem",
4851
- fontSize: "text-base"
4874
+ padding: "1.625rem 3.75rem",
4875
+ fontSize: "text-xl"
4852
4876
  }
4853
4877
  },
4854
- variants: [
4855
- {
4856
- id: "primary",
4857
- name: "Primary",
4858
- enabled: true,
4859
- priority: 1,
4860
- background: {
4861
- type: "solid",
4862
- colorToken: "primary"
4863
- },
4864
- borderRadius: "rounded-md",
4865
- border: { widthClass: "border" },
4866
- effects: {
4867
- hover: [{
4868
- effectId: "background-on-hover",
4869
- options: { colorToken: "primary-100" }
4870
- }],
4871
- active: [{
4872
- effectId: "scale-down",
4873
- options: { scale: "0.98" }
4874
- }]
4878
+ roles: {
4879
+ primary: {
4880
+ kind: "complete",
4881
+ appearance: {
4882
+ background: {
4883
+ type: "gradient",
4884
+ stops: ["primary", "accent"],
4885
+ direction: "to-r",
4886
+ foregroundToken: "primaryForeground"
4887
+ },
4888
+ borderRadius: "rounded-lg",
4889
+ shadow: {
4890
+ elevation: "low",
4891
+ softness: "soft",
4892
+ position: "bottom"
4893
+ }
4875
4894
  }
4876
4895
  },
4877
- {
4878
- id: "secondary",
4879
- name: "Secondary",
4880
- enabled: true,
4881
- priority: 2,
4882
- background: {
4883
- type: "solid",
4884
- colorToken: "secondary"
4885
- },
4886
- borderRadius: "rounded-md",
4887
- border: { widthClass: "border" },
4888
- effects: { hover: [{
4889
- effectId: "background-on-hover",
4890
- options: { colorToken: "surface" }
4891
- }] }
4892
- },
4893
- {
4894
- id: "outline",
4895
- name: "Outline",
4896
- enabled: true,
4897
- priority: 3,
4898
- background: {
4899
- type: "surface",
4900
- role: "link"
4901
- },
4902
- borderRadius: "rounded-md",
4903
- border: { widthClass: "border" },
4904
- effects: { hover: [{
4905
- effectId: "background-on-hover",
4906
- options: { colorToken: "muted" }
4907
- }] }
4908
- },
4909
- {
4910
- id: "ghost",
4911
- name: "Ghost",
4912
- enabled: true,
4913
- priority: 3,
4914
- background: {
4915
- type: "surface",
4916
- role: "link"
4917
- },
4918
- borderRadius: "rounded-none",
4919
- sizes: {
4920
- sm: {
4921
- padding: "0.375rem 0",
4922
- fontSize: "text-xs"
4896
+ secondary: {
4897
+ kind: "complete",
4898
+ appearance: {
4899
+ background: {
4900
+ type: "gradient",
4901
+ stops: ["secondary", "accent"],
4902
+ direction: "to-br",
4903
+ foregroundToken: "primaryForeground"
4923
4904
  },
4924
- md: {
4925
- padding: "0.5rem 0",
4926
- fontSize: "text-sm"
4905
+ borderRadius: "rounded-lg",
4906
+ shadow: {
4907
+ elevation: "low",
4908
+ softness: "soft",
4909
+ position: "bottom"
4910
+ }
4911
+ }
4912
+ },
4913
+ outline: {
4914
+ kind: "complete",
4915
+ appearance: {
4916
+ background: {
4917
+ type: "surface",
4918
+ role: "link"
4927
4919
  },
4928
- lg: {
4929
- padding: "0.625rem 0",
4930
- fontSize: "text-base"
4920
+ borderRadius: "rounded-lg",
4921
+ border: { widthClass: "border" },
4922
+ effects: { hover: [{
4923
+ effectId: "background-on-hover",
4924
+ options: { colorToken: "surface" }
4925
+ }] }
4926
+ }
4927
+ },
4928
+ ghost: {
4929
+ kind: "complete",
4930
+ appearance: {
4931
+ background: {
4932
+ type: "surface",
4933
+ role: "link"
4931
4934
  },
4932
- xl: {
4933
- padding: "0.75rem 0",
4934
- fontSize: "text-lg"
4935
- }
4936
- },
4937
- effects: { base: [{
4938
- effectId: "border-bottom-grow",
4939
- options: {
4940
- height: 1,
4941
- colorToken: "accent",
4942
- origin: "left"
4943
- }
4944
- }] }
4935
+ borderRadius: "rounded-lg",
4936
+ effects: { hover: [{
4937
+ effectId: "background-on-hover",
4938
+ options: { colorToken: "surface" }
4939
+ }] }
4940
+ }
4941
+ },
4942
+ accent: {
4943
+ kind: "derive",
4944
+ from: "primary",
4945
+ overrides: { background: {
4946
+ type: "solid",
4947
+ colorToken: "accent"
4948
+ } }
4945
4949
  }
4946
- ]
4947
- }
4948
- });
4949
- //#endregion
4950
- //#region ../theme-core/src/buttons/personalities/pebble.ts
4951
- /**
4952
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
4953
- * and natural; pairs well with wellness/yoga/dance brands.
4954
- */
4955
- const pebble = defineButtonPersonality({
4956
- id: "pebble",
4957
- name: "Pebble",
4958
- description: "Generous pill buttons with a quiet colour-softening hover.",
4950
+ }
4951
+ }
4952
+ });
4953
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
4954
+ id: "ink-stamp",
4955
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
4959
4956
  tags: {
4960
- tone: "classic",
4961
- energy: "calm",
4957
+ tone: "bold",
4958
+ energy: "vibrant",
4962
4959
  motion: "standard",
4963
4960
  era: "organic"
4964
4961
  },
4965
- buttonSystem: {
4962
+ system: {
4966
4963
  global: {
4967
- cornerStyle: "pill",
4968
- textTransform: "none",
4969
- fontWeight: 500,
4970
- borderWidth: 2,
4964
+ cornerStyle: "rounded",
4965
+ textTransform: "uppercase",
4966
+ fontWeight: 600,
4967
+ borderWidth: 1,
4971
4968
  hoverTransform: "none",
4972
- hoverColor: "none"
4969
+ hoverColor: "none",
4970
+ letterSpacing: "loose"
4973
4971
  },
4974
4972
  sizes: {
4975
4973
  sm: {
4976
- padding: "0.625rem 1.75rem",
4974
+ padding: "0.5rem 1.25rem",
4975
+ fontSize: "text-xs"
4976
+ },
4977
+ md: {
4978
+ padding: "0.75rem 1.75rem",
4977
4979
  fontSize: "text-sm"
4978
4980
  },
4979
- md: { padding: "0.875rem 2.25rem" },
4980
4981
  lg: {
4981
- padding: "1.125rem 2.75rem",
4982
- fontSize: "text-lg"
4982
+ padding: "0.875rem 2.25rem",
4983
+ fontSize: "text-base"
4983
4984
  },
4984
4985
  xl: {
4985
- padding: "1.5rem 3.5rem",
4986
- fontSize: "text-xl"
4986
+ padding: "1.125rem 2.75rem",
4987
+ fontSize: "text-lg"
4987
4988
  }
4988
4989
  },
4989
- variants: [
4990
- {
4991
- id: "primary",
4992
- name: "Primary",
4993
- enabled: true,
4994
- priority: 1,
4995
- background: {
4996
- type: "solid",
4997
- colorToken: "primary"
4998
- },
4999
- borderRadius: "rounded-full",
5000
- effects: { hover: [{
5001
- effectId: "darken-background",
5002
- options: { amount: 100 }
5003
- }] }
4990
+ roles: {
4991
+ primary: {
4992
+ kind: "complete",
4993
+ appearance: {
4994
+ background: {
4995
+ type: "solid",
4996
+ colorToken: "primary"
4997
+ },
4998
+ borderRadius: "rounded-md",
4999
+ effects: {
5000
+ hover: [{
5001
+ effectId: "drop-shadow",
5002
+ options: { intensity: "medium" }
5003
+ }, {
5004
+ effectId: "scale-up",
5005
+ options: { scale: "1.02" }
5006
+ }],
5007
+ active: [{
5008
+ effectId: "scale-down",
5009
+ options: { scale: "0.98" }
5010
+ }]
5011
+ }
5012
+ }
5004
5013
  },
5005
- {
5006
- id: "secondary",
5007
- name: "Secondary",
5008
- enabled: true,
5009
- priority: 2,
5010
- background: {
5011
- type: "surface",
5012
- role: "link"
5013
- },
5014
- borderRadius: "rounded-full",
5015
- border: { widthClass: "border-2" },
5016
- effects: { hover: [{
5017
- effectId: "background-on-hover",
5018
- options: { colorToken: "accent" }
5019
- }] }
5014
+ secondary: {
5015
+ kind: "complete",
5016
+ appearance: {
5017
+ background: {
5018
+ type: "surface",
5019
+ role: "link"
5020
+ },
5021
+ borderRadius: "rounded-md",
5022
+ border: { widthClass: "border-2" },
5023
+ effects: { hover: [{
5024
+ effectId: "background-on-hover",
5025
+ options: { colorToken: "surface" }
5026
+ }] }
5027
+ }
5020
5028
  },
5021
- {
5022
- id: "outline",
5023
- name: "Outline",
5024
- enabled: true,
5025
- priority: 3,
5026
- background: {
5027
- type: "surface",
5028
- role: "link"
5029
- },
5030
- borderRadius: "rounded-full",
5031
- border: { widthClass: "border" },
5032
- effects: { hover: [{
5033
- effectId: "background-on-hover",
5034
- options: { colorToken: "surface" }
5035
- }] }
5029
+ outline: {
5030
+ kind: "complete",
5031
+ appearance: {
5032
+ background: {
5033
+ type: "surface",
5034
+ role: "link"
5035
+ },
5036
+ borderRadius: "rounded-md",
5037
+ border: { widthClass: "border-2" },
5038
+ effects: { hover: [{
5039
+ effectId: "background-on-hover",
5040
+ options: { colorToken: "surface" }
5041
+ }] }
5042
+ }
5036
5043
  },
5037
- {
5038
- id: "ghost",
5039
- name: "Ghost",
5040
- enabled: true,
5041
- priority: 3,
5042
- background: {
5043
- type: "surface",
5044
- role: "link"
5045
- },
5046
- borderRadius: "rounded-full",
5047
- sizes: {
5048
- sm: {
5049
- padding: "0.375rem 0.875rem",
5050
- fontSize: "text-sm"
5044
+ ghost: {
5045
+ kind: "complete",
5046
+ appearance: {
5047
+ background: {
5048
+ type: "surface",
5049
+ role: "link"
5051
5050
  },
5052
- md: { padding: "0.5rem 1rem" },
5053
- lg: {
5054
- padding: "0.625rem 1.25rem",
5055
- fontSize: "text-lg"
5051
+ borderRadius: "rounded-none",
5052
+ sizes: {
5053
+ sm: {
5054
+ padding: "0.375rem 0",
5055
+ fontSize: "text-xs"
5056
+ },
5057
+ md: {
5058
+ padding: "0.5rem 0",
5059
+ fontSize: "text-sm"
5060
+ },
5061
+ lg: {
5062
+ padding: "0.625rem 0",
5063
+ fontSize: "text-base"
5064
+ },
5065
+ xl: {
5066
+ padding: "0.75rem 0",
5067
+ fontSize: "text-lg"
5068
+ }
5056
5069
  },
5057
- xl: {
5058
- padding: "0.75rem 1.5rem",
5059
- fontSize: "text-xl"
5060
- }
5070
+ effects: { base: [{
5071
+ effectId: "border-bottom-grow",
5072
+ options: {
5073
+ height: 1,
5074
+ colorToken: "accent",
5075
+ origin: "left"
5076
+ }
5077
+ }] }
5061
5078
  }
5079
+ },
5080
+ accent: {
5081
+ kind: "derive",
5082
+ from: "primary",
5083
+ overrides: { background: {
5084
+ type: "solid",
5085
+ colorToken: "accent"
5086
+ } }
5062
5087
  }
5063
- ]
5088
+ }
5064
5089
  }
5065
5090
  });
5066
- //#endregion
5067
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
5068
- /**
5069
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
5070
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
5071
- * responsible for contrast rather than reversing the button roles.
5072
- */
5073
- const quietArrow = defineButtonPersonality({
5074
- id: "quiet-arrow",
5075
- name: "Quiet Arrow",
5076
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
5091
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
5092
+ id: "flat-ink",
5093
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
5077
5094
  tags: {
5078
5095
  tone: "classic",
5079
5096
  energy: "calm",
5080
5097
  motion: "subtle",
5081
5098
  era: "editorial"
5082
5099
  },
5083
- buttonSystem: {
5100
+ system: {
5084
5101
  global: {
5085
5102
  cornerStyle: "rounded",
5086
- textTransform: "uppercase",
5087
- fontWeight: 500,
5103
+ textTransform: "none",
5104
+ fontWeight: 600,
5088
5105
  borderWidth: 1,
5089
5106
  typography: "body",
5090
- fontSize: "text-sm",
5091
- letterSpacing: "loose",
5092
- hoverTransform: "none",
5107
+ letterSpacing: "tight",
5108
+ paddingPreset: "default",
5109
+ hoverTransform: "lift",
5093
5110
  hoverColor: "none"
5094
5111
  },
5095
5112
  sizes: {
5096
5113
  sm: {
5097
- padding: "0.625rem 1.25rem",
5098
- fontSize: "text-xs"
5099
- },
5100
- md: {
5101
- padding: "0.8125rem 1.75rem",
5114
+ padding: "0.625rem 1.125rem",
5102
5115
  fontSize: "text-sm"
5103
5116
  },
5117
+ md: { padding: "0.8125rem 1.375rem" },
5104
5118
  lg: {
5105
- padding: "0.9375rem 2.125rem",
5106
- fontSize: "text-sm"
5119
+ padding: "0.9375rem 1.625rem",
5120
+ fontSize: "text-lg"
5107
5121
  },
5108
5122
  xl: {
5109
- padding: "1.0625rem 2.5rem",
5110
- fontSize: "text-base"
5123
+ padding: "1.0625rem 2rem",
5124
+ fontSize: "text-xl"
5111
5125
  }
5112
5126
  },
5113
- variants: [
5114
- {
5115
- id: "primary",
5116
- name: "Primary",
5117
- enabled: true,
5118
- priority: 1,
5119
- background: {
5120
- type: "solid",
5121
- colorToken: "primary"
5122
- },
5123
- borderRadius: "rounded-xl",
5124
- affordance: { iconId: "ArrowRight" },
5125
- effects: { hover: [{
5126
- effectId: "darken-background",
5127
- options: { amount: 100 }
5128
- }] }
5127
+ roles: {
5128
+ primary: {
5129
+ kind: "complete",
5130
+ appearance: {
5131
+ background: {
5132
+ type: "solid",
5133
+ colorToken: "primary"
5134
+ },
5135
+ borderRadius: "rounded-lg",
5136
+ affordance: { iconId: "ArrowRight" },
5137
+ effects: { hover: [{
5138
+ effectId: "lift",
5139
+ options: { translateY: "-2px" }
5140
+ }, {
5141
+ effectId: "background-on-hover",
5142
+ options: { colorToken: "secondary" }
5143
+ }] }
5144
+ }
5129
5145
  },
5130
- {
5131
- id: "secondary",
5132
- name: "Secondary",
5133
- enabled: true,
5134
- priority: 2,
5135
- background: {
5136
- type: "surface",
5137
- role: "link"
5138
- },
5139
- borderRadius: "rounded-xl",
5140
- border: { widthClass: "border" },
5141
- affordance: { iconId: "ArrowRight" },
5142
- effects: { hover: [{
5143
- effectId: "background-on-hover",
5144
- options: { colorToken: "surfaceAlt" }
5145
- }] }
5146
+ secondary: {
5147
+ kind: "complete",
5148
+ appearance: {
5149
+ background: {
5150
+ type: "surface",
5151
+ role: "link"
5152
+ },
5153
+ borderRadius: "rounded-lg",
5154
+ border: { widthClass: "border" },
5155
+ effects: { hover: [{
5156
+ effectId: "lift",
5157
+ options: { translateY: "-2px" }
5158
+ }, {
5159
+ effectId: "background-on-hover",
5160
+ options: { colorToken: "surfaceAlt" }
5161
+ }] }
5162
+ }
5146
5163
  },
5147
- {
5148
- id: "outline",
5149
- name: "Outline",
5150
- enabled: true,
5151
- priority: 3,
5152
- background: {
5153
- type: "surface",
5154
- role: "link"
5155
- },
5156
- borderRadius: "rounded-xl",
5157
- border: { widthClass: "border" }
5164
+ outline: {
5165
+ kind: "complete",
5166
+ appearance: {
5167
+ background: {
5168
+ type: "surface",
5169
+ role: "link"
5170
+ },
5171
+ borderRadius: "rounded-lg",
5172
+ border: { widthClass: "border" },
5173
+ effects: { hover: [{
5174
+ effectId: "lift",
5175
+ options: { translateY: "-2px" }
5176
+ }, {
5177
+ effectId: "background-on-hover",
5178
+ options: { colorToken: "surfaceAlt" }
5179
+ }] }
5180
+ }
5158
5181
  },
5159
- {
5160
- id: "ghost",
5161
- name: "Ghost",
5162
- enabled: true,
5163
- priority: 3,
5164
- background: {
5165
- type: "surface",
5166
- role: "link"
5167
- },
5168
- borderRadius: "rounded-xl"
5182
+ ghost: {
5183
+ kind: "complete",
5184
+ appearance: {
5185
+ background: {
5186
+ type: "surface",
5187
+ role: "link"
5188
+ },
5189
+ borderRadius: "rounded-lg",
5190
+ effects: { hover: [{
5191
+ effectId: "lift",
5192
+ options: { translateY: "-2px" }
5193
+ }] }
5194
+ }
5195
+ },
5196
+ accent: {
5197
+ kind: "complete",
5198
+ appearance: {
5199
+ background: {
5200
+ type: "solid",
5201
+ colorToken: "accent"
5202
+ },
5203
+ borderRadius: "rounded-lg",
5204
+ affordance: { iconId: "ArrowRight" },
5205
+ effects: { hover: [{
5206
+ effectId: "lift",
5207
+ options: { translateY: "-2px" }
5208
+ }] }
5209
+ }
5169
5210
  }
5170
- ]
5211
+ }
5171
5212
  }
5172
5213
  });
5173
- //#endregion
5174
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
5175
- /**
5176
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
5177
- * motion. Suits energetic schools, performers, festivals, and community brands
5178
- * that need calls to action to feel loud without becoming visually chaotic.
5179
- */
5180
- const showtimePill = defineButtonPersonality({
5214
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
5181
5215
  id: "showtime-pill",
5182
- name: "Showtime Pill",
5183
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
5216
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
5184
5217
  tags: {
5185
5218
  tone: "bold",
5186
5219
  energy: "vibrant",
5187
5220
  motion: "expressive",
5188
5221
  era: "modern"
5189
5222
  },
5190
- buttonSystem: {
5223
+ system: {
5191
5224
  global: {
5192
5225
  cornerStyle: "pill",
5193
5226
  shadow: "low",
@@ -5218,272 +5251,376 @@ const showtimePill = defineButtonPersonality({
5218
5251
  fontSize: "1.125rem"
5219
5252
  }
5220
5253
  },
5221
- variants: [
5222
- {
5223
- id: "primary",
5224
- name: "Primary",
5225
- enabled: true,
5226
- priority: 1,
5227
- background: {
5228
- type: "solid",
5229
- colorToken: "primary"
5230
- },
5231
- borderRadius: "rounded-full",
5232
- effects: { hover: [{ effectId: "pop" }] }
5254
+ roles: {
5255
+ primary: {
5256
+ kind: "complete",
5257
+ appearance: {
5258
+ background: {
5259
+ type: "solid",
5260
+ colorToken: "primary"
5261
+ },
5262
+ borderRadius: "rounded-full",
5263
+ effects: { hover: [{ effectId: "pop" }] }
5264
+ }
5233
5265
  },
5234
- {
5235
- id: "secondary",
5236
- name: "Secondary",
5237
- enabled: true,
5238
- priority: 2,
5239
- background: {
5240
- type: "surface",
5241
- role: "link"
5242
- },
5243
- borderRadius: "rounded-full",
5244
- border: { widthClass: "border-2" },
5245
- effects: { hover: [{ effectId: "pop" }] }
5266
+ secondary: {
5267
+ kind: "complete",
5268
+ appearance: {
5269
+ background: {
5270
+ type: "surface",
5271
+ role: "link"
5272
+ },
5273
+ borderRadius: "rounded-full",
5274
+ border: { widthClass: "border-2" },
5275
+ effects: { hover: [{ effectId: "pop" }] }
5276
+ }
5246
5277
  },
5247
- {
5248
- id: "hero",
5249
- name: "Hero",
5250
- enabled: true,
5251
- priority: 1,
5252
- background: {
5253
- type: "solid",
5254
- colorToken: "secondary"
5255
- },
5256
- borderRadius: "rounded-full",
5257
- effects: { hover: [{ effectId: "pop" }] }
5278
+ outline: {
5279
+ kind: "complete",
5280
+ appearance: {
5281
+ background: {
5282
+ type: "surface",
5283
+ role: "link"
5284
+ },
5285
+ borderRadius: "rounded-full",
5286
+ border: { widthClass: "border-2" },
5287
+ effects: { hover: [{
5288
+ effectId: "background-on-hover",
5289
+ options: { colorToken: "background" }
5290
+ }] }
5291
+ }
5258
5292
  },
5259
- {
5260
- id: "header",
5261
- name: "Header",
5262
- enabled: true,
5263
- priority: 2,
5264
- background: {
5293
+ ghost: {
5294
+ kind: "complete",
5295
+ appearance: {
5296
+ background: {
5297
+ type: "surface",
5298
+ role: "link"
5299
+ },
5300
+ borderRadius: "rounded-full",
5301
+ effects: { hover: [{
5302
+ effectId: "background-on-hover",
5303
+ options: { colorToken: "surface" }
5304
+ }] }
5305
+ }
5306
+ },
5307
+ accent: {
5308
+ kind: "complete",
5309
+ appearance: {
5310
+ background: {
5311
+ type: "solid",
5312
+ colorToken: "secondary"
5313
+ },
5314
+ borderRadius: "rounded-full",
5315
+ effects: { hover: [{ effectId: "pop" }] }
5316
+ }
5317
+ }
5318
+ }
5319
+ }
5320
+ });
5321
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
5322
+ id: "joy-stamp",
5323
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
5324
+ tags: {
5325
+ tone: "bold",
5326
+ energy: "vibrant",
5327
+ motion: "expressive",
5328
+ era: "organic"
5329
+ },
5330
+ system: {
5331
+ global: {
5332
+ cornerStyle: "pill",
5333
+ shadow: "high",
5334
+ textTransform: "none",
5335
+ typography: "heading",
5336
+ fontWeight: 700,
5337
+ fontSize: "text-lg",
5338
+ borderWidth: 2,
5339
+ hoverTransform: "none",
5340
+ hoverColor: "none"
5341
+ },
5342
+ sizes: {
5343
+ sm: {
5344
+ padding: "0.625rem 1.25rem",
5345
+ fontSize: "text-base"
5346
+ },
5347
+ md: {
5348
+ padding: "0.875rem 1.75rem",
5349
+ fontSize: "text-lg"
5350
+ },
5351
+ lg: {
5352
+ padding: "1.125rem 2.25rem",
5353
+ fontSize: "text-xl"
5354
+ },
5355
+ xl: {
5356
+ padding: "1.25rem 2.75rem",
5357
+ fontSize: "text-2xl"
5358
+ }
5359
+ },
5360
+ roles: {
5361
+ primary: {
5362
+ kind: "complete",
5363
+ appearance: {
5364
+ background: {
5365
+ type: "solid",
5366
+ colorToken: "primary"
5367
+ },
5368
+ borderRadius: "rounded-full",
5369
+ shadow: {
5370
+ elevation: "high",
5371
+ softness: "hard",
5372
+ position: "bottom-right",
5373
+ colorToken: "text"
5374
+ },
5375
+ effects: { hover: [{ effectId: "press-down" }] }
5376
+ }
5377
+ },
5378
+ secondary: {
5379
+ kind: "complete",
5380
+ appearance: {
5381
+ background: {
5382
+ type: "surface",
5383
+ role: "link"
5384
+ },
5385
+ borderRadius: "rounded-full",
5386
+ border: { widthClass: "border-2" },
5387
+ shadow: {
5388
+ elevation: "high",
5389
+ softness: "hard",
5390
+ position: "bottom-right",
5391
+ colorToken: "secondary"
5392
+ },
5393
+ effects: { hover: [{ effectId: "press-down" }] }
5394
+ }
5395
+ },
5396
+ outline: {
5397
+ kind: "derive",
5398
+ from: "secondary"
5399
+ },
5400
+ ghost: {
5401
+ kind: "complete",
5402
+ appearance: {
5403
+ background: {
5404
+ type: "surface",
5405
+ role: "link"
5406
+ },
5407
+ borderRadius: "rounded-full",
5408
+ effects: { hover: [{ effectId: "press-down" }] }
5409
+ }
5410
+ },
5411
+ accent: {
5412
+ kind: "derive",
5413
+ from: "primary",
5414
+ overrides: { background: {
5265
5415
  type: "solid",
5266
- colorToken: "background"
5267
- },
5268
- borderRadius: "rounded-full",
5269
- border: { widthClass: "border-2" },
5270
- effects: { hover: [{
5271
- effectId: "background-on-hover",
5272
- options: { colorToken: "surface" }
5273
- }] }
5416
+ colorToken: "accent"
5417
+ } }
5418
+ }
5419
+ }
5420
+ }
5421
+ });
5422
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
5423
+ id: "ornate-ritual",
5424
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
5425
+ tags: {
5426
+ tone: "classic",
5427
+ energy: "vibrant",
5428
+ motion: "subtle",
5429
+ era: "organic"
5430
+ },
5431
+ system: {
5432
+ global: {
5433
+ cornerStyle: "rounded",
5434
+ textTransform: "uppercase",
5435
+ fontWeight: 600,
5436
+ borderWidth: 1,
5437
+ hoverTransform: "none",
5438
+ hoverColor: "none",
5439
+ letterSpacing: "loose"
5440
+ },
5441
+ sizes: {
5442
+ sm: {
5443
+ padding: "0.5625rem 1.25rem",
5444
+ fontSize: "text-xs"
5274
5445
  },
5275
- {
5276
- id: "outline",
5277
- name: "Outline",
5278
- enabled: true,
5279
- priority: 3,
5280
- background: {
5281
- type: "surface",
5282
- role: "link"
5283
- },
5284
- borderRadius: "rounded-full",
5285
- border: { widthClass: "border-2" },
5286
- effects: { hover: [{
5287
- effectId: "background-on-hover",
5288
- options: { colorToken: "background" }
5289
- }] }
5446
+ md: {
5447
+ padding: "0.75rem 1.75rem",
5448
+ fontSize: "text-xs"
5290
5449
  },
5291
- {
5292
- id: "ghost",
5293
- name: "Ghost",
5294
- enabled: true,
5295
- priority: 3,
5296
- background: {
5297
- type: "surface",
5298
- role: "link"
5299
- },
5300
- borderRadius: "rounded-full",
5301
- effects: { hover: [{
5302
- effectId: "background-on-hover",
5303
- options: { colorToken: "surface" }
5304
- }] }
5450
+ lg: {
5451
+ padding: "0.875rem 2.25rem",
5452
+ fontSize: "text-sm"
5453
+ },
5454
+ xl: {
5455
+ padding: "1rem 2.75rem",
5456
+ fontSize: "text-base"
5305
5457
  }
5306
- ]
5307
- }
5308
- });
5309
- //#endregion
5310
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
5311
- /**
5312
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
5313
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
5314
- */
5315
- const softPill = defineButtonPersonality({
5316
- id: "soft-pill",
5317
- name: "Soft Pill",
5318
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
5319
- tags: {
5320
- tone: "classic",
5321
- energy: "calm",
5322
- motion: "subtle",
5323
- era: "organic"
5324
- },
5325
- buttonSystem: {
5326
- global: {
5327
- cornerStyle: "pill",
5328
- shadow: "low",
5329
- textTransform: "none",
5330
- fontWeight: 500,
5331
- borderWidth: 2,
5332
- hoverTransform: "lift",
5333
- hoverColor: "none"
5334
5458
  },
5335
- variants: [
5336
- {
5337
- id: "primary",
5338
- name: "Primary",
5339
- enabled: true,
5340
- priority: 1,
5341
- background: {
5342
- type: "solid",
5343
- colorToken: "primary"
5344
- },
5345
- borderRadius: "rounded-full",
5346
- shadow: {
5347
- elevation: "low",
5348
- softness: "soft",
5349
- position: "bottom"
5350
- },
5351
- effects: {
5352
- hover: [{
5353
- effectId: "lift",
5354
- options: { translateY: "-1px" }
5355
- }],
5356
- active: [{
5357
- effectId: "scale-down",
5358
- options: { scale: "0.98" }
5359
- }]
5459
+ roles: {
5460
+ primary: {
5461
+ kind: "complete",
5462
+ appearance: {
5463
+ background: {
5464
+ type: "solid",
5465
+ colorToken: "primary"
5466
+ },
5467
+ borderRadius: "rounded-md",
5468
+ border: { widthClass: "border" },
5469
+ effects: {
5470
+ hover: [{
5471
+ effectId: "background-on-hover",
5472
+ options: { colorToken: "primary-100" }
5473
+ }],
5474
+ active: [{
5475
+ effectId: "scale-down",
5476
+ options: { scale: "0.98" }
5477
+ }]
5478
+ }
5360
5479
  }
5361
5480
  },
5362
- {
5363
- id: "secondary",
5364
- name: "Secondary",
5365
- enabled: true,
5366
- priority: 2,
5367
- background: {
5368
- type: "surface",
5369
- role: "link"
5370
- },
5371
- borderRadius: "rounded-full",
5372
- border: { widthClass: "border-2" },
5373
- effects: { hover: [{
5374
- effectId: "background-on-hover",
5375
- options: { colorToken: "surface" }
5376
- }] }
5481
+ secondary: {
5482
+ kind: "complete",
5483
+ appearance: {
5484
+ background: {
5485
+ type: "solid",
5486
+ colorToken: "secondary"
5487
+ },
5488
+ borderRadius: "rounded-md",
5489
+ border: { widthClass: "border" },
5490
+ effects: { hover: [{
5491
+ effectId: "background-on-hover",
5492
+ options: { colorToken: "surface" }
5493
+ }] }
5494
+ }
5377
5495
  },
5378
- {
5379
- id: "outline",
5380
- name: "Outline",
5381
- enabled: true,
5382
- priority: 3,
5383
- background: {
5384
- type: "surface",
5385
- role: "link"
5386
- },
5387
- borderRadius: "rounded-full",
5388
- border: { widthClass: "border" },
5389
- effects: { hover: [{
5390
- effectId: "background-on-hover",
5391
- options: { colorToken: "surface" }
5392
- }] }
5496
+ outline: {
5497
+ kind: "complete",
5498
+ appearance: {
5499
+ background: {
5500
+ type: "surface",
5501
+ role: "link"
5502
+ },
5503
+ borderRadius: "rounded-md",
5504
+ border: { widthClass: "border" },
5505
+ effects: { hover: [{
5506
+ effectId: "background-on-hover",
5507
+ options: { colorToken: "muted" }
5508
+ }] }
5509
+ }
5393
5510
  },
5394
- {
5395
- id: "ghost",
5396
- name: "Ghost",
5397
- enabled: true,
5398
- priority: 3,
5399
- background: {
5400
- type: "surface",
5401
- role: "link"
5402
- },
5403
- borderRadius: "rounded-full",
5404
- effects: { hover: [{
5405
- effectId: "background-on-hover",
5406
- options: { colorToken: "surface" }
5407
- }] }
5511
+ ghost: {
5512
+ kind: "complete",
5513
+ appearance: {
5514
+ background: {
5515
+ type: "surface",
5516
+ role: "link"
5517
+ },
5518
+ borderRadius: "rounded-none",
5519
+ sizes: {
5520
+ sm: {
5521
+ padding: "0.375rem 0",
5522
+ fontSize: "text-xs"
5523
+ },
5524
+ md: {
5525
+ padding: "0.5rem 0",
5526
+ fontSize: "text-sm"
5527
+ },
5528
+ lg: {
5529
+ padding: "0.625rem 0",
5530
+ fontSize: "text-base"
5531
+ },
5532
+ xl: {
5533
+ padding: "0.75rem 0",
5534
+ fontSize: "text-lg"
5535
+ }
5536
+ },
5537
+ effects: { base: [{
5538
+ effectId: "border-bottom-grow",
5539
+ options: {
5540
+ height: 1,
5541
+ colorToken: "accent",
5542
+ origin: "left"
5543
+ }
5544
+ }] }
5545
+ }
5546
+ },
5547
+ accent: {
5548
+ kind: "derive",
5549
+ from: "primary",
5550
+ overrides: { background: {
5551
+ type: "solid",
5552
+ colorToken: "accent"
5553
+ } }
5408
5554
  }
5409
- ]
5555
+ }
5410
5556
  }
5411
5557
  });
5412
5558
  //#endregion
5413
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
5414
- const solidSecondary = {
5415
- id: "secondary",
5416
- name: "Secondary",
5417
- enabled: true,
5418
- priority: 2,
5419
- background: {
5420
- type: "solid",
5421
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
5422
- },
5423
- borderRadius: "rounded-full",
5424
- shadow: {
5425
- elevation: "none",
5426
- softness: null,
5427
- position: "bottom"
5428
- },
5429
- effects: {
5430
- hover: [{
5431
- effectId: "background-on-hover-alpha",
5432
- options: {
5433
- colorToken: "secondary",
5434
- opacity: 88
5435
- }
5436
- }],
5437
- active: [{
5438
- effectId: "scale-down",
5439
- options: { scale: "0.98" }
5440
- }]
5441
- }
5442
- };
5443
- //#endregion
5444
- //#region ../theme-core/src/buttons/personalities/index.ts
5445
- const buttonPersonalities = [
5446
- softPill,
5447
- defineButtonPersonality({
5448
- id: "two-tone-pill",
5449
- name: "Two-tone Pill",
5450
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
5451
- tags: softPill.tags,
5452
- buttonSystem: {
5453
- ...softPill.buttonSystem,
5454
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
5455
- }
5456
- }),
5457
- earthPill,
5458
- confidentChip,
5459
- editorialLink,
5460
- pebble,
5461
- inkStamp,
5462
- flatInk,
5463
- brushedWash,
5464
- showtimePill,
5465
- joyStamp,
5466
- ornateRitual,
5467
- quietArrow
5559
+ //#region ../theme-core/src/buttons/styles/registry.ts
5560
+ const buttonStyleRecipes = [
5561
+ softPillRecipe,
5562
+ earthPillRecipe,
5563
+ confidentChipRecipe,
5564
+ editorialLinkRecipe,
5565
+ pebbleRecipe,
5566
+ inkStampRecipe,
5567
+ flatInkRecipe,
5568
+ brushedWashRecipe,
5569
+ showtimePillRecipe,
5570
+ joyStampRecipe,
5571
+ ornateRitualRecipe,
5572
+ quietArrowRecipe
5468
5573
  ];
5469
- new Map(buttonPersonalities.map((p) => [p.id, p]));
5470
- buttonPersonalities.map((personality) => ({
5471
- id: personality.id,
5472
- name: personality.name,
5473
- description: personality.description,
5474
- category: presetCategory(personality),
5475
- buttonSystem: personality.buttonSystem,
5476
- compatibility: {
5477
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
5478
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
5479
- }
5480
- }));
5481
- function presetCategory(personality) {
5482
- switch (personality.tags.era) {
5574
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
5575
+ function findButtonStyleRecipe(id) {
5576
+ const recipe = recipesById.get(id);
5577
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
5578
+ return recipe;
5579
+ }
5580
+ function resolveButtonStyleSelection(selection) {
5581
+ switch (selection.styleId) {
5582
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
5583
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
5584
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
5585
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
5586
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
5587
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
5588
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
5589
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
5590
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
5591
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
5592
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
5593
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
5594
+ }
5595
+ }
5596
+ function defaultButtonStyleSelectionFor(styleId) {
5597
+ return {
5598
+ styleId,
5599
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
5600
+ };
5601
+ }
5602
+ if (buttonStyleRecipes.map((recipe) => recipe.id).length !== BUTTON_STYLE_IDS.length || BUTTON_STYLE_IDS.some((id) => !recipesById.has(id))) throw new Error("Button style registry and ButtonStyleId catalog are out of sync");
5603
+ buttonStyleRecipes.map((recipe) => {
5604
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
5605
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
5606
+ return {
5607
+ id: recipe.id,
5608
+ name: recipe.accessibilityLabel,
5609
+ description: recipe.accessibilityLabel,
5610
+ category: presetCategory(recipe),
5611
+ buttonSystem: resolved.buttonSystem,
5612
+ compatibility: {
5613
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
5614
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
5615
+ }
5616
+ };
5617
+ });
5618
+ function presetCategory(recipe) {
5619
+ switch (recipe.tags.era) {
5483
5620
  case "retro": return "retro";
5484
5621
  case "editorial": return "minimal";
5485
5622
  case "organic": return "artistic";
5486
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
5623
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
5487
5624
  case "technical": return "technical";
5488
5625
  case void 0: return "modern";
5489
5626
  }
@@ -10030,323 +10167,91 @@ const headerLookCatalog = defineExactCatalog()([
10030
10167
  {
10031
10168
  id: asHeaderLookId("centered-calm"),
10032
10169
  label: "Centered calm",
10033
- visualTreatment: "light-serif",
10034
- layoutBehavior: "normal-flow",
10035
- configuration: {
10036
- structure: "centered-stack",
10037
- treatment: "light-serif",
10038
- behavior: "normal-flow"
10039
- },
10040
- openingRequirement: "none",
10041
- maxRecommendedNavItems: 5,
10042
- logoAccommodations: centeredLogoAccommodations,
10043
- compile: centeredCalmHeader
10044
- },
10045
- {
10046
- id: asHeaderLookId("practical-utility"),
10047
- label: "Practical utility",
10048
- visualTreatment: "solid-neutral",
10049
- layoutBehavior: "sticky-shrink",
10050
- configuration: {
10051
- structure: "inline-classic",
10052
- treatment: "solid-neutral",
10053
- behavior: "sticky-shrink"
10054
- },
10055
- openingRequirement: "none",
10056
- requiresProminentCta: true,
10057
- logoAccommodations: inlineClassicLogoAccommodations,
10058
- compile: practicalUtilityHeader
10059
- },
10060
- {
10061
- id: asHeaderLookId("minimal-transparent"),
10062
- label: "Minimal transparent",
10063
- visualTreatment: "minimal-transparent",
10064
- layoutBehavior: "normal-flow",
10065
- configuration: {
10066
- structure: "inline-classic",
10067
- treatment: "minimal-transparent",
10068
- behavior: "normal-flow"
10069
- },
10070
- openingRequirement: "reserved-space-ok",
10071
- logoAccommodations: inlineClassicLogoAccommodations,
10072
- compile: minimalTransparentHeader
10073
- },
10074
- {
10075
- id: asHeaderLookId("transparent-overlay"),
10076
- label: "Transparent overlay",
10077
- visualTreatment: "transparent-overlay",
10078
- layoutBehavior: "fixed-overlay",
10079
- configuration: {
10080
- structure: "inline-classic",
10081
- treatment: "transparent-overlay",
10082
- behavior: "fixed-overlay"
10083
- },
10084
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10085
- maxRecommendedNavItems: 5,
10086
- logoAccommodations: overlayLogoAccommodations,
10087
- compile: transparentOverlayHeader
10088
- },
10089
- {
10090
- id: asHeaderLookId("floating-glass"),
10091
- label: "Floating glass",
10092
- visualTreatment: "floating-glass",
10093
- layoutBehavior: "fixed-floating",
10094
- configuration: {
10095
- structure: "floating-shell",
10096
- treatment: "floating-glass",
10097
- behavior: "fixed-floating"
10098
- },
10099
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10100
- maxRecommendedNavItems: 5,
10101
- logoAccommodations: overlayLogoAccommodations,
10102
- compile: floatingGlassHeader
10103
- }
10104
- ]);
10105
- new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10106
- new Map(headerLookCatalog.map((look) => [look.id, look]));
10107
- function headerConfigurationKey(configuration) {
10108
- return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10109
- }
10110
- //#endregion
10111
- //#region ../theme-core/src/site-styles/footerLooks.ts
10112
- function asFooterLookId(value) {
10113
- return value;
10114
- }
10115
- function asFooterLayoutId(value) {
10116
- return value;
10117
- }
10118
- function asFooterStyleId(value) {
10119
- return value;
10120
- }
10121
- const footerLayoutCatalog = defineExactCatalog()([
10122
- {
10123
- id: asFooterLayoutId("identity"),
10124
- label: "Identity",
10125
- description: "Logo, site text, address, and legal copy without relying on footer navigation."
10126
- },
10127
- {
10128
- id: asFooterLayoutId("centered"),
10129
- label: "Centered",
10130
- description: "A calm centered stack for identity, short copy, and optional compact navigation.",
10131
- maxRecommendedNavDensity: "sparse"
10132
- },
10133
- {
10134
- id: asFooterLayoutId("split"),
10135
- label: "Split",
10136
- description: "Navigation and brand signoff separated into a wider split footer.",
10137
- requiresFooterNav: true,
10138
- maxRecommendedNavDensity: "balanced"
10139
- },
10140
- {
10141
- id: asFooterLayoutId("columns"),
10142
- label: "Columns",
10143
- description: "Grouped footer navigation columns with a supporting bottom line.",
10144
- requiresFooterNav: true,
10145
- requiresFooterNavGroups: true
10146
- }
10147
- ]);
10148
- const footerStyleCatalog = defineExactCatalog()([
10149
- {
10150
- id: asFooterStyleId("quiet"),
10151
- label: "Quiet",
10152
- description: "Lightweight, practical footer treatment."
10153
- },
10154
- {
10155
- id: asFooterStyleId("calm"),
10156
- label: "Calm",
10157
- description: "Soft centered treatment with restrained dividers."
10158
- },
10159
- {
10160
- id: asFooterStyleId("editorial"),
10161
- label: "Editorial",
10162
- description: "Text-forward treatment with fine-line structure."
10163
- },
10164
- {
10165
- id: asFooterStyleId("brand-band"),
10166
- label: "Brand band",
10167
- description: "High-contrast brand treatment with a stronger bottom bar."
10168
- }
10169
- ]);
10170
- new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
10171
- new Map(footerStyleCatalog.map((style) => [style.id, style]));
10172
- /**
10173
- * No-nav-safe identity footer: brand and legal/supporting copy carry the
10174
- * footer without implying missing navigation.
10175
- */
10176
- function identityQuietFooter(theme) {
10177
- return {
10178
- ...theme.footer,
10179
- variant: "simple",
10180
- maxWidth: "container",
10181
- background: {
10182
- type: "color",
10183
- color: "surface"
10184
- },
10185
- navStyle: "minimal",
10186
- navWeight: "regular",
10187
- navColor: "text",
10188
- navLinkStyle: {
10189
- typography: "body",
10190
- fontWeight: "regular",
10191
- textTransform: "none",
10192
- italic: false,
10193
- colorToken: "text",
10194
- hoverColorToken: "primary",
10195
- padding: "none",
10196
- borderRadius: "none"
10197
- },
10198
- navLayout: {
10199
- layout: "inline-wrap",
10200
- align: "start",
10201
- gapX: "default",
10202
- gapY: "tight"
10203
- },
10204
- logo: {
10205
- showLogo: true,
10206
- showLogoText: true,
10207
- placement: "left",
10208
- size: "sm",
10209
- align: "start"
10210
- },
10211
- bottomBar: {
10212
- enabled: false,
10213
- fullBleed: false,
10214
- textAlign: "left",
10215
- paddingX: "default",
10216
- paddingY: "compact",
10217
- borderTop: { width: "none" }
10218
- }
10219
- };
10220
- }
10221
- /**
10222
- * Back-compat alias for the previous default footer Look. It keeps existing
10223
- * persisted selections valid while staying hidden from the new layout/style UI.
10224
- */
10225
- function mutedGroundingFooter(theme) {
10226
- return {
10227
- ...identityQuietFooter(theme),
10228
- background: theme.footer.background,
10229
- navStyle: theme.footer.navStyle,
10230
- navColor: theme.footer.navColor,
10231
- navWeight: theme.footer.navWeight,
10232
- navLinkStyle: theme.footer.navLinkStyle,
10233
- bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
10234
- };
10235
- }
10236
- /** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
10237
- function brandTwoBandFooter(theme) {
10238
- return {
10239
- ...theme.footer,
10240
- variant: "split",
10241
- maxWidth: "container",
10242
- background: {
10243
- type: "color",
10244
- color: "primary-800"
10245
- },
10246
- navStyle: "minimal",
10247
- navWeight: "medium",
10248
- navColor: "primaryForeground",
10249
- navLinkStyle: {
10250
- typography: "body",
10251
- fontWeight: "medium",
10252
- textTransform: "none",
10253
- italic: false,
10254
- colorToken: "primaryForeground",
10255
- hoverColorToken: "secondary",
10256
- padding: "none",
10257
- borderRadius: "none"
10258
- },
10259
- bottomTextLinkStyle: {
10260
- colorToken: "secondary",
10261
- decorationColorToken: "secondary"
10262
- },
10263
- navLayout: {
10264
- layout: "inline-wrap",
10265
- align: "start",
10266
- gapX: "default",
10267
- gapY: "tight"
10268
- },
10269
- logo: {
10270
- showLogo: true,
10271
- showLogoText: false,
10272
- placement: "left",
10273
- size: "sm",
10274
- align: "start"
10170
+ visualTreatment: "light-serif",
10171
+ layoutBehavior: "normal-flow",
10172
+ configuration: {
10173
+ structure: "centered-stack",
10174
+ treatment: "light-serif",
10175
+ behavior: "normal-flow"
10275
10176
  },
10276
- bottomBar: {
10277
- enabled: true,
10278
- fullBleed: true,
10279
- background: {
10280
- type: "color",
10281
- color: "primary-900"
10282
- },
10283
- textColor: "primaryForeground",
10284
- textAlign: "center",
10285
- paddingX: "default",
10286
- paddingY: "compact",
10287
- borderTop: { width: "none" }
10288
- }
10289
- };
10290
- }
10291
- /**
10292
- * Centered stack on a softly tinted band: logo, inline nav, address, and a
10293
- * hairline-topped copyright line, all centered.
10294
- */
10295
- function centeredCalmFooter(theme) {
10296
- return {
10297
- ...theme.footer,
10298
- variant: "simple",
10299
- maxWidth: "container",
10300
- background: {
10301
- type: "color",
10302
- color: "surfaceAlt"
10177
+ openingRequirement: "none",
10178
+ maxRecommendedNavItems: 5,
10179
+ logoAccommodations: centeredLogoAccommodations,
10180
+ compile: centeredCalmHeader
10181
+ },
10182
+ {
10183
+ id: asHeaderLookId("practical-utility"),
10184
+ label: "Practical utility",
10185
+ visualTreatment: "solid-neutral",
10186
+ layoutBehavior: "sticky-shrink",
10187
+ configuration: {
10188
+ structure: "inline-classic",
10189
+ treatment: "solid-neutral",
10190
+ behavior: "sticky-shrink"
10303
10191
  },
10304
- navStyle: "minimal",
10305
- navWeight: "regular",
10306
- navColor: "text",
10307
- navLinkStyle: {
10308
- typography: "body",
10309
- fontWeight: "regular",
10310
- textTransform: "none",
10311
- italic: false,
10312
- colorToken: "text",
10313
- hoverColorToken: "primary",
10314
- padding: "none",
10315
- borderRadius: "none"
10192
+ openingRequirement: "none",
10193
+ requiresProminentCta: true,
10194
+ logoAccommodations: inlineClassicLogoAccommodations,
10195
+ compile: practicalUtilityHeader
10196
+ },
10197
+ {
10198
+ id: asHeaderLookId("minimal-transparent"),
10199
+ label: "Minimal transparent",
10200
+ visualTreatment: "minimal-transparent",
10201
+ layoutBehavior: "normal-flow",
10202
+ configuration: {
10203
+ structure: "inline-classic",
10204
+ treatment: "minimal-transparent",
10205
+ behavior: "normal-flow"
10316
10206
  },
10317
- navLayout: {
10318
- layout: "inline-wrap",
10319
- align: "center",
10320
- gapX: "relaxed",
10321
- gapY: "tight"
10207
+ openingRequirement: "reserved-space-ok",
10208
+ logoAccommodations: inlineClassicLogoAccommodations,
10209
+ compile: minimalTransparentHeader
10210
+ },
10211
+ {
10212
+ id: asHeaderLookId("transparent-overlay"),
10213
+ label: "Transparent overlay",
10214
+ visualTreatment: "transparent-overlay",
10215
+ layoutBehavior: "fixed-overlay",
10216
+ configuration: {
10217
+ structure: "inline-classic",
10218
+ treatment: "transparent-overlay",
10219
+ behavior: "fixed-overlay"
10322
10220
  },
10323
- logo: {
10324
- showLogo: true,
10325
- showLogoText: false,
10326
- placement: "above",
10327
- size: "sm",
10328
- align: "center"
10221
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10222
+ maxRecommendedNavItems: 5,
10223
+ logoAccommodations: overlayLogoAccommodations,
10224
+ compile: transparentOverlayHeader
10225
+ },
10226
+ {
10227
+ id: asHeaderLookId("floating-glass"),
10228
+ label: "Floating glass",
10229
+ visualTreatment: "floating-glass",
10230
+ layoutBehavior: "fixed-floating",
10231
+ configuration: {
10232
+ structure: "floating-shell",
10233
+ treatment: "floating-glass",
10234
+ behavior: "fixed-floating"
10329
10235
  },
10330
- bottomBar: {
10331
- enabled: true,
10332
- fullBleed: false,
10333
- textAlign: "center",
10334
- paddingX: "default",
10335
- paddingY: "compact",
10336
- borderTop: { width: "thin" }
10337
- }
10338
- };
10236
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10237
+ maxRecommendedNavItems: 5,
10238
+ logoAccommodations: overlayLogoAccommodations,
10239
+ compile: floatingGlassHeader
10240
+ }
10241
+ ]);
10242
+ new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10243
+ new Map(headerLookCatalog.map((look) => [look.id, look]));
10244
+ function headerConfigurationKey(configuration) {
10245
+ return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10246
+ }
10247
+ //#endregion
10248
+ //#region ../theme-core/src/site-styles/footerLooks.ts
10249
+ function asFooterLookId(value) {
10250
+ return value;
10339
10251
  }
10340
- /** Editorial split footer: compact nav on one side, brand signoff on the other. */
10341
- function splitEditorialFooter(theme) {
10252
+ function quietFooterLinks(theme) {
10342
10253
  return {
10343
10254
  ...theme.footer,
10344
- variant: "split",
10345
- maxWidth: "container",
10346
- background: {
10347
- type: "color",
10348
- color: "surface"
10349
- },
10350
10255
  navStyle: "minimal",
10351
10256
  navWeight: "regular",
10352
10257
  navColor: "text",
@@ -10359,120 +10264,38 @@ function splitEditorialFooter(theme) {
10359
10264
  hoverColorToken: "primary",
10360
10265
  padding: "none",
10361
10266
  borderRadius: "none"
10362
- },
10363
- navLayout: {
10364
- layout: "inline-wrap",
10365
- align: "start",
10366
- gapX: "relaxed",
10367
- gapY: "tight"
10368
- },
10369
- logo: {
10370
- showLogo: true,
10371
- showLogoText: true,
10372
- placement: "right",
10373
- size: "sm",
10374
- align: "end"
10375
- },
10376
- bottomBar: {
10377
- enabled: true,
10378
- fullBleed: false,
10379
- textAlign: "left",
10380
- paddingX: "default",
10381
- paddingY: "compact",
10382
- borderTop: { width: "thin" }
10383
10267
  }
10384
10268
  };
10385
10269
  }
10386
- /**
10387
- * Editorial columns: site name and supporting copy on the left, inline nav on
10388
- * the right, with a hairline-topped bottom line. Uses the footer block's
10389
- * columns layout.
10390
- */
10391
- function editorialColumnsFooter(theme) {
10270
+ function emphasizedFooterLinks(theme) {
10392
10271
  return {
10393
10272
  ...theme.footer,
10394
- variant: "columns",
10395
- maxWidth: "container",
10396
- background: {
10397
- type: "color",
10398
- color: "surface"
10399
- },
10400
10273
  navStyle: "minimal",
10401
- navWeight: "regular",
10274
+ navWeight: "medium",
10402
10275
  navColor: "text",
10403
10276
  navLinkStyle: {
10404
10277
  typography: "body",
10405
- fontWeight: "regular",
10278
+ fontWeight: "medium",
10406
10279
  textTransform: "none",
10407
10280
  italic: false,
10408
10281
  colorToken: "text",
10409
10282
  hoverColorToken: "primary",
10410
10283
  padding: "none",
10411
10284
  borderRadius: "none"
10412
- },
10413
- logo: {
10414
- showLogo: true,
10415
- showLogoText: true,
10416
- placement: "left",
10417
- size: "sm",
10418
- align: "start"
10419
- },
10420
- bottomBar: {
10421
- enabled: true,
10422
- fullBleed: false,
10423
- textAlign: "center",
10424
- paddingX: "default",
10425
- paddingY: "compact",
10426
- borderTop: { width: "thin" }
10427
10285
  }
10428
10286
  };
10429
10287
  }
10430
- const footerLookCatalog = defineExactCatalog()([
10431
- {
10432
- id: asFooterLookId("footer-identity-quiet"),
10433
- label: "Identity footer",
10434
- layoutId: asFooterLayoutId("identity"),
10435
- styleId: asFooterStyleId("quiet"),
10436
- compile: identityQuietFooter
10437
- },
10438
- {
10439
- id: asFooterLookId("footer-muted-grounding"),
10440
- label: "Muted grounding footer",
10441
- layoutId: asFooterLayoutId("identity"),
10442
- styleId: asFooterStyleId("quiet"),
10443
- hiddenFromLayoutStyleControls: true,
10444
- compile: mutedGroundingFooter
10445
- },
10446
- {
10447
- id: asFooterLookId("footer-centered-calm"),
10448
- label: "Centered calm footer",
10449
- layoutId: asFooterLayoutId("centered"),
10450
- styleId: asFooterStyleId("calm"),
10451
- compile: centeredCalmFooter
10452
- },
10453
- {
10454
- id: asFooterLookId("footer-split-editorial"),
10455
- label: "Split editorial footer",
10456
- layoutId: asFooterLayoutId("split"),
10457
- styleId: asFooterStyleId("editorial"),
10458
- compile: splitEditorialFooter
10459
- },
10460
- {
10461
- id: asFooterLookId("footer-editorial-columns"),
10462
- label: "Editorial columns footer",
10463
- layoutId: asFooterLayoutId("columns"),
10464
- styleId: asFooterStyleId("editorial"),
10465
- compile: editorialColumnsFooter
10466
- },
10467
- {
10468
- id: asFooterLookId("site-footer-brand-two-band"),
10469
- label: "Two-band brand footer",
10470
- layoutId: asFooterLayoutId("split"),
10471
- styleId: asFooterStyleId("brand-band"),
10472
- allowedContentPresence: ["default-footer", "default-and-blocks"],
10473
- compile: brandTwoBandFooter
10474
- }
10475
- ]);
10288
+ const footerLookCatalog = defineExactCatalog()([{
10289
+ id: asFooterLookId("footer-links-quiet"),
10290
+ label: "Quiet links",
10291
+ description: "Regular-weight footer navigation with a restrained hover.",
10292
+ compile: quietFooterLinks
10293
+ }, {
10294
+ id: asFooterLookId("footer-links-emphasized"),
10295
+ label: "Emphasized links",
10296
+ description: "Medium-weight footer navigation with a clearer emphasis.",
10297
+ compile: emphasizedFooterLinks
10298
+ }]);
10476
10299
  new Map(footerLookCatalog.map((look) => [look.id, look]));
10477
10300
  //#endregion
10478
10301
  //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -11601,17 +11424,21 @@ function defineCuratedSiteStyle(input) {
11601
11424
  })),
11602
11425
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
11603
11426
  recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
11604
- buttonPersonalityChoices: input.buttonPersonalityChoices,
11427
+ buttonStyleChoices: input.buttonStyleChoices,
11605
11428
  paletteRecommendations: input.paletteRecommendations,
11606
11429
  typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
11607
11430
  ...input.heroTypography ? { heroTypography: input.heroTypography } : {}
11608
11431
  };
11609
11432
  }
11610
- function buttonChoice(id, note) {
11433
+ function buttonChoice(styleId, note, parameters) {
11434
+ const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
11435
+ styleId,
11436
+ parameters
11437
+ });
11611
11438
  return note ? {
11612
- id: asButtonPersonalityId(id),
11439
+ ...selection,
11613
11440
  note
11614
- } : { id: asButtonPersonalityId(id) };
11441
+ } : selection;
11615
11442
  }
11616
11443
  function paletteRecommendation(authoringKey, note) {
11617
11444
  const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -11796,9 +11623,8 @@ const curatedSiteStyles = [
11796
11623
  "minimal-transparent",
11797
11624
  "clean-base"
11798
11625
  ],
11799
- buttonPersonalityChoices: [
11626
+ buttonStyleChoices: [
11800
11627
  buttonChoice("soft-pill"),
11801
- buttonChoice("two-tone-pill"),
11802
11628
  buttonChoice("pebble"),
11803
11629
  buttonChoice("editorial-link"),
11804
11630
  buttonChoice("brushed-wash")
@@ -11834,7 +11660,7 @@ const curatedSiteStyles = [
11834
11660
  "brand-solid",
11835
11661
  "clean-base"
11836
11662
  ],
11837
- buttonPersonalityChoices: [
11663
+ buttonStyleChoices: [
11838
11664
  buttonChoice("confident-chip"),
11839
11665
  buttonChoice("soft-pill"),
11840
11666
  buttonChoice("editorial-link")
@@ -11873,7 +11699,7 @@ const curatedSiteStyles = [
11873
11699
  "minimal-transparent",
11874
11700
  "centered-calm"
11875
11701
  ],
11876
- buttonPersonalityChoices: [
11702
+ buttonStyleChoices: [
11877
11703
  buttonChoice("editorial-link"),
11878
11704
  buttonChoice("soft-pill"),
11879
11705
  buttonChoice("brushed-wash")
@@ -11913,7 +11739,7 @@ const curatedSiteStyles = [
11913
11739
  "practical-utility",
11914
11740
  "clean-base"
11915
11741
  ],
11916
- buttonPersonalityChoices: [
11742
+ buttonStyleChoices: [
11917
11743
  buttonChoice("pebble"),
11918
11744
  buttonChoice("brushed-wash"),
11919
11745
  buttonChoice("confident-chip")
@@ -11974,7 +11800,7 @@ const curatedSiteStyles = [
11974
11800
  "serif-line",
11975
11801
  "clean-base"
11976
11802
  ],
11977
- buttonPersonalityChoices: [
11803
+ buttonStyleChoices: [
11978
11804
  buttonChoice("editorial-link"),
11979
11805
  buttonChoice("confident-chip"),
11980
11806
  buttonChoice("soft-pill")
@@ -12036,7 +11862,7 @@ const curatedSiteStyles = [
12036
11862
  "brand-solid",
12037
11863
  "clean-base"
12038
11864
  ],
12039
- buttonPersonalityChoices: [
11865
+ buttonStyleChoices: [
12040
11866
  buttonChoice("confident-chip"),
12041
11867
  buttonChoice("pebble"),
12042
11868
  buttonChoice("ink-stamp")
@@ -12075,7 +11901,7 @@ const curatedSiteStyles = [
12075
11901
  "minimal-transparent",
12076
11902
  "clean-base"
12077
11903
  ],
12078
- buttonPersonalityChoices: [
11904
+ buttonStyleChoices: [
12079
11905
  buttonChoice("soft-pill"),
12080
11906
  buttonChoice("pebble"),
12081
11907
  buttonChoice("confident-chip")
@@ -12148,7 +11974,7 @@ const curatedSiteStyles = [
12148
11974
  "clean-base",
12149
11975
  "centered-calm"
12150
11976
  ],
12151
- buttonPersonalityChoices: [
11977
+ buttonStyleChoices: [
12152
11978
  buttonChoice("pebble"),
12153
11979
  buttonChoice("soft-pill"),
12154
11980
  buttonChoice("editorial-link")
@@ -12267,12 +12093,8 @@ const curatedSiteStyles = [
12267
12093
  "serif-line",
12268
12094
  "minimal-transparent"
12269
12095
  ],
12270
- recommendedFooterLookIds: [
12271
- "footer-centered-calm",
12272
- "footer-editorial-columns",
12273
- "footer-muted-grounding"
12274
- ],
12275
- buttonPersonalityChoices: [
12096
+ recommendedFooterLookIds: ["footer-links-quiet"],
12097
+ buttonStyleChoices: [
12276
12098
  buttonChoice("soft-pill"),
12277
12099
  buttonChoice("pebble"),
12278
12100
  buttonChoice("editorial-link")
@@ -12346,7 +12168,7 @@ const curatedSiteStyles = [
12346
12168
  "centered-calm",
12347
12169
  "minimal-transparent"
12348
12170
  ],
12349
- buttonPersonalityChoices: [
12171
+ buttonStyleChoices: [
12350
12172
  buttonChoice("editorial-link"),
12351
12173
  buttonChoice("soft-pill"),
12352
12174
  buttonChoice("brushed-wash")
@@ -12419,8 +12241,8 @@ const curatedSiteStyles = [
12419
12241
  "practical-utility",
12420
12242
  "clean-base"
12421
12243
  ],
12422
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12423
- buttonPersonalityChoices: [
12244
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12245
+ buttonStyleChoices: [
12424
12246
  buttonChoice("pebble"),
12425
12247
  buttonChoice("confident-chip"),
12426
12248
  buttonChoice("ink-stamp"),
@@ -12541,8 +12363,8 @@ const curatedSiteStyles = [
12541
12363
  "minimal-transparent",
12542
12364
  "serif-line"
12543
12365
  ],
12544
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
12545
- buttonPersonalityChoices: [
12366
+ recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
12367
+ buttonStyleChoices: [
12546
12368
  buttonChoice("earth-pill"),
12547
12369
  buttonChoice("soft-pill"),
12548
12370
  buttonChoice("pebble"),
@@ -12613,7 +12435,7 @@ const curatedSiteStyles = [
12613
12435
  "floating-glass",
12614
12436
  "brand-solid"
12615
12437
  ],
12616
- buttonPersonalityChoices: [
12438
+ buttonStyleChoices: [
12617
12439
  buttonChoice("ink-stamp"),
12618
12440
  buttonChoice("confident-chip"),
12619
12441
  buttonChoice("brushed-wash"),
@@ -12668,8 +12490,8 @@ const curatedSiteStyles = [
12668
12490
  "transparent-overlay",
12669
12491
  "practical-utility"
12670
12492
  ],
12671
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12672
- buttonPersonalityChoices: [
12493
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12494
+ buttonStyleChoices: [
12673
12495
  buttonChoice("showtime-pill"),
12674
12496
  buttonChoice("confident-chip"),
12675
12497
  buttonChoice("ink-stamp"),
@@ -12750,8 +12572,8 @@ const curatedSiteStyles = [
12750
12572
  headerStyleChoice("glass")
12751
12573
  ] },
12752
12574
  recommendedHeaderLookIds: ["minimal-transparent"],
12753
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12754
- buttonPersonalityChoices: [
12575
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12576
+ buttonStyleChoices: [
12755
12577
  buttonChoice("ornate-ritual"),
12756
12578
  buttonChoice("joy-stamp"),
12757
12579
  buttonChoice("ink-stamp")
@@ -12804,8 +12626,8 @@ const curatedSiteStyles = [
12804
12626
  headerStyleChoice("glass")
12805
12627
  ] },
12806
12628
  recommendedHeaderLookIds: ["minimal-transparent"],
12807
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12808
- buttonPersonalityChoices: [
12629
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12630
+ buttonStyleChoices: [
12809
12631
  buttonChoice("joy-stamp"),
12810
12632
  buttonChoice("ink-stamp"),
12811
12633
  buttonChoice("showtime-pill")
@@ -12895,8 +12717,8 @@ const curatedSiteStyles = [
12895
12717
  "centered-calm",
12896
12718
  "clean-base"
12897
12719
  ],
12898
- recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
12899
- buttonPersonalityChoices: [
12720
+ recommendedFooterLookIds: ["footer-links-quiet"],
12721
+ buttonStyleChoices: [
12900
12722
  buttonChoice("flat-ink"),
12901
12723
  buttonChoice("confident-chip"),
12902
12724
  buttonChoice("editorial-link")
@@ -12973,14 +12795,9 @@ const curatedSiteStyles = [
12973
12795
  "serif-line",
12974
12796
  "clean-base"
12975
12797
  ],
12976
- recommendedFooterLookIds: [
12977
- "footer-editorial-columns",
12978
- "footer-muted-grounding",
12979
- "footer-identity-quiet"
12980
- ],
12981
- buttonPersonalityChoices: [
12982
- buttonChoice("quiet-arrow"),
12983
- buttonChoice("two-tone-pill"),
12798
+ recommendedFooterLookIds: ["footer-links-quiet"],
12799
+ buttonStyleChoices: [
12800
+ buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
12984
12801
  buttonChoice("flat-ink"),
12985
12802
  buttonChoice("editorial-link")
12986
12803
  ],
@@ -17330,25 +17147,41 @@ const heroLayoutControlsFragment = defineFragment({
17330
17147
  layout: []
17331
17148
  });
17332
17149
  //#endregion
17150
+ //#region ../blocks/src/system/constants/buttonRoles.ts
17151
+ /**
17152
+ * Semantic button roles available to block authors.
17153
+ *
17154
+ * These roles are deliberately independent of a site's visual button style:
17155
+ * the active theme owns how each role looks.
17156
+ */
17157
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
17158
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
17159
+ /**
17160
+ * Temporary rollout boundary for persisted content written before issue #1220.
17161
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
17162
+ * only until the post-deploy role rewrite has been audited in production.
17163
+ */
17164
+ function canonicalizePersistedBlockButtonRole(value) {
17165
+ return value === "link" || value === "tertiary" ? "ghost" : value;
17166
+ }
17167
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
17168
+ const BLOCK_BUTTON_ROLE_LABELS = {
17169
+ primary: "Primary",
17170
+ secondary: "Secondary",
17171
+ outline: "Outline",
17172
+ ghost: "Ghost",
17173
+ accent: "Accent"
17174
+ };
17175
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
17176
+ value,
17177
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
17178
+ }));
17179
+ function isBlockButtonRole(value) {
17180
+ return blockButtonRoleSchema.safeParse(value).success;
17181
+ }
17182
+ //#endregion
17333
17183
  //#region ../blocks/src/system/fields/button.ts
17334
- const DEFAULT_THEME_BUTTON_VARIANTS = [
17335
- {
17336
- value: "primary",
17337
- label: "Primary"
17338
- },
17339
- {
17340
- value: "secondary",
17341
- label: "Secondary"
17342
- },
17343
- {
17344
- value: "outline",
17345
- label: "Outline"
17346
- },
17347
- {
17348
- value: "link",
17349
- label: "Link"
17350
- }
17351
- ];
17184
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
17352
17185
  function createButtonVariantField(options = {}) {
17353
17186
  return {
17354
17187
  id: options.id ?? "buttonVariant",
@@ -17366,20 +17199,7 @@ function createButtonVariantField(options = {}) {
17366
17199
  };
17367
17200
  }
17368
17201
  function createButtonGroup(options = {}) {
17369
- const { variants = [
17370
- {
17371
- value: "primary",
17372
- label: "Primary"
17373
- },
17374
- {
17375
- value: "secondary",
17376
- label: "Secondary"
17377
- },
17378
- {
17379
- value: "outline",
17380
- label: "Outline"
17381
- }
17382
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17202
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17383
17203
  const mainFields = [
17384
17204
  {
17385
17205
  id: "label",
@@ -17515,29 +17335,7 @@ const ctaRowFragment = defineFragment({
17515
17335
  fields: [createCtasRepeater({
17516
17336
  label: "Calls to action",
17517
17337
  itemLabel: "CTA",
17518
- maxItems: 3,
17519
- button: { variants: [
17520
- {
17521
- value: "primary",
17522
- label: "Primary"
17523
- },
17524
- {
17525
- value: "secondary",
17526
- label: "Secondary"
17527
- },
17528
- {
17529
- value: "outline",
17530
- label: "Outline"
17531
- },
17532
- {
17533
- value: "link",
17534
- label: "Link"
17535
- },
17536
- {
17537
- value: "accent",
17538
- label: "Accent"
17539
- }
17540
- ] }
17338
+ maxItems: 3
17541
17339
  })],
17542
17340
  layout: [ctaRow({
17543
17341
  collectionPath: "content.ctas",
@@ -17556,10 +17354,6 @@ const heroCtaRowFragment = defineFragment({
17556
17354
  defaultValue: [],
17557
17355
  button: {
17558
17356
  variants: [
17559
- {
17560
- value: "default",
17561
- label: "Default"
17562
- },
17563
17357
  {
17564
17358
  value: "primary",
17565
17359
  label: "Primary"
@@ -17571,9 +17365,17 @@ const heroCtaRowFragment = defineFragment({
17571
17365
  {
17572
17366
  value: "outline",
17573
17367
  label: "Outline"
17368
+ },
17369
+ {
17370
+ value: "ghost",
17371
+ label: "Ghost"
17372
+ },
17373
+ {
17374
+ value: "accent",
17375
+ label: "Accent"
17574
17376
  }
17575
17377
  ],
17576
- defaultVariant: "default",
17378
+ defaultVariant: "primary",
17577
17379
  includeSize: true,
17578
17380
  defaultSize: "lg"
17579
17381
  }
@@ -18264,11 +18066,13 @@ const blogFeaturedPostFragment = defineFragment({
18264
18066
  as: "p",
18265
18067
  style: textColorStyle("text/80")
18266
18068
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
18267
- link({
18268
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
18269
- style: textColorStyle("primary"),
18270
- href: { $bind: { from: "post.path" } }
18271
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
18069
+ button({
18070
+ className: "rb-self-start",
18071
+ href: { $bind: { from: "post.path" } },
18072
+ variantId: "ghost",
18073
+ size: "sm",
18074
+ linkRequired: true
18075
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
18272
18076
  ])], when("post")), stack({
18273
18077
  gap: "sm",
18274
18078
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -18539,21 +18343,7 @@ const newsletterFormFragment = defineFragment({
18539
18343
  createButtonVariantField({
18540
18344
  id: "buttonVariant",
18541
18345
  label: "Button style",
18542
- defaultValue: "primary",
18543
- variants: [
18544
- {
18545
- value: "primary",
18546
- label: "Primary"
18547
- },
18548
- {
18549
- value: "secondary",
18550
- label: "Secondary"
18551
- },
18552
- {
18553
- value: "outline",
18554
- label: "Outline"
18555
- }
18556
- ]
18346
+ defaultValue: "primary"
18557
18347
  }),
18558
18348
  {
18559
18349
  id: "successMessage",
@@ -20102,7 +19892,8 @@ function postExcerpt(className) {
20102
19892
  function postReadMore() {
20103
19893
  return button({
20104
19894
  href: { $bind: { from: "post.path" } },
20105
- className: "rb-self-start"
19895
+ className: "rb-self-start",
19896
+ variantId: "ghost"
20106
19897
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
20107
19898
  as: "span",
20108
19899
  value: "Read more"
@@ -23674,31 +23465,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
23674
23465
  label: "Calls to action",
23675
23466
  itemLabel: "CTA",
23676
23467
  maxItems: 1,
23677
- button: {
23678
- variants: [
23679
- {
23680
- value: "primary",
23681
- label: "Primary"
23682
- },
23683
- {
23684
- value: "secondary",
23685
- label: "Secondary"
23686
- },
23687
- {
23688
- value: "outline",
23689
- label: "Outline"
23690
- },
23691
- {
23692
- value: "ghost",
23693
- label: "Ghost"
23694
- },
23695
- {
23696
- value: "link",
23697
- label: "Link"
23698
- }
23699
- ],
23700
- defaultVariant: "ghost"
23701
- }
23468
+ button: { defaultVariant: "ghost" }
23702
23469
  })
23703
23470
  ] }
23704
23471
  },
@@ -25791,17 +25558,8 @@ function readAmount(value) {
25791
25558
  //#endregion
25792
25559
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
25793
25560
  const previewStageSchema = z$1.enum(["preview", "published"]);
25794
- const registrationButtonVariantSchema = z$1.enum([
25795
- "primary",
25796
- "secondary",
25797
- "outline"
25798
- ]);
25799
- const eventButtonVariantSchema = z$1.enum([
25800
- "primary",
25801
- "secondary",
25802
- "outline",
25803
- "link"
25804
- ]);
25561
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
25562
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
25805
25563
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
25806
25564
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
25807
25565
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -26166,23 +25924,7 @@ const eventRegistrationBlockDefinition = {
26166
25924
  defaultValue: "Complete Registration",
26167
25925
  maxLength: 40
26168
25926
  },
26169
- createButtonVariantField({
26170
- description: "Choose a button style from your theme",
26171
- variants: [
26172
- {
26173
- value: "primary",
26174
- label: "Primary"
26175
- },
26176
- {
26177
- value: "secondary",
26178
- label: "Secondary"
26179
- },
26180
- {
26181
- value: "outline",
26182
- label: "Outline"
26183
- }
26184
- ]
26185
- })
25927
+ createButtonVariantField()
26186
25928
  ],
26187
25929
  layout: [styledSection({
26188
25930
  baseClass: "",
@@ -26489,23 +26231,7 @@ const courseRegistrationBlockDefinition = {
26489
26231
  defaultValue: "Sign up",
26490
26232
  maxLength: 40
26491
26233
  },
26492
- createButtonVariantField({
26493
- description: "Choose a button style from your theme",
26494
- variants: [
26495
- {
26496
- value: "primary",
26497
- label: "Primary"
26498
- },
26499
- {
26500
- value: "secondary",
26501
- label: "Secondary"
26502
- },
26503
- {
26504
- value: "outline",
26505
- label: "Outline"
26506
- }
26507
- ]
26508
- })
26234
+ createButtonVariantField()
26509
26235
  ],
26510
26236
  layout: [styledSection({
26511
26237
  baseClass: "",
@@ -29370,36 +29096,7 @@ const offeringsPreviewFields = [
29370
29096
  ui: { intent: "content" },
29371
29097
  schema: { fields: groupOverrideFields }
29372
29098
  },
29373
- {
29374
- id: "buttonVariant",
29375
- type: "select",
29376
- label: "Button style",
29377
- required: false,
29378
- multiple: false,
29379
- defaultValue: "primary",
29380
- options: [
29381
- {
29382
- value: "primary",
29383
- label: "Primary"
29384
- },
29385
- {
29386
- value: "secondary",
29387
- label: "Secondary"
29388
- },
29389
- {
29390
- value: "outline",
29391
- label: "Outline"
29392
- },
29393
- {
29394
- value: "link",
29395
- label: "Link"
29396
- }
29397
- ],
29398
- ui: {
29399
- intent: "display",
29400
- widget: "buttonVariant"
29401
- }
29402
- },
29099
+ createButtonVariantField(),
29403
29100
  {
29404
29101
  id: "buttonText",
29405
29102
  type: "text",
@@ -29605,7 +29302,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
29605
29302
  return [override];
29606
29303
  }
29607
29304
  function isButtonVariant(value) {
29608
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
29305
+ return value === null || isBlockButtonRole(value);
29609
29306
  }
29610
29307
  function normalizeCardStylesContent(value) {
29611
29308
  return isRecord$1(value) || value === null ? value : void 0;
@@ -31457,12 +31154,7 @@ const shopSourceSchema = z$1.object({
31457
31154
  showPrices: z$1.boolean().optional(),
31458
31155
  showValidityPeriod: z$1.boolean().optional(),
31459
31156
  showPricePerCredit: z$1.boolean().nullable().optional(),
31460
- buttonVariant: z$1.enum([
31461
- "primary",
31462
- "secondary",
31463
- "outline",
31464
- "link"
31465
- ]).optional(),
31157
+ buttonVariant: blockButtonRoleSchema.optional(),
31466
31158
  passesHeading: z$1.string().optional(),
31467
31159
  membershipsHeading: z$1.string().optional(),
31468
31160
  buyButtonText: z$1.string().optional(),
@@ -31607,12 +31299,7 @@ const passesMembershipsHydrationSchema = z$1.object({
31607
31299
  passes: z$1.array(publicPassProductSchema),
31608
31300
  memberships: z$1.array(publicMembershipProductSchema),
31609
31301
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
31610
- buttonVariant: z$1.enum([
31611
- "primary",
31612
- "secondary",
31613
- "outline",
31614
- "link"
31615
- ])
31302
+ buttonVariant: blockButtonRoleSchema
31616
31303
  });
31617
31304
  const productListHydrationSchema = z$1.object({
31618
31305
  products: z$1.array(publicProductSchema),
@@ -32936,11 +32623,7 @@ const newsletterPresetSchema = z$1.enum([
32936
32623
  "emailNameCompany"
32937
32624
  ]);
32938
32625
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
32939
- const newsletterButtonVariantSchema = z$1.enum([
32940
- "primary",
32941
- "secondary",
32942
- "outline"
32943
- ]);
32626
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
32944
32627
  const newsletterFieldSchema = z$1.object({
32945
32628
  id: z$1.string(),
32946
32629
  type: z$1.enum(["email", "text"]),