@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
@@ -96,7 +96,7 @@ const TAG_TEMPLATES = {
96
96
  blockedDemoMutationPolicy("blocked-hidden", "This action is not available in demo sites.");
97
97
  blockedDemoMutationPolicy("blocked-disabled", "This setting is disabled in demo sites.");
98
98
  blockedDemoMutationPolicy("internal-only", "This internal operation is not available in demo sites.");
99
- 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;
99
+ 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;
100
100
  //#endregion
101
101
  //#region ../core/src/result.ts
102
102
  function ok(value) {
@@ -3777,7 +3777,7 @@ const gradientDirectionSchema$1 = z$1.enum([
3777
3777
  "to-br",
3778
3778
  "to-bl"
3779
3779
  ]);
3780
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3780
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
3781
3781
  z$1.object({
3782
3782
  type: z$1.literal("solid"),
3783
3783
  colorToken: opaqueButtonColourTokenSchema
@@ -3801,6 +3801,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3801
3801
  role: z$1.literal("link")
3802
3802
  })
3803
3803
  ]);
3804
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
3804
3805
  const effectApplicationSchema$1 = z$1.object({
3805
3806
  effectId: z$1.string(),
3806
3807
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -4013,265 +4014,429 @@ function isUnknownArray(value) {
4013
4014
  }
4014
4015
  buttonSizeNameSchema.options;
4015
4016
  //#endregion
4016
- //#region ../theme-core/src/buttons/personalities/types.ts
4017
- function asButtonPersonalityId(value) {
4018
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
4019
- return value;
4017
+ //#region ../theme-core/src/buttons/styles/domain.ts
4018
+ const PUBLIC_BUTTON_ROLES = [
4019
+ "primary",
4020
+ "secondary",
4021
+ "outline",
4022
+ "ghost",
4023
+ "accent"
4024
+ ];
4025
+ function defineButtonStyleRecipe(recipe) {
4026
+ return recipe;
4027
+ }
4028
+ function materializeButtonRoles(definitions) {
4029
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
4030
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
4031
+ const completeRoles = {
4032
+ primary,
4033
+ secondary
4034
+ };
4035
+ return {
4036
+ primary,
4037
+ secondary,
4038
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
4039
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
4040
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
4041
+ };
4020
4042
  }
4021
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
4022
- z$1.object({
4023
- id: buttonPersonalityIdSchema,
4024
- name: z$1.string().min(1),
4025
- description: z$1.string().min(1),
4026
- tags: styleTagsSchema,
4027
- buttonSystem: buttonSystemSchema
4028
- });
4029
- /**
4030
- * Helper for personality file modules to keep the call site short and
4031
- * type-safe. `as const satisfies ...` would also work but produces wider
4032
- * types at use sites.
4033
- */
4034
- function defineButtonPersonality(input) {
4043
+ function resolveButtonStyleRecipe(recipe, parameters) {
4044
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
4045
+ if (!parsedParameters.success) return {
4046
+ kind: "error",
4047
+ error: {
4048
+ kind: "invalid-parameters",
4049
+ styleId: recipe.id,
4050
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
4051
+ }
4052
+ };
4053
+ const definition = recipe.defineSystem(parsedParameters.data);
4054
+ const roles = materializeButtonRoles(definition.roles);
4055
+ const buttonSystem = {
4056
+ global: definition.global,
4057
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
4058
+ ...definition.sizes ? { sizes: definition.sizes } : {}
4059
+ };
4060
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
4061
+ if (!parsedButtonSystem.success) return {
4062
+ kind: "error",
4063
+ error: {
4064
+ kind: "invalid-button-system",
4065
+ styleId: recipe.id,
4066
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
4067
+ }
4068
+ };
4035
4069
  return {
4036
- id: asButtonPersonalityId(input.id),
4037
- name: input.name,
4038
- description: input.description,
4039
- tags: input.tags,
4040
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
4070
+ kind: "resolved",
4071
+ buttonSystem: parsedButtonSystem.data
4072
+ };
4073
+ }
4074
+ function materializeSupportingRole(role, definition, completeRoles) {
4075
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
4076
+ return {
4077
+ ...completeRoles[definition.from],
4078
+ ...definition.overrides,
4079
+ id: role,
4080
+ name: roleName(role),
4081
+ enabled: true,
4082
+ priority: 3
4083
+ };
4084
+ }
4085
+ function materializeCompleteRole(role, appearance) {
4086
+ return {
4087
+ ...appearance,
4088
+ id: role,
4089
+ name: roleName(role),
4090
+ enabled: true,
4091
+ priority: rolePriority(role)
4041
4092
  };
4042
4093
  }
4094
+ function roleName(role) {
4095
+ return role.charAt(0).toUpperCase() + role.slice(1);
4096
+ }
4097
+ function rolePriority(role) {
4098
+ if (role === "primary") return 1;
4099
+ if (role === "secondary") return 2;
4100
+ return 3;
4101
+ }
4102
+ //#endregion
4103
+ //#region ../theme-core/src/buttons/styles/selection.ts
4104
+ const BUTTON_STYLE_IDS = [
4105
+ "soft-pill",
4106
+ "earth-pill",
4107
+ "confident-chip",
4108
+ "editorial-link",
4109
+ "pebble",
4110
+ "ink-stamp",
4111
+ "flat-ink",
4112
+ "brushed-wash",
4113
+ "showtime-pill",
4114
+ "joy-stamp",
4115
+ "ornate-ritual",
4116
+ "quiet-arrow"
4117
+ ];
4118
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
4119
+ const emptyParametersSchema$1 = z$1.object({}).strict();
4120
+ function selectionBranch(styleId, parameters) {
4121
+ return z$1.object({
4122
+ styleId: z$1.literal(styleId),
4123
+ parameters
4124
+ }).strict();
4125
+ }
4126
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
4127
+ selectionBranch("soft-pill", emptyParametersSchema$1),
4128
+ selectionBranch("earth-pill", emptyParametersSchema$1),
4129
+ selectionBranch("confident-chip", emptyParametersSchema$1),
4130
+ selectionBranch("editorial-link", emptyParametersSchema$1),
4131
+ selectionBranch("pebble", emptyParametersSchema$1),
4132
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
4133
+ selectionBranch("flat-ink", emptyParametersSchema$1),
4134
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
4135
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
4136
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
4137
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
4138
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
4139
+ ]);
4043
4140
  //#endregion
4044
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
4045
- /**
4046
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
4047
- * Generous padding, soft shadows; pairs with vibrant organic brands.
4048
- */
4049
- const brushedWash = defineButtonPersonality({
4050
- id: "brushed-wash",
4051
- name: "Brushed Wash",
4052
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
4141
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
4142
+ const quietArrowRecipe = defineButtonStyleRecipe({
4143
+ id: "quiet-arrow",
4144
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
4053
4145
  tags: {
4054
4146
  tone: "classic",
4055
- energy: "vibrant",
4056
- motion: "standard",
4057
- era: "organic"
4147
+ energy: "calm",
4148
+ motion: "subtle",
4149
+ era: "editorial"
4058
4150
  },
4059
- buttonSystem: {
4151
+ parameterSchema: quietArrowParametersSchema,
4152
+ defaultParameters: { secondaryTreatment: "outlined" },
4153
+ controls: [{
4154
+ kind: "choice",
4155
+ parameter: "secondaryTreatment",
4156
+ label: "Secondary button treatment",
4157
+ options: [{
4158
+ value: "outlined",
4159
+ label: "Outlined"
4160
+ }, {
4161
+ value: "solid-accent",
4162
+ label: "Solid accent"
4163
+ }]
4164
+ }],
4165
+ defineSystem: (parameters) => ({
4060
4166
  global: {
4061
4167
  cornerStyle: "rounded",
4062
- shadow: "low",
4063
- textTransform: "none",
4168
+ textTransform: "uppercase",
4064
4169
  fontWeight: 500,
4065
4170
  borderWidth: 1,
4171
+ typography: "body",
4172
+ fontSize: "text-sm",
4173
+ letterSpacing: "loose",
4066
4174
  hoverTransform: "none",
4067
4175
  hoverColor: "none"
4068
4176
  },
4069
4177
  sizes: {
4070
4178
  sm: {
4071
- padding: "0.75rem 2rem",
4179
+ padding: "0.625rem 1.25rem",
4180
+ fontSize: "text-xs"
4181
+ },
4182
+ md: {
4183
+ padding: "0.8125rem 1.75rem",
4072
4184
  fontSize: "text-sm"
4073
4185
  },
4074
- md: { padding: "1rem 2.5rem" },
4075
4186
  lg: {
4076
- padding: "1.25rem 3rem",
4077
- fontSize: "text-lg"
4187
+ padding: "0.9375rem 2.125rem",
4188
+ fontSize: "text-sm"
4078
4189
  },
4079
4190
  xl: {
4080
- padding: "1.625rem 3.75rem",
4081
- fontSize: "text-xl"
4191
+ padding: "1.0625rem 2.5rem",
4192
+ fontSize: "text-base"
4082
4193
  }
4083
4194
  },
4084
- variants: [
4085
- {
4086
- id: "primary",
4087
- name: "Primary",
4088
- enabled: true,
4089
- priority: 1,
4090
- background: {
4091
- type: "gradient",
4092
- stops: ["primary", "accent"],
4093
- direction: "to-r",
4094
- foregroundToken: "primaryForeground"
4095
- },
4096
- borderRadius: "rounded-lg",
4097
- shadow: {
4098
- elevation: "low",
4099
- softness: "soft",
4100
- position: "bottom"
4195
+ roles: {
4196
+ primary: {
4197
+ kind: "complete",
4198
+ appearance: {
4199
+ background: {
4200
+ type: "solid",
4201
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
4202
+ },
4203
+ borderRadius: "rounded-xl",
4204
+ affordance: { iconId: "ArrowRight" },
4205
+ effects: { hover: [{
4206
+ effectId: "darken-background",
4207
+ options: { amount: 100 }
4208
+ }] }
4101
4209
  }
4102
4210
  },
4103
- {
4104
- id: "secondary",
4105
- name: "Secondary",
4106
- enabled: true,
4107
- priority: 2,
4108
- background: {
4109
- type: "gradient",
4110
- stops: ["secondary", "accent"],
4111
- direction: "to-br",
4112
- foregroundToken: "primaryForeground"
4113
- },
4114
- borderRadius: "rounded-lg",
4115
- shadow: {
4116
- elevation: "low",
4117
- softness: "soft",
4118
- position: "bottom"
4211
+ secondary: {
4212
+ kind: "complete",
4213
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
4214
+ background: {
4215
+ type: "solid",
4216
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4217
+ },
4218
+ borderRadius: "rounded-xl",
4219
+ affordance: { iconId: "ArrowRight" },
4220
+ effects: { hover: [{
4221
+ effectId: "darken-background",
4222
+ options: { amount: 100 }
4223
+ }] }
4224
+ } : {
4225
+ background: {
4226
+ type: "surface",
4227
+ role: "link"
4228
+ },
4229
+ borderRadius: "rounded-xl",
4230
+ border: { widthClass: "border" },
4231
+ affordance: { iconId: "ArrowRight" },
4232
+ effects: { hover: [{
4233
+ effectId: "background-on-hover",
4234
+ options: { colorToken: "surfaceAlt" }
4235
+ }] }
4119
4236
  }
4120
4237
  },
4121
- {
4122
- id: "outline",
4123
- name: "Outline",
4124
- enabled: true,
4125
- priority: 3,
4126
- background: {
4127
- type: "surface",
4128
- role: "link"
4129
- },
4130
- borderRadius: "rounded-lg",
4131
- border: { widthClass: "border" },
4132
- effects: { hover: [{
4133
- effectId: "background-on-hover",
4134
- options: { colorToken: "surface" }
4135
- }] }
4238
+ outline: {
4239
+ kind: "complete",
4240
+ appearance: {
4241
+ background: {
4242
+ type: "surface",
4243
+ role: "link"
4244
+ },
4245
+ borderRadius: "rounded-xl",
4246
+ border: { widthClass: "border" }
4247
+ }
4136
4248
  },
4137
- {
4138
- id: "ghost",
4139
- name: "Ghost",
4140
- enabled: true,
4141
- priority: 3,
4142
- background: {
4143
- type: "surface",
4144
- role: "link"
4145
- },
4146
- borderRadius: "rounded-lg",
4147
- effects: { hover: [{
4148
- effectId: "background-on-hover",
4149
- options: { colorToken: "surface" }
4150
- }] }
4249
+ ghost: {
4250
+ kind: "complete",
4251
+ appearance: {
4252
+ background: {
4253
+ type: "surface",
4254
+ role: "link"
4255
+ },
4256
+ borderRadius: "rounded-xl"
4257
+ }
4258
+ },
4259
+ accent: {
4260
+ kind: "derive",
4261
+ from: "primary",
4262
+ overrides: { background: {
4263
+ type: "solid",
4264
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4265
+ } }
4151
4266
  }
4152
- ]
4153
- }
4267
+ }
4268
+ })
4154
4269
  });
4155
4270
  //#endregion
4156
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
4157
- /**
4158
- * Confident Chip — moderate-radius solid buttons that read as competent and
4159
- * direct. Default for Clear Professional; works for any modern brand voice.
4160
- */
4161
- const confidentChip = defineButtonPersonality({
4162
- id: "confident-chip",
4163
- name: "Confident Chip",
4164
- description: "Mid-radius solid buttons with a crisp hover.",
4271
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
4272
+ const emptyParametersSchema = z$1.object({}).strict();
4273
+ function defineStaticButtonStyleRecipe(input) {
4274
+ const system = normalizeSystem(input.system);
4275
+ return defineButtonStyleRecipe({
4276
+ id: input.id,
4277
+ accessibilityLabel: input.accessibilityLabel,
4278
+ tags: input.tags,
4279
+ parameterSchema: emptyParametersSchema,
4280
+ defaultParameters: {},
4281
+ controls: [],
4282
+ defineSystem: () => system
4283
+ });
4284
+ }
4285
+ function normalizeSystem(input) {
4286
+ return {
4287
+ global: buttonGlobalSettingsSchema.parse(input.global),
4288
+ ...input.sizes ? { sizes: input.sizes } : {},
4289
+ roles: {
4290
+ primary: normalizeCompleteRole(input.roles.primary),
4291
+ secondary: normalizeCompleteRole(input.roles.secondary),
4292
+ outline: normalizeSupportingRole(input.roles.outline),
4293
+ ghost: normalizeSupportingRole(input.roles.ghost),
4294
+ accent: normalizeSupportingRole(input.roles.accent)
4295
+ }
4296
+ };
4297
+ }
4298
+ function normalizeCompleteRole(role) {
4299
+ return {
4300
+ kind: "complete",
4301
+ appearance: normalizeAppearance(role.appearance)
4302
+ };
4303
+ }
4304
+ function normalizeSupportingRole(role) {
4305
+ if (role.kind === "complete") return normalizeCompleteRole(role);
4306
+ return {
4307
+ kind: "derive",
4308
+ from: role.from,
4309
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
4310
+ };
4311
+ }
4312
+ function normalizeAppearance(appearance) {
4313
+ const { background, hoverBackgroundToken, ...rest } = appearance;
4314
+ return {
4315
+ ...rest,
4316
+ background: buttonColourTreatmentSchema.parse(background),
4317
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4318
+ };
4319
+ }
4320
+ function normalizeAppearanceOverrides(overrides) {
4321
+ const { background, hoverBackgroundToken, ...rest } = overrides;
4322
+ return {
4323
+ ...rest,
4324
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
4325
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4326
+ };
4327
+ }
4328
+ //#endregion
4329
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
4330
+ const softPillRecipe = defineStaticButtonStyleRecipe({
4331
+ id: "soft-pill",
4332
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
4165
4333
  tags: {
4166
4334
  tone: "classic",
4167
4335
  energy: "calm",
4168
- motion: "standard",
4169
- era: "modern"
4336
+ motion: "subtle",
4337
+ era: "organic"
4170
4338
  },
4171
- buttonSystem: {
4339
+ system: {
4172
4340
  global: {
4173
- cornerStyle: "rounded",
4174
- shadow: "medium",
4341
+ cornerStyle: "pill",
4342
+ shadow: "low",
4175
4343
  textTransform: "none",
4176
- fontWeight: 600,
4177
- borderWidth: 1,
4178
- hoverTransform: "none",
4344
+ fontWeight: 500,
4345
+ borderWidth: 2,
4346
+ hoverTransform: "lift",
4179
4347
  hoverColor: "none"
4180
4348
  },
4181
- variants: [
4182
- {
4183
- id: "primary",
4184
- name: "Primary",
4185
- enabled: true,
4186
- priority: 1,
4187
- background: {
4188
- type: "solid",
4189
- colorToken: "primary"
4190
- },
4191
- borderRadius: "rounded-md",
4192
- shadow: {
4193
- elevation: "medium",
4194
- softness: "soft",
4195
- position: "bottom"
4196
- },
4197
- effects: {
4198
- hover: [{
4199
- effectId: "darken-background",
4200
- options: { amount: 100 }
4201
- }],
4202
- active: [{
4203
- effectId: "scale-down",
4204
- options: { scale: "0.97" }
4205
- }]
4349
+ roles: {
4350
+ primary: {
4351
+ kind: "complete",
4352
+ appearance: {
4353
+ background: {
4354
+ type: "solid",
4355
+ colorToken: "primary"
4356
+ },
4357
+ borderRadius: "rounded-full",
4358
+ shadow: {
4359
+ elevation: "low",
4360
+ softness: "soft",
4361
+ position: "bottom"
4362
+ },
4363
+ effects: {
4364
+ hover: [{
4365
+ effectId: "lift",
4366
+ options: { translateY: "-1px" }
4367
+ }],
4368
+ active: [{
4369
+ effectId: "scale-down",
4370
+ options: { scale: "0.98" }
4371
+ }]
4372
+ }
4206
4373
  }
4207
4374
  },
4208
- {
4209
- id: "secondary",
4210
- name: "Secondary",
4211
- enabled: true,
4212
- priority: 2,
4213
- background: {
4214
- type: "solid",
4215
- colorToken: "surface"
4216
- },
4217
- borderRadius: "rounded-md",
4218
- border: { widthClass: "border" },
4219
- effects: { hover: [{
4220
- effectId: "background-on-hover",
4221
- options: { colorToken: "background" }
4222
- }] }
4375
+ secondary: {
4376
+ kind: "complete",
4377
+ appearance: {
4378
+ background: {
4379
+ type: "surface",
4380
+ role: "link"
4381
+ },
4382
+ borderRadius: "rounded-full",
4383
+ border: { widthClass: "border-2" },
4384
+ effects: { hover: [{
4385
+ effectId: "background-on-hover",
4386
+ options: { colorToken: "surface" }
4387
+ }] }
4388
+ }
4223
4389
  },
4224
- {
4225
- id: "outline",
4226
- name: "Outline",
4227
- enabled: true,
4228
- priority: 3,
4229
- background: {
4230
- type: "surface",
4231
- role: "link"
4232
- },
4233
- borderRadius: "rounded-md",
4234
- border: { widthClass: "border" },
4235
- effects: { hover: [{
4236
- effectId: "background-on-hover",
4237
- options: { colorToken: "surface" }
4238
- }] }
4390
+ outline: {
4391
+ kind: "complete",
4392
+ appearance: {
4393
+ background: {
4394
+ type: "surface",
4395
+ role: "link"
4396
+ },
4397
+ borderRadius: "rounded-full",
4398
+ border: { widthClass: "border" },
4399
+ effects: { hover: [{
4400
+ effectId: "background-on-hover",
4401
+ options: { colorToken: "surface" }
4402
+ }] }
4403
+ }
4239
4404
  },
4240
- {
4241
- id: "ghost",
4242
- name: "Ghost",
4243
- enabled: true,
4244
- priority: 3,
4245
- background: {
4246
- type: "surface",
4247
- role: "link"
4248
- },
4249
- borderRadius: "rounded-md",
4250
- effects: { hover: [{
4251
- effectId: "background-on-hover",
4252
- options: { colorToken: "surface" }
4253
- }] }
4405
+ ghost: {
4406
+ kind: "complete",
4407
+ appearance: {
4408
+ background: {
4409
+ type: "surface",
4410
+ role: "link"
4411
+ },
4412
+ borderRadius: "rounded-full",
4413
+ effects: { hover: [{
4414
+ effectId: "background-on-hover",
4415
+ options: { colorToken: "surface" }
4416
+ }] }
4417
+ }
4418
+ },
4419
+ accent: {
4420
+ kind: "derive",
4421
+ from: "primary",
4422
+ overrides: { background: {
4423
+ type: "solid",
4424
+ colorToken: "accent"
4425
+ } }
4254
4426
  }
4255
- ]
4427
+ }
4256
4428
  }
4257
4429
  });
4258
- //#endregion
4259
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
4260
- /**
4261
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
4262
- * Built for grounded editorial wellness styles such as Soft Earth.
4263
- */
4264
- const earthPill = defineButtonPersonality({
4430
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
4265
4431
  id: "earth-pill",
4266
- name: "Earth Pill",
4267
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
4432
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
4268
4433
  tags: {
4269
4434
  tone: "classic",
4270
4435
  energy: "calm",
4271
4436
  motion: "subtle",
4272
4437
  era: "organic"
4273
4438
  },
4274
- buttonSystem: {
4439
+ system: {
4275
4440
  global: {
4276
4441
  cornerStyle: "pill",
4277
4442
  shadow: "low",
@@ -4298,940 +4463,808 @@ const earthPill = defineButtonPersonality({
4298
4463
  fontSize: "text-xl"
4299
4464
  }
4300
4465
  },
4301
- variants: [
4302
- {
4303
- id: "primary",
4304
- name: "Primary",
4305
- enabled: true,
4306
- priority: 1,
4307
- background: {
4308
- type: "solid",
4309
- colorToken: "primary"
4310
- },
4311
- borderRadius: "rounded-full",
4312
- shadow: {
4313
- elevation: "low",
4314
- softness: "soft",
4315
- position: "bottom"
4316
- },
4317
- effects: {
4318
- hover: [{
4319
- effectId: "lift",
4320
- options: { translateY: "-1px" }
4321
- }, {
4322
- effectId: "background-on-hover",
4323
- options: { colorToken: "accent" }
4324
- }],
4325
- active: [{
4326
- effectId: "scale-down",
4327
- options: { scale: "0.98" }
4328
- }]
4466
+ roles: {
4467
+ primary: {
4468
+ kind: "complete",
4469
+ appearance: {
4470
+ background: {
4471
+ type: "solid",
4472
+ colorToken: "primary"
4473
+ },
4474
+ borderRadius: "rounded-full",
4475
+ shadow: {
4476
+ elevation: "low",
4477
+ softness: "soft",
4478
+ position: "bottom"
4479
+ },
4480
+ effects: {
4481
+ hover: [{
4482
+ effectId: "lift",
4483
+ options: { translateY: "-1px" }
4484
+ }, {
4485
+ effectId: "background-on-hover",
4486
+ options: { colorToken: "accent" }
4487
+ }],
4488
+ active: [{
4489
+ effectId: "scale-down",
4490
+ options: { scale: "0.98" }
4491
+ }]
4492
+ }
4329
4493
  }
4330
4494
  },
4331
- {
4332
- id: "secondary",
4333
- name: "Secondary",
4334
- enabled: true,
4335
- priority: 2,
4336
- background: {
4337
- type: "surface",
4338
- role: "link"
4339
- },
4340
- borderRadius: "rounded-full",
4341
- border: { widthClass: "border" },
4342
- effects: { hover: [{
4343
- effectId: "background-on-hover",
4344
- options: { colorToken: "muted" }
4345
- }] }
4495
+ secondary: {
4496
+ kind: "complete",
4497
+ appearance: {
4498
+ background: {
4499
+ type: "surface",
4500
+ role: "link"
4501
+ },
4502
+ borderRadius: "rounded-full",
4503
+ border: { widthClass: "border" },
4504
+ effects: { hover: [{
4505
+ effectId: "background-on-hover",
4506
+ options: { colorToken: "muted" }
4507
+ }] }
4508
+ }
4346
4509
  },
4347
- {
4348
- id: "outline",
4349
- name: "Outline",
4350
- enabled: true,
4351
- priority: 3,
4352
- background: {
4353
- type: "surface",
4354
- role: "link"
4355
- },
4356
- borderRadius: "rounded-full",
4357
- border: { widthClass: "border" },
4358
- effects: { hover: [{
4359
- effectId: "background-on-hover",
4360
- options: { colorToken: "surfaceAlt" }
4361
- }] }
4510
+ outline: {
4511
+ kind: "complete",
4512
+ appearance: {
4513
+ background: {
4514
+ type: "surface",
4515
+ role: "link"
4516
+ },
4517
+ borderRadius: "rounded-full",
4518
+ border: { widthClass: "border" },
4519
+ effects: { hover: [{
4520
+ effectId: "background-on-hover",
4521
+ options: { colorToken: "surfaceAlt" }
4522
+ }] }
4523
+ }
4362
4524
  },
4363
- {
4364
- id: "ghost",
4365
- name: "Ghost",
4366
- enabled: true,
4367
- priority: 3,
4368
- background: {
4369
- type: "surface",
4370
- role: "link"
4371
- },
4372
- borderRadius: "rounded-full",
4373
- shadow: {
4374
- elevation: "none",
4375
- softness: null,
4376
- position: "bottom"
4377
- },
4378
- sizes: {
4379
- sm: {
4380
- padding: "0.25rem 0",
4381
- fontSize: "text-sm"
4525
+ ghost: {
4526
+ kind: "complete",
4527
+ appearance: {
4528
+ background: {
4529
+ type: "surface",
4530
+ role: "link"
4382
4531
  },
4383
- md: { padding: "0.375rem 0" },
4384
- lg: {
4385
- padding: "0.5rem 0",
4386
- fontSize: "text-lg"
4532
+ borderRadius: "rounded-full",
4533
+ shadow: {
4534
+ elevation: "none",
4535
+ softness: null,
4536
+ position: "bottom"
4387
4537
  },
4388
- xl: {
4389
- padding: "0.625rem 0",
4390
- fontSize: "text-xl"
4538
+ sizes: {
4539
+ sm: {
4540
+ padding: "0.25rem 0",
4541
+ fontSize: "text-sm"
4542
+ },
4543
+ md: { padding: "0.375rem 0" },
4544
+ lg: {
4545
+ padding: "0.5rem 0",
4546
+ fontSize: "text-lg"
4547
+ },
4548
+ xl: {
4549
+ padding: "0.625rem 0",
4550
+ fontSize: "text-xl"
4551
+ }
4391
4552
  }
4392
4553
  }
4554
+ },
4555
+ accent: {
4556
+ kind: "derive",
4557
+ from: "primary",
4558
+ overrides: { background: {
4559
+ type: "solid",
4560
+ colorToken: "accent"
4561
+ } }
4393
4562
  }
4394
- ]
4563
+ }
4395
4564
  }
4396
4565
  });
4397
- //#endregion
4398
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
4399
- /**
4400
- * Editorial Link — all variants are link-style with a growing underline.
4401
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
4402
- */
4403
- const editorialLink = defineButtonPersonality({
4404
- id: "editorial-link",
4405
- name: "Editorial Link",
4406
- description: "Link-style with a growing underline. Refined, typographic.",
4566
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
4567
+ id: "confident-chip",
4568
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
4407
4569
  tags: {
4408
- tone: "minimal",
4570
+ tone: "classic",
4409
4571
  energy: "calm",
4410
- motion: "subtle",
4411
- era: "editorial"
4572
+ motion: "standard",
4573
+ era: "modern"
4412
4574
  },
4413
- buttonSystem: {
4575
+ system: {
4414
4576
  global: {
4415
- cornerStyle: "square",
4577
+ cornerStyle: "rounded",
4578
+ shadow: "medium",
4416
4579
  textTransform: "none",
4417
- fontWeight: 500,
4580
+ fontWeight: 600,
4418
4581
  borderWidth: 1,
4419
4582
  hoverTransform: "none",
4420
4583
  hoverColor: "none"
4421
4584
  },
4422
- variants: [
4423
- {
4424
- id: "primary",
4425
- name: "Primary",
4426
- enabled: true,
4427
- priority: 1,
4428
- background: {
4429
- type: "surface",
4430
- role: "link"
4431
- },
4432
- borderRadius: "rounded-none",
4433
- sizes: {
4434
- sm: { padding: "0.25rem 0" },
4435
- md: { padding: "0.5rem 0" },
4436
- lg: { padding: "0.625rem 0" },
4437
- xl: { padding: "0.75rem 0" }
4438
- },
4439
- effects: { base: [{
4440
- effectId: "border-bottom-grow",
4441
- options: {
4442
- height: 2,
4443
- colorToken: "text",
4444
- origin: "left"
4585
+ roles: {
4586
+ primary: {
4587
+ kind: "complete",
4588
+ appearance: {
4589
+ background: {
4590
+ type: "solid",
4591
+ colorToken: "primary"
4592
+ },
4593
+ borderRadius: "rounded-md",
4594
+ shadow: {
4595
+ elevation: "medium",
4596
+ softness: "soft",
4597
+ position: "bottom"
4598
+ },
4599
+ effects: {
4600
+ hover: [{
4601
+ effectId: "darken-background",
4602
+ options: { amount: 100 }
4603
+ }],
4604
+ active: [{
4605
+ effectId: "scale-down",
4606
+ options: { scale: "0.97" }
4607
+ }]
4445
4608
  }
4446
- }] }
4609
+ }
4447
4610
  },
4448
- {
4449
- id: "secondary",
4450
- name: "Secondary",
4451
- enabled: true,
4452
- priority: 2,
4453
- background: {
4454
- type: "surface",
4455
- role: "link"
4456
- },
4457
- borderRadius: "rounded-none",
4458
- sizes: {
4459
- sm: { padding: "0.25rem 0" },
4460
- md: { padding: "0.5rem 0" },
4461
- lg: { padding: "0.625rem 0" },
4462
- xl: { padding: "0.75rem 0" }
4463
- },
4464
- effects: { base: [{
4465
- effectId: "border-bottom-grow",
4466
- options: {
4467
- height: 1,
4468
- colorToken: "mutedText",
4469
- origin: "left"
4470
- }
4471
- }] }
4611
+ secondary: {
4612
+ kind: "complete",
4613
+ appearance: {
4614
+ background: {
4615
+ type: "solid",
4616
+ colorToken: "surface"
4617
+ },
4618
+ borderRadius: "rounded-md",
4619
+ border: { widthClass: "border" },
4620
+ effects: { hover: [{
4621
+ effectId: "background-on-hover",
4622
+ options: { colorToken: "background" }
4623
+ }] }
4624
+ }
4472
4625
  },
4473
- {
4474
- id: "outline",
4475
- name: "Outline",
4476
- enabled: true,
4477
- priority: 3,
4478
- background: {
4479
- type: "surface",
4480
- role: "link"
4481
- },
4482
- borderRadius: "rounded-none",
4483
- sizes: {
4484
- sm: { padding: "0.25rem 0" },
4485
- md: { padding: "0.5rem 0" },
4486
- lg: { padding: "0.625rem 0" },
4487
- xl: { padding: "0.75rem 0" }
4488
- },
4489
- effects: { base: [{
4490
- effectId: "border-bottom-grow",
4491
- options: {
4492
- height: 1,
4493
- colorToken: "accent",
4494
- origin: "left"
4495
- }
4496
- }] }
4626
+ outline: {
4627
+ kind: "complete",
4628
+ appearance: {
4629
+ background: {
4630
+ type: "surface",
4631
+ role: "link"
4632
+ },
4633
+ borderRadius: "rounded-md",
4634
+ border: { widthClass: "border" },
4635
+ effects: { hover: [{
4636
+ effectId: "background-on-hover",
4637
+ options: { colorToken: "surface" }
4638
+ }] }
4639
+ }
4497
4640
  },
4498
- {
4499
- id: "ghost",
4500
- name: "Ghost",
4501
- enabled: true,
4502
- priority: 3,
4503
- background: {
4504
- type: "surface",
4505
- role: "link"
4506
- },
4507
- borderRadius: "rounded-none",
4508
- sizes: {
4509
- sm: { padding: "0.25rem 0" },
4510
- md: { padding: "0.5rem 0" },
4511
- lg: { padding: "0.625rem 0" },
4512
- xl: { padding: "0.75rem 0" }
4641
+ ghost: {
4642
+ kind: "complete",
4643
+ appearance: {
4644
+ background: {
4645
+ type: "surface",
4646
+ role: "link"
4647
+ },
4648
+ borderRadius: "rounded-md",
4649
+ effects: { hover: [{
4650
+ effectId: "background-on-hover",
4651
+ options: { colorToken: "surface" }
4652
+ }] }
4513
4653
  }
4654
+ },
4655
+ accent: {
4656
+ kind: "derive",
4657
+ from: "primary",
4658
+ overrides: { background: {
4659
+ type: "solid",
4660
+ colorToken: "accent"
4661
+ } }
4514
4662
  }
4515
- ]
4663
+ }
4516
4664
  }
4517
4665
  });
4518
- //#endregion
4519
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
4520
- /**
4521
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
4522
- * amber accent climax, all completely flat (no drop shadow) with a modest
4523
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
4524
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
4525
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
4526
- * the page's one conversion climax.
4527
- */
4528
- const flatInk = defineButtonPersonality({
4529
- id: "flat-ink",
4530
- name: "Flat Ink",
4531
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
4666
+ const editorialSizes = {
4667
+ sm: { padding: "0.25rem 0" },
4668
+ md: { padding: "0.5rem 0" },
4669
+ lg: { padding: "0.625rem 0" },
4670
+ xl: { padding: "0.75rem 0" }
4671
+ };
4672
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
4673
+ id: "editorial-link",
4674
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
4532
4675
  tags: {
4533
- tone: "classic",
4676
+ tone: "minimal",
4534
4677
  energy: "calm",
4535
4678
  motion: "subtle",
4536
4679
  era: "editorial"
4537
4680
  },
4538
- buttonSystem: {
4681
+ system: {
4539
4682
  global: {
4540
- cornerStyle: "rounded",
4683
+ cornerStyle: "square",
4541
4684
  textTransform: "none",
4542
- fontWeight: 600,
4543
- borderWidth: 1,
4544
- typography: "body",
4545
- letterSpacing: "tight",
4546
- paddingPreset: "default",
4547
- hoverTransform: "lift",
4548
- hoverColor: "none"
4549
- },
4550
- sizes: {
4551
- sm: {
4552
- padding: "0.625rem 1.125rem",
4553
- fontSize: "text-sm"
4554
- },
4555
- md: { padding: "0.8125rem 1.375rem" },
4556
- lg: {
4557
- padding: "0.9375rem 1.625rem",
4558
- fontSize: "text-lg"
4559
- },
4560
- xl: {
4561
- padding: "1.0625rem 2rem",
4562
- fontSize: "text-xl"
4563
- }
4564
- },
4565
- variants: [
4566
- {
4567
- id: "primary",
4568
- name: "Primary",
4569
- enabled: true,
4570
- priority: 1,
4571
- background: {
4572
- type: "solid",
4573
- colorToken: "primary"
4574
- },
4575
- borderRadius: "rounded-lg",
4576
- affordance: { iconId: "ArrowRight" },
4577
- effects: { hover: [{
4578
- effectId: "lift",
4579
- options: { translateY: "-2px" }
4580
- }, {
4581
- effectId: "background-on-hover",
4582
- options: { colorToken: "secondary" }
4583
- }] }
4584
- },
4585
- {
4586
- id: "secondary",
4587
- name: "Secondary",
4588
- enabled: true,
4589
- priority: 2,
4590
- background: {
4591
- type: "surface",
4592
- role: "link"
4593
- },
4594
- borderRadius: "rounded-lg",
4595
- border: { widthClass: "border" },
4596
- effects: { hover: [{
4597
- effectId: "lift",
4598
- options: { translateY: "-2px" }
4599
- }, {
4600
- effectId: "background-on-hover",
4601
- options: { colorToken: "surfaceAlt" }
4602
- }] }
4603
- },
4604
- {
4605
- id: "accent",
4606
- name: "Accent",
4607
- enabled: true,
4608
- priority: 3,
4609
- background: {
4610
- type: "solid",
4611
- colorToken: "accent"
4612
- },
4613
- borderRadius: "rounded-lg",
4614
- affordance: { iconId: "ArrowRight" },
4615
- effects: { hover: [{
4616
- effectId: "lift",
4617
- options: { translateY: "-2px" }
4618
- }] }
4619
- }
4620
- ]
4621
- }
4622
- });
4623
- //#endregion
4624
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
4625
- /**
4626
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
4627
- * feel. Reads as bold and handmade; suits expressive craft brands.
4628
- */
4629
- const inkStamp = defineButtonPersonality({
4630
- id: "ink-stamp",
4631
- name: "Ink Stamp",
4632
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
4633
- tags: {
4634
- tone: "bold",
4635
- energy: "vibrant",
4636
- motion: "standard",
4637
- era: "organic"
4638
- },
4639
- buttonSystem: {
4640
- global: {
4641
- cornerStyle: "rounded",
4642
- textTransform: "uppercase",
4643
- fontWeight: 600,
4685
+ fontWeight: 500,
4644
4686
  borderWidth: 1,
4645
4687
  hoverTransform: "none",
4646
- hoverColor: "none",
4647
- letterSpacing: "loose"
4648
- },
4649
- sizes: {
4650
- sm: {
4651
- padding: "0.5rem 1.25rem",
4652
- fontSize: "text-xs"
4653
- },
4654
- md: {
4655
- padding: "0.75rem 1.75rem",
4656
- fontSize: "text-sm"
4657
- },
4658
- lg: {
4659
- padding: "0.875rem 2.25rem",
4660
- fontSize: "text-base"
4661
- },
4662
- xl: {
4663
- padding: "1.125rem 2.75rem",
4664
- fontSize: "text-lg"
4665
- }
4688
+ hoverColor: "none"
4666
4689
  },
4667
- variants: [
4668
- {
4669
- id: "primary",
4670
- name: "Primary",
4671
- enabled: true,
4672
- priority: 1,
4673
- background: {
4674
- type: "solid",
4675
- colorToken: "primary"
4676
- },
4677
- borderRadius: "rounded-md",
4678
- effects: {
4679
- hover: [{
4680
- effectId: "drop-shadow",
4681
- options: { intensity: "medium" }
4682
- }, {
4683
- effectId: "scale-up",
4684
- options: { scale: "1.02" }
4685
- }],
4686
- active: [{
4687
- effectId: "scale-down",
4688
- options: { scale: "0.98" }
4689
- }]
4690
+ roles: {
4691
+ primary: {
4692
+ kind: "complete",
4693
+ appearance: {
4694
+ background: {
4695
+ type: "surface",
4696
+ role: "link"
4697
+ },
4698
+ borderRadius: "rounded-none",
4699
+ sizes: editorialSizes,
4700
+ effects: { base: [{
4701
+ effectId: "border-bottom-grow",
4702
+ options: {
4703
+ height: 2,
4704
+ colorToken: "text",
4705
+ origin: "left"
4706
+ }
4707
+ }] }
4690
4708
  }
4691
4709
  },
4692
- {
4693
- id: "secondary",
4694
- name: "Secondary",
4695
- enabled: true,
4696
- priority: 2,
4697
- background: {
4698
- type: "surface",
4699
- role: "link"
4700
- },
4701
- borderRadius: "rounded-md",
4702
- border: { widthClass: "border-2" },
4703
- effects: { hover: [{
4704
- effectId: "background-on-hover",
4705
- options: { colorToken: "surface" }
4706
- }] }
4707
- },
4708
- {
4709
- id: "outline",
4710
- name: "Outline",
4711
- enabled: true,
4712
- priority: 3,
4713
- background: {
4714
- type: "surface",
4715
- role: "link"
4716
- },
4717
- borderRadius: "rounded-md",
4718
- border: { widthClass: "border-2" },
4719
- effects: { hover: [{
4720
- effectId: "background-on-hover",
4721
- options: { colorToken: "surface" }
4722
- }] }
4723
- },
4724
- {
4725
- id: "ghost",
4726
- name: "Ghost",
4727
- enabled: true,
4728
- priority: 3,
4729
- background: {
4730
- type: "surface",
4731
- role: "link"
4732
- },
4733
- borderRadius: "rounded-none",
4734
- sizes: {
4735
- sm: {
4736
- padding: "0.375rem 0",
4737
- fontSize: "text-xs"
4710
+ secondary: {
4711
+ kind: "complete",
4712
+ appearance: {
4713
+ background: {
4714
+ type: "surface",
4715
+ role: "link"
4738
4716
  },
4739
- md: {
4740
- padding: "0.5rem 0",
4741
- fontSize: "text-sm"
4717
+ borderRadius: "rounded-none",
4718
+ sizes: editorialSizes,
4719
+ effects: { base: [{
4720
+ effectId: "border-bottom-grow",
4721
+ options: {
4722
+ height: 1,
4723
+ colorToken: "mutedText",
4724
+ origin: "left"
4725
+ }
4726
+ }] }
4727
+ }
4728
+ },
4729
+ outline: {
4730
+ kind: "complete",
4731
+ appearance: {
4732
+ background: {
4733
+ type: "surface",
4734
+ role: "link"
4742
4735
  },
4743
- lg: {
4744
- padding: "0.625rem 0",
4745
- fontSize: "text-base"
4736
+ borderRadius: "rounded-none",
4737
+ sizes: editorialSizes,
4738
+ effects: { base: [{
4739
+ effectId: "border-bottom-grow",
4740
+ options: {
4741
+ height: 1,
4742
+ colorToken: "accent",
4743
+ origin: "left"
4744
+ }
4745
+ }] }
4746
+ }
4747
+ },
4748
+ ghost: {
4749
+ kind: "complete",
4750
+ appearance: {
4751
+ background: {
4752
+ type: "surface",
4753
+ role: "link"
4746
4754
  },
4747
- xl: {
4748
- padding: "0.75rem 0",
4749
- fontSize: "text-lg"
4750
- }
4751
- },
4752
- effects: { base: [{
4755
+ borderRadius: "rounded-none",
4756
+ sizes: editorialSizes
4757
+ }
4758
+ },
4759
+ accent: {
4760
+ kind: "derive",
4761
+ from: "primary",
4762
+ overrides: { effects: { base: [{
4753
4763
  effectId: "border-bottom-grow",
4754
4764
  options: {
4755
- height: 1,
4765
+ height: 2,
4756
4766
  colorToken: "accent",
4757
4767
  origin: "left"
4758
4768
  }
4759
- }] }
4769
+ }] } }
4760
4770
  }
4761
- ]
4771
+ }
4762
4772
  }
4763
4773
  });
4764
- //#endregion
4765
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
4766
- /**
4767
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
4768
- * that collapses as the button presses into it on hover. Authored for the
4769
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
4770
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
4771
- *
4772
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
4773
- * extension; the press is the shared `press-down` effect, which matches its
4774
- * translate to each variant's own shadow offset.
4775
- */
4776
- const joyStamp = defineButtonPersonality({
4777
- id: "joy-stamp",
4778
- name: "Joy Stamp",
4779
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
4774
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
4775
+ id: "pebble",
4776
+ accessibilityLabel: "Generously padded pill buttons",
4780
4777
  tags: {
4781
- tone: "bold",
4782
- energy: "vibrant",
4783
- motion: "expressive",
4778
+ tone: "classic",
4779
+ energy: "calm",
4780
+ motion: "standard",
4784
4781
  era: "organic"
4785
4782
  },
4786
- buttonSystem: {
4783
+ system: {
4787
4784
  global: {
4788
4785
  cornerStyle: "pill",
4789
- shadow: "high",
4790
4786
  textTransform: "none",
4791
- typography: "heading",
4792
- fontWeight: 700,
4793
- fontSize: "text-lg",
4787
+ fontWeight: 500,
4794
4788
  borderWidth: 2,
4795
4789
  hoverTransform: "none",
4796
4790
  hoverColor: "none"
4797
4791
  },
4798
4792
  sizes: {
4799
4793
  sm: {
4800
- padding: "0.625rem 1.25rem",
4801
- fontSize: "text-base"
4802
- },
4803
- md: {
4804
- padding: "0.875rem 1.75rem",
4805
- fontSize: "text-lg"
4794
+ padding: "0.625rem 1.75rem",
4795
+ fontSize: "text-sm"
4806
4796
  },
4797
+ md: { padding: "0.875rem 2.25rem" },
4807
4798
  lg: {
4808
- padding: "1.125rem 2.25rem",
4809
- fontSize: "text-xl"
4799
+ padding: "1.125rem 2.75rem",
4800
+ fontSize: "text-lg"
4810
4801
  },
4811
4802
  xl: {
4812
- padding: "1.25rem 2.75rem",
4813
- fontSize: "text-2xl"
4803
+ padding: "1.5rem 3.5rem",
4804
+ fontSize: "text-xl"
4814
4805
  }
4815
4806
  },
4816
- variants: [{
4817
- id: "primary",
4818
- name: "Primary",
4819
- enabled: true,
4820
- priority: 1,
4821
- background: {
4822
- type: "solid",
4823
- colorToken: "primary"
4807
+ roles: {
4808
+ primary: {
4809
+ kind: "complete",
4810
+ appearance: {
4811
+ background: {
4812
+ type: "solid",
4813
+ colorToken: "primary"
4814
+ },
4815
+ borderRadius: "rounded-full",
4816
+ effects: { hover: [{
4817
+ effectId: "darken-background",
4818
+ options: { amount: 100 }
4819
+ }] }
4820
+ }
4824
4821
  },
4825
- borderRadius: "rounded-full",
4826
- shadow: {
4827
- elevation: "high",
4828
- softness: "hard",
4829
- position: "bottom-right",
4830
- colorToken: "text"
4822
+ secondary: {
4823
+ kind: "complete",
4824
+ appearance: {
4825
+ background: {
4826
+ type: "surface",
4827
+ role: "link"
4828
+ },
4829
+ borderRadius: "rounded-full",
4830
+ border: { widthClass: "border-2" },
4831
+ effects: { hover: [{
4832
+ effectId: "background-on-hover",
4833
+ options: { colorToken: "accent" }
4834
+ }] }
4835
+ }
4831
4836
  },
4832
- effects: { hover: [{ effectId: "press-down" }] }
4833
- }, {
4834
- id: "secondary",
4835
- name: "Secondary",
4836
- enabled: true,
4837
- priority: 2,
4838
- background: {
4839
- type: "surface",
4840
- role: "link"
4841
- },
4842
- borderRadius: "rounded-full",
4843
- border: { widthClass: "border-2" },
4844
- shadow: {
4845
- elevation: "high",
4846
- softness: "hard",
4847
- position: "bottom-right",
4848
- colorToken: "secondary"
4849
- },
4850
- effects: { hover: [{ effectId: "press-down" }] }
4851
- }]
4837
+ outline: {
4838
+ kind: "complete",
4839
+ appearance: {
4840
+ background: {
4841
+ type: "surface",
4842
+ role: "link"
4843
+ },
4844
+ borderRadius: "rounded-full",
4845
+ border: { widthClass: "border" },
4846
+ effects: { hover: [{
4847
+ effectId: "background-on-hover",
4848
+ options: { colorToken: "surface" }
4849
+ }] }
4850
+ }
4851
+ },
4852
+ ghost: {
4853
+ kind: "complete",
4854
+ appearance: {
4855
+ background: {
4856
+ type: "surface",
4857
+ role: "link"
4858
+ },
4859
+ borderRadius: "rounded-full",
4860
+ sizes: {
4861
+ sm: {
4862
+ padding: "0.375rem 0.875rem",
4863
+ fontSize: "text-sm"
4864
+ },
4865
+ md: { padding: "0.5rem 1rem" },
4866
+ lg: {
4867
+ padding: "0.625rem 1.25rem",
4868
+ fontSize: "text-lg"
4869
+ },
4870
+ xl: {
4871
+ padding: "0.75rem 1.5rem",
4872
+ fontSize: "text-xl"
4873
+ }
4874
+ }
4875
+ }
4876
+ },
4877
+ accent: {
4878
+ kind: "derive",
4879
+ from: "primary",
4880
+ overrides: { background: {
4881
+ type: "solid",
4882
+ colorToken: "accent"
4883
+ } }
4884
+ }
4885
+ }
4852
4886
  }
4853
4887
  });
4854
- //#endregion
4855
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
4856
- /**
4857
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
4858
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
4859
- */
4860
- const ornateRitual = defineButtonPersonality({
4861
- id: "ornate-ritual",
4862
- name: "Ornate Ritual",
4863
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
4888
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
4889
+ id: "brushed-wash",
4890
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
4864
4891
  tags: {
4865
4892
  tone: "classic",
4866
4893
  energy: "vibrant",
4867
- motion: "subtle",
4894
+ motion: "standard",
4868
4895
  era: "organic"
4869
4896
  },
4870
- buttonSystem: {
4897
+ system: {
4871
4898
  global: {
4872
4899
  cornerStyle: "rounded",
4873
- textTransform: "uppercase",
4874
- fontWeight: 600,
4900
+ shadow: "low",
4901
+ textTransform: "none",
4902
+ fontWeight: 500,
4875
4903
  borderWidth: 1,
4876
4904
  hoverTransform: "none",
4877
- hoverColor: "none",
4878
- letterSpacing: "loose"
4905
+ hoverColor: "none"
4879
4906
  },
4880
4907
  sizes: {
4881
4908
  sm: {
4882
- padding: "0.5625rem 1.25rem",
4883
- fontSize: "text-xs"
4884
- },
4885
- md: {
4886
- padding: "0.75rem 1.75rem",
4887
- fontSize: "text-xs"
4909
+ padding: "0.75rem 2rem",
4910
+ fontSize: "text-sm"
4888
4911
  },
4912
+ md: { padding: "1rem 2.5rem" },
4889
4913
  lg: {
4890
- padding: "0.875rem 2.25rem",
4891
- fontSize: "text-sm"
4914
+ padding: "1.25rem 3rem",
4915
+ fontSize: "text-lg"
4892
4916
  },
4893
4917
  xl: {
4894
- padding: "1rem 2.75rem",
4895
- fontSize: "text-base"
4918
+ padding: "1.625rem 3.75rem",
4919
+ fontSize: "text-xl"
4896
4920
  }
4897
4921
  },
4898
- variants: [
4899
- {
4900
- id: "primary",
4901
- name: "Primary",
4902
- enabled: true,
4903
- priority: 1,
4904
- background: {
4905
- type: "solid",
4906
- colorToken: "primary"
4907
- },
4908
- borderRadius: "rounded-md",
4909
- border: { widthClass: "border" },
4910
- effects: {
4911
- hover: [{
4912
- effectId: "background-on-hover",
4913
- options: { colorToken: "primary-100" }
4914
- }],
4915
- active: [{
4916
- effectId: "scale-down",
4917
- options: { scale: "0.98" }
4918
- }]
4922
+ roles: {
4923
+ primary: {
4924
+ kind: "complete",
4925
+ appearance: {
4926
+ background: {
4927
+ type: "gradient",
4928
+ stops: ["primary", "accent"],
4929
+ direction: "to-r",
4930
+ foregroundToken: "primaryForeground"
4931
+ },
4932
+ borderRadius: "rounded-lg",
4933
+ shadow: {
4934
+ elevation: "low",
4935
+ softness: "soft",
4936
+ position: "bottom"
4937
+ }
4919
4938
  }
4920
4939
  },
4921
- {
4922
- id: "secondary",
4923
- name: "Secondary",
4924
- enabled: true,
4925
- priority: 2,
4926
- background: {
4927
- type: "solid",
4928
- colorToken: "secondary"
4929
- },
4930
- borderRadius: "rounded-md",
4931
- border: { widthClass: "border" },
4932
- effects: { hover: [{
4933
- effectId: "background-on-hover",
4934
- options: { colorToken: "surface" }
4935
- }] }
4936
- },
4937
- {
4938
- id: "outline",
4939
- name: "Outline",
4940
- enabled: true,
4941
- priority: 3,
4942
- background: {
4943
- type: "surface",
4944
- role: "link"
4945
- },
4946
- borderRadius: "rounded-md",
4947
- border: { widthClass: "border" },
4948
- effects: { hover: [{
4949
- effectId: "background-on-hover",
4950
- options: { colorToken: "muted" }
4951
- }] }
4952
- },
4953
- {
4954
- id: "ghost",
4955
- name: "Ghost",
4956
- enabled: true,
4957
- priority: 3,
4958
- background: {
4959
- type: "surface",
4960
- role: "link"
4961
- },
4962
- borderRadius: "rounded-none",
4963
- sizes: {
4964
- sm: {
4965
- padding: "0.375rem 0",
4966
- fontSize: "text-xs"
4940
+ secondary: {
4941
+ kind: "complete",
4942
+ appearance: {
4943
+ background: {
4944
+ type: "gradient",
4945
+ stops: ["secondary", "accent"],
4946
+ direction: "to-br",
4947
+ foregroundToken: "primaryForeground"
4967
4948
  },
4968
- md: {
4969
- padding: "0.5rem 0",
4970
- fontSize: "text-sm"
4949
+ borderRadius: "rounded-lg",
4950
+ shadow: {
4951
+ elevation: "low",
4952
+ softness: "soft",
4953
+ position: "bottom"
4954
+ }
4955
+ }
4956
+ },
4957
+ outline: {
4958
+ kind: "complete",
4959
+ appearance: {
4960
+ background: {
4961
+ type: "surface",
4962
+ role: "link"
4971
4963
  },
4972
- lg: {
4973
- padding: "0.625rem 0",
4974
- fontSize: "text-base"
4964
+ borderRadius: "rounded-lg",
4965
+ border: { widthClass: "border" },
4966
+ effects: { hover: [{
4967
+ effectId: "background-on-hover",
4968
+ options: { colorToken: "surface" }
4969
+ }] }
4970
+ }
4971
+ },
4972
+ ghost: {
4973
+ kind: "complete",
4974
+ appearance: {
4975
+ background: {
4976
+ type: "surface",
4977
+ role: "link"
4975
4978
  },
4976
- xl: {
4977
- padding: "0.75rem 0",
4978
- fontSize: "text-lg"
4979
- }
4980
- },
4981
- effects: { base: [{
4982
- effectId: "border-bottom-grow",
4983
- options: {
4984
- height: 1,
4985
- colorToken: "accent",
4986
- origin: "left"
4987
- }
4988
- }] }
4979
+ borderRadius: "rounded-lg",
4980
+ effects: { hover: [{
4981
+ effectId: "background-on-hover",
4982
+ options: { colorToken: "surface" }
4983
+ }] }
4984
+ }
4985
+ },
4986
+ accent: {
4987
+ kind: "derive",
4988
+ from: "primary",
4989
+ overrides: { background: {
4990
+ type: "solid",
4991
+ colorToken: "accent"
4992
+ } }
4989
4993
  }
4990
- ]
4991
- }
4992
- });
4993
- //#endregion
4994
- //#region ../theme-core/src/buttons/personalities/pebble.ts
4995
- /**
4996
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
4997
- * and natural; pairs well with wellness/yoga/dance brands.
4998
- */
4999
- const pebble = defineButtonPersonality({
5000
- id: "pebble",
5001
- name: "Pebble",
5002
- description: "Generous pill buttons with a quiet colour-softening hover.",
4994
+ }
4995
+ }
4996
+ });
4997
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
4998
+ id: "ink-stamp",
4999
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
5003
5000
  tags: {
5004
- tone: "classic",
5005
- energy: "calm",
5001
+ tone: "bold",
5002
+ energy: "vibrant",
5006
5003
  motion: "standard",
5007
5004
  era: "organic"
5008
5005
  },
5009
- buttonSystem: {
5006
+ system: {
5010
5007
  global: {
5011
- cornerStyle: "pill",
5012
- textTransform: "none",
5013
- fontWeight: 500,
5014
- borderWidth: 2,
5008
+ cornerStyle: "rounded",
5009
+ textTransform: "uppercase",
5010
+ fontWeight: 600,
5011
+ borderWidth: 1,
5015
5012
  hoverTransform: "none",
5016
- hoverColor: "none"
5013
+ hoverColor: "none",
5014
+ letterSpacing: "loose"
5017
5015
  },
5018
5016
  sizes: {
5019
5017
  sm: {
5020
- padding: "0.625rem 1.75rem",
5018
+ padding: "0.5rem 1.25rem",
5019
+ fontSize: "text-xs"
5020
+ },
5021
+ md: {
5022
+ padding: "0.75rem 1.75rem",
5021
5023
  fontSize: "text-sm"
5022
5024
  },
5023
- md: { padding: "0.875rem 2.25rem" },
5024
5025
  lg: {
5025
- padding: "1.125rem 2.75rem",
5026
- fontSize: "text-lg"
5026
+ padding: "0.875rem 2.25rem",
5027
+ fontSize: "text-base"
5027
5028
  },
5028
5029
  xl: {
5029
- padding: "1.5rem 3.5rem",
5030
- fontSize: "text-xl"
5030
+ padding: "1.125rem 2.75rem",
5031
+ fontSize: "text-lg"
5031
5032
  }
5032
5033
  },
5033
- variants: [
5034
- {
5035
- id: "primary",
5036
- name: "Primary",
5037
- enabled: true,
5038
- priority: 1,
5039
- background: {
5040
- type: "solid",
5041
- colorToken: "primary"
5042
- },
5043
- borderRadius: "rounded-full",
5044
- effects: { hover: [{
5045
- effectId: "darken-background",
5046
- options: { amount: 100 }
5047
- }] }
5034
+ roles: {
5035
+ primary: {
5036
+ kind: "complete",
5037
+ appearance: {
5038
+ background: {
5039
+ type: "solid",
5040
+ colorToken: "primary"
5041
+ },
5042
+ borderRadius: "rounded-md",
5043
+ effects: {
5044
+ hover: [{
5045
+ effectId: "drop-shadow",
5046
+ options: { intensity: "medium" }
5047
+ }, {
5048
+ effectId: "scale-up",
5049
+ options: { scale: "1.02" }
5050
+ }],
5051
+ active: [{
5052
+ effectId: "scale-down",
5053
+ options: { scale: "0.98" }
5054
+ }]
5055
+ }
5056
+ }
5048
5057
  },
5049
- {
5050
- id: "secondary",
5051
- name: "Secondary",
5052
- enabled: true,
5053
- priority: 2,
5054
- background: {
5055
- type: "surface",
5056
- role: "link"
5057
- },
5058
- borderRadius: "rounded-full",
5059
- border: { widthClass: "border-2" },
5060
- effects: { hover: [{
5061
- effectId: "background-on-hover",
5062
- options: { colorToken: "accent" }
5063
- }] }
5058
+ secondary: {
5059
+ kind: "complete",
5060
+ appearance: {
5061
+ background: {
5062
+ type: "surface",
5063
+ role: "link"
5064
+ },
5065
+ borderRadius: "rounded-md",
5066
+ border: { widthClass: "border-2" },
5067
+ effects: { hover: [{
5068
+ effectId: "background-on-hover",
5069
+ options: { colorToken: "surface" }
5070
+ }] }
5071
+ }
5064
5072
  },
5065
- {
5066
- id: "outline",
5067
- name: "Outline",
5068
- enabled: true,
5069
- priority: 3,
5070
- background: {
5071
- type: "surface",
5072
- role: "link"
5073
- },
5074
- borderRadius: "rounded-full",
5075
- border: { widthClass: "border" },
5076
- effects: { hover: [{
5077
- effectId: "background-on-hover",
5078
- options: { colorToken: "surface" }
5079
- }] }
5073
+ outline: {
5074
+ kind: "complete",
5075
+ appearance: {
5076
+ background: {
5077
+ type: "surface",
5078
+ role: "link"
5079
+ },
5080
+ borderRadius: "rounded-md",
5081
+ border: { widthClass: "border-2" },
5082
+ effects: { hover: [{
5083
+ effectId: "background-on-hover",
5084
+ options: { colorToken: "surface" }
5085
+ }] }
5086
+ }
5080
5087
  },
5081
- {
5082
- id: "ghost",
5083
- name: "Ghost",
5084
- enabled: true,
5085
- priority: 3,
5086
- background: {
5087
- type: "surface",
5088
- role: "link"
5089
- },
5090
- borderRadius: "rounded-full",
5091
- sizes: {
5092
- sm: {
5093
- padding: "0.375rem 0.875rem",
5094
- fontSize: "text-sm"
5088
+ ghost: {
5089
+ kind: "complete",
5090
+ appearance: {
5091
+ background: {
5092
+ type: "surface",
5093
+ role: "link"
5095
5094
  },
5096
- md: { padding: "0.5rem 1rem" },
5097
- lg: {
5098
- padding: "0.625rem 1.25rem",
5099
- fontSize: "text-lg"
5095
+ borderRadius: "rounded-none",
5096
+ sizes: {
5097
+ sm: {
5098
+ padding: "0.375rem 0",
5099
+ fontSize: "text-xs"
5100
+ },
5101
+ md: {
5102
+ padding: "0.5rem 0",
5103
+ fontSize: "text-sm"
5104
+ },
5105
+ lg: {
5106
+ padding: "0.625rem 0",
5107
+ fontSize: "text-base"
5108
+ },
5109
+ xl: {
5110
+ padding: "0.75rem 0",
5111
+ fontSize: "text-lg"
5112
+ }
5100
5113
  },
5101
- xl: {
5102
- padding: "0.75rem 1.5rem",
5103
- fontSize: "text-xl"
5104
- }
5114
+ effects: { base: [{
5115
+ effectId: "border-bottom-grow",
5116
+ options: {
5117
+ height: 1,
5118
+ colorToken: "accent",
5119
+ origin: "left"
5120
+ }
5121
+ }] }
5105
5122
  }
5123
+ },
5124
+ accent: {
5125
+ kind: "derive",
5126
+ from: "primary",
5127
+ overrides: { background: {
5128
+ type: "solid",
5129
+ colorToken: "accent"
5130
+ } }
5106
5131
  }
5107
- ]
5132
+ }
5108
5133
  }
5109
5134
  });
5110
- //#endregion
5111
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
5112
- /**
5113
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
5114
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
5115
- * responsible for contrast rather than reversing the button roles.
5116
- */
5117
- const quietArrow = defineButtonPersonality({
5118
- id: "quiet-arrow",
5119
- name: "Quiet Arrow",
5120
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
5135
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
5136
+ id: "flat-ink",
5137
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
5121
5138
  tags: {
5122
5139
  tone: "classic",
5123
5140
  energy: "calm",
5124
5141
  motion: "subtle",
5125
5142
  era: "editorial"
5126
5143
  },
5127
- buttonSystem: {
5144
+ system: {
5128
5145
  global: {
5129
5146
  cornerStyle: "rounded",
5130
- textTransform: "uppercase",
5131
- fontWeight: 500,
5147
+ textTransform: "none",
5148
+ fontWeight: 600,
5132
5149
  borderWidth: 1,
5133
5150
  typography: "body",
5134
- fontSize: "text-sm",
5135
- letterSpacing: "loose",
5136
- hoverTransform: "none",
5151
+ letterSpacing: "tight",
5152
+ paddingPreset: "default",
5153
+ hoverTransform: "lift",
5137
5154
  hoverColor: "none"
5138
5155
  },
5139
5156
  sizes: {
5140
5157
  sm: {
5141
- padding: "0.625rem 1.25rem",
5142
- fontSize: "text-xs"
5143
- },
5144
- md: {
5145
- padding: "0.8125rem 1.75rem",
5158
+ padding: "0.625rem 1.125rem",
5146
5159
  fontSize: "text-sm"
5147
5160
  },
5161
+ md: { padding: "0.8125rem 1.375rem" },
5148
5162
  lg: {
5149
- padding: "0.9375rem 2.125rem",
5150
- fontSize: "text-sm"
5163
+ padding: "0.9375rem 1.625rem",
5164
+ fontSize: "text-lg"
5151
5165
  },
5152
5166
  xl: {
5153
- padding: "1.0625rem 2.5rem",
5154
- fontSize: "text-base"
5167
+ padding: "1.0625rem 2rem",
5168
+ fontSize: "text-xl"
5155
5169
  }
5156
5170
  },
5157
- variants: [
5158
- {
5159
- id: "primary",
5160
- name: "Primary",
5161
- enabled: true,
5162
- priority: 1,
5163
- background: {
5164
- type: "solid",
5165
- colorToken: "primary"
5166
- },
5167
- borderRadius: "rounded-xl",
5168
- affordance: { iconId: "ArrowRight" },
5169
- effects: { hover: [{
5170
- effectId: "darken-background",
5171
- options: { amount: 100 }
5172
- }] }
5171
+ roles: {
5172
+ primary: {
5173
+ kind: "complete",
5174
+ appearance: {
5175
+ background: {
5176
+ type: "solid",
5177
+ colorToken: "primary"
5178
+ },
5179
+ borderRadius: "rounded-lg",
5180
+ affordance: { iconId: "ArrowRight" },
5181
+ effects: { hover: [{
5182
+ effectId: "lift",
5183
+ options: { translateY: "-2px" }
5184
+ }, {
5185
+ effectId: "background-on-hover",
5186
+ options: { colorToken: "secondary" }
5187
+ }] }
5188
+ }
5173
5189
  },
5174
- {
5175
- id: "secondary",
5176
- name: "Secondary",
5177
- enabled: true,
5178
- priority: 2,
5179
- background: {
5180
- type: "surface",
5181
- role: "link"
5182
- },
5183
- borderRadius: "rounded-xl",
5184
- border: { widthClass: "border" },
5185
- affordance: { iconId: "ArrowRight" },
5186
- effects: { hover: [{
5187
- effectId: "background-on-hover",
5188
- options: { colorToken: "surfaceAlt" }
5189
- }] }
5190
+ secondary: {
5191
+ kind: "complete",
5192
+ appearance: {
5193
+ background: {
5194
+ type: "surface",
5195
+ role: "link"
5196
+ },
5197
+ borderRadius: "rounded-lg",
5198
+ border: { widthClass: "border" },
5199
+ effects: { hover: [{
5200
+ effectId: "lift",
5201
+ options: { translateY: "-2px" }
5202
+ }, {
5203
+ effectId: "background-on-hover",
5204
+ options: { colorToken: "surfaceAlt" }
5205
+ }] }
5206
+ }
5190
5207
  },
5191
- {
5192
- id: "outline",
5193
- name: "Outline",
5194
- enabled: true,
5195
- priority: 3,
5196
- background: {
5197
- type: "surface",
5198
- role: "link"
5199
- },
5200
- borderRadius: "rounded-xl",
5201
- border: { widthClass: "border" }
5208
+ outline: {
5209
+ kind: "complete",
5210
+ appearance: {
5211
+ background: {
5212
+ type: "surface",
5213
+ role: "link"
5214
+ },
5215
+ borderRadius: "rounded-lg",
5216
+ border: { widthClass: "border" },
5217
+ effects: { hover: [{
5218
+ effectId: "lift",
5219
+ options: { translateY: "-2px" }
5220
+ }, {
5221
+ effectId: "background-on-hover",
5222
+ options: { colorToken: "surfaceAlt" }
5223
+ }] }
5224
+ }
5202
5225
  },
5203
- {
5204
- id: "ghost",
5205
- name: "Ghost",
5206
- enabled: true,
5207
- priority: 3,
5208
- background: {
5209
- type: "surface",
5210
- role: "link"
5211
- },
5212
- borderRadius: "rounded-xl"
5226
+ ghost: {
5227
+ kind: "complete",
5228
+ appearance: {
5229
+ background: {
5230
+ type: "surface",
5231
+ role: "link"
5232
+ },
5233
+ borderRadius: "rounded-lg",
5234
+ effects: { hover: [{
5235
+ effectId: "lift",
5236
+ options: { translateY: "-2px" }
5237
+ }] }
5238
+ }
5239
+ },
5240
+ accent: {
5241
+ kind: "complete",
5242
+ appearance: {
5243
+ background: {
5244
+ type: "solid",
5245
+ colorToken: "accent"
5246
+ },
5247
+ borderRadius: "rounded-lg",
5248
+ affordance: { iconId: "ArrowRight" },
5249
+ effects: { hover: [{
5250
+ effectId: "lift",
5251
+ options: { translateY: "-2px" }
5252
+ }] }
5253
+ }
5213
5254
  }
5214
- ]
5255
+ }
5215
5256
  }
5216
5257
  });
5217
- //#endregion
5218
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
5219
- /**
5220
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
5221
- * motion. Suits energetic schools, performers, festivals, and community brands
5222
- * that need calls to action to feel loud without becoming visually chaotic.
5223
- */
5224
- const showtimePill = defineButtonPersonality({
5258
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
5225
5259
  id: "showtime-pill",
5226
- name: "Showtime Pill",
5227
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
5260
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
5228
5261
  tags: {
5229
5262
  tone: "bold",
5230
5263
  energy: "vibrant",
5231
5264
  motion: "expressive",
5232
5265
  era: "modern"
5233
5266
  },
5234
- buttonSystem: {
5267
+ system: {
5235
5268
  global: {
5236
5269
  cornerStyle: "pill",
5237
5270
  shadow: "low",
@@ -5262,272 +5295,376 @@ const showtimePill = defineButtonPersonality({
5262
5295
  fontSize: "1.125rem"
5263
5296
  }
5264
5297
  },
5265
- variants: [
5266
- {
5267
- id: "primary",
5268
- name: "Primary",
5269
- enabled: true,
5270
- priority: 1,
5271
- background: {
5272
- type: "solid",
5273
- colorToken: "primary"
5274
- },
5275
- borderRadius: "rounded-full",
5276
- effects: { hover: [{ effectId: "pop" }] }
5298
+ roles: {
5299
+ primary: {
5300
+ kind: "complete",
5301
+ appearance: {
5302
+ background: {
5303
+ type: "solid",
5304
+ colorToken: "primary"
5305
+ },
5306
+ borderRadius: "rounded-full",
5307
+ effects: { hover: [{ effectId: "pop" }] }
5308
+ }
5277
5309
  },
5278
- {
5279
- id: "secondary",
5280
- name: "Secondary",
5281
- enabled: true,
5282
- priority: 2,
5283
- background: {
5284
- type: "surface",
5285
- role: "link"
5286
- },
5287
- borderRadius: "rounded-full",
5288
- border: { widthClass: "border-2" },
5289
- effects: { hover: [{ effectId: "pop" }] }
5310
+ secondary: {
5311
+ kind: "complete",
5312
+ appearance: {
5313
+ background: {
5314
+ type: "surface",
5315
+ role: "link"
5316
+ },
5317
+ borderRadius: "rounded-full",
5318
+ border: { widthClass: "border-2" },
5319
+ effects: { hover: [{ effectId: "pop" }] }
5320
+ }
5290
5321
  },
5291
- {
5292
- id: "hero",
5293
- name: "Hero",
5294
- enabled: true,
5295
- priority: 1,
5296
- background: {
5297
- type: "solid",
5298
- colorToken: "secondary"
5299
- },
5300
- borderRadius: "rounded-full",
5301
- effects: { hover: [{ effectId: "pop" }] }
5322
+ outline: {
5323
+ kind: "complete",
5324
+ appearance: {
5325
+ background: {
5326
+ type: "surface",
5327
+ role: "link"
5328
+ },
5329
+ borderRadius: "rounded-full",
5330
+ border: { widthClass: "border-2" },
5331
+ effects: { hover: [{
5332
+ effectId: "background-on-hover",
5333
+ options: { colorToken: "background" }
5334
+ }] }
5335
+ }
5302
5336
  },
5303
- {
5304
- id: "header",
5305
- name: "Header",
5306
- enabled: true,
5307
- priority: 2,
5308
- background: {
5337
+ ghost: {
5338
+ kind: "complete",
5339
+ appearance: {
5340
+ background: {
5341
+ type: "surface",
5342
+ role: "link"
5343
+ },
5344
+ borderRadius: "rounded-full",
5345
+ effects: { hover: [{
5346
+ effectId: "background-on-hover",
5347
+ options: { colorToken: "surface" }
5348
+ }] }
5349
+ }
5350
+ },
5351
+ accent: {
5352
+ kind: "complete",
5353
+ appearance: {
5354
+ background: {
5355
+ type: "solid",
5356
+ colorToken: "secondary"
5357
+ },
5358
+ borderRadius: "rounded-full",
5359
+ effects: { hover: [{ effectId: "pop" }] }
5360
+ }
5361
+ }
5362
+ }
5363
+ }
5364
+ });
5365
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
5366
+ id: "joy-stamp",
5367
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
5368
+ tags: {
5369
+ tone: "bold",
5370
+ energy: "vibrant",
5371
+ motion: "expressive",
5372
+ era: "organic"
5373
+ },
5374
+ system: {
5375
+ global: {
5376
+ cornerStyle: "pill",
5377
+ shadow: "high",
5378
+ textTransform: "none",
5379
+ typography: "heading",
5380
+ fontWeight: 700,
5381
+ fontSize: "text-lg",
5382
+ borderWidth: 2,
5383
+ hoverTransform: "none",
5384
+ hoverColor: "none"
5385
+ },
5386
+ sizes: {
5387
+ sm: {
5388
+ padding: "0.625rem 1.25rem",
5389
+ fontSize: "text-base"
5390
+ },
5391
+ md: {
5392
+ padding: "0.875rem 1.75rem",
5393
+ fontSize: "text-lg"
5394
+ },
5395
+ lg: {
5396
+ padding: "1.125rem 2.25rem",
5397
+ fontSize: "text-xl"
5398
+ },
5399
+ xl: {
5400
+ padding: "1.25rem 2.75rem",
5401
+ fontSize: "text-2xl"
5402
+ }
5403
+ },
5404
+ roles: {
5405
+ primary: {
5406
+ kind: "complete",
5407
+ appearance: {
5408
+ background: {
5409
+ type: "solid",
5410
+ colorToken: "primary"
5411
+ },
5412
+ borderRadius: "rounded-full",
5413
+ shadow: {
5414
+ elevation: "high",
5415
+ softness: "hard",
5416
+ position: "bottom-right",
5417
+ colorToken: "text"
5418
+ },
5419
+ effects: { hover: [{ effectId: "press-down" }] }
5420
+ }
5421
+ },
5422
+ secondary: {
5423
+ kind: "complete",
5424
+ appearance: {
5425
+ background: {
5426
+ type: "surface",
5427
+ role: "link"
5428
+ },
5429
+ borderRadius: "rounded-full",
5430
+ border: { widthClass: "border-2" },
5431
+ shadow: {
5432
+ elevation: "high",
5433
+ softness: "hard",
5434
+ position: "bottom-right",
5435
+ colorToken: "secondary"
5436
+ },
5437
+ effects: { hover: [{ effectId: "press-down" }] }
5438
+ }
5439
+ },
5440
+ outline: {
5441
+ kind: "derive",
5442
+ from: "secondary"
5443
+ },
5444
+ ghost: {
5445
+ kind: "complete",
5446
+ appearance: {
5447
+ background: {
5448
+ type: "surface",
5449
+ role: "link"
5450
+ },
5451
+ borderRadius: "rounded-full",
5452
+ effects: { hover: [{ effectId: "press-down" }] }
5453
+ }
5454
+ },
5455
+ accent: {
5456
+ kind: "derive",
5457
+ from: "primary",
5458
+ overrides: { background: {
5309
5459
  type: "solid",
5310
- colorToken: "background"
5311
- },
5312
- borderRadius: "rounded-full",
5313
- border: { widthClass: "border-2" },
5314
- effects: { hover: [{
5315
- effectId: "background-on-hover",
5316
- options: { colorToken: "surface" }
5317
- }] }
5460
+ colorToken: "accent"
5461
+ } }
5462
+ }
5463
+ }
5464
+ }
5465
+ });
5466
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
5467
+ id: "ornate-ritual",
5468
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
5469
+ tags: {
5470
+ tone: "classic",
5471
+ energy: "vibrant",
5472
+ motion: "subtle",
5473
+ era: "organic"
5474
+ },
5475
+ system: {
5476
+ global: {
5477
+ cornerStyle: "rounded",
5478
+ textTransform: "uppercase",
5479
+ fontWeight: 600,
5480
+ borderWidth: 1,
5481
+ hoverTransform: "none",
5482
+ hoverColor: "none",
5483
+ letterSpacing: "loose"
5484
+ },
5485
+ sizes: {
5486
+ sm: {
5487
+ padding: "0.5625rem 1.25rem",
5488
+ fontSize: "text-xs"
5318
5489
  },
5319
- {
5320
- id: "outline",
5321
- name: "Outline",
5322
- enabled: true,
5323
- priority: 3,
5324
- background: {
5325
- type: "surface",
5326
- role: "link"
5327
- },
5328
- borderRadius: "rounded-full",
5329
- border: { widthClass: "border-2" },
5330
- effects: { hover: [{
5331
- effectId: "background-on-hover",
5332
- options: { colorToken: "background" }
5333
- }] }
5490
+ md: {
5491
+ padding: "0.75rem 1.75rem",
5492
+ fontSize: "text-xs"
5334
5493
  },
5335
- {
5336
- id: "ghost",
5337
- name: "Ghost",
5338
- enabled: true,
5339
- priority: 3,
5340
- background: {
5341
- type: "surface",
5342
- role: "link"
5343
- },
5344
- borderRadius: "rounded-full",
5345
- effects: { hover: [{
5346
- effectId: "background-on-hover",
5347
- options: { colorToken: "surface" }
5348
- }] }
5494
+ lg: {
5495
+ padding: "0.875rem 2.25rem",
5496
+ fontSize: "text-sm"
5497
+ },
5498
+ xl: {
5499
+ padding: "1rem 2.75rem",
5500
+ fontSize: "text-base"
5349
5501
  }
5350
- ]
5351
- }
5352
- });
5353
- //#endregion
5354
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
5355
- /**
5356
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
5357
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
5358
- */
5359
- const softPill = defineButtonPersonality({
5360
- id: "soft-pill",
5361
- name: "Soft Pill",
5362
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
5363
- tags: {
5364
- tone: "classic",
5365
- energy: "calm",
5366
- motion: "subtle",
5367
- era: "organic"
5368
- },
5369
- buttonSystem: {
5370
- global: {
5371
- cornerStyle: "pill",
5372
- shadow: "low",
5373
- textTransform: "none",
5374
- fontWeight: 500,
5375
- borderWidth: 2,
5376
- hoverTransform: "lift",
5377
- hoverColor: "none"
5378
5502
  },
5379
- variants: [
5380
- {
5381
- id: "primary",
5382
- name: "Primary",
5383
- enabled: true,
5384
- priority: 1,
5385
- background: {
5386
- type: "solid",
5387
- colorToken: "primary"
5388
- },
5389
- borderRadius: "rounded-full",
5390
- shadow: {
5391
- elevation: "low",
5392
- softness: "soft",
5393
- position: "bottom"
5394
- },
5395
- effects: {
5396
- hover: [{
5397
- effectId: "lift",
5398
- options: { translateY: "-1px" }
5399
- }],
5400
- active: [{
5401
- effectId: "scale-down",
5402
- options: { scale: "0.98" }
5403
- }]
5503
+ roles: {
5504
+ primary: {
5505
+ kind: "complete",
5506
+ appearance: {
5507
+ background: {
5508
+ type: "solid",
5509
+ colorToken: "primary"
5510
+ },
5511
+ borderRadius: "rounded-md",
5512
+ border: { widthClass: "border" },
5513
+ effects: {
5514
+ hover: [{
5515
+ effectId: "background-on-hover",
5516
+ options: { colorToken: "primary-100" }
5517
+ }],
5518
+ active: [{
5519
+ effectId: "scale-down",
5520
+ options: { scale: "0.98" }
5521
+ }]
5522
+ }
5404
5523
  }
5405
5524
  },
5406
- {
5407
- id: "secondary",
5408
- name: "Secondary",
5409
- enabled: true,
5410
- priority: 2,
5411
- background: {
5412
- type: "surface",
5413
- role: "link"
5414
- },
5415
- borderRadius: "rounded-full",
5416
- border: { widthClass: "border-2" },
5417
- effects: { hover: [{
5418
- effectId: "background-on-hover",
5419
- options: { colorToken: "surface" }
5420
- }] }
5525
+ secondary: {
5526
+ kind: "complete",
5527
+ appearance: {
5528
+ background: {
5529
+ type: "solid",
5530
+ colorToken: "secondary"
5531
+ },
5532
+ borderRadius: "rounded-md",
5533
+ border: { widthClass: "border" },
5534
+ effects: { hover: [{
5535
+ effectId: "background-on-hover",
5536
+ options: { colorToken: "surface" }
5537
+ }] }
5538
+ }
5421
5539
  },
5422
- {
5423
- id: "outline",
5424
- name: "Outline",
5425
- enabled: true,
5426
- priority: 3,
5427
- background: {
5428
- type: "surface",
5429
- role: "link"
5430
- },
5431
- borderRadius: "rounded-full",
5432
- border: { widthClass: "border" },
5433
- effects: { hover: [{
5434
- effectId: "background-on-hover",
5435
- options: { colorToken: "surface" }
5436
- }] }
5540
+ outline: {
5541
+ kind: "complete",
5542
+ appearance: {
5543
+ background: {
5544
+ type: "surface",
5545
+ role: "link"
5546
+ },
5547
+ borderRadius: "rounded-md",
5548
+ border: { widthClass: "border" },
5549
+ effects: { hover: [{
5550
+ effectId: "background-on-hover",
5551
+ options: { colorToken: "muted" }
5552
+ }] }
5553
+ }
5437
5554
  },
5438
- {
5439
- id: "ghost",
5440
- name: "Ghost",
5441
- enabled: true,
5442
- priority: 3,
5443
- background: {
5444
- type: "surface",
5445
- role: "link"
5446
- },
5447
- borderRadius: "rounded-full",
5448
- effects: { hover: [{
5449
- effectId: "background-on-hover",
5450
- options: { colorToken: "surface" }
5451
- }] }
5555
+ ghost: {
5556
+ kind: "complete",
5557
+ appearance: {
5558
+ background: {
5559
+ type: "surface",
5560
+ role: "link"
5561
+ },
5562
+ borderRadius: "rounded-none",
5563
+ sizes: {
5564
+ sm: {
5565
+ padding: "0.375rem 0",
5566
+ fontSize: "text-xs"
5567
+ },
5568
+ md: {
5569
+ padding: "0.5rem 0",
5570
+ fontSize: "text-sm"
5571
+ },
5572
+ lg: {
5573
+ padding: "0.625rem 0",
5574
+ fontSize: "text-base"
5575
+ },
5576
+ xl: {
5577
+ padding: "0.75rem 0",
5578
+ fontSize: "text-lg"
5579
+ }
5580
+ },
5581
+ effects: { base: [{
5582
+ effectId: "border-bottom-grow",
5583
+ options: {
5584
+ height: 1,
5585
+ colorToken: "accent",
5586
+ origin: "left"
5587
+ }
5588
+ }] }
5589
+ }
5590
+ },
5591
+ accent: {
5592
+ kind: "derive",
5593
+ from: "primary",
5594
+ overrides: { background: {
5595
+ type: "solid",
5596
+ colorToken: "accent"
5597
+ } }
5452
5598
  }
5453
- ]
5599
+ }
5454
5600
  }
5455
5601
  });
5456
5602
  //#endregion
5457
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
5458
- const solidSecondary = {
5459
- id: "secondary",
5460
- name: "Secondary",
5461
- enabled: true,
5462
- priority: 2,
5463
- background: {
5464
- type: "solid",
5465
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
5466
- },
5467
- borderRadius: "rounded-full",
5468
- shadow: {
5469
- elevation: "none",
5470
- softness: null,
5471
- position: "bottom"
5472
- },
5473
- effects: {
5474
- hover: [{
5475
- effectId: "background-on-hover-alpha",
5476
- options: {
5477
- colorToken: "secondary",
5478
- opacity: 88
5479
- }
5480
- }],
5481
- active: [{
5482
- effectId: "scale-down",
5483
- options: { scale: "0.98" }
5484
- }]
5485
- }
5486
- };
5487
- //#endregion
5488
- //#region ../theme-core/src/buttons/personalities/index.ts
5489
- const buttonPersonalities = [
5490
- softPill,
5491
- defineButtonPersonality({
5492
- id: "two-tone-pill",
5493
- name: "Two-tone Pill",
5494
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
5495
- tags: softPill.tags,
5496
- buttonSystem: {
5497
- ...softPill.buttonSystem,
5498
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
5499
- }
5500
- }),
5501
- earthPill,
5502
- confidentChip,
5503
- editorialLink,
5504
- pebble,
5505
- inkStamp,
5506
- flatInk,
5507
- brushedWash,
5508
- showtimePill,
5509
- joyStamp,
5510
- ornateRitual,
5511
- quietArrow
5603
+ //#region ../theme-core/src/buttons/styles/registry.ts
5604
+ const buttonStyleRecipes = [
5605
+ softPillRecipe,
5606
+ earthPillRecipe,
5607
+ confidentChipRecipe,
5608
+ editorialLinkRecipe,
5609
+ pebbleRecipe,
5610
+ inkStampRecipe,
5611
+ flatInkRecipe,
5612
+ brushedWashRecipe,
5613
+ showtimePillRecipe,
5614
+ joyStampRecipe,
5615
+ ornateRitualRecipe,
5616
+ quietArrowRecipe
5512
5617
  ];
5513
- new Map(buttonPersonalities.map((p) => [p.id, p]));
5514
- buttonPersonalities.map((personality) => ({
5515
- id: personality.id,
5516
- name: personality.name,
5517
- description: personality.description,
5518
- category: presetCategory(personality),
5519
- buttonSystem: personality.buttonSystem,
5520
- compatibility: {
5521
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
5522
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
5523
- }
5524
- }));
5525
- function presetCategory(personality) {
5526
- switch (personality.tags.era) {
5618
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
5619
+ function findButtonStyleRecipe(id) {
5620
+ const recipe = recipesById.get(id);
5621
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
5622
+ return recipe;
5623
+ }
5624
+ function resolveButtonStyleSelection(selection) {
5625
+ switch (selection.styleId) {
5626
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
5627
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
5628
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
5629
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
5630
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
5631
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
5632
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
5633
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
5634
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
5635
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
5636
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
5637
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
5638
+ }
5639
+ }
5640
+ function defaultButtonStyleSelectionFor(styleId) {
5641
+ return {
5642
+ styleId,
5643
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
5644
+ };
5645
+ }
5646
+ 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");
5647
+ buttonStyleRecipes.map((recipe) => {
5648
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
5649
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
5650
+ return {
5651
+ id: recipe.id,
5652
+ name: recipe.accessibilityLabel,
5653
+ description: recipe.accessibilityLabel,
5654
+ category: presetCategory(recipe),
5655
+ buttonSystem: resolved.buttonSystem,
5656
+ compatibility: {
5657
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
5658
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
5659
+ }
5660
+ };
5661
+ });
5662
+ function presetCategory(recipe) {
5663
+ switch (recipe.tags.era) {
5527
5664
  case "retro": return "retro";
5528
5665
  case "editorial": return "minimal";
5529
5666
  case "organic": return "artistic";
5530
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
5667
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
5531
5668
  case "technical": return "technical";
5532
5669
  case void 0: return "modern";
5533
5670
  }
@@ -10074,323 +10211,91 @@ const headerLookCatalog = defineExactCatalog()([
10074
10211
  {
10075
10212
  id: asHeaderLookId("centered-calm"),
10076
10213
  label: "Centered calm",
10077
- visualTreatment: "light-serif",
10078
- layoutBehavior: "normal-flow",
10079
- configuration: {
10080
- structure: "centered-stack",
10081
- treatment: "light-serif",
10082
- behavior: "normal-flow"
10083
- },
10084
- openingRequirement: "none",
10085
- maxRecommendedNavItems: 5,
10086
- logoAccommodations: centeredLogoAccommodations,
10087
- compile: centeredCalmHeader
10088
- },
10089
- {
10090
- id: asHeaderLookId("practical-utility"),
10091
- label: "Practical utility",
10092
- visualTreatment: "solid-neutral",
10093
- layoutBehavior: "sticky-shrink",
10094
- configuration: {
10095
- structure: "inline-classic",
10096
- treatment: "solid-neutral",
10097
- behavior: "sticky-shrink"
10098
- },
10099
- openingRequirement: "none",
10100
- requiresProminentCta: true,
10101
- logoAccommodations: inlineClassicLogoAccommodations,
10102
- compile: practicalUtilityHeader
10103
- },
10104
- {
10105
- id: asHeaderLookId("minimal-transparent"),
10106
- label: "Minimal transparent",
10107
- visualTreatment: "minimal-transparent",
10108
- layoutBehavior: "normal-flow",
10109
- configuration: {
10110
- structure: "inline-classic",
10111
- treatment: "minimal-transparent",
10112
- behavior: "normal-flow"
10113
- },
10114
- openingRequirement: "reserved-space-ok",
10115
- logoAccommodations: inlineClassicLogoAccommodations,
10116
- compile: minimalTransparentHeader
10117
- },
10118
- {
10119
- id: asHeaderLookId("transparent-overlay"),
10120
- label: "Transparent overlay",
10121
- visualTreatment: "transparent-overlay",
10122
- layoutBehavior: "fixed-overlay",
10123
- configuration: {
10124
- structure: "inline-classic",
10125
- treatment: "transparent-overlay",
10126
- behavior: "fixed-overlay"
10127
- },
10128
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10129
- maxRecommendedNavItems: 5,
10130
- logoAccommodations: overlayLogoAccommodations,
10131
- compile: transparentOverlayHeader
10132
- },
10133
- {
10134
- id: asHeaderLookId("floating-glass"),
10135
- label: "Floating glass",
10136
- visualTreatment: "floating-glass",
10137
- layoutBehavior: "fixed-floating",
10138
- configuration: {
10139
- structure: "floating-shell",
10140
- treatment: "floating-glass",
10141
- behavior: "fixed-floating"
10142
- },
10143
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10144
- maxRecommendedNavItems: 5,
10145
- logoAccommodations: overlayLogoAccommodations,
10146
- compile: floatingGlassHeader
10147
- }
10148
- ]);
10149
- new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10150
- new Map(headerLookCatalog.map((look) => [look.id, look]));
10151
- function headerConfigurationKey(configuration) {
10152
- return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10153
- }
10154
- //#endregion
10155
- //#region ../theme-core/src/site-styles/footerLooks.ts
10156
- function asFooterLookId(value) {
10157
- return value;
10158
- }
10159
- function asFooterLayoutId(value) {
10160
- return value;
10161
- }
10162
- function asFooterStyleId(value) {
10163
- return value;
10164
- }
10165
- const footerLayoutCatalog = defineExactCatalog()([
10166
- {
10167
- id: asFooterLayoutId("identity"),
10168
- label: "Identity",
10169
- description: "Logo, site text, address, and legal copy without relying on footer navigation."
10170
- },
10171
- {
10172
- id: asFooterLayoutId("centered"),
10173
- label: "Centered",
10174
- description: "A calm centered stack for identity, short copy, and optional compact navigation.",
10175
- maxRecommendedNavDensity: "sparse"
10176
- },
10177
- {
10178
- id: asFooterLayoutId("split"),
10179
- label: "Split",
10180
- description: "Navigation and brand signoff separated into a wider split footer.",
10181
- requiresFooterNav: true,
10182
- maxRecommendedNavDensity: "balanced"
10183
- },
10184
- {
10185
- id: asFooterLayoutId("columns"),
10186
- label: "Columns",
10187
- description: "Grouped footer navigation columns with a supporting bottom line.",
10188
- requiresFooterNav: true,
10189
- requiresFooterNavGroups: true
10190
- }
10191
- ]);
10192
- const footerStyleCatalog = defineExactCatalog()([
10193
- {
10194
- id: asFooterStyleId("quiet"),
10195
- label: "Quiet",
10196
- description: "Lightweight, practical footer treatment."
10197
- },
10198
- {
10199
- id: asFooterStyleId("calm"),
10200
- label: "Calm",
10201
- description: "Soft centered treatment with restrained dividers."
10202
- },
10203
- {
10204
- id: asFooterStyleId("editorial"),
10205
- label: "Editorial",
10206
- description: "Text-forward treatment with fine-line structure."
10207
- },
10208
- {
10209
- id: asFooterStyleId("brand-band"),
10210
- label: "Brand band",
10211
- description: "High-contrast brand treatment with a stronger bottom bar."
10212
- }
10213
- ]);
10214
- new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
10215
- new Map(footerStyleCatalog.map((style) => [style.id, style]));
10216
- /**
10217
- * No-nav-safe identity footer: brand and legal/supporting copy carry the
10218
- * footer without implying missing navigation.
10219
- */
10220
- function identityQuietFooter(theme) {
10221
- return {
10222
- ...theme.footer,
10223
- variant: "simple",
10224
- maxWidth: "container",
10225
- background: {
10226
- type: "color",
10227
- color: "surface"
10228
- },
10229
- navStyle: "minimal",
10230
- navWeight: "regular",
10231
- navColor: "text",
10232
- navLinkStyle: {
10233
- typography: "body",
10234
- fontWeight: "regular",
10235
- textTransform: "none",
10236
- italic: false,
10237
- colorToken: "text",
10238
- hoverColorToken: "primary",
10239
- padding: "none",
10240
- borderRadius: "none"
10241
- },
10242
- navLayout: {
10243
- layout: "inline-wrap",
10244
- align: "start",
10245
- gapX: "default",
10246
- gapY: "tight"
10247
- },
10248
- logo: {
10249
- showLogo: true,
10250
- showLogoText: true,
10251
- placement: "left",
10252
- size: "sm",
10253
- align: "start"
10254
- },
10255
- bottomBar: {
10256
- enabled: false,
10257
- fullBleed: false,
10258
- textAlign: "left",
10259
- paddingX: "default",
10260
- paddingY: "compact",
10261
- borderTop: { width: "none" }
10262
- }
10263
- };
10264
- }
10265
- /**
10266
- * Back-compat alias for the previous default footer Look. It keeps existing
10267
- * persisted selections valid while staying hidden from the new layout/style UI.
10268
- */
10269
- function mutedGroundingFooter(theme) {
10270
- return {
10271
- ...identityQuietFooter(theme),
10272
- background: theme.footer.background,
10273
- navStyle: theme.footer.navStyle,
10274
- navColor: theme.footer.navColor,
10275
- navWeight: theme.footer.navWeight,
10276
- navLinkStyle: theme.footer.navLinkStyle,
10277
- bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
10278
- };
10279
- }
10280
- /** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
10281
- function brandTwoBandFooter(theme) {
10282
- return {
10283
- ...theme.footer,
10284
- variant: "split",
10285
- maxWidth: "container",
10286
- background: {
10287
- type: "color",
10288
- color: "primary-800"
10289
- },
10290
- navStyle: "minimal",
10291
- navWeight: "medium",
10292
- navColor: "primaryForeground",
10293
- navLinkStyle: {
10294
- typography: "body",
10295
- fontWeight: "medium",
10296
- textTransform: "none",
10297
- italic: false,
10298
- colorToken: "primaryForeground",
10299
- hoverColorToken: "secondary",
10300
- padding: "none",
10301
- borderRadius: "none"
10302
- },
10303
- bottomTextLinkStyle: {
10304
- colorToken: "secondary",
10305
- decorationColorToken: "secondary"
10306
- },
10307
- navLayout: {
10308
- layout: "inline-wrap",
10309
- align: "start",
10310
- gapX: "default",
10311
- gapY: "tight"
10312
- },
10313
- logo: {
10314
- showLogo: true,
10315
- showLogoText: false,
10316
- placement: "left",
10317
- size: "sm",
10318
- align: "start"
10214
+ visualTreatment: "light-serif",
10215
+ layoutBehavior: "normal-flow",
10216
+ configuration: {
10217
+ structure: "centered-stack",
10218
+ treatment: "light-serif",
10219
+ behavior: "normal-flow"
10319
10220
  },
10320
- bottomBar: {
10321
- enabled: true,
10322
- fullBleed: true,
10323
- background: {
10324
- type: "color",
10325
- color: "primary-900"
10326
- },
10327
- textColor: "primaryForeground",
10328
- textAlign: "center",
10329
- paddingX: "default",
10330
- paddingY: "compact",
10331
- borderTop: { width: "none" }
10332
- }
10333
- };
10334
- }
10335
- /**
10336
- * Centered stack on a softly tinted band: logo, inline nav, address, and a
10337
- * hairline-topped copyright line, all centered.
10338
- */
10339
- function centeredCalmFooter(theme) {
10340
- return {
10341
- ...theme.footer,
10342
- variant: "simple",
10343
- maxWidth: "container",
10344
- background: {
10345
- type: "color",
10346
- color: "surfaceAlt"
10221
+ openingRequirement: "none",
10222
+ maxRecommendedNavItems: 5,
10223
+ logoAccommodations: centeredLogoAccommodations,
10224
+ compile: centeredCalmHeader
10225
+ },
10226
+ {
10227
+ id: asHeaderLookId("practical-utility"),
10228
+ label: "Practical utility",
10229
+ visualTreatment: "solid-neutral",
10230
+ layoutBehavior: "sticky-shrink",
10231
+ configuration: {
10232
+ structure: "inline-classic",
10233
+ treatment: "solid-neutral",
10234
+ behavior: "sticky-shrink"
10347
10235
  },
10348
- navStyle: "minimal",
10349
- navWeight: "regular",
10350
- navColor: "text",
10351
- navLinkStyle: {
10352
- typography: "body",
10353
- fontWeight: "regular",
10354
- textTransform: "none",
10355
- italic: false,
10356
- colorToken: "text",
10357
- hoverColorToken: "primary",
10358
- padding: "none",
10359
- borderRadius: "none"
10236
+ openingRequirement: "none",
10237
+ requiresProminentCta: true,
10238
+ logoAccommodations: inlineClassicLogoAccommodations,
10239
+ compile: practicalUtilityHeader
10240
+ },
10241
+ {
10242
+ id: asHeaderLookId("minimal-transparent"),
10243
+ label: "Minimal transparent",
10244
+ visualTreatment: "minimal-transparent",
10245
+ layoutBehavior: "normal-flow",
10246
+ configuration: {
10247
+ structure: "inline-classic",
10248
+ treatment: "minimal-transparent",
10249
+ behavior: "normal-flow"
10360
10250
  },
10361
- navLayout: {
10362
- layout: "inline-wrap",
10363
- align: "center",
10364
- gapX: "relaxed",
10365
- gapY: "tight"
10251
+ openingRequirement: "reserved-space-ok",
10252
+ logoAccommodations: inlineClassicLogoAccommodations,
10253
+ compile: minimalTransparentHeader
10254
+ },
10255
+ {
10256
+ id: asHeaderLookId("transparent-overlay"),
10257
+ label: "Transparent overlay",
10258
+ visualTreatment: "transparent-overlay",
10259
+ layoutBehavior: "fixed-overlay",
10260
+ configuration: {
10261
+ structure: "inline-classic",
10262
+ treatment: "transparent-overlay",
10263
+ behavior: "fixed-overlay"
10366
10264
  },
10367
- logo: {
10368
- showLogo: true,
10369
- showLogoText: false,
10370
- placement: "above",
10371
- size: "sm",
10372
- align: "center"
10265
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10266
+ maxRecommendedNavItems: 5,
10267
+ logoAccommodations: overlayLogoAccommodations,
10268
+ compile: transparentOverlayHeader
10269
+ },
10270
+ {
10271
+ id: asHeaderLookId("floating-glass"),
10272
+ label: "Floating glass",
10273
+ visualTreatment: "floating-glass",
10274
+ layoutBehavior: "fixed-floating",
10275
+ configuration: {
10276
+ structure: "floating-shell",
10277
+ treatment: "floating-glass",
10278
+ behavior: "fixed-floating"
10373
10279
  },
10374
- bottomBar: {
10375
- enabled: true,
10376
- fullBleed: false,
10377
- textAlign: "center",
10378
- paddingX: "default",
10379
- paddingY: "compact",
10380
- borderTop: { width: "thin" }
10381
- }
10382
- };
10280
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10281
+ maxRecommendedNavItems: 5,
10282
+ logoAccommodations: overlayLogoAccommodations,
10283
+ compile: floatingGlassHeader
10284
+ }
10285
+ ]);
10286
+ new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10287
+ new Map(headerLookCatalog.map((look) => [look.id, look]));
10288
+ function headerConfigurationKey(configuration) {
10289
+ return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10290
+ }
10291
+ //#endregion
10292
+ //#region ../theme-core/src/site-styles/footerLooks.ts
10293
+ function asFooterLookId(value) {
10294
+ return value;
10383
10295
  }
10384
- /** Editorial split footer: compact nav on one side, brand signoff on the other. */
10385
- function splitEditorialFooter(theme) {
10296
+ function quietFooterLinks(theme) {
10386
10297
  return {
10387
10298
  ...theme.footer,
10388
- variant: "split",
10389
- maxWidth: "container",
10390
- background: {
10391
- type: "color",
10392
- color: "surface"
10393
- },
10394
10299
  navStyle: "minimal",
10395
10300
  navWeight: "regular",
10396
10301
  navColor: "text",
@@ -10403,120 +10308,38 @@ function splitEditorialFooter(theme) {
10403
10308
  hoverColorToken: "primary",
10404
10309
  padding: "none",
10405
10310
  borderRadius: "none"
10406
- },
10407
- navLayout: {
10408
- layout: "inline-wrap",
10409
- align: "start",
10410
- gapX: "relaxed",
10411
- gapY: "tight"
10412
- },
10413
- logo: {
10414
- showLogo: true,
10415
- showLogoText: true,
10416
- placement: "right",
10417
- size: "sm",
10418
- align: "end"
10419
- },
10420
- bottomBar: {
10421
- enabled: true,
10422
- fullBleed: false,
10423
- textAlign: "left",
10424
- paddingX: "default",
10425
- paddingY: "compact",
10426
- borderTop: { width: "thin" }
10427
10311
  }
10428
10312
  };
10429
10313
  }
10430
- /**
10431
- * Editorial columns: site name and supporting copy on the left, inline nav on
10432
- * the right, with a hairline-topped bottom line. Uses the footer block's
10433
- * columns layout.
10434
- */
10435
- function editorialColumnsFooter(theme) {
10314
+ function emphasizedFooterLinks(theme) {
10436
10315
  return {
10437
10316
  ...theme.footer,
10438
- variant: "columns",
10439
- maxWidth: "container",
10440
- background: {
10441
- type: "color",
10442
- color: "surface"
10443
- },
10444
10317
  navStyle: "minimal",
10445
- navWeight: "regular",
10318
+ navWeight: "medium",
10446
10319
  navColor: "text",
10447
10320
  navLinkStyle: {
10448
10321
  typography: "body",
10449
- fontWeight: "regular",
10322
+ fontWeight: "medium",
10450
10323
  textTransform: "none",
10451
10324
  italic: false,
10452
10325
  colorToken: "text",
10453
10326
  hoverColorToken: "primary",
10454
10327
  padding: "none",
10455
10328
  borderRadius: "none"
10456
- },
10457
- logo: {
10458
- showLogo: true,
10459
- showLogoText: true,
10460
- placement: "left",
10461
- size: "sm",
10462
- align: "start"
10463
- },
10464
- bottomBar: {
10465
- enabled: true,
10466
- fullBleed: false,
10467
- textAlign: "center",
10468
- paddingX: "default",
10469
- paddingY: "compact",
10470
- borderTop: { width: "thin" }
10471
10329
  }
10472
10330
  };
10473
10331
  }
10474
- const footerLookCatalog = defineExactCatalog()([
10475
- {
10476
- id: asFooterLookId("footer-identity-quiet"),
10477
- label: "Identity footer",
10478
- layoutId: asFooterLayoutId("identity"),
10479
- styleId: asFooterStyleId("quiet"),
10480
- compile: identityQuietFooter
10481
- },
10482
- {
10483
- id: asFooterLookId("footer-muted-grounding"),
10484
- label: "Muted grounding footer",
10485
- layoutId: asFooterLayoutId("identity"),
10486
- styleId: asFooterStyleId("quiet"),
10487
- hiddenFromLayoutStyleControls: true,
10488
- compile: mutedGroundingFooter
10489
- },
10490
- {
10491
- id: asFooterLookId("footer-centered-calm"),
10492
- label: "Centered calm footer",
10493
- layoutId: asFooterLayoutId("centered"),
10494
- styleId: asFooterStyleId("calm"),
10495
- compile: centeredCalmFooter
10496
- },
10497
- {
10498
- id: asFooterLookId("footer-split-editorial"),
10499
- label: "Split editorial footer",
10500
- layoutId: asFooterLayoutId("split"),
10501
- styleId: asFooterStyleId("editorial"),
10502
- compile: splitEditorialFooter
10503
- },
10504
- {
10505
- id: asFooterLookId("footer-editorial-columns"),
10506
- label: "Editorial columns footer",
10507
- layoutId: asFooterLayoutId("columns"),
10508
- styleId: asFooterStyleId("editorial"),
10509
- compile: editorialColumnsFooter
10510
- },
10511
- {
10512
- id: asFooterLookId("site-footer-brand-two-band"),
10513
- label: "Two-band brand footer",
10514
- layoutId: asFooterLayoutId("split"),
10515
- styleId: asFooterStyleId("brand-band"),
10516
- allowedContentPresence: ["default-footer", "default-and-blocks"],
10517
- compile: brandTwoBandFooter
10518
- }
10519
- ]);
10332
+ const footerLookCatalog = defineExactCatalog()([{
10333
+ id: asFooterLookId("footer-links-quiet"),
10334
+ label: "Quiet links",
10335
+ description: "Regular-weight footer navigation with a restrained hover.",
10336
+ compile: quietFooterLinks
10337
+ }, {
10338
+ id: asFooterLookId("footer-links-emphasized"),
10339
+ label: "Emphasized links",
10340
+ description: "Medium-weight footer navigation with a clearer emphasis.",
10341
+ compile: emphasizedFooterLinks
10342
+ }]);
10520
10343
  new Map(footerLookCatalog.map((look) => [look.id, look]));
10521
10344
  //#endregion
10522
10345
  //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -11645,17 +11468,21 @@ function defineCuratedSiteStyle(input) {
11645
11468
  })),
11646
11469
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
11647
11470
  recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
11648
- buttonPersonalityChoices: input.buttonPersonalityChoices,
11471
+ buttonStyleChoices: input.buttonStyleChoices,
11649
11472
  paletteRecommendations: input.paletteRecommendations,
11650
11473
  typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
11651
11474
  ...input.heroTypography ? { heroTypography: input.heroTypography } : {}
11652
11475
  };
11653
11476
  }
11654
- function buttonChoice(id, note) {
11477
+ function buttonChoice(styleId, note, parameters) {
11478
+ const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
11479
+ styleId,
11480
+ parameters
11481
+ });
11655
11482
  return note ? {
11656
- id: asButtonPersonalityId(id),
11483
+ ...selection,
11657
11484
  note
11658
- } : { id: asButtonPersonalityId(id) };
11485
+ } : selection;
11659
11486
  }
11660
11487
  function paletteRecommendation(authoringKey, note) {
11661
11488
  const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -11840,9 +11667,8 @@ const curatedSiteStyles = [
11840
11667
  "minimal-transparent",
11841
11668
  "clean-base"
11842
11669
  ],
11843
- buttonPersonalityChoices: [
11670
+ buttonStyleChoices: [
11844
11671
  buttonChoice("soft-pill"),
11845
- buttonChoice("two-tone-pill"),
11846
11672
  buttonChoice("pebble"),
11847
11673
  buttonChoice("editorial-link"),
11848
11674
  buttonChoice("brushed-wash")
@@ -11878,7 +11704,7 @@ const curatedSiteStyles = [
11878
11704
  "brand-solid",
11879
11705
  "clean-base"
11880
11706
  ],
11881
- buttonPersonalityChoices: [
11707
+ buttonStyleChoices: [
11882
11708
  buttonChoice("confident-chip"),
11883
11709
  buttonChoice("soft-pill"),
11884
11710
  buttonChoice("editorial-link")
@@ -11917,7 +11743,7 @@ const curatedSiteStyles = [
11917
11743
  "minimal-transparent",
11918
11744
  "centered-calm"
11919
11745
  ],
11920
- buttonPersonalityChoices: [
11746
+ buttonStyleChoices: [
11921
11747
  buttonChoice("editorial-link"),
11922
11748
  buttonChoice("soft-pill"),
11923
11749
  buttonChoice("brushed-wash")
@@ -11957,7 +11783,7 @@ const curatedSiteStyles = [
11957
11783
  "practical-utility",
11958
11784
  "clean-base"
11959
11785
  ],
11960
- buttonPersonalityChoices: [
11786
+ buttonStyleChoices: [
11961
11787
  buttonChoice("pebble"),
11962
11788
  buttonChoice("brushed-wash"),
11963
11789
  buttonChoice("confident-chip")
@@ -12018,7 +11844,7 @@ const curatedSiteStyles = [
12018
11844
  "serif-line",
12019
11845
  "clean-base"
12020
11846
  ],
12021
- buttonPersonalityChoices: [
11847
+ buttonStyleChoices: [
12022
11848
  buttonChoice("editorial-link"),
12023
11849
  buttonChoice("confident-chip"),
12024
11850
  buttonChoice("soft-pill")
@@ -12080,7 +11906,7 @@ const curatedSiteStyles = [
12080
11906
  "brand-solid",
12081
11907
  "clean-base"
12082
11908
  ],
12083
- buttonPersonalityChoices: [
11909
+ buttonStyleChoices: [
12084
11910
  buttonChoice("confident-chip"),
12085
11911
  buttonChoice("pebble"),
12086
11912
  buttonChoice("ink-stamp")
@@ -12119,7 +11945,7 @@ const curatedSiteStyles = [
12119
11945
  "minimal-transparent",
12120
11946
  "clean-base"
12121
11947
  ],
12122
- buttonPersonalityChoices: [
11948
+ buttonStyleChoices: [
12123
11949
  buttonChoice("soft-pill"),
12124
11950
  buttonChoice("pebble"),
12125
11951
  buttonChoice("confident-chip")
@@ -12192,7 +12018,7 @@ const curatedSiteStyles = [
12192
12018
  "clean-base",
12193
12019
  "centered-calm"
12194
12020
  ],
12195
- buttonPersonalityChoices: [
12021
+ buttonStyleChoices: [
12196
12022
  buttonChoice("pebble"),
12197
12023
  buttonChoice("soft-pill"),
12198
12024
  buttonChoice("editorial-link")
@@ -12311,12 +12137,8 @@ const curatedSiteStyles = [
12311
12137
  "serif-line",
12312
12138
  "minimal-transparent"
12313
12139
  ],
12314
- recommendedFooterLookIds: [
12315
- "footer-centered-calm",
12316
- "footer-editorial-columns",
12317
- "footer-muted-grounding"
12318
- ],
12319
- buttonPersonalityChoices: [
12140
+ recommendedFooterLookIds: ["footer-links-quiet"],
12141
+ buttonStyleChoices: [
12320
12142
  buttonChoice("soft-pill"),
12321
12143
  buttonChoice("pebble"),
12322
12144
  buttonChoice("editorial-link")
@@ -12390,7 +12212,7 @@ const curatedSiteStyles = [
12390
12212
  "centered-calm",
12391
12213
  "minimal-transparent"
12392
12214
  ],
12393
- buttonPersonalityChoices: [
12215
+ buttonStyleChoices: [
12394
12216
  buttonChoice("editorial-link"),
12395
12217
  buttonChoice("soft-pill"),
12396
12218
  buttonChoice("brushed-wash")
@@ -12463,8 +12285,8 @@ const curatedSiteStyles = [
12463
12285
  "practical-utility",
12464
12286
  "clean-base"
12465
12287
  ],
12466
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12467
- buttonPersonalityChoices: [
12288
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12289
+ buttonStyleChoices: [
12468
12290
  buttonChoice("pebble"),
12469
12291
  buttonChoice("confident-chip"),
12470
12292
  buttonChoice("ink-stamp"),
@@ -12585,8 +12407,8 @@ const curatedSiteStyles = [
12585
12407
  "minimal-transparent",
12586
12408
  "serif-line"
12587
12409
  ],
12588
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
12589
- buttonPersonalityChoices: [
12410
+ recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
12411
+ buttonStyleChoices: [
12590
12412
  buttonChoice("earth-pill"),
12591
12413
  buttonChoice("soft-pill"),
12592
12414
  buttonChoice("pebble"),
@@ -12657,7 +12479,7 @@ const curatedSiteStyles = [
12657
12479
  "floating-glass",
12658
12480
  "brand-solid"
12659
12481
  ],
12660
- buttonPersonalityChoices: [
12482
+ buttonStyleChoices: [
12661
12483
  buttonChoice("ink-stamp"),
12662
12484
  buttonChoice("confident-chip"),
12663
12485
  buttonChoice("brushed-wash"),
@@ -12712,8 +12534,8 @@ const curatedSiteStyles = [
12712
12534
  "transparent-overlay",
12713
12535
  "practical-utility"
12714
12536
  ],
12715
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12716
- buttonPersonalityChoices: [
12537
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12538
+ buttonStyleChoices: [
12717
12539
  buttonChoice("showtime-pill"),
12718
12540
  buttonChoice("confident-chip"),
12719
12541
  buttonChoice("ink-stamp"),
@@ -12794,8 +12616,8 @@ const curatedSiteStyles = [
12794
12616
  headerStyleChoice("glass")
12795
12617
  ] },
12796
12618
  recommendedHeaderLookIds: ["minimal-transparent"],
12797
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12798
- buttonPersonalityChoices: [
12619
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12620
+ buttonStyleChoices: [
12799
12621
  buttonChoice("ornate-ritual"),
12800
12622
  buttonChoice("joy-stamp"),
12801
12623
  buttonChoice("ink-stamp")
@@ -12848,8 +12670,8 @@ const curatedSiteStyles = [
12848
12670
  headerStyleChoice("glass")
12849
12671
  ] },
12850
12672
  recommendedHeaderLookIds: ["minimal-transparent"],
12851
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12852
- buttonPersonalityChoices: [
12673
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12674
+ buttonStyleChoices: [
12853
12675
  buttonChoice("joy-stamp"),
12854
12676
  buttonChoice("ink-stamp"),
12855
12677
  buttonChoice("showtime-pill")
@@ -12939,8 +12761,8 @@ const curatedSiteStyles = [
12939
12761
  "centered-calm",
12940
12762
  "clean-base"
12941
12763
  ],
12942
- recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
12943
- buttonPersonalityChoices: [
12764
+ recommendedFooterLookIds: ["footer-links-quiet"],
12765
+ buttonStyleChoices: [
12944
12766
  buttonChoice("flat-ink"),
12945
12767
  buttonChoice("confident-chip"),
12946
12768
  buttonChoice("editorial-link")
@@ -13017,14 +12839,9 @@ const curatedSiteStyles = [
13017
12839
  "serif-line",
13018
12840
  "clean-base"
13019
12841
  ],
13020
- recommendedFooterLookIds: [
13021
- "footer-editorial-columns",
13022
- "footer-muted-grounding",
13023
- "footer-identity-quiet"
13024
- ],
13025
- buttonPersonalityChoices: [
13026
- buttonChoice("quiet-arrow"),
13027
- buttonChoice("two-tone-pill"),
12842
+ recommendedFooterLookIds: ["footer-links-quiet"],
12843
+ buttonStyleChoices: [
12844
+ buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
13028
12845
  buttonChoice("flat-ink"),
13029
12846
  buttonChoice("editorial-link")
13030
12847
  ],
@@ -17374,25 +17191,41 @@ const heroLayoutControlsFragment = defineFragment({
17374
17191
  layout: []
17375
17192
  });
17376
17193
  //#endregion
17194
+ //#region ../blocks/src/system/constants/buttonRoles.ts
17195
+ /**
17196
+ * Semantic button roles available to block authors.
17197
+ *
17198
+ * These roles are deliberately independent of a site's visual button style:
17199
+ * the active theme owns how each role looks.
17200
+ */
17201
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
17202
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
17203
+ /**
17204
+ * Temporary rollout boundary for persisted content written before issue #1220.
17205
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
17206
+ * only until the post-deploy role rewrite has been audited in production.
17207
+ */
17208
+ function canonicalizePersistedBlockButtonRole(value) {
17209
+ return value === "link" || value === "tertiary" ? "ghost" : value;
17210
+ }
17211
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
17212
+ const BLOCK_BUTTON_ROLE_LABELS = {
17213
+ primary: "Primary",
17214
+ secondary: "Secondary",
17215
+ outline: "Outline",
17216
+ ghost: "Ghost",
17217
+ accent: "Accent"
17218
+ };
17219
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
17220
+ value,
17221
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
17222
+ }));
17223
+ function isBlockButtonRole(value) {
17224
+ return blockButtonRoleSchema.safeParse(value).success;
17225
+ }
17226
+ //#endregion
17377
17227
  //#region ../blocks/src/system/fields/button.ts
17378
- const DEFAULT_THEME_BUTTON_VARIANTS = [
17379
- {
17380
- value: "primary",
17381
- label: "Primary"
17382
- },
17383
- {
17384
- value: "secondary",
17385
- label: "Secondary"
17386
- },
17387
- {
17388
- value: "outline",
17389
- label: "Outline"
17390
- },
17391
- {
17392
- value: "link",
17393
- label: "Link"
17394
- }
17395
- ];
17228
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
17396
17229
  function createButtonVariantField(options = {}) {
17397
17230
  return {
17398
17231
  id: options.id ?? "buttonVariant",
@@ -17410,20 +17243,7 @@ function createButtonVariantField(options = {}) {
17410
17243
  };
17411
17244
  }
17412
17245
  function createButtonGroup(options = {}) {
17413
- const { variants = [
17414
- {
17415
- value: "primary",
17416
- label: "Primary"
17417
- },
17418
- {
17419
- value: "secondary",
17420
- label: "Secondary"
17421
- },
17422
- {
17423
- value: "outline",
17424
- label: "Outline"
17425
- }
17426
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17246
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17427
17247
  const mainFields = [
17428
17248
  {
17429
17249
  id: "label",
@@ -17559,29 +17379,7 @@ const ctaRowFragment = defineFragment({
17559
17379
  fields: [createCtasRepeater({
17560
17380
  label: "Calls to action",
17561
17381
  itemLabel: "CTA",
17562
- maxItems: 3,
17563
- button: { variants: [
17564
- {
17565
- value: "primary",
17566
- label: "Primary"
17567
- },
17568
- {
17569
- value: "secondary",
17570
- label: "Secondary"
17571
- },
17572
- {
17573
- value: "outline",
17574
- label: "Outline"
17575
- },
17576
- {
17577
- value: "link",
17578
- label: "Link"
17579
- },
17580
- {
17581
- value: "accent",
17582
- label: "Accent"
17583
- }
17584
- ] }
17382
+ maxItems: 3
17585
17383
  })],
17586
17384
  layout: [ctaRow({
17587
17385
  collectionPath: "content.ctas",
@@ -17600,10 +17398,6 @@ const heroCtaRowFragment = defineFragment({
17600
17398
  defaultValue: [],
17601
17399
  button: {
17602
17400
  variants: [
17603
- {
17604
- value: "default",
17605
- label: "Default"
17606
- },
17607
17401
  {
17608
17402
  value: "primary",
17609
17403
  label: "Primary"
@@ -17615,9 +17409,17 @@ const heroCtaRowFragment = defineFragment({
17615
17409
  {
17616
17410
  value: "outline",
17617
17411
  label: "Outline"
17412
+ },
17413
+ {
17414
+ value: "ghost",
17415
+ label: "Ghost"
17416
+ },
17417
+ {
17418
+ value: "accent",
17419
+ label: "Accent"
17618
17420
  }
17619
17421
  ],
17620
- defaultVariant: "default",
17422
+ defaultVariant: "primary",
17621
17423
  includeSize: true,
17622
17424
  defaultSize: "lg"
17623
17425
  }
@@ -18308,11 +18110,13 @@ const blogFeaturedPostFragment = defineFragment({
18308
18110
  as: "p",
18309
18111
  style: textColorStyle("text/80")
18310
18112
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
18311
- link({
18312
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
18313
- style: textColorStyle("primary"),
18314
- href: { $bind: { from: "post.path" } }
18315
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
18113
+ button({
18114
+ className: "rb-self-start",
18115
+ href: { $bind: { from: "post.path" } },
18116
+ variantId: "ghost",
18117
+ size: "sm",
18118
+ linkRequired: true
18119
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
18316
18120
  ])], when("post")), stack({
18317
18121
  gap: "sm",
18318
18122
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -18583,21 +18387,7 @@ const newsletterFormFragment = defineFragment({
18583
18387
  createButtonVariantField({
18584
18388
  id: "buttonVariant",
18585
18389
  label: "Button style",
18586
- defaultValue: "primary",
18587
- variants: [
18588
- {
18589
- value: "primary",
18590
- label: "Primary"
18591
- },
18592
- {
18593
- value: "secondary",
18594
- label: "Secondary"
18595
- },
18596
- {
18597
- value: "outline",
18598
- label: "Outline"
18599
- }
18600
- ]
18390
+ defaultValue: "primary"
18601
18391
  }),
18602
18392
  {
18603
18393
  id: "successMessage",
@@ -20146,7 +19936,8 @@ function postExcerpt(className) {
20146
19936
  function postReadMore() {
20147
19937
  return button({
20148
19938
  href: { $bind: { from: "post.path" } },
20149
- className: "rb-self-start"
19939
+ className: "rb-self-start",
19940
+ variantId: "ghost"
20150
19941
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
20151
19942
  as: "span",
20152
19943
  value: "Read more"
@@ -23718,31 +23509,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
23718
23509
  label: "Calls to action",
23719
23510
  itemLabel: "CTA",
23720
23511
  maxItems: 1,
23721
- button: {
23722
- variants: [
23723
- {
23724
- value: "primary",
23725
- label: "Primary"
23726
- },
23727
- {
23728
- value: "secondary",
23729
- label: "Secondary"
23730
- },
23731
- {
23732
- value: "outline",
23733
- label: "Outline"
23734
- },
23735
- {
23736
- value: "ghost",
23737
- label: "Ghost"
23738
- },
23739
- {
23740
- value: "link",
23741
- label: "Link"
23742
- }
23743
- ],
23744
- defaultVariant: "ghost"
23745
- }
23512
+ button: { defaultVariant: "ghost" }
23746
23513
  })
23747
23514
  ] }
23748
23515
  },
@@ -25835,17 +25602,8 @@ function readAmount(value) {
25835
25602
  //#endregion
25836
25603
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
25837
25604
  const previewStageSchema = z$1.enum(["preview", "published"]);
25838
- const registrationButtonVariantSchema = z$1.enum([
25839
- "primary",
25840
- "secondary",
25841
- "outline"
25842
- ]);
25843
- const eventButtonVariantSchema = z$1.enum([
25844
- "primary",
25845
- "secondary",
25846
- "outline",
25847
- "link"
25848
- ]);
25605
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
25606
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
25849
25607
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
25850
25608
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
25851
25609
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -26210,23 +25968,7 @@ const eventRegistrationBlockDefinition = {
26210
25968
  defaultValue: "Complete Registration",
26211
25969
  maxLength: 40
26212
25970
  },
26213
- createButtonVariantField({
26214
- description: "Choose a button style from your theme",
26215
- variants: [
26216
- {
26217
- value: "primary",
26218
- label: "Primary"
26219
- },
26220
- {
26221
- value: "secondary",
26222
- label: "Secondary"
26223
- },
26224
- {
26225
- value: "outline",
26226
- label: "Outline"
26227
- }
26228
- ]
26229
- })
25971
+ createButtonVariantField()
26230
25972
  ],
26231
25973
  layout: [styledSection({
26232
25974
  baseClass: "",
@@ -26533,23 +26275,7 @@ const courseRegistrationBlockDefinition = {
26533
26275
  defaultValue: "Sign up",
26534
26276
  maxLength: 40
26535
26277
  },
26536
- createButtonVariantField({
26537
- description: "Choose a button style from your theme",
26538
- variants: [
26539
- {
26540
- value: "primary",
26541
- label: "Primary"
26542
- },
26543
- {
26544
- value: "secondary",
26545
- label: "Secondary"
26546
- },
26547
- {
26548
- value: "outline",
26549
- label: "Outline"
26550
- }
26551
- ]
26552
- })
26278
+ createButtonVariantField()
26553
26279
  ],
26554
26280
  layout: [styledSection({
26555
26281
  baseClass: "",
@@ -29414,36 +29140,7 @@ const offeringsPreviewFields = [
29414
29140
  ui: { intent: "content" },
29415
29141
  schema: { fields: groupOverrideFields }
29416
29142
  },
29417
- {
29418
- id: "buttonVariant",
29419
- type: "select",
29420
- label: "Button style",
29421
- required: false,
29422
- multiple: false,
29423
- defaultValue: "primary",
29424
- options: [
29425
- {
29426
- value: "primary",
29427
- label: "Primary"
29428
- },
29429
- {
29430
- value: "secondary",
29431
- label: "Secondary"
29432
- },
29433
- {
29434
- value: "outline",
29435
- label: "Outline"
29436
- },
29437
- {
29438
- value: "link",
29439
- label: "Link"
29440
- }
29441
- ],
29442
- ui: {
29443
- intent: "display",
29444
- widget: "buttonVariant"
29445
- }
29446
- },
29143
+ createButtonVariantField(),
29447
29144
  {
29448
29145
  id: "buttonText",
29449
29146
  type: "text",
@@ -29649,7 +29346,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
29649
29346
  return [override];
29650
29347
  }
29651
29348
  function isButtonVariant(value) {
29652
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
29349
+ return value === null || isBlockButtonRole(value);
29653
29350
  }
29654
29351
  function normalizeCardStylesContent(value) {
29655
29352
  return isRecord$1(value) || value === null ? value : void 0;
@@ -31501,12 +31198,7 @@ const shopSourceSchema = z$1.object({
31501
31198
  showPrices: z$1.boolean().optional(),
31502
31199
  showValidityPeriod: z$1.boolean().optional(),
31503
31200
  showPricePerCredit: z$1.boolean().nullable().optional(),
31504
- buttonVariant: z$1.enum([
31505
- "primary",
31506
- "secondary",
31507
- "outline",
31508
- "link"
31509
- ]).optional(),
31201
+ buttonVariant: blockButtonRoleSchema.optional(),
31510
31202
  passesHeading: z$1.string().optional(),
31511
31203
  membershipsHeading: z$1.string().optional(),
31512
31204
  buyButtonText: z$1.string().optional(),
@@ -31651,12 +31343,7 @@ const passesMembershipsHydrationSchema = z$1.object({
31651
31343
  passes: z$1.array(publicPassProductSchema),
31652
31344
  memberships: z$1.array(publicMembershipProductSchema),
31653
31345
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
31654
- buttonVariant: z$1.enum([
31655
- "primary",
31656
- "secondary",
31657
- "outline",
31658
- "link"
31659
- ])
31346
+ buttonVariant: blockButtonRoleSchema
31660
31347
  });
31661
31348
  const productListHydrationSchema = z$1.object({
31662
31349
  products: z$1.array(publicProductSchema),
@@ -32980,11 +32667,7 @@ const newsletterPresetSchema = z$1.enum([
32980
32667
  "emailNameCompany"
32981
32668
  ]);
32982
32669
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
32983
- const newsletterButtonVariantSchema = z$1.enum([
32984
- "primary",
32985
- "secondary",
32986
- "outline"
32987
- ]);
32670
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
32988
32671
  const newsletterFieldSchema = z$1.object({
32989
32672
  id: z$1.string(),
32990
32673
  type: z$1.enum(["email", "text"]),