@riverbankcms/sdk 0.109.0 → 0.111.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/dist/{PreviewEditorSidebar-DWqwfy3_.mjs → PreviewEditorSidebar-CTR6LUhN.mjs} +178 -117
  2. package/dist/{PreviewEditorUI-B7OL4sfR.mjs → PreviewEditorUI-DZg15Zip.mjs} +3 -4
  3. package/dist/{PreviewQueryProvider-D0y2l8JN.mjs → PreviewQueryProvider-kkmjklLG.mjs} +1 -1
  4. package/dist/{SdkPreviewModeRuntime-D8Gt9Gbe.mjs → SdkPreviewModeRuntime-DeOTAFvR.mjs} +229 -219
  5. package/dist/{SiteChromeCustomizeContext-DUpalEdL.mjs → SiteChromeCustomizeContext-DOSDLCiJ.mjs} +1695 -2169
  6. package/dist/_dts/ai/src/contracts/proposals.d.ts +1716 -76
  7. package/dist/_dts/api/src/commercePortalEndpoints.d.ts +5 -5
  8. package/dist/_dts/api/src/contentRuntime.d.ts +4 -1
  9. package/dist/_dts/api/src/courses.d.ts +30 -15
  10. package/dist/_dts/api/src/endpoints.d.ts +14 -4
  11. package/dist/_dts/api/src/index.d.ts +2 -2
  12. package/dist/_dts/api/src/sdkContracts.d.ts +23 -11
  13. package/dist/_dts/api/src/siteManagementEndpoints.d.ts +5 -1
  14. package/dist/_dts/api/src/siteOperations.d.ts +11 -19
  15. package/dist/_dts/api/src/siteRuntimeEndpoints.d.ts +6 -6
  16. package/dist/_dts/api/src/webhooks.d.ts +98 -1
  17. package/dist/_dts/billing/src/site-arrangements.d.ts +3 -0
  18. package/dist/_dts/blocks/src/client/course-registration.d.ts +4 -1
  19. package/dist/_dts/blocks/src/client.d.ts +4 -1
  20. package/dist/_dts/blocks/src/contracts/proof-block-islands.d.ts +4 -4
  21. package/dist/_dts/blocks/src/index.d.ts +3 -1
  22. package/dist/_dts/blocks/src/system/blocks/course-registration.d.ts +2 -1
  23. package/dist/_dts/blocks/src/system/blocks/courses/shared/types.d.ts +2 -1
  24. package/dist/_dts/blocks/src/system/blocks/cta-full.d.ts +2 -4
  25. package/dist/_dts/blocks/src/system/blocks/event-registration.d.ts +2 -1
  26. package/dist/_dts/blocks/src/system/blocks/events/event-listing.d.ts +2 -1
  27. package/dist/_dts/blocks/src/system/blocks/events/event-spotlight.d.ts +2 -1
  28. package/dist/_dts/blocks/src/system/blocks/events/recurring-schedule.d.ts +3 -2
  29. package/dist/_dts/blocks/src/system/blocks/events/shared/types.d.ts +2 -1
  30. package/dist/_dts/blocks/src/system/blocks/file-download.d.ts +2 -1
  31. package/dist/_dts/blocks/src/system/blocks/newsletter-signup.d.ts +2 -1
  32. package/dist/_dts/blocks/src/system/blocks/shop.d.ts +2 -1
  33. package/dist/_dts/blocks/src/system/blocks/single-button.d.ts +2 -1
  34. package/dist/_dts/blocks/src/system/constants/buttonRoles.d.ts +35 -0
  35. package/dist/_dts/blocks/src/system/fields/button.d.ts +10 -21
  36. package/dist/_dts/blocks/src/system/fields/ctas.d.ts +2 -1
  37. package/dist/_dts/blocks/src/system/fragments/library/heroCtaRow.d.ts +9 -5
  38. package/dist/_dts/blocks/src/system/runtime/components/registry.client.d.ts +18 -18
  39. package/dist/_dts/blocks/src/system/runtime/components/runtime-backed-blocks.d.ts +9 -9
  40. package/dist/_dts/blocks/src/system/runtime/hooks/useHeadlessWholeSeriesRegistrationFlow.d.ts +29 -0
  41. package/dist/_dts/blocks/src/system/runtime/nodes/buttonAffordance.d.ts +1 -1
  42. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/ErrorStep.d.ts +2 -1
  43. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/PaymentFailedStep.d.ts +2 -1
  44. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/VerifyingTimeoutStep.d.ts +2 -1
  45. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/types.d.ts +21 -0
  46. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/useCourseRegistrationWizard.d.ts +4 -4
  47. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/whole-series-registration.headless.contract.d.ts +326 -0
  48. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration/whole-series-registration.headless.planning.d.ts +27 -0
  49. package/dist/_dts/blocks/src/system/runtime/nodes/course-registration.interactive.d.ts +5 -4
  50. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration/event-registration.headless.contract.d.ts +3 -2
  51. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration/types.d.ts +2 -1
  52. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration.interactive.d.ts +5 -4
  53. package/dist/_dts/blocks/src/system/runtime/nodes/file-download.d.ts +2 -3
  54. package/dist/_dts/blocks/src/system/runtime/nodes/newsletter-form.types.d.ts +2 -1
  55. package/dist/_dts/blocks/src/system/runtime/nodes/shared/contract-schemas.d.ts +6 -3
  56. package/dist/_dts/blocks/src/system/runtime/nodes/shop.interactive.d.ts +7 -6
  57. package/dist/_dts/blocks/src/system/runtime/nodes/shop.types.d.ts +2 -1
  58. package/dist/_dts/blocks/src/system/runtime/shared/types.d.ts +2 -1
  59. package/dist/_dts/content-editor/src/FooterComposerPanel.d.ts +4 -2
  60. package/dist/_dts/content-editor/src/index.d.ts +12 -12
  61. package/dist/_dts/content-editor/src/ui/editorUiStore.d.ts +17 -2
  62. package/dist/_dts/db/src/generated/supabase/database.types.d.ts +221 -53
  63. package/dist/_dts/editor-blocks/src/widgets/button/context.d.ts +3 -2
  64. package/dist/_dts/preview-next/src/client/index.d.ts +3 -2
  65. package/dist/_dts/preview-next/src/client/preview/ButtonStylePicker.d.ts +16 -0
  66. package/dist/_dts/preview-next/src/client/preview/PageBlockEditorPanel.d.ts +2 -3
  67. package/dist/_dts/preview-next/src/client/preview/PreviewDesignOpenRequestContext.d.ts +7 -0
  68. package/dist/_dts/preview-next/src/client/preview/PreviewEditorSidebar.d.ts +5 -11
  69. package/dist/_dts/preview-next/src/client/preview/PreviewShell.d.ts +5 -6
  70. package/dist/_dts/preview-next/src/client/preview/PreviewShellLayout.d.ts +6 -7
  71. package/dist/_dts/preview-next/src/client/preview/SiteChromeCustomizeContext.d.ts +7 -9
  72. package/dist/_dts/preview-next/src/client/preview/StyleConfigurator.d.ts +4 -11
  73. package/dist/_dts/preview-next/src/client/preview/StyleConfigurator.state.d.ts +7 -7
  74. package/dist/_dts/preview-next/src/client/preview/sidebarTabPreference.d.ts +0 -8
  75. package/dist/_dts/preview-next/src/client/preview/siteChromeLookRows.d.ts +1 -11
  76. package/dist/_dts/preview-next/src/client/preview/siteChromeQuickControlHistoryState.d.ts +1 -5
  77. package/dist/_dts/preview-next/src/client/preview/siteChromeSavePlan.d.ts +2 -3
  78. package/dist/_dts/preview-next/src/client/preview/siteStylePreviewPlanner.d.ts +3 -4
  79. package/dist/_dts/preview-next/src/client/preview/styleConfiguratorSnapshot.d.ts +3 -5
  80. package/dist/_dts/sdk/src/bookings/index.d.ts +5 -4
  81. package/dist/_dts/sdk/src/bookings/types.d.ts +3 -3
  82. package/dist/_dts/sdk/src/cli/commands/style.d.ts +3 -2
  83. package/dist/_dts/sdk/src/client/management/types.d.ts +2 -1
  84. package/dist/_dts/sdk/src/contracts/system-block-content.d.ts +12 -15
  85. package/dist/_dts/sdk/src/public-api/contracts.d.ts +1 -1
  86. package/dist/_dts/sdk/src/version.d.ts +1 -1
  87. package/dist/_dts/sdk/src/webhooks/index.d.ts +1 -1
  88. package/dist/_dts/sdk/src/webhooks/verify.d.ts +3 -3
  89. package/dist/_dts/site-commands/src/commands.d.ts +129 -6
  90. package/dist/_dts/theme-core/src/buttons/index.d.ts +1 -1
  91. package/dist/_dts/theme-core/src/buttons/styles/domain.d.ts +80 -0
  92. package/dist/_dts/theme-core/src/buttons/styles/index.d.ts +3 -0
  93. package/dist/_dts/theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.d.ts +49 -0
  94. package/dist/_dts/theme-core/src/buttons/styles/recipes/quietArrow.d.ts +67 -0
  95. package/dist/_dts/theme-core/src/buttons/styles/recipes/staticRecipes.d.ts +649 -0
  96. package/dist/_dts/theme-core/src/buttons/styles/registry.d.ts +753 -0
  97. package/dist/_dts/theme-core/src/buttons/styles/selection.d.ts +69 -0
  98. package/dist/_dts/theme-core/src/site-styles/curatedSiteStyles.d.ts +26 -24
  99. package/dist/_dts/theme-core/src/site-styles/footerLooks.d.ts +19 -153
  100. package/dist/_dts/theme-core/src/site-styles/headerCtaVariants.d.ts +3 -1
  101. package/dist/_dts/theme-core/src/site-styles/previewCompiler.d.ts +8 -9
  102. package/dist/_dts/theme-core/src/site-styles/runtimeCompiler.d.ts +4 -4
  103. package/dist/_dts/ui/src/palette/hex.d.ts +3 -3
  104. package/dist/cli/index.mjs +1760 -1914
  105. package/dist/cli/init-docs/content/workflow-isr-revalidation.md +1 -1
  106. package/dist/client/{DiscountCodeDisclosure-DU1ygxU2.mjs → DiscountCodeDisclosure-C4xvTBux.mjs} +1 -1
  107. package/dist/client/{EventCombined.client-DB5zagCo.mjs → EventCombined.client-Cr7G131j.mjs} +2 -3
  108. package/dist/client/{EventListing.client-CTX9JHBL.mjs → EventListing.client-CAjbseNy.mjs} +2 -2
  109. package/dist/client/{LeafletStaticMap-BYImhgiB.mjs → LeafletStaticMap-BMlWfwz3.mjs} +1 -1
  110. package/dist/client/{MagicLinkForm-CRkw_M3l.mjs → MagicLinkForm-ChdFz96y.mjs} +1 -2
  111. package/dist/client/{StepIndicator-BnmVBJJh.mjs → StepIndicator-7D3GaBeM.mjs} +2 -2
  112. package/dist/client/{accordion-CeGreumd.mjs → accordion-D8JTs2Si.mjs} +1 -1
  113. package/dist/client/{bookingForm-CSzFNrpN.mjs → bookingForm-H3DCRBHs.mjs} +6 -7
  114. package/dist/client/bookings.mjs +3069 -1447
  115. package/dist/client/{carousel-B2jDtogf.mjs → carousel-DMr_QWlz.mjs} +1 -1
  116. package/dist/client/{cart-D-jZ-vaY.mjs → cart-DWMbfBdR.mjs} +3 -3
  117. package/dist/client/{checkout-Dza-LA7N.mjs → checkout-zmfdkXLx.mjs} +3 -3
  118. package/dist/client/client.mjs +1732 -1913
  119. package/dist/client/{colorStyles-CrgzoXsm.mjs → colorStyles-gcTh5yZT.mjs} +2 -12
  120. package/dist/client/{colorTokenParts-CMugwvX_.mjs → colorTokenParts-FSS3al6l.mjs} +31 -1
  121. package/dist/client/{courseRegistration-TYkNychb.mjs → courseRegistration-Z_mn18jy.mjs} +100 -37
  122. package/dist/client/{eventCalendar-BI_90SsT.mjs → eventCalendar-CYp0YJGF.mjs} +4 -5
  123. package/dist/client/{eventCombined-mNrpryE9.mjs → eventCombined-rKyYZUa9.mjs} +2 -2
  124. package/dist/client/{eventDetails-D4GVlCIY.mjs → eventDetails-X0ZaUuMj.mjs} +3 -3
  125. package/dist/client/{eventListing-YhKN018y.mjs → eventListing-W1SuL7EP.mjs} +2 -2
  126. package/dist/client/{eventRegistration-CdHGtilr.mjs → eventRegistration-ClWricui.mjs} +6 -7
  127. package/dist/client/{form-AcAL45rA.mjs → form--eKPwAAD.mjs} +1 -2
  128. package/dist/client/{headerSection-uEC52ueD.mjs → headerSection-BSeGr-FS.mjs} +2 -3
  129. package/dist/client/hooks.mjs +1554 -1871
  130. package/dist/client/{locationMap-_wJDSUYe.mjs → locationMap-BpOrtNYn.mjs} +8 -5
  131. package/dist/client/{media-BK0O3b-U.mjs → media-DoF0dcVx.mjs} +2 -2
  132. package/dist/client/{newsletterForm-DrArsb2B.mjs → newsletterForm-Bt7it7Dy.mjs} +1 -2
  133. package/dist/client/{pricing-BSYVghwo.mjs → pricing-BTjSDDr4.mjs} +1 -1
  134. package/dist/client/{productDetail-Dyk90sMs.mjs → productDetail-ICnVTcCg.mjs} +3 -3
  135. package/dist/client/{productList-BCKThwAI.mjs → productList-ZHr6D604.mjs} +3 -3
  136. package/dist/client/{propsDecoder-CkXxkdSR.mjs → propsDecoder-wWN0tBDF.mjs} +2351 -129
  137. package/dist/client/rendering/client.mjs +1664 -1824
  138. package/dist/client/rendering/islands.mjs +20 -20
  139. package/dist/client/rendering.mjs +1697 -1909
  140. package/dist/client/{shop-DeltVH10.mjs → shop-C1u_BUn0.mjs} +5 -6
  141. package/dist/client/{shop-commerce-BD9Jsm2Z.mjs → shop-commerce-CleZdRha.mjs} +5 -6
  142. package/dist/client/{shop-commerce-store-CmXD6FDS.mjs → shop-commerce-store-ycnoB2Ce.mjs} +1 -1
  143. package/dist/client/{shopShared-B8v-lH_F.mjs → shopShared-CPhByt2a.mjs} +3 -3
  144. package/dist/client/{useDiscountCodeUi-DbWJN8ld.mjs → useDiscountCodeUi-cStSQI6C.mjs} +1 -1
  145. package/dist/client/{useEventFilters-EJIMUnqT.mjs → useEventFilters-DKPN7hSY.mjs} +26 -27
  146. package/dist/client/{usePolling-Cmh14fc7.mjs → usePolling-BKAd6pkZ.mjs} +2 -2
  147. package/dist/preview-next/before-render.mjs +37 -6
  148. package/dist/preview-next/client/runtime.mjs +4 -4
  149. package/dist/preview-next/middleware.mjs +37 -6
  150. package/dist/{previewAuthStore-CTO7CRPk.mjs → previewAuthStore-BkT1D06A.mjs} +37 -6
  151. package/dist/{sdk-runtime-Dou0GAav.mjs → sdk-runtime-hu3wr3ng.mjs} +2 -2
  152. package/dist/{separator-CI5wZNXT.mjs → separator-Bln8izQ9.mjs} +1 -1
  153. package/dist/server/components.mjs +1472 -1788
  154. package/dist/server/config-validation.mjs +1559 -1876
  155. package/dist/server/config.mjs +1559 -1876
  156. package/dist/server/data.mjs +1554 -1871
  157. package/dist/server/index.mjs +38 -7
  158. package/dist/server/next/revalidate.mjs +53 -1
  159. package/dist/server/next.mjs +1584 -1869
  160. package/dist/server/page-converter.mjs +1543 -1860
  161. package/dist/server/prebuild.mjs +1 -1
  162. package/dist/server/rendering/server.mjs +1472 -1788
  163. package/dist/server/rendering.mjs +1472 -1788
  164. package/dist/server/routing.mjs +1600 -1891
  165. package/dist/server/server.mjs +1574 -1860
  166. package/dist/server/theme-bridge.mjs +1436 -1619
  167. package/dist/server/theme.mjs +1345 -1241
  168. package/dist/server/webhooks.mjs +54 -2
  169. package/package.json +1 -1
  170. package/dist/_dts/theme-core/src/buttons/personalities/brushed-wash.d.ts +0 -16
  171. package/dist/_dts/theme-core/src/buttons/personalities/confident-chip.d.ts +0 -16
  172. package/dist/_dts/theme-core/src/buttons/personalities/earth-pill.d.ts +0 -16
  173. package/dist/_dts/theme-core/src/buttons/personalities/editorial-link.d.ts +0 -16
  174. package/dist/_dts/theme-core/src/buttons/personalities/flat-ink.d.ts +0 -20
  175. package/dist/_dts/theme-core/src/buttons/personalities/index.d.ts +0 -172
  176. package/dist/_dts/theme-core/src/buttons/personalities/ink-stamp.d.ts +0 -16
  177. package/dist/_dts/theme-core/src/buttons/personalities/joy-stamp.d.ts +0 -22
  178. package/dist/_dts/theme-core/src/buttons/personalities/ornate-ritual.d.ts +0 -16
  179. package/dist/_dts/theme-core/src/buttons/personalities/pebble.d.ts +0 -16
  180. package/dist/_dts/theme-core/src/buttons/personalities/quiet-arrow.d.ts +0 -17
  181. package/dist/_dts/theme-core/src/buttons/personalities/showtime-pill.d.ts +0 -17
  182. package/dist/_dts/theme-core/src/buttons/personalities/soft-pill.d.ts +0 -16
  183. package/dist/_dts/theme-core/src/buttons/personalities/two-tone-pill.d.ts +0 -17
  184. package/dist/_dts/theme-core/src/buttons/personalities/types.d.ts +0 -285
  185. package/dist/client/buttons-DoFV7KDL.mjs +0 -2115
  186. package/dist/client/foregroundContract-xICPq59x.mjs +0 -31
@@ -52,7 +52,7 @@ const TAG_TEMPLATES = {
52
52
  blockedDemoMutationPolicy("blocked-hidden", "This action is not available in demo sites.");
53
53
  blockedDemoMutationPolicy("blocked-disabled", "This setting is disabled in demo sites.");
54
54
  blockedDemoMutationPolicy("internal-only", "This internal operation is not available in demo sites.");
55
- TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.workflowRunById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.formById, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEventFilters, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicTeamMembers, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicPasses, TAG_TEMPLATES.publicMemberships, TAG_TEMPLATES.publicProducts, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicShop, TAG_TEMPLATES.publicCheckout, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents;
55
+ TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteBookingSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteEmailSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.site, TAG_TEMPLATES.siteNewsletter, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteById, TAG_TEMPLATES.siteBySlug, TAG_TEMPLATES.siteByDomain, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.workflowRunById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.routeById, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.site, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.site, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.navigationItemById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteNavigation, TAG_TEMPLATES.navigationMenuById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteSettings, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.siteTheme, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteCollection, TAG_TEMPLATES.pageSurfaceById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.pageById, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteRedirects, TAG_TEMPLATES.siteRouteOutcomes, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.formSubmissionsBySlug, TAG_TEMPLATES.formById, TAG_TEMPLATES.siteForms, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEventFilters, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicTeamMembers, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicCourses, TAG_TEMPLATES.publicPasses, TAG_TEMPLATES.publicMemberships, TAG_TEMPLATES.publicProducts, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicGifting, TAG_TEMPLATES.publicShop, TAG_TEMPLATES.publicCheckout, TAG_TEMPLATES.siteRoutableContent, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents, TAG_TEMPLATES.publicEvents;
56
56
  //#endregion
57
57
  //#region ../core/src/result.ts
58
58
  function ok(value) {
@@ -3738,7 +3738,7 @@ const gradientDirectionSchema$1 = z$1.enum([
3738
3738
  "to-br",
3739
3739
  "to-bl"
3740
3740
  ]);
3741
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3741
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
3742
3742
  z$1.object({
3743
3743
  type: z$1.literal("solid"),
3744
3744
  colorToken: opaqueButtonColourTokenSchema
@@ -3762,6 +3762,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3762
3762
  role: z$1.literal("link")
3763
3763
  })
3764
3764
  ]);
3765
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
3765
3766
  const effectApplicationSchema$1 = z$1.object({
3766
3767
  effectId: z$1.string(),
3767
3768
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -3974,265 +3975,429 @@ function isUnknownArray(value) {
3974
3975
  }
3975
3976
  buttonSizeNameSchema.options;
3976
3977
  //#endregion
3977
- //#region ../theme-core/src/buttons/personalities/types.ts
3978
- function asButtonPersonalityId(value) {
3979
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
3980
- return value;
3978
+ //#region ../theme-core/src/buttons/styles/domain.ts
3979
+ const PUBLIC_BUTTON_ROLES = [
3980
+ "primary",
3981
+ "secondary",
3982
+ "outline",
3983
+ "ghost",
3984
+ "accent"
3985
+ ];
3986
+ function defineButtonStyleRecipe(recipe) {
3987
+ return recipe;
3988
+ }
3989
+ function materializeButtonRoles(definitions) {
3990
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
3991
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
3992
+ const completeRoles = {
3993
+ primary,
3994
+ secondary
3995
+ };
3996
+ return {
3997
+ primary,
3998
+ secondary,
3999
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
4000
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
4001
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
4002
+ };
3981
4003
  }
3982
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
3983
- z$1.object({
3984
- id: buttonPersonalityIdSchema,
3985
- name: z$1.string().min(1),
3986
- description: z$1.string().min(1),
3987
- tags: styleTagsSchema,
3988
- buttonSystem: buttonSystemSchema
3989
- });
3990
- /**
3991
- * Helper for personality file modules to keep the call site short and
3992
- * type-safe. `as const satisfies ...` would also work but produces wider
3993
- * types at use sites.
3994
- */
3995
- function defineButtonPersonality(input) {
4004
+ function resolveButtonStyleRecipe(recipe, parameters) {
4005
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
4006
+ if (!parsedParameters.success) return {
4007
+ kind: "error",
4008
+ error: {
4009
+ kind: "invalid-parameters",
4010
+ styleId: recipe.id,
4011
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
4012
+ }
4013
+ };
4014
+ const definition = recipe.defineSystem(parsedParameters.data);
4015
+ const roles = materializeButtonRoles(definition.roles);
4016
+ const buttonSystem = {
4017
+ global: definition.global,
4018
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
4019
+ ...definition.sizes ? { sizes: definition.sizes } : {}
4020
+ };
4021
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
4022
+ if (!parsedButtonSystem.success) return {
4023
+ kind: "error",
4024
+ error: {
4025
+ kind: "invalid-button-system",
4026
+ styleId: recipe.id,
4027
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
4028
+ }
4029
+ };
3996
4030
  return {
3997
- id: asButtonPersonalityId(input.id),
3998
- name: input.name,
3999
- description: input.description,
4000
- tags: input.tags,
4001
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
4031
+ kind: "resolved",
4032
+ buttonSystem: parsedButtonSystem.data
4033
+ };
4034
+ }
4035
+ function materializeSupportingRole(role, definition, completeRoles) {
4036
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
4037
+ return {
4038
+ ...completeRoles[definition.from],
4039
+ ...definition.overrides,
4040
+ id: role,
4041
+ name: roleName(role),
4042
+ enabled: true,
4043
+ priority: 3
4044
+ };
4045
+ }
4046
+ function materializeCompleteRole(role, appearance) {
4047
+ return {
4048
+ ...appearance,
4049
+ id: role,
4050
+ name: roleName(role),
4051
+ enabled: true,
4052
+ priority: rolePriority(role)
4002
4053
  };
4003
4054
  }
4055
+ function roleName(role) {
4056
+ return role.charAt(0).toUpperCase() + role.slice(1);
4057
+ }
4058
+ function rolePriority(role) {
4059
+ if (role === "primary") return 1;
4060
+ if (role === "secondary") return 2;
4061
+ return 3;
4062
+ }
4063
+ //#endregion
4064
+ //#region ../theme-core/src/buttons/styles/selection.ts
4065
+ const BUTTON_STYLE_IDS = [
4066
+ "soft-pill",
4067
+ "earth-pill",
4068
+ "confident-chip",
4069
+ "editorial-link",
4070
+ "pebble",
4071
+ "ink-stamp",
4072
+ "flat-ink",
4073
+ "brushed-wash",
4074
+ "showtime-pill",
4075
+ "joy-stamp",
4076
+ "ornate-ritual",
4077
+ "quiet-arrow"
4078
+ ];
4079
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
4080
+ const emptyParametersSchema$1 = z$1.object({}).strict();
4081
+ function selectionBranch(styleId, parameters) {
4082
+ return z$1.object({
4083
+ styleId: z$1.literal(styleId),
4084
+ parameters
4085
+ }).strict();
4086
+ }
4087
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
4088
+ selectionBranch("soft-pill", emptyParametersSchema$1),
4089
+ selectionBranch("earth-pill", emptyParametersSchema$1),
4090
+ selectionBranch("confident-chip", emptyParametersSchema$1),
4091
+ selectionBranch("editorial-link", emptyParametersSchema$1),
4092
+ selectionBranch("pebble", emptyParametersSchema$1),
4093
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
4094
+ selectionBranch("flat-ink", emptyParametersSchema$1),
4095
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
4096
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
4097
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
4098
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
4099
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
4100
+ ]);
4004
4101
  //#endregion
4005
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
4006
- /**
4007
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
4008
- * Generous padding, soft shadows; pairs with vibrant organic brands.
4009
- */
4010
- const brushedWash = defineButtonPersonality({
4011
- id: "brushed-wash",
4012
- name: "Brushed Wash",
4013
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
4102
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
4103
+ const quietArrowRecipe = defineButtonStyleRecipe({
4104
+ id: "quiet-arrow",
4105
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
4014
4106
  tags: {
4015
4107
  tone: "classic",
4016
- energy: "vibrant",
4017
- motion: "standard",
4018
- era: "organic"
4108
+ energy: "calm",
4109
+ motion: "subtle",
4110
+ era: "editorial"
4019
4111
  },
4020
- buttonSystem: {
4112
+ parameterSchema: quietArrowParametersSchema,
4113
+ defaultParameters: { secondaryTreatment: "outlined" },
4114
+ controls: [{
4115
+ kind: "choice",
4116
+ parameter: "secondaryTreatment",
4117
+ label: "Secondary button treatment",
4118
+ options: [{
4119
+ value: "outlined",
4120
+ label: "Outlined"
4121
+ }, {
4122
+ value: "solid-accent",
4123
+ label: "Solid accent"
4124
+ }]
4125
+ }],
4126
+ defineSystem: (parameters) => ({
4021
4127
  global: {
4022
4128
  cornerStyle: "rounded",
4023
- shadow: "low",
4024
- textTransform: "none",
4129
+ textTransform: "uppercase",
4025
4130
  fontWeight: 500,
4026
4131
  borderWidth: 1,
4132
+ typography: "body",
4133
+ fontSize: "text-sm",
4134
+ letterSpacing: "loose",
4027
4135
  hoverTransform: "none",
4028
4136
  hoverColor: "none"
4029
4137
  },
4030
4138
  sizes: {
4031
4139
  sm: {
4032
- padding: "0.75rem 2rem",
4140
+ padding: "0.625rem 1.25rem",
4141
+ fontSize: "text-xs"
4142
+ },
4143
+ md: {
4144
+ padding: "0.8125rem 1.75rem",
4033
4145
  fontSize: "text-sm"
4034
4146
  },
4035
- md: { padding: "1rem 2.5rem" },
4036
4147
  lg: {
4037
- padding: "1.25rem 3rem",
4038
- fontSize: "text-lg"
4148
+ padding: "0.9375rem 2.125rem",
4149
+ fontSize: "text-sm"
4039
4150
  },
4040
4151
  xl: {
4041
- padding: "1.625rem 3.75rem",
4042
- fontSize: "text-xl"
4152
+ padding: "1.0625rem 2.5rem",
4153
+ fontSize: "text-base"
4043
4154
  }
4044
4155
  },
4045
- variants: [
4046
- {
4047
- id: "primary",
4048
- name: "Primary",
4049
- enabled: true,
4050
- priority: 1,
4051
- background: {
4052
- type: "gradient",
4053
- stops: ["primary", "accent"],
4054
- direction: "to-r",
4055
- foregroundToken: "primaryForeground"
4056
- },
4057
- borderRadius: "rounded-lg",
4058
- shadow: {
4059
- elevation: "low",
4060
- softness: "soft",
4061
- position: "bottom"
4156
+ roles: {
4157
+ primary: {
4158
+ kind: "complete",
4159
+ appearance: {
4160
+ background: {
4161
+ type: "solid",
4162
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
4163
+ },
4164
+ borderRadius: "rounded-xl",
4165
+ affordance: { iconId: "ArrowRight" },
4166
+ effects: { hover: [{
4167
+ effectId: "darken-background",
4168
+ options: { amount: 100 }
4169
+ }] }
4062
4170
  }
4063
4171
  },
4064
- {
4065
- id: "secondary",
4066
- name: "Secondary",
4067
- enabled: true,
4068
- priority: 2,
4069
- background: {
4070
- type: "gradient",
4071
- stops: ["secondary", "accent"],
4072
- direction: "to-br",
4073
- foregroundToken: "primaryForeground"
4074
- },
4075
- borderRadius: "rounded-lg",
4076
- shadow: {
4077
- elevation: "low",
4078
- softness: "soft",
4079
- position: "bottom"
4172
+ secondary: {
4173
+ kind: "complete",
4174
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
4175
+ background: {
4176
+ type: "solid",
4177
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4178
+ },
4179
+ borderRadius: "rounded-xl",
4180
+ affordance: { iconId: "ArrowRight" },
4181
+ effects: { hover: [{
4182
+ effectId: "darken-background",
4183
+ options: { amount: 100 }
4184
+ }] }
4185
+ } : {
4186
+ background: {
4187
+ type: "surface",
4188
+ role: "link"
4189
+ },
4190
+ borderRadius: "rounded-xl",
4191
+ border: { widthClass: "border" },
4192
+ affordance: { iconId: "ArrowRight" },
4193
+ effects: { hover: [{
4194
+ effectId: "background-on-hover",
4195
+ options: { colorToken: "surfaceAlt" }
4196
+ }] }
4080
4197
  }
4081
4198
  },
4082
- {
4083
- id: "outline",
4084
- name: "Outline",
4085
- enabled: true,
4086
- priority: 3,
4087
- background: {
4088
- type: "surface",
4089
- role: "link"
4090
- },
4091
- borderRadius: "rounded-lg",
4092
- border: { widthClass: "border" },
4093
- effects: { hover: [{
4094
- effectId: "background-on-hover",
4095
- options: { colorToken: "surface" }
4096
- }] }
4199
+ outline: {
4200
+ kind: "complete",
4201
+ appearance: {
4202
+ background: {
4203
+ type: "surface",
4204
+ role: "link"
4205
+ },
4206
+ borderRadius: "rounded-xl",
4207
+ border: { widthClass: "border" }
4208
+ }
4097
4209
  },
4098
- {
4099
- id: "ghost",
4100
- name: "Ghost",
4101
- enabled: true,
4102
- priority: 3,
4103
- background: {
4104
- type: "surface",
4105
- role: "link"
4106
- },
4107
- borderRadius: "rounded-lg",
4108
- effects: { hover: [{
4109
- effectId: "background-on-hover",
4110
- options: { colorToken: "surface" }
4111
- }] }
4210
+ ghost: {
4211
+ kind: "complete",
4212
+ appearance: {
4213
+ background: {
4214
+ type: "surface",
4215
+ role: "link"
4216
+ },
4217
+ borderRadius: "rounded-xl"
4218
+ }
4219
+ },
4220
+ accent: {
4221
+ kind: "derive",
4222
+ from: "primary",
4223
+ overrides: { background: {
4224
+ type: "solid",
4225
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4226
+ } }
4112
4227
  }
4113
- ]
4114
- }
4228
+ }
4229
+ })
4115
4230
  });
4116
4231
  //#endregion
4117
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
4118
- /**
4119
- * Confident Chip — moderate-radius solid buttons that read as competent and
4120
- * direct. Default for Clear Professional; works for any modern brand voice.
4121
- */
4122
- const confidentChip = defineButtonPersonality({
4123
- id: "confident-chip",
4124
- name: "Confident Chip",
4125
- description: "Mid-radius solid buttons with a crisp hover.",
4232
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
4233
+ const emptyParametersSchema = z$1.object({}).strict();
4234
+ function defineStaticButtonStyleRecipe(input) {
4235
+ const system = normalizeSystem(input.system);
4236
+ return defineButtonStyleRecipe({
4237
+ id: input.id,
4238
+ accessibilityLabel: input.accessibilityLabel,
4239
+ tags: input.tags,
4240
+ parameterSchema: emptyParametersSchema,
4241
+ defaultParameters: {},
4242
+ controls: [],
4243
+ defineSystem: () => system
4244
+ });
4245
+ }
4246
+ function normalizeSystem(input) {
4247
+ return {
4248
+ global: buttonGlobalSettingsSchema.parse(input.global),
4249
+ ...input.sizes ? { sizes: input.sizes } : {},
4250
+ roles: {
4251
+ primary: normalizeCompleteRole(input.roles.primary),
4252
+ secondary: normalizeCompleteRole(input.roles.secondary),
4253
+ outline: normalizeSupportingRole(input.roles.outline),
4254
+ ghost: normalizeSupportingRole(input.roles.ghost),
4255
+ accent: normalizeSupportingRole(input.roles.accent)
4256
+ }
4257
+ };
4258
+ }
4259
+ function normalizeCompleteRole(role) {
4260
+ return {
4261
+ kind: "complete",
4262
+ appearance: normalizeAppearance(role.appearance)
4263
+ };
4264
+ }
4265
+ function normalizeSupportingRole(role) {
4266
+ if (role.kind === "complete") return normalizeCompleteRole(role);
4267
+ return {
4268
+ kind: "derive",
4269
+ from: role.from,
4270
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
4271
+ };
4272
+ }
4273
+ function normalizeAppearance(appearance) {
4274
+ const { background, hoverBackgroundToken, ...rest } = appearance;
4275
+ return {
4276
+ ...rest,
4277
+ background: buttonColourTreatmentSchema.parse(background),
4278
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4279
+ };
4280
+ }
4281
+ function normalizeAppearanceOverrides(overrides) {
4282
+ const { background, hoverBackgroundToken, ...rest } = overrides;
4283
+ return {
4284
+ ...rest,
4285
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
4286
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4287
+ };
4288
+ }
4289
+ //#endregion
4290
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
4291
+ const softPillRecipe = defineStaticButtonStyleRecipe({
4292
+ id: "soft-pill",
4293
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
4126
4294
  tags: {
4127
4295
  tone: "classic",
4128
4296
  energy: "calm",
4129
- motion: "standard",
4130
- era: "modern"
4297
+ motion: "subtle",
4298
+ era: "organic"
4131
4299
  },
4132
- buttonSystem: {
4300
+ system: {
4133
4301
  global: {
4134
- cornerStyle: "rounded",
4135
- shadow: "medium",
4302
+ cornerStyle: "pill",
4303
+ shadow: "low",
4136
4304
  textTransform: "none",
4137
- fontWeight: 600,
4138
- borderWidth: 1,
4139
- hoverTransform: "none",
4305
+ fontWeight: 500,
4306
+ borderWidth: 2,
4307
+ hoverTransform: "lift",
4140
4308
  hoverColor: "none"
4141
4309
  },
4142
- variants: [
4143
- {
4144
- id: "primary",
4145
- name: "Primary",
4146
- enabled: true,
4147
- priority: 1,
4148
- background: {
4149
- type: "solid",
4150
- colorToken: "primary"
4151
- },
4152
- borderRadius: "rounded-md",
4153
- shadow: {
4154
- elevation: "medium",
4155
- softness: "soft",
4156
- position: "bottom"
4157
- },
4158
- effects: {
4159
- hover: [{
4160
- effectId: "darken-background",
4161
- options: { amount: 100 }
4162
- }],
4163
- active: [{
4164
- effectId: "scale-down",
4165
- options: { scale: "0.97" }
4166
- }]
4310
+ roles: {
4311
+ primary: {
4312
+ kind: "complete",
4313
+ appearance: {
4314
+ background: {
4315
+ type: "solid",
4316
+ colorToken: "primary"
4317
+ },
4318
+ borderRadius: "rounded-full",
4319
+ shadow: {
4320
+ elevation: "low",
4321
+ softness: "soft",
4322
+ position: "bottom"
4323
+ },
4324
+ effects: {
4325
+ hover: [{
4326
+ effectId: "lift",
4327
+ options: { translateY: "-1px" }
4328
+ }],
4329
+ active: [{
4330
+ effectId: "scale-down",
4331
+ options: { scale: "0.98" }
4332
+ }]
4333
+ }
4167
4334
  }
4168
4335
  },
4169
- {
4170
- id: "secondary",
4171
- name: "Secondary",
4172
- enabled: true,
4173
- priority: 2,
4174
- background: {
4175
- type: "solid",
4176
- colorToken: "surface"
4177
- },
4178
- borderRadius: "rounded-md",
4179
- border: { widthClass: "border" },
4180
- effects: { hover: [{
4181
- effectId: "background-on-hover",
4182
- options: { colorToken: "background" }
4183
- }] }
4336
+ secondary: {
4337
+ kind: "complete",
4338
+ appearance: {
4339
+ background: {
4340
+ type: "surface",
4341
+ role: "link"
4342
+ },
4343
+ borderRadius: "rounded-full",
4344
+ border: { widthClass: "border-2" },
4345
+ effects: { hover: [{
4346
+ effectId: "background-on-hover",
4347
+ options: { colorToken: "surface" }
4348
+ }] }
4349
+ }
4184
4350
  },
4185
- {
4186
- id: "outline",
4187
- name: "Outline",
4188
- enabled: true,
4189
- priority: 3,
4190
- background: {
4191
- type: "surface",
4192
- role: "link"
4193
- },
4194
- borderRadius: "rounded-md",
4195
- border: { widthClass: "border" },
4196
- effects: { hover: [{
4197
- effectId: "background-on-hover",
4198
- options: { colorToken: "surface" }
4199
- }] }
4351
+ outline: {
4352
+ kind: "complete",
4353
+ appearance: {
4354
+ background: {
4355
+ type: "surface",
4356
+ role: "link"
4357
+ },
4358
+ borderRadius: "rounded-full",
4359
+ border: { widthClass: "border" },
4360
+ effects: { hover: [{
4361
+ effectId: "background-on-hover",
4362
+ options: { colorToken: "surface" }
4363
+ }] }
4364
+ }
4200
4365
  },
4201
- {
4202
- id: "ghost",
4203
- name: "Ghost",
4204
- enabled: true,
4205
- priority: 3,
4206
- background: {
4207
- type: "surface",
4208
- role: "link"
4209
- },
4210
- borderRadius: "rounded-md",
4211
- effects: { hover: [{
4212
- effectId: "background-on-hover",
4213
- options: { colorToken: "surface" }
4214
- }] }
4366
+ ghost: {
4367
+ kind: "complete",
4368
+ appearance: {
4369
+ background: {
4370
+ type: "surface",
4371
+ role: "link"
4372
+ },
4373
+ borderRadius: "rounded-full",
4374
+ effects: { hover: [{
4375
+ effectId: "background-on-hover",
4376
+ options: { colorToken: "surface" }
4377
+ }] }
4378
+ }
4379
+ },
4380
+ accent: {
4381
+ kind: "derive",
4382
+ from: "primary",
4383
+ overrides: { background: {
4384
+ type: "solid",
4385
+ colorToken: "accent"
4386
+ } }
4215
4387
  }
4216
- ]
4388
+ }
4217
4389
  }
4218
4390
  });
4219
- //#endregion
4220
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
4221
- /**
4222
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
4223
- * Built for grounded editorial wellness styles such as Soft Earth.
4224
- */
4225
- const earthPill = defineButtonPersonality({
4391
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
4226
4392
  id: "earth-pill",
4227
- name: "Earth Pill",
4228
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
4393
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
4229
4394
  tags: {
4230
4395
  tone: "classic",
4231
4396
  energy: "calm",
4232
4397
  motion: "subtle",
4233
4398
  era: "organic"
4234
4399
  },
4235
- buttonSystem: {
4400
+ system: {
4236
4401
  global: {
4237
4402
  cornerStyle: "pill",
4238
4403
  shadow: "low",
@@ -4259,940 +4424,808 @@ const earthPill = defineButtonPersonality({
4259
4424
  fontSize: "text-xl"
4260
4425
  }
4261
4426
  },
4262
- variants: [
4263
- {
4264
- id: "primary",
4265
- name: "Primary",
4266
- enabled: true,
4267
- priority: 1,
4268
- background: {
4269
- type: "solid",
4270
- colorToken: "primary"
4271
- },
4272
- borderRadius: "rounded-full",
4273
- shadow: {
4274
- elevation: "low",
4275
- softness: "soft",
4276
- position: "bottom"
4277
- },
4278
- effects: {
4279
- hover: [{
4280
- effectId: "lift",
4281
- options: { translateY: "-1px" }
4282
- }, {
4283
- effectId: "background-on-hover",
4284
- options: { colorToken: "accent" }
4285
- }],
4286
- active: [{
4287
- effectId: "scale-down",
4288
- options: { scale: "0.98" }
4289
- }]
4427
+ roles: {
4428
+ primary: {
4429
+ kind: "complete",
4430
+ appearance: {
4431
+ background: {
4432
+ type: "solid",
4433
+ colorToken: "primary"
4434
+ },
4435
+ borderRadius: "rounded-full",
4436
+ shadow: {
4437
+ elevation: "low",
4438
+ softness: "soft",
4439
+ position: "bottom"
4440
+ },
4441
+ effects: {
4442
+ hover: [{
4443
+ effectId: "lift",
4444
+ options: { translateY: "-1px" }
4445
+ }, {
4446
+ effectId: "background-on-hover",
4447
+ options: { colorToken: "accent" }
4448
+ }],
4449
+ active: [{
4450
+ effectId: "scale-down",
4451
+ options: { scale: "0.98" }
4452
+ }]
4453
+ }
4290
4454
  }
4291
4455
  },
4292
- {
4293
- id: "secondary",
4294
- name: "Secondary",
4295
- enabled: true,
4296
- priority: 2,
4297
- background: {
4298
- type: "surface",
4299
- role: "link"
4300
- },
4301
- borderRadius: "rounded-full",
4302
- border: { widthClass: "border" },
4303
- effects: { hover: [{
4304
- effectId: "background-on-hover",
4305
- options: { colorToken: "muted" }
4306
- }] }
4456
+ secondary: {
4457
+ kind: "complete",
4458
+ appearance: {
4459
+ background: {
4460
+ type: "surface",
4461
+ role: "link"
4462
+ },
4463
+ borderRadius: "rounded-full",
4464
+ border: { widthClass: "border" },
4465
+ effects: { hover: [{
4466
+ effectId: "background-on-hover",
4467
+ options: { colorToken: "muted" }
4468
+ }] }
4469
+ }
4307
4470
  },
4308
- {
4309
- id: "outline",
4310
- name: "Outline",
4311
- enabled: true,
4312
- priority: 3,
4313
- background: {
4314
- type: "surface",
4315
- role: "link"
4316
- },
4317
- borderRadius: "rounded-full",
4318
- border: { widthClass: "border" },
4319
- effects: { hover: [{
4320
- effectId: "background-on-hover",
4321
- options: { colorToken: "surfaceAlt" }
4322
- }] }
4471
+ outline: {
4472
+ kind: "complete",
4473
+ appearance: {
4474
+ background: {
4475
+ type: "surface",
4476
+ role: "link"
4477
+ },
4478
+ borderRadius: "rounded-full",
4479
+ border: { widthClass: "border" },
4480
+ effects: { hover: [{
4481
+ effectId: "background-on-hover",
4482
+ options: { colorToken: "surfaceAlt" }
4483
+ }] }
4484
+ }
4323
4485
  },
4324
- {
4325
- id: "ghost",
4326
- name: "Ghost",
4327
- enabled: true,
4328
- priority: 3,
4329
- background: {
4330
- type: "surface",
4331
- role: "link"
4332
- },
4333
- borderRadius: "rounded-full",
4334
- shadow: {
4335
- elevation: "none",
4336
- softness: null,
4337
- position: "bottom"
4338
- },
4339
- sizes: {
4340
- sm: {
4341
- padding: "0.25rem 0",
4342
- fontSize: "text-sm"
4486
+ ghost: {
4487
+ kind: "complete",
4488
+ appearance: {
4489
+ background: {
4490
+ type: "surface",
4491
+ role: "link"
4343
4492
  },
4344
- md: { padding: "0.375rem 0" },
4345
- lg: {
4346
- padding: "0.5rem 0",
4347
- fontSize: "text-lg"
4493
+ borderRadius: "rounded-full",
4494
+ shadow: {
4495
+ elevation: "none",
4496
+ softness: null,
4497
+ position: "bottom"
4348
4498
  },
4349
- xl: {
4350
- padding: "0.625rem 0",
4351
- fontSize: "text-xl"
4499
+ sizes: {
4500
+ sm: {
4501
+ padding: "0.25rem 0",
4502
+ fontSize: "text-sm"
4503
+ },
4504
+ md: { padding: "0.375rem 0" },
4505
+ lg: {
4506
+ padding: "0.5rem 0",
4507
+ fontSize: "text-lg"
4508
+ },
4509
+ xl: {
4510
+ padding: "0.625rem 0",
4511
+ fontSize: "text-xl"
4512
+ }
4352
4513
  }
4353
4514
  }
4515
+ },
4516
+ accent: {
4517
+ kind: "derive",
4518
+ from: "primary",
4519
+ overrides: { background: {
4520
+ type: "solid",
4521
+ colorToken: "accent"
4522
+ } }
4354
4523
  }
4355
- ]
4524
+ }
4356
4525
  }
4357
4526
  });
4358
- //#endregion
4359
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
4360
- /**
4361
- * Editorial Link — all variants are link-style with a growing underline.
4362
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
4363
- */
4364
- const editorialLink = defineButtonPersonality({
4365
- id: "editorial-link",
4366
- name: "Editorial Link",
4367
- description: "Link-style with a growing underline. Refined, typographic.",
4527
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
4528
+ id: "confident-chip",
4529
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
4368
4530
  tags: {
4369
- tone: "minimal",
4531
+ tone: "classic",
4370
4532
  energy: "calm",
4371
- motion: "subtle",
4372
- era: "editorial"
4533
+ motion: "standard",
4534
+ era: "modern"
4373
4535
  },
4374
- buttonSystem: {
4536
+ system: {
4375
4537
  global: {
4376
- cornerStyle: "square",
4538
+ cornerStyle: "rounded",
4539
+ shadow: "medium",
4377
4540
  textTransform: "none",
4378
- fontWeight: 500,
4541
+ fontWeight: 600,
4379
4542
  borderWidth: 1,
4380
4543
  hoverTransform: "none",
4381
4544
  hoverColor: "none"
4382
4545
  },
4383
- variants: [
4384
- {
4385
- id: "primary",
4386
- name: "Primary",
4387
- enabled: true,
4388
- priority: 1,
4389
- background: {
4390
- type: "surface",
4391
- role: "link"
4392
- },
4393
- borderRadius: "rounded-none",
4394
- sizes: {
4395
- sm: { padding: "0.25rem 0" },
4396
- md: { padding: "0.5rem 0" },
4397
- lg: { padding: "0.625rem 0" },
4398
- xl: { padding: "0.75rem 0" }
4399
- },
4400
- effects: { base: [{
4401
- effectId: "border-bottom-grow",
4402
- options: {
4403
- height: 2,
4404
- colorToken: "text",
4405
- origin: "left"
4546
+ roles: {
4547
+ primary: {
4548
+ kind: "complete",
4549
+ appearance: {
4550
+ background: {
4551
+ type: "solid",
4552
+ colorToken: "primary"
4553
+ },
4554
+ borderRadius: "rounded-md",
4555
+ shadow: {
4556
+ elevation: "medium",
4557
+ softness: "soft",
4558
+ position: "bottom"
4559
+ },
4560
+ effects: {
4561
+ hover: [{
4562
+ effectId: "darken-background",
4563
+ options: { amount: 100 }
4564
+ }],
4565
+ active: [{
4566
+ effectId: "scale-down",
4567
+ options: { scale: "0.97" }
4568
+ }]
4406
4569
  }
4407
- }] }
4570
+ }
4408
4571
  },
4409
- {
4410
- id: "secondary",
4411
- name: "Secondary",
4412
- enabled: true,
4413
- priority: 2,
4414
- background: {
4415
- type: "surface",
4416
- role: "link"
4417
- },
4418
- borderRadius: "rounded-none",
4419
- sizes: {
4420
- sm: { padding: "0.25rem 0" },
4421
- md: { padding: "0.5rem 0" },
4422
- lg: { padding: "0.625rem 0" },
4423
- xl: { padding: "0.75rem 0" }
4424
- },
4425
- effects: { base: [{
4426
- effectId: "border-bottom-grow",
4427
- options: {
4428
- height: 1,
4429
- colorToken: "mutedText",
4430
- origin: "left"
4431
- }
4432
- }] }
4572
+ secondary: {
4573
+ kind: "complete",
4574
+ appearance: {
4575
+ background: {
4576
+ type: "solid",
4577
+ colorToken: "surface"
4578
+ },
4579
+ borderRadius: "rounded-md",
4580
+ border: { widthClass: "border" },
4581
+ effects: { hover: [{
4582
+ effectId: "background-on-hover",
4583
+ options: { colorToken: "background" }
4584
+ }] }
4585
+ }
4433
4586
  },
4434
- {
4435
- id: "outline",
4436
- name: "Outline",
4437
- enabled: true,
4438
- priority: 3,
4439
- background: {
4440
- type: "surface",
4441
- role: "link"
4442
- },
4443
- borderRadius: "rounded-none",
4444
- sizes: {
4445
- sm: { padding: "0.25rem 0" },
4446
- md: { padding: "0.5rem 0" },
4447
- lg: { padding: "0.625rem 0" },
4448
- xl: { padding: "0.75rem 0" }
4449
- },
4450
- effects: { base: [{
4451
- effectId: "border-bottom-grow",
4452
- options: {
4453
- height: 1,
4454
- colorToken: "accent",
4455
- origin: "left"
4456
- }
4457
- }] }
4587
+ outline: {
4588
+ kind: "complete",
4589
+ appearance: {
4590
+ background: {
4591
+ type: "surface",
4592
+ role: "link"
4593
+ },
4594
+ borderRadius: "rounded-md",
4595
+ border: { widthClass: "border" },
4596
+ effects: { hover: [{
4597
+ effectId: "background-on-hover",
4598
+ options: { colorToken: "surface" }
4599
+ }] }
4600
+ }
4458
4601
  },
4459
- {
4460
- id: "ghost",
4461
- name: "Ghost",
4462
- enabled: true,
4463
- priority: 3,
4464
- background: {
4465
- type: "surface",
4466
- role: "link"
4467
- },
4468
- borderRadius: "rounded-none",
4469
- sizes: {
4470
- sm: { padding: "0.25rem 0" },
4471
- md: { padding: "0.5rem 0" },
4472
- lg: { padding: "0.625rem 0" },
4473
- xl: { padding: "0.75rem 0" }
4602
+ ghost: {
4603
+ kind: "complete",
4604
+ appearance: {
4605
+ background: {
4606
+ type: "surface",
4607
+ role: "link"
4608
+ },
4609
+ borderRadius: "rounded-md",
4610
+ effects: { hover: [{
4611
+ effectId: "background-on-hover",
4612
+ options: { colorToken: "surface" }
4613
+ }] }
4474
4614
  }
4615
+ },
4616
+ accent: {
4617
+ kind: "derive",
4618
+ from: "primary",
4619
+ overrides: { background: {
4620
+ type: "solid",
4621
+ colorToken: "accent"
4622
+ } }
4475
4623
  }
4476
- ]
4624
+ }
4477
4625
  }
4478
4626
  });
4479
- //#endregion
4480
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
4481
- /**
4482
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
4483
- * amber accent climax, all completely flat (no drop shadow) with a modest
4484
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
4485
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
4486
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
4487
- * the page's one conversion climax.
4488
- */
4489
- const flatInk = defineButtonPersonality({
4490
- id: "flat-ink",
4491
- name: "Flat Ink",
4492
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
4627
+ const editorialSizes = {
4628
+ sm: { padding: "0.25rem 0" },
4629
+ md: { padding: "0.5rem 0" },
4630
+ lg: { padding: "0.625rem 0" },
4631
+ xl: { padding: "0.75rem 0" }
4632
+ };
4633
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
4634
+ id: "editorial-link",
4635
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
4493
4636
  tags: {
4494
- tone: "classic",
4637
+ tone: "minimal",
4495
4638
  energy: "calm",
4496
4639
  motion: "subtle",
4497
4640
  era: "editorial"
4498
4641
  },
4499
- buttonSystem: {
4642
+ system: {
4500
4643
  global: {
4501
- cornerStyle: "rounded",
4644
+ cornerStyle: "square",
4502
4645
  textTransform: "none",
4503
- fontWeight: 600,
4504
- borderWidth: 1,
4505
- typography: "body",
4506
- letterSpacing: "tight",
4507
- paddingPreset: "default",
4508
- hoverTransform: "lift",
4509
- hoverColor: "none"
4510
- },
4511
- sizes: {
4512
- sm: {
4513
- padding: "0.625rem 1.125rem",
4514
- fontSize: "text-sm"
4515
- },
4516
- md: { padding: "0.8125rem 1.375rem" },
4517
- lg: {
4518
- padding: "0.9375rem 1.625rem",
4519
- fontSize: "text-lg"
4520
- },
4521
- xl: {
4522
- padding: "1.0625rem 2rem",
4523
- fontSize: "text-xl"
4524
- }
4525
- },
4526
- variants: [
4527
- {
4528
- id: "primary",
4529
- name: "Primary",
4530
- enabled: true,
4531
- priority: 1,
4532
- background: {
4533
- type: "solid",
4534
- colorToken: "primary"
4535
- },
4536
- borderRadius: "rounded-lg",
4537
- affordance: { iconId: "ArrowRight" },
4538
- effects: { hover: [{
4539
- effectId: "lift",
4540
- options: { translateY: "-2px" }
4541
- }, {
4542
- effectId: "background-on-hover",
4543
- options: { colorToken: "secondary" }
4544
- }] }
4545
- },
4546
- {
4547
- id: "secondary",
4548
- name: "Secondary",
4549
- enabled: true,
4550
- priority: 2,
4551
- background: {
4552
- type: "surface",
4553
- role: "link"
4554
- },
4555
- borderRadius: "rounded-lg",
4556
- border: { widthClass: "border" },
4557
- effects: { hover: [{
4558
- effectId: "lift",
4559
- options: { translateY: "-2px" }
4560
- }, {
4561
- effectId: "background-on-hover",
4562
- options: { colorToken: "surfaceAlt" }
4563
- }] }
4564
- },
4565
- {
4566
- id: "accent",
4567
- name: "Accent",
4568
- enabled: true,
4569
- priority: 3,
4570
- background: {
4571
- type: "solid",
4572
- colorToken: "accent"
4573
- },
4574
- borderRadius: "rounded-lg",
4575
- affordance: { iconId: "ArrowRight" },
4576
- effects: { hover: [{
4577
- effectId: "lift",
4578
- options: { translateY: "-2px" }
4579
- }] }
4580
- }
4581
- ]
4582
- }
4583
- });
4584
- //#endregion
4585
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
4586
- /**
4587
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
4588
- * feel. Reads as bold and handmade; suits expressive craft brands.
4589
- */
4590
- const inkStamp = defineButtonPersonality({
4591
- id: "ink-stamp",
4592
- name: "Ink Stamp",
4593
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
4594
- tags: {
4595
- tone: "bold",
4596
- energy: "vibrant",
4597
- motion: "standard",
4598
- era: "organic"
4599
- },
4600
- buttonSystem: {
4601
- global: {
4602
- cornerStyle: "rounded",
4603
- textTransform: "uppercase",
4604
- fontWeight: 600,
4646
+ fontWeight: 500,
4605
4647
  borderWidth: 1,
4606
4648
  hoverTransform: "none",
4607
- hoverColor: "none",
4608
- letterSpacing: "loose"
4609
- },
4610
- sizes: {
4611
- sm: {
4612
- padding: "0.5rem 1.25rem",
4613
- fontSize: "text-xs"
4614
- },
4615
- md: {
4616
- padding: "0.75rem 1.75rem",
4617
- fontSize: "text-sm"
4618
- },
4619
- lg: {
4620
- padding: "0.875rem 2.25rem",
4621
- fontSize: "text-base"
4622
- },
4623
- xl: {
4624
- padding: "1.125rem 2.75rem",
4625
- fontSize: "text-lg"
4626
- }
4649
+ hoverColor: "none"
4627
4650
  },
4628
- variants: [
4629
- {
4630
- id: "primary",
4631
- name: "Primary",
4632
- enabled: true,
4633
- priority: 1,
4634
- background: {
4635
- type: "solid",
4636
- colorToken: "primary"
4637
- },
4638
- borderRadius: "rounded-md",
4639
- effects: {
4640
- hover: [{
4641
- effectId: "drop-shadow",
4642
- options: { intensity: "medium" }
4643
- }, {
4644
- effectId: "scale-up",
4645
- options: { scale: "1.02" }
4646
- }],
4647
- active: [{
4648
- effectId: "scale-down",
4649
- options: { scale: "0.98" }
4650
- }]
4651
+ roles: {
4652
+ primary: {
4653
+ kind: "complete",
4654
+ appearance: {
4655
+ background: {
4656
+ type: "surface",
4657
+ role: "link"
4658
+ },
4659
+ borderRadius: "rounded-none",
4660
+ sizes: editorialSizes,
4661
+ effects: { base: [{
4662
+ effectId: "border-bottom-grow",
4663
+ options: {
4664
+ height: 2,
4665
+ colorToken: "text",
4666
+ origin: "left"
4667
+ }
4668
+ }] }
4651
4669
  }
4652
4670
  },
4653
- {
4654
- id: "secondary",
4655
- name: "Secondary",
4656
- enabled: true,
4657
- priority: 2,
4658
- background: {
4659
- type: "surface",
4660
- role: "link"
4661
- },
4662
- borderRadius: "rounded-md",
4663
- border: { widthClass: "border-2" },
4664
- effects: { hover: [{
4665
- effectId: "background-on-hover",
4666
- options: { colorToken: "surface" }
4667
- }] }
4668
- },
4669
- {
4670
- id: "outline",
4671
- name: "Outline",
4672
- enabled: true,
4673
- priority: 3,
4674
- background: {
4675
- type: "surface",
4676
- role: "link"
4677
- },
4678
- borderRadius: "rounded-md",
4679
- border: { widthClass: "border-2" },
4680
- effects: { hover: [{
4681
- effectId: "background-on-hover",
4682
- options: { colorToken: "surface" }
4683
- }] }
4684
- },
4685
- {
4686
- id: "ghost",
4687
- name: "Ghost",
4688
- enabled: true,
4689
- priority: 3,
4690
- background: {
4691
- type: "surface",
4692
- role: "link"
4693
- },
4694
- borderRadius: "rounded-none",
4695
- sizes: {
4696
- sm: {
4697
- padding: "0.375rem 0",
4698
- fontSize: "text-xs"
4671
+ secondary: {
4672
+ kind: "complete",
4673
+ appearance: {
4674
+ background: {
4675
+ type: "surface",
4676
+ role: "link"
4699
4677
  },
4700
- md: {
4701
- padding: "0.5rem 0",
4702
- fontSize: "text-sm"
4678
+ borderRadius: "rounded-none",
4679
+ sizes: editorialSizes,
4680
+ effects: { base: [{
4681
+ effectId: "border-bottom-grow",
4682
+ options: {
4683
+ height: 1,
4684
+ colorToken: "mutedText",
4685
+ origin: "left"
4686
+ }
4687
+ }] }
4688
+ }
4689
+ },
4690
+ outline: {
4691
+ kind: "complete",
4692
+ appearance: {
4693
+ background: {
4694
+ type: "surface",
4695
+ role: "link"
4703
4696
  },
4704
- lg: {
4705
- padding: "0.625rem 0",
4706
- fontSize: "text-base"
4697
+ borderRadius: "rounded-none",
4698
+ sizes: editorialSizes,
4699
+ effects: { base: [{
4700
+ effectId: "border-bottom-grow",
4701
+ options: {
4702
+ height: 1,
4703
+ colorToken: "accent",
4704
+ origin: "left"
4705
+ }
4706
+ }] }
4707
+ }
4708
+ },
4709
+ ghost: {
4710
+ kind: "complete",
4711
+ appearance: {
4712
+ background: {
4713
+ type: "surface",
4714
+ role: "link"
4707
4715
  },
4708
- xl: {
4709
- padding: "0.75rem 0",
4710
- fontSize: "text-lg"
4711
- }
4712
- },
4713
- effects: { base: [{
4716
+ borderRadius: "rounded-none",
4717
+ sizes: editorialSizes
4718
+ }
4719
+ },
4720
+ accent: {
4721
+ kind: "derive",
4722
+ from: "primary",
4723
+ overrides: { effects: { base: [{
4714
4724
  effectId: "border-bottom-grow",
4715
4725
  options: {
4716
- height: 1,
4726
+ height: 2,
4717
4727
  colorToken: "accent",
4718
4728
  origin: "left"
4719
4729
  }
4720
- }] }
4730
+ }] } }
4721
4731
  }
4722
- ]
4732
+ }
4723
4733
  }
4724
4734
  });
4725
- //#endregion
4726
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
4727
- /**
4728
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
4729
- * that collapses as the button presses into it on hover. Authored for the
4730
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
4731
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
4732
- *
4733
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
4734
- * extension; the press is the shared `press-down` effect, which matches its
4735
- * translate to each variant's own shadow offset.
4736
- */
4737
- const joyStamp = defineButtonPersonality({
4738
- id: "joy-stamp",
4739
- name: "Joy Stamp",
4740
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
4735
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
4736
+ id: "pebble",
4737
+ accessibilityLabel: "Generously padded pill buttons",
4741
4738
  tags: {
4742
- tone: "bold",
4743
- energy: "vibrant",
4744
- motion: "expressive",
4739
+ tone: "classic",
4740
+ energy: "calm",
4741
+ motion: "standard",
4745
4742
  era: "organic"
4746
4743
  },
4747
- buttonSystem: {
4744
+ system: {
4748
4745
  global: {
4749
4746
  cornerStyle: "pill",
4750
- shadow: "high",
4751
4747
  textTransform: "none",
4752
- typography: "heading",
4753
- fontWeight: 700,
4754
- fontSize: "text-lg",
4748
+ fontWeight: 500,
4755
4749
  borderWidth: 2,
4756
4750
  hoverTransform: "none",
4757
4751
  hoverColor: "none"
4758
4752
  },
4759
4753
  sizes: {
4760
4754
  sm: {
4761
- padding: "0.625rem 1.25rem",
4762
- fontSize: "text-base"
4763
- },
4764
- md: {
4765
- padding: "0.875rem 1.75rem",
4766
- fontSize: "text-lg"
4755
+ padding: "0.625rem 1.75rem",
4756
+ fontSize: "text-sm"
4767
4757
  },
4758
+ md: { padding: "0.875rem 2.25rem" },
4768
4759
  lg: {
4769
- padding: "1.125rem 2.25rem",
4770
- fontSize: "text-xl"
4760
+ padding: "1.125rem 2.75rem",
4761
+ fontSize: "text-lg"
4771
4762
  },
4772
4763
  xl: {
4773
- padding: "1.25rem 2.75rem",
4774
- fontSize: "text-2xl"
4764
+ padding: "1.5rem 3.5rem",
4765
+ fontSize: "text-xl"
4775
4766
  }
4776
4767
  },
4777
- variants: [{
4778
- id: "primary",
4779
- name: "Primary",
4780
- enabled: true,
4781
- priority: 1,
4782
- background: {
4783
- type: "solid",
4784
- colorToken: "primary"
4768
+ roles: {
4769
+ primary: {
4770
+ kind: "complete",
4771
+ appearance: {
4772
+ background: {
4773
+ type: "solid",
4774
+ colorToken: "primary"
4775
+ },
4776
+ borderRadius: "rounded-full",
4777
+ effects: { hover: [{
4778
+ effectId: "darken-background",
4779
+ options: { amount: 100 }
4780
+ }] }
4781
+ }
4785
4782
  },
4786
- borderRadius: "rounded-full",
4787
- shadow: {
4788
- elevation: "high",
4789
- softness: "hard",
4790
- position: "bottom-right",
4791
- colorToken: "text"
4783
+ secondary: {
4784
+ kind: "complete",
4785
+ appearance: {
4786
+ background: {
4787
+ type: "surface",
4788
+ role: "link"
4789
+ },
4790
+ borderRadius: "rounded-full",
4791
+ border: { widthClass: "border-2" },
4792
+ effects: { hover: [{
4793
+ effectId: "background-on-hover",
4794
+ options: { colorToken: "accent" }
4795
+ }] }
4796
+ }
4792
4797
  },
4793
- effects: { hover: [{ effectId: "press-down" }] }
4794
- }, {
4795
- id: "secondary",
4796
- name: "Secondary",
4797
- enabled: true,
4798
- priority: 2,
4799
- background: {
4800
- type: "surface",
4801
- role: "link"
4802
- },
4803
- borderRadius: "rounded-full",
4804
- border: { widthClass: "border-2" },
4805
- shadow: {
4806
- elevation: "high",
4807
- softness: "hard",
4808
- position: "bottom-right",
4809
- colorToken: "secondary"
4810
- },
4811
- effects: { hover: [{ effectId: "press-down" }] }
4812
- }]
4798
+ outline: {
4799
+ kind: "complete",
4800
+ appearance: {
4801
+ background: {
4802
+ type: "surface",
4803
+ role: "link"
4804
+ },
4805
+ borderRadius: "rounded-full",
4806
+ border: { widthClass: "border" },
4807
+ effects: { hover: [{
4808
+ effectId: "background-on-hover",
4809
+ options: { colorToken: "surface" }
4810
+ }] }
4811
+ }
4812
+ },
4813
+ ghost: {
4814
+ kind: "complete",
4815
+ appearance: {
4816
+ background: {
4817
+ type: "surface",
4818
+ role: "link"
4819
+ },
4820
+ borderRadius: "rounded-full",
4821
+ sizes: {
4822
+ sm: {
4823
+ padding: "0.375rem 0.875rem",
4824
+ fontSize: "text-sm"
4825
+ },
4826
+ md: { padding: "0.5rem 1rem" },
4827
+ lg: {
4828
+ padding: "0.625rem 1.25rem",
4829
+ fontSize: "text-lg"
4830
+ },
4831
+ xl: {
4832
+ padding: "0.75rem 1.5rem",
4833
+ fontSize: "text-xl"
4834
+ }
4835
+ }
4836
+ }
4837
+ },
4838
+ accent: {
4839
+ kind: "derive",
4840
+ from: "primary",
4841
+ overrides: { background: {
4842
+ type: "solid",
4843
+ colorToken: "accent"
4844
+ } }
4845
+ }
4846
+ }
4813
4847
  }
4814
4848
  });
4815
- //#endregion
4816
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
4817
- /**
4818
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
4819
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
4820
- */
4821
- const ornateRitual = defineButtonPersonality({
4822
- id: "ornate-ritual",
4823
- name: "Ornate Ritual",
4824
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
4849
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
4850
+ id: "brushed-wash",
4851
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
4825
4852
  tags: {
4826
4853
  tone: "classic",
4827
4854
  energy: "vibrant",
4828
- motion: "subtle",
4855
+ motion: "standard",
4829
4856
  era: "organic"
4830
4857
  },
4831
- buttonSystem: {
4858
+ system: {
4832
4859
  global: {
4833
4860
  cornerStyle: "rounded",
4834
- textTransform: "uppercase",
4835
- fontWeight: 600,
4861
+ shadow: "low",
4862
+ textTransform: "none",
4863
+ fontWeight: 500,
4836
4864
  borderWidth: 1,
4837
4865
  hoverTransform: "none",
4838
- hoverColor: "none",
4839
- letterSpacing: "loose"
4866
+ hoverColor: "none"
4840
4867
  },
4841
4868
  sizes: {
4842
4869
  sm: {
4843
- padding: "0.5625rem 1.25rem",
4844
- fontSize: "text-xs"
4845
- },
4846
- md: {
4847
- padding: "0.75rem 1.75rem",
4848
- fontSize: "text-xs"
4870
+ padding: "0.75rem 2rem",
4871
+ fontSize: "text-sm"
4849
4872
  },
4873
+ md: { padding: "1rem 2.5rem" },
4850
4874
  lg: {
4851
- padding: "0.875rem 2.25rem",
4852
- fontSize: "text-sm"
4875
+ padding: "1.25rem 3rem",
4876
+ fontSize: "text-lg"
4853
4877
  },
4854
4878
  xl: {
4855
- padding: "1rem 2.75rem",
4856
- fontSize: "text-base"
4879
+ padding: "1.625rem 3.75rem",
4880
+ fontSize: "text-xl"
4857
4881
  }
4858
4882
  },
4859
- variants: [
4860
- {
4861
- id: "primary",
4862
- name: "Primary",
4863
- enabled: true,
4864
- priority: 1,
4865
- background: {
4866
- type: "solid",
4867
- colorToken: "primary"
4868
- },
4869
- borderRadius: "rounded-md",
4870
- border: { widthClass: "border" },
4871
- effects: {
4872
- hover: [{
4873
- effectId: "background-on-hover",
4874
- options: { colorToken: "primary-100" }
4875
- }],
4876
- active: [{
4877
- effectId: "scale-down",
4878
- options: { scale: "0.98" }
4879
- }]
4883
+ roles: {
4884
+ primary: {
4885
+ kind: "complete",
4886
+ appearance: {
4887
+ background: {
4888
+ type: "gradient",
4889
+ stops: ["primary", "accent"],
4890
+ direction: "to-r",
4891
+ foregroundToken: "primaryForeground"
4892
+ },
4893
+ borderRadius: "rounded-lg",
4894
+ shadow: {
4895
+ elevation: "low",
4896
+ softness: "soft",
4897
+ position: "bottom"
4898
+ }
4880
4899
  }
4881
4900
  },
4882
- {
4883
- id: "secondary",
4884
- name: "Secondary",
4885
- enabled: true,
4886
- priority: 2,
4887
- background: {
4888
- type: "solid",
4889
- colorToken: "secondary"
4890
- },
4891
- borderRadius: "rounded-md",
4892
- border: { widthClass: "border" },
4893
- effects: { hover: [{
4894
- effectId: "background-on-hover",
4895
- options: { colorToken: "surface" }
4896
- }] }
4897
- },
4898
- {
4899
- id: "outline",
4900
- name: "Outline",
4901
- enabled: true,
4902
- priority: 3,
4903
- background: {
4904
- type: "surface",
4905
- role: "link"
4906
- },
4907
- borderRadius: "rounded-md",
4908
- border: { widthClass: "border" },
4909
- effects: { hover: [{
4910
- effectId: "background-on-hover",
4911
- options: { colorToken: "muted" }
4912
- }] }
4913
- },
4914
- {
4915
- id: "ghost",
4916
- name: "Ghost",
4917
- enabled: true,
4918
- priority: 3,
4919
- background: {
4920
- type: "surface",
4921
- role: "link"
4922
- },
4923
- borderRadius: "rounded-none",
4924
- sizes: {
4925
- sm: {
4926
- padding: "0.375rem 0",
4927
- fontSize: "text-xs"
4901
+ secondary: {
4902
+ kind: "complete",
4903
+ appearance: {
4904
+ background: {
4905
+ type: "gradient",
4906
+ stops: ["secondary", "accent"],
4907
+ direction: "to-br",
4908
+ foregroundToken: "primaryForeground"
4928
4909
  },
4929
- md: {
4930
- padding: "0.5rem 0",
4931
- fontSize: "text-sm"
4910
+ borderRadius: "rounded-lg",
4911
+ shadow: {
4912
+ elevation: "low",
4913
+ softness: "soft",
4914
+ position: "bottom"
4915
+ }
4916
+ }
4917
+ },
4918
+ outline: {
4919
+ kind: "complete",
4920
+ appearance: {
4921
+ background: {
4922
+ type: "surface",
4923
+ role: "link"
4932
4924
  },
4933
- lg: {
4934
- padding: "0.625rem 0",
4935
- fontSize: "text-base"
4925
+ borderRadius: "rounded-lg",
4926
+ border: { widthClass: "border" },
4927
+ effects: { hover: [{
4928
+ effectId: "background-on-hover",
4929
+ options: { colorToken: "surface" }
4930
+ }] }
4931
+ }
4932
+ },
4933
+ ghost: {
4934
+ kind: "complete",
4935
+ appearance: {
4936
+ background: {
4937
+ type: "surface",
4938
+ role: "link"
4936
4939
  },
4937
- xl: {
4938
- padding: "0.75rem 0",
4939
- fontSize: "text-lg"
4940
- }
4941
- },
4942
- effects: { base: [{
4943
- effectId: "border-bottom-grow",
4944
- options: {
4945
- height: 1,
4946
- colorToken: "accent",
4947
- origin: "left"
4948
- }
4949
- }] }
4940
+ borderRadius: "rounded-lg",
4941
+ effects: { hover: [{
4942
+ effectId: "background-on-hover",
4943
+ options: { colorToken: "surface" }
4944
+ }] }
4945
+ }
4946
+ },
4947
+ accent: {
4948
+ kind: "derive",
4949
+ from: "primary",
4950
+ overrides: { background: {
4951
+ type: "solid",
4952
+ colorToken: "accent"
4953
+ } }
4950
4954
  }
4951
- ]
4955
+ }
4952
4956
  }
4953
4957
  });
4954
- //#endregion
4955
- //#region ../theme-core/src/buttons/personalities/pebble.ts
4956
- /**
4957
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
4958
- * and natural; pairs well with wellness/yoga/dance brands.
4959
- */
4960
- const pebble = defineButtonPersonality({
4961
- id: "pebble",
4962
- name: "Pebble",
4963
- description: "Generous pill buttons with a quiet colour-softening hover.",
4958
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
4959
+ id: "ink-stamp",
4960
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
4964
4961
  tags: {
4965
- tone: "classic",
4966
- energy: "calm",
4962
+ tone: "bold",
4963
+ energy: "vibrant",
4967
4964
  motion: "standard",
4968
4965
  era: "organic"
4969
4966
  },
4970
- buttonSystem: {
4967
+ system: {
4971
4968
  global: {
4972
- cornerStyle: "pill",
4973
- textTransform: "none",
4974
- fontWeight: 500,
4975
- borderWidth: 2,
4969
+ cornerStyle: "rounded",
4970
+ textTransform: "uppercase",
4971
+ fontWeight: 600,
4972
+ borderWidth: 1,
4976
4973
  hoverTransform: "none",
4977
- hoverColor: "none"
4974
+ hoverColor: "none",
4975
+ letterSpacing: "loose"
4978
4976
  },
4979
4977
  sizes: {
4980
4978
  sm: {
4981
- padding: "0.625rem 1.75rem",
4979
+ padding: "0.5rem 1.25rem",
4980
+ fontSize: "text-xs"
4981
+ },
4982
+ md: {
4983
+ padding: "0.75rem 1.75rem",
4982
4984
  fontSize: "text-sm"
4983
4985
  },
4984
- md: { padding: "0.875rem 2.25rem" },
4985
4986
  lg: {
4986
- padding: "1.125rem 2.75rem",
4987
- fontSize: "text-lg"
4987
+ padding: "0.875rem 2.25rem",
4988
+ fontSize: "text-base"
4988
4989
  },
4989
4990
  xl: {
4990
- padding: "1.5rem 3.5rem",
4991
- fontSize: "text-xl"
4991
+ padding: "1.125rem 2.75rem",
4992
+ fontSize: "text-lg"
4992
4993
  }
4993
4994
  },
4994
- variants: [
4995
- {
4996
- id: "primary",
4997
- name: "Primary",
4998
- enabled: true,
4999
- priority: 1,
5000
- background: {
5001
- type: "solid",
5002
- colorToken: "primary"
5003
- },
5004
- borderRadius: "rounded-full",
5005
- effects: { hover: [{
5006
- effectId: "darken-background",
5007
- options: { amount: 100 }
5008
- }] }
4995
+ roles: {
4996
+ primary: {
4997
+ kind: "complete",
4998
+ appearance: {
4999
+ background: {
5000
+ type: "solid",
5001
+ colorToken: "primary"
5002
+ },
5003
+ borderRadius: "rounded-md",
5004
+ effects: {
5005
+ hover: [{
5006
+ effectId: "drop-shadow",
5007
+ options: { intensity: "medium" }
5008
+ }, {
5009
+ effectId: "scale-up",
5010
+ options: { scale: "1.02" }
5011
+ }],
5012
+ active: [{
5013
+ effectId: "scale-down",
5014
+ options: { scale: "0.98" }
5015
+ }]
5016
+ }
5017
+ }
5009
5018
  },
5010
- {
5011
- id: "secondary",
5012
- name: "Secondary",
5013
- enabled: true,
5014
- priority: 2,
5015
- background: {
5016
- type: "surface",
5017
- role: "link"
5018
- },
5019
- borderRadius: "rounded-full",
5020
- border: { widthClass: "border-2" },
5021
- effects: { hover: [{
5022
- effectId: "background-on-hover",
5023
- options: { colorToken: "accent" }
5024
- }] }
5019
+ secondary: {
5020
+ kind: "complete",
5021
+ appearance: {
5022
+ background: {
5023
+ type: "surface",
5024
+ role: "link"
5025
+ },
5026
+ borderRadius: "rounded-md",
5027
+ border: { widthClass: "border-2" },
5028
+ effects: { hover: [{
5029
+ effectId: "background-on-hover",
5030
+ options: { colorToken: "surface" }
5031
+ }] }
5032
+ }
5025
5033
  },
5026
- {
5027
- id: "outline",
5028
- name: "Outline",
5029
- enabled: true,
5030
- priority: 3,
5031
- background: {
5032
- type: "surface",
5033
- role: "link"
5034
- },
5035
- borderRadius: "rounded-full",
5036
- border: { widthClass: "border" },
5037
- effects: { hover: [{
5038
- effectId: "background-on-hover",
5039
- options: { colorToken: "surface" }
5040
- }] }
5034
+ outline: {
5035
+ kind: "complete",
5036
+ appearance: {
5037
+ background: {
5038
+ type: "surface",
5039
+ role: "link"
5040
+ },
5041
+ borderRadius: "rounded-md",
5042
+ border: { widthClass: "border-2" },
5043
+ effects: { hover: [{
5044
+ effectId: "background-on-hover",
5045
+ options: { colorToken: "surface" }
5046
+ }] }
5047
+ }
5041
5048
  },
5042
- {
5043
- id: "ghost",
5044
- name: "Ghost",
5045
- enabled: true,
5046
- priority: 3,
5047
- background: {
5048
- type: "surface",
5049
- role: "link"
5050
- },
5051
- borderRadius: "rounded-full",
5052
- sizes: {
5053
- sm: {
5054
- padding: "0.375rem 0.875rem",
5055
- fontSize: "text-sm"
5049
+ ghost: {
5050
+ kind: "complete",
5051
+ appearance: {
5052
+ background: {
5053
+ type: "surface",
5054
+ role: "link"
5056
5055
  },
5057
- md: { padding: "0.5rem 1rem" },
5058
- lg: {
5059
- padding: "0.625rem 1.25rem",
5060
- fontSize: "text-lg"
5056
+ borderRadius: "rounded-none",
5057
+ sizes: {
5058
+ sm: {
5059
+ padding: "0.375rem 0",
5060
+ fontSize: "text-xs"
5061
+ },
5062
+ md: {
5063
+ padding: "0.5rem 0",
5064
+ fontSize: "text-sm"
5065
+ },
5066
+ lg: {
5067
+ padding: "0.625rem 0",
5068
+ fontSize: "text-base"
5069
+ },
5070
+ xl: {
5071
+ padding: "0.75rem 0",
5072
+ fontSize: "text-lg"
5073
+ }
5061
5074
  },
5062
- xl: {
5063
- padding: "0.75rem 1.5rem",
5064
- fontSize: "text-xl"
5065
- }
5075
+ effects: { base: [{
5076
+ effectId: "border-bottom-grow",
5077
+ options: {
5078
+ height: 1,
5079
+ colorToken: "accent",
5080
+ origin: "left"
5081
+ }
5082
+ }] }
5066
5083
  }
5084
+ },
5085
+ accent: {
5086
+ kind: "derive",
5087
+ from: "primary",
5088
+ overrides: { background: {
5089
+ type: "solid",
5090
+ colorToken: "accent"
5091
+ } }
5067
5092
  }
5068
- ]
5093
+ }
5069
5094
  }
5070
5095
  });
5071
- //#endregion
5072
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
5073
- /**
5074
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
5075
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
5076
- * responsible for contrast rather than reversing the button roles.
5077
- */
5078
- const quietArrow = defineButtonPersonality({
5079
- id: "quiet-arrow",
5080
- name: "Quiet Arrow",
5081
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
5096
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
5097
+ id: "flat-ink",
5098
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
5082
5099
  tags: {
5083
5100
  tone: "classic",
5084
5101
  energy: "calm",
5085
5102
  motion: "subtle",
5086
5103
  era: "editorial"
5087
5104
  },
5088
- buttonSystem: {
5105
+ system: {
5089
5106
  global: {
5090
5107
  cornerStyle: "rounded",
5091
- textTransform: "uppercase",
5092
- fontWeight: 500,
5108
+ textTransform: "none",
5109
+ fontWeight: 600,
5093
5110
  borderWidth: 1,
5094
5111
  typography: "body",
5095
- fontSize: "text-sm",
5096
- letterSpacing: "loose",
5097
- hoverTransform: "none",
5112
+ letterSpacing: "tight",
5113
+ paddingPreset: "default",
5114
+ hoverTransform: "lift",
5098
5115
  hoverColor: "none"
5099
5116
  },
5100
5117
  sizes: {
5101
5118
  sm: {
5102
- padding: "0.625rem 1.25rem",
5103
- fontSize: "text-xs"
5104
- },
5105
- md: {
5106
- padding: "0.8125rem 1.75rem",
5119
+ padding: "0.625rem 1.125rem",
5107
5120
  fontSize: "text-sm"
5108
5121
  },
5122
+ md: { padding: "0.8125rem 1.375rem" },
5109
5123
  lg: {
5110
- padding: "0.9375rem 2.125rem",
5111
- fontSize: "text-sm"
5124
+ padding: "0.9375rem 1.625rem",
5125
+ fontSize: "text-lg"
5112
5126
  },
5113
5127
  xl: {
5114
- padding: "1.0625rem 2.5rem",
5115
- fontSize: "text-base"
5128
+ padding: "1.0625rem 2rem",
5129
+ fontSize: "text-xl"
5116
5130
  }
5117
5131
  },
5118
- variants: [
5119
- {
5120
- id: "primary",
5121
- name: "Primary",
5122
- enabled: true,
5123
- priority: 1,
5124
- background: {
5125
- type: "solid",
5126
- colorToken: "primary"
5127
- },
5128
- borderRadius: "rounded-xl",
5129
- affordance: { iconId: "ArrowRight" },
5130
- effects: { hover: [{
5131
- effectId: "darken-background",
5132
- options: { amount: 100 }
5133
- }] }
5132
+ roles: {
5133
+ primary: {
5134
+ kind: "complete",
5135
+ appearance: {
5136
+ background: {
5137
+ type: "solid",
5138
+ colorToken: "primary"
5139
+ },
5140
+ borderRadius: "rounded-lg",
5141
+ affordance: { iconId: "ArrowRight" },
5142
+ effects: { hover: [{
5143
+ effectId: "lift",
5144
+ options: { translateY: "-2px" }
5145
+ }, {
5146
+ effectId: "background-on-hover",
5147
+ options: { colorToken: "secondary" }
5148
+ }] }
5149
+ }
5134
5150
  },
5135
- {
5136
- id: "secondary",
5137
- name: "Secondary",
5138
- enabled: true,
5139
- priority: 2,
5140
- background: {
5141
- type: "surface",
5142
- role: "link"
5143
- },
5144
- borderRadius: "rounded-xl",
5145
- border: { widthClass: "border" },
5146
- affordance: { iconId: "ArrowRight" },
5147
- effects: { hover: [{
5148
- effectId: "background-on-hover",
5149
- options: { colorToken: "surfaceAlt" }
5150
- }] }
5151
+ secondary: {
5152
+ kind: "complete",
5153
+ appearance: {
5154
+ background: {
5155
+ type: "surface",
5156
+ role: "link"
5157
+ },
5158
+ borderRadius: "rounded-lg",
5159
+ border: { widthClass: "border" },
5160
+ effects: { hover: [{
5161
+ effectId: "lift",
5162
+ options: { translateY: "-2px" }
5163
+ }, {
5164
+ effectId: "background-on-hover",
5165
+ options: { colorToken: "surfaceAlt" }
5166
+ }] }
5167
+ }
5151
5168
  },
5152
- {
5153
- id: "outline",
5154
- name: "Outline",
5155
- enabled: true,
5156
- priority: 3,
5157
- background: {
5158
- type: "surface",
5159
- role: "link"
5160
- },
5161
- borderRadius: "rounded-xl",
5162
- border: { widthClass: "border" }
5169
+ outline: {
5170
+ kind: "complete",
5171
+ appearance: {
5172
+ background: {
5173
+ type: "surface",
5174
+ role: "link"
5175
+ },
5176
+ borderRadius: "rounded-lg",
5177
+ border: { widthClass: "border" },
5178
+ effects: { hover: [{
5179
+ effectId: "lift",
5180
+ options: { translateY: "-2px" }
5181
+ }, {
5182
+ effectId: "background-on-hover",
5183
+ options: { colorToken: "surfaceAlt" }
5184
+ }] }
5185
+ }
5163
5186
  },
5164
- {
5165
- id: "ghost",
5166
- name: "Ghost",
5167
- enabled: true,
5168
- priority: 3,
5169
- background: {
5170
- type: "surface",
5171
- role: "link"
5172
- },
5173
- borderRadius: "rounded-xl"
5187
+ ghost: {
5188
+ kind: "complete",
5189
+ appearance: {
5190
+ background: {
5191
+ type: "surface",
5192
+ role: "link"
5193
+ },
5194
+ borderRadius: "rounded-lg",
5195
+ effects: { hover: [{
5196
+ effectId: "lift",
5197
+ options: { translateY: "-2px" }
5198
+ }] }
5199
+ }
5200
+ },
5201
+ accent: {
5202
+ kind: "complete",
5203
+ appearance: {
5204
+ background: {
5205
+ type: "solid",
5206
+ colorToken: "accent"
5207
+ },
5208
+ borderRadius: "rounded-lg",
5209
+ affordance: { iconId: "ArrowRight" },
5210
+ effects: { hover: [{
5211
+ effectId: "lift",
5212
+ options: { translateY: "-2px" }
5213
+ }] }
5214
+ }
5174
5215
  }
5175
- ]
5216
+ }
5176
5217
  }
5177
5218
  });
5178
- //#endregion
5179
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
5180
- /**
5181
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
5182
- * motion. Suits energetic schools, performers, festivals, and community brands
5183
- * that need calls to action to feel loud without becoming visually chaotic.
5184
- */
5185
- const showtimePill = defineButtonPersonality({
5219
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
5186
5220
  id: "showtime-pill",
5187
- name: "Showtime Pill",
5188
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
5221
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
5189
5222
  tags: {
5190
5223
  tone: "bold",
5191
5224
  energy: "vibrant",
5192
5225
  motion: "expressive",
5193
5226
  era: "modern"
5194
5227
  },
5195
- buttonSystem: {
5228
+ system: {
5196
5229
  global: {
5197
5230
  cornerStyle: "pill",
5198
5231
  shadow: "low",
@@ -5223,272 +5256,376 @@ const showtimePill = defineButtonPersonality({
5223
5256
  fontSize: "1.125rem"
5224
5257
  }
5225
5258
  },
5226
- variants: [
5227
- {
5228
- id: "primary",
5229
- name: "Primary",
5230
- enabled: true,
5231
- priority: 1,
5232
- background: {
5233
- type: "solid",
5234
- colorToken: "primary"
5235
- },
5236
- borderRadius: "rounded-full",
5237
- effects: { hover: [{ effectId: "pop" }] }
5259
+ roles: {
5260
+ primary: {
5261
+ kind: "complete",
5262
+ appearance: {
5263
+ background: {
5264
+ type: "solid",
5265
+ colorToken: "primary"
5266
+ },
5267
+ borderRadius: "rounded-full",
5268
+ effects: { hover: [{ effectId: "pop" }] }
5269
+ }
5238
5270
  },
5239
- {
5240
- id: "secondary",
5241
- name: "Secondary",
5242
- enabled: true,
5243
- priority: 2,
5244
- background: {
5245
- type: "surface",
5246
- role: "link"
5247
- },
5248
- borderRadius: "rounded-full",
5249
- border: { widthClass: "border-2" },
5250
- effects: { hover: [{ effectId: "pop" }] }
5271
+ secondary: {
5272
+ kind: "complete",
5273
+ appearance: {
5274
+ background: {
5275
+ type: "surface",
5276
+ role: "link"
5277
+ },
5278
+ borderRadius: "rounded-full",
5279
+ border: { widthClass: "border-2" },
5280
+ effects: { hover: [{ effectId: "pop" }] }
5281
+ }
5251
5282
  },
5252
- {
5253
- id: "hero",
5254
- name: "Hero",
5255
- enabled: true,
5256
- priority: 1,
5257
- background: {
5258
- type: "solid",
5259
- colorToken: "secondary"
5260
- },
5261
- borderRadius: "rounded-full",
5262
- effects: { hover: [{ effectId: "pop" }] }
5283
+ outline: {
5284
+ kind: "complete",
5285
+ appearance: {
5286
+ background: {
5287
+ type: "surface",
5288
+ role: "link"
5289
+ },
5290
+ borderRadius: "rounded-full",
5291
+ border: { widthClass: "border-2" },
5292
+ effects: { hover: [{
5293
+ effectId: "background-on-hover",
5294
+ options: { colorToken: "background" }
5295
+ }] }
5296
+ }
5263
5297
  },
5264
- {
5265
- id: "header",
5266
- name: "Header",
5267
- enabled: true,
5268
- priority: 2,
5269
- background: {
5298
+ ghost: {
5299
+ kind: "complete",
5300
+ appearance: {
5301
+ background: {
5302
+ type: "surface",
5303
+ role: "link"
5304
+ },
5305
+ borderRadius: "rounded-full",
5306
+ effects: { hover: [{
5307
+ effectId: "background-on-hover",
5308
+ options: { colorToken: "surface" }
5309
+ }] }
5310
+ }
5311
+ },
5312
+ accent: {
5313
+ kind: "complete",
5314
+ appearance: {
5315
+ background: {
5316
+ type: "solid",
5317
+ colorToken: "secondary"
5318
+ },
5319
+ borderRadius: "rounded-full",
5320
+ effects: { hover: [{ effectId: "pop" }] }
5321
+ }
5322
+ }
5323
+ }
5324
+ }
5325
+ });
5326
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
5327
+ id: "joy-stamp",
5328
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
5329
+ tags: {
5330
+ tone: "bold",
5331
+ energy: "vibrant",
5332
+ motion: "expressive",
5333
+ era: "organic"
5334
+ },
5335
+ system: {
5336
+ global: {
5337
+ cornerStyle: "pill",
5338
+ shadow: "high",
5339
+ textTransform: "none",
5340
+ typography: "heading",
5341
+ fontWeight: 700,
5342
+ fontSize: "text-lg",
5343
+ borderWidth: 2,
5344
+ hoverTransform: "none",
5345
+ hoverColor: "none"
5346
+ },
5347
+ sizes: {
5348
+ sm: {
5349
+ padding: "0.625rem 1.25rem",
5350
+ fontSize: "text-base"
5351
+ },
5352
+ md: {
5353
+ padding: "0.875rem 1.75rem",
5354
+ fontSize: "text-lg"
5355
+ },
5356
+ lg: {
5357
+ padding: "1.125rem 2.25rem",
5358
+ fontSize: "text-xl"
5359
+ },
5360
+ xl: {
5361
+ padding: "1.25rem 2.75rem",
5362
+ fontSize: "text-2xl"
5363
+ }
5364
+ },
5365
+ roles: {
5366
+ primary: {
5367
+ kind: "complete",
5368
+ appearance: {
5369
+ background: {
5370
+ type: "solid",
5371
+ colorToken: "primary"
5372
+ },
5373
+ borderRadius: "rounded-full",
5374
+ shadow: {
5375
+ elevation: "high",
5376
+ softness: "hard",
5377
+ position: "bottom-right",
5378
+ colorToken: "text"
5379
+ },
5380
+ effects: { hover: [{ effectId: "press-down" }] }
5381
+ }
5382
+ },
5383
+ secondary: {
5384
+ kind: "complete",
5385
+ appearance: {
5386
+ background: {
5387
+ type: "surface",
5388
+ role: "link"
5389
+ },
5390
+ borderRadius: "rounded-full",
5391
+ border: { widthClass: "border-2" },
5392
+ shadow: {
5393
+ elevation: "high",
5394
+ softness: "hard",
5395
+ position: "bottom-right",
5396
+ colorToken: "secondary"
5397
+ },
5398
+ effects: { hover: [{ effectId: "press-down" }] }
5399
+ }
5400
+ },
5401
+ outline: {
5402
+ kind: "derive",
5403
+ from: "secondary"
5404
+ },
5405
+ ghost: {
5406
+ kind: "complete",
5407
+ appearance: {
5408
+ background: {
5409
+ type: "surface",
5410
+ role: "link"
5411
+ },
5412
+ borderRadius: "rounded-full",
5413
+ effects: { hover: [{ effectId: "press-down" }] }
5414
+ }
5415
+ },
5416
+ accent: {
5417
+ kind: "derive",
5418
+ from: "primary",
5419
+ overrides: { background: {
5270
5420
  type: "solid",
5271
- colorToken: "background"
5272
- },
5273
- borderRadius: "rounded-full",
5274
- border: { widthClass: "border-2" },
5275
- effects: { hover: [{
5276
- effectId: "background-on-hover",
5277
- options: { colorToken: "surface" }
5278
- }] }
5421
+ colorToken: "accent"
5422
+ } }
5423
+ }
5424
+ }
5425
+ }
5426
+ });
5427
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
5428
+ id: "ornate-ritual",
5429
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
5430
+ tags: {
5431
+ tone: "classic",
5432
+ energy: "vibrant",
5433
+ motion: "subtle",
5434
+ era: "organic"
5435
+ },
5436
+ system: {
5437
+ global: {
5438
+ cornerStyle: "rounded",
5439
+ textTransform: "uppercase",
5440
+ fontWeight: 600,
5441
+ borderWidth: 1,
5442
+ hoverTransform: "none",
5443
+ hoverColor: "none",
5444
+ letterSpacing: "loose"
5445
+ },
5446
+ sizes: {
5447
+ sm: {
5448
+ padding: "0.5625rem 1.25rem",
5449
+ fontSize: "text-xs"
5279
5450
  },
5280
- {
5281
- id: "outline",
5282
- name: "Outline",
5283
- enabled: true,
5284
- priority: 3,
5285
- background: {
5286
- type: "surface",
5287
- role: "link"
5288
- },
5289
- borderRadius: "rounded-full",
5290
- border: { widthClass: "border-2" },
5291
- effects: { hover: [{
5292
- effectId: "background-on-hover",
5293
- options: { colorToken: "background" }
5294
- }] }
5451
+ md: {
5452
+ padding: "0.75rem 1.75rem",
5453
+ fontSize: "text-xs"
5454
+ },
5455
+ lg: {
5456
+ padding: "0.875rem 2.25rem",
5457
+ fontSize: "text-sm"
5295
5458
  },
5296
- {
5297
- id: "ghost",
5298
- name: "Ghost",
5299
- enabled: true,
5300
- priority: 3,
5301
- background: {
5302
- type: "surface",
5303
- role: "link"
5304
- },
5305
- borderRadius: "rounded-full",
5306
- effects: { hover: [{
5307
- effectId: "background-on-hover",
5308
- options: { colorToken: "surface" }
5309
- }] }
5459
+ xl: {
5460
+ padding: "1rem 2.75rem",
5461
+ fontSize: "text-base"
5310
5462
  }
5311
- ]
5312
- }
5313
- });
5314
- //#endregion
5315
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
5316
- /**
5317
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
5318
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
5319
- */
5320
- const softPill = defineButtonPersonality({
5321
- id: "soft-pill",
5322
- name: "Soft Pill",
5323
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
5324
- tags: {
5325
- tone: "classic",
5326
- energy: "calm",
5327
- motion: "subtle",
5328
- era: "organic"
5329
- },
5330
- buttonSystem: {
5331
- global: {
5332
- cornerStyle: "pill",
5333
- shadow: "low",
5334
- textTransform: "none",
5335
- fontWeight: 500,
5336
- borderWidth: 2,
5337
- hoverTransform: "lift",
5338
- hoverColor: "none"
5339
5463
  },
5340
- variants: [
5341
- {
5342
- id: "primary",
5343
- name: "Primary",
5344
- enabled: true,
5345
- priority: 1,
5346
- background: {
5347
- type: "solid",
5348
- colorToken: "primary"
5349
- },
5350
- borderRadius: "rounded-full",
5351
- shadow: {
5352
- elevation: "low",
5353
- softness: "soft",
5354
- position: "bottom"
5355
- },
5356
- effects: {
5357
- hover: [{
5358
- effectId: "lift",
5359
- options: { translateY: "-1px" }
5360
- }],
5361
- active: [{
5362
- effectId: "scale-down",
5363
- options: { scale: "0.98" }
5364
- }]
5464
+ roles: {
5465
+ primary: {
5466
+ kind: "complete",
5467
+ appearance: {
5468
+ background: {
5469
+ type: "solid",
5470
+ colorToken: "primary"
5471
+ },
5472
+ borderRadius: "rounded-md",
5473
+ border: { widthClass: "border" },
5474
+ effects: {
5475
+ hover: [{
5476
+ effectId: "background-on-hover",
5477
+ options: { colorToken: "primary-100" }
5478
+ }],
5479
+ active: [{
5480
+ effectId: "scale-down",
5481
+ options: { scale: "0.98" }
5482
+ }]
5483
+ }
5365
5484
  }
5366
5485
  },
5367
- {
5368
- id: "secondary",
5369
- name: "Secondary",
5370
- enabled: true,
5371
- priority: 2,
5372
- background: {
5373
- type: "surface",
5374
- role: "link"
5375
- },
5376
- borderRadius: "rounded-full",
5377
- border: { widthClass: "border-2" },
5378
- effects: { hover: [{
5379
- effectId: "background-on-hover",
5380
- options: { colorToken: "surface" }
5381
- }] }
5486
+ secondary: {
5487
+ kind: "complete",
5488
+ appearance: {
5489
+ background: {
5490
+ type: "solid",
5491
+ colorToken: "secondary"
5492
+ },
5493
+ borderRadius: "rounded-md",
5494
+ border: { widthClass: "border" },
5495
+ effects: { hover: [{
5496
+ effectId: "background-on-hover",
5497
+ options: { colorToken: "surface" }
5498
+ }] }
5499
+ }
5382
5500
  },
5383
- {
5384
- id: "outline",
5385
- name: "Outline",
5386
- enabled: true,
5387
- priority: 3,
5388
- background: {
5389
- type: "surface",
5390
- role: "link"
5391
- },
5392
- borderRadius: "rounded-full",
5393
- border: { widthClass: "border" },
5394
- effects: { hover: [{
5395
- effectId: "background-on-hover",
5396
- options: { colorToken: "surface" }
5397
- }] }
5501
+ outline: {
5502
+ kind: "complete",
5503
+ appearance: {
5504
+ background: {
5505
+ type: "surface",
5506
+ role: "link"
5507
+ },
5508
+ borderRadius: "rounded-md",
5509
+ border: { widthClass: "border" },
5510
+ effects: { hover: [{
5511
+ effectId: "background-on-hover",
5512
+ options: { colorToken: "muted" }
5513
+ }] }
5514
+ }
5398
5515
  },
5399
- {
5400
- id: "ghost",
5401
- name: "Ghost",
5402
- enabled: true,
5403
- priority: 3,
5404
- background: {
5405
- type: "surface",
5406
- role: "link"
5407
- },
5408
- borderRadius: "rounded-full",
5409
- effects: { hover: [{
5410
- effectId: "background-on-hover",
5411
- options: { colorToken: "surface" }
5412
- }] }
5516
+ ghost: {
5517
+ kind: "complete",
5518
+ appearance: {
5519
+ background: {
5520
+ type: "surface",
5521
+ role: "link"
5522
+ },
5523
+ borderRadius: "rounded-none",
5524
+ sizes: {
5525
+ sm: {
5526
+ padding: "0.375rem 0",
5527
+ fontSize: "text-xs"
5528
+ },
5529
+ md: {
5530
+ padding: "0.5rem 0",
5531
+ fontSize: "text-sm"
5532
+ },
5533
+ lg: {
5534
+ padding: "0.625rem 0",
5535
+ fontSize: "text-base"
5536
+ },
5537
+ xl: {
5538
+ padding: "0.75rem 0",
5539
+ fontSize: "text-lg"
5540
+ }
5541
+ },
5542
+ effects: { base: [{
5543
+ effectId: "border-bottom-grow",
5544
+ options: {
5545
+ height: 1,
5546
+ colorToken: "accent",
5547
+ origin: "left"
5548
+ }
5549
+ }] }
5550
+ }
5551
+ },
5552
+ accent: {
5553
+ kind: "derive",
5554
+ from: "primary",
5555
+ overrides: { background: {
5556
+ type: "solid",
5557
+ colorToken: "accent"
5558
+ } }
5413
5559
  }
5414
- ]
5560
+ }
5415
5561
  }
5416
5562
  });
5417
5563
  //#endregion
5418
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
5419
- const solidSecondary = {
5420
- id: "secondary",
5421
- name: "Secondary",
5422
- enabled: true,
5423
- priority: 2,
5424
- background: {
5425
- type: "solid",
5426
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
5427
- },
5428
- borderRadius: "rounded-full",
5429
- shadow: {
5430
- elevation: "none",
5431
- softness: null,
5432
- position: "bottom"
5433
- },
5434
- effects: {
5435
- hover: [{
5436
- effectId: "background-on-hover-alpha",
5437
- options: {
5438
- colorToken: "secondary",
5439
- opacity: 88
5440
- }
5441
- }],
5442
- active: [{
5443
- effectId: "scale-down",
5444
- options: { scale: "0.98" }
5445
- }]
5446
- }
5447
- };
5448
- //#endregion
5449
- //#region ../theme-core/src/buttons/personalities/index.ts
5450
- const buttonPersonalities = [
5451
- softPill,
5452
- defineButtonPersonality({
5453
- id: "two-tone-pill",
5454
- name: "Two-tone Pill",
5455
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
5456
- tags: softPill.tags,
5457
- buttonSystem: {
5458
- ...softPill.buttonSystem,
5459
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
5460
- }
5461
- }),
5462
- earthPill,
5463
- confidentChip,
5464
- editorialLink,
5465
- pebble,
5466
- inkStamp,
5467
- flatInk,
5468
- brushedWash,
5469
- showtimePill,
5470
- joyStamp,
5471
- ornateRitual,
5472
- quietArrow
5564
+ //#region ../theme-core/src/buttons/styles/registry.ts
5565
+ const buttonStyleRecipes = [
5566
+ softPillRecipe,
5567
+ earthPillRecipe,
5568
+ confidentChipRecipe,
5569
+ editorialLinkRecipe,
5570
+ pebbleRecipe,
5571
+ inkStampRecipe,
5572
+ flatInkRecipe,
5573
+ brushedWashRecipe,
5574
+ showtimePillRecipe,
5575
+ joyStampRecipe,
5576
+ ornateRitualRecipe,
5577
+ quietArrowRecipe
5473
5578
  ];
5474
- new Map(buttonPersonalities.map((p) => [p.id, p]));
5475
- buttonPersonalities.map((personality) => ({
5476
- id: personality.id,
5477
- name: personality.name,
5478
- description: personality.description,
5479
- category: presetCategory(personality),
5480
- buttonSystem: personality.buttonSystem,
5481
- compatibility: {
5482
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
5483
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
5484
- }
5485
- }));
5486
- function presetCategory(personality) {
5487
- switch (personality.tags.era) {
5579
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
5580
+ function findButtonStyleRecipe(id) {
5581
+ const recipe = recipesById.get(id);
5582
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
5583
+ return recipe;
5584
+ }
5585
+ function resolveButtonStyleSelection(selection) {
5586
+ switch (selection.styleId) {
5587
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
5588
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
5589
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
5590
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
5591
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
5592
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
5593
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
5594
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
5595
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
5596
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
5597
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
5598
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
5599
+ }
5600
+ }
5601
+ function defaultButtonStyleSelectionFor(styleId) {
5602
+ return {
5603
+ styleId,
5604
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
5605
+ };
5606
+ }
5607
+ 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");
5608
+ buttonStyleRecipes.map((recipe) => {
5609
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
5610
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
5611
+ return {
5612
+ id: recipe.id,
5613
+ name: recipe.accessibilityLabel,
5614
+ description: recipe.accessibilityLabel,
5615
+ category: presetCategory(recipe),
5616
+ buttonSystem: resolved.buttonSystem,
5617
+ compatibility: {
5618
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
5619
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
5620
+ }
5621
+ };
5622
+ });
5623
+ function presetCategory(recipe) {
5624
+ switch (recipe.tags.era) {
5488
5625
  case "retro": return "retro";
5489
5626
  case "editorial": return "minimal";
5490
5627
  case "organic": return "artistic";
5491
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
5628
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
5492
5629
  case "technical": return "technical";
5493
5630
  case void 0: return "modern";
5494
5631
  }
@@ -10140,320 +10277,88 @@ const headerLookCatalog = defineExactCatalog()([
10140
10277
  visualTreatment: "light-serif",
10141
10278
  layoutBehavior: "normal-flow",
10142
10279
  configuration: {
10143
- structure: "centered-stack",
10144
- treatment: "light-serif",
10145
- behavior: "normal-flow"
10146
- },
10147
- openingRequirement: "none",
10148
- maxRecommendedNavItems: 5,
10149
- logoAccommodations: centeredLogoAccommodations,
10150
- compile: centeredCalmHeader
10151
- },
10152
- {
10153
- id: asHeaderLookId("practical-utility"),
10154
- label: "Practical utility",
10155
- visualTreatment: "solid-neutral",
10156
- layoutBehavior: "sticky-shrink",
10157
- configuration: {
10158
- structure: "inline-classic",
10159
- treatment: "solid-neutral",
10160
- behavior: "sticky-shrink"
10161
- },
10162
- openingRequirement: "none",
10163
- requiresProminentCta: true,
10164
- logoAccommodations: inlineClassicLogoAccommodations,
10165
- compile: practicalUtilityHeader
10166
- },
10167
- {
10168
- id: asHeaderLookId("minimal-transparent"),
10169
- label: "Minimal transparent",
10170
- visualTreatment: "minimal-transparent",
10171
- layoutBehavior: "normal-flow",
10172
- configuration: {
10173
- structure: "inline-classic",
10174
- treatment: "minimal-transparent",
10175
- behavior: "normal-flow"
10176
- },
10177
- openingRequirement: "reserved-space-ok",
10178
- logoAccommodations: inlineClassicLogoAccommodations,
10179
- compile: minimalTransparentHeader
10180
- },
10181
- {
10182
- id: asHeaderLookId("transparent-overlay"),
10183
- label: "Transparent overlay",
10184
- visualTreatment: "transparent-overlay",
10185
- layoutBehavior: "fixed-overlay",
10186
- configuration: {
10187
- structure: "inline-classic",
10188
- treatment: "transparent-overlay",
10189
- behavior: "fixed-overlay"
10190
- },
10191
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10192
- maxRecommendedNavItems: 5,
10193
- logoAccommodations: overlayLogoAccommodations,
10194
- compile: transparentOverlayHeader
10195
- },
10196
- {
10197
- id: asHeaderLookId("floating-glass"),
10198
- label: "Floating glass",
10199
- visualTreatment: "floating-glass",
10200
- layoutBehavior: "fixed-floating",
10201
- configuration: {
10202
- structure: "floating-shell",
10203
- treatment: "floating-glass",
10204
- behavior: "fixed-floating"
10205
- },
10206
- openingRequirement: "requires-image-hero-with-contrast-overlay",
10207
- maxRecommendedNavItems: 5,
10208
- logoAccommodations: overlayLogoAccommodations,
10209
- compile: floatingGlassHeader
10210
- }
10211
- ]);
10212
- new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10213
- new Map(headerLookCatalog.map((look) => [look.id, look]));
10214
- function headerConfigurationKey(configuration) {
10215
- return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10216
- }
10217
- //#endregion
10218
- //#region ../theme-core/src/site-styles/footerLooks.ts
10219
- function asFooterLookId(value) {
10220
- return value;
10221
- }
10222
- function asFooterLayoutId(value) {
10223
- return value;
10224
- }
10225
- function asFooterStyleId(value) {
10226
- return value;
10227
- }
10228
- const footerLayoutCatalog = defineExactCatalog()([
10229
- {
10230
- id: asFooterLayoutId("identity"),
10231
- label: "Identity",
10232
- description: "Logo, site text, address, and legal copy without relying on footer navigation."
10233
- },
10234
- {
10235
- id: asFooterLayoutId("centered"),
10236
- label: "Centered",
10237
- description: "A calm centered stack for identity, short copy, and optional compact navigation.",
10238
- maxRecommendedNavDensity: "sparse"
10239
- },
10240
- {
10241
- id: asFooterLayoutId("split"),
10242
- label: "Split",
10243
- description: "Navigation and brand signoff separated into a wider split footer.",
10244
- requiresFooterNav: true,
10245
- maxRecommendedNavDensity: "balanced"
10246
- },
10247
- {
10248
- id: asFooterLayoutId("columns"),
10249
- label: "Columns",
10250
- description: "Grouped footer navigation columns with a supporting bottom line.",
10251
- requiresFooterNav: true,
10252
- requiresFooterNavGroups: true
10253
- }
10254
- ]);
10255
- const footerStyleCatalog = defineExactCatalog()([
10256
- {
10257
- id: asFooterStyleId("quiet"),
10258
- label: "Quiet",
10259
- description: "Lightweight, practical footer treatment."
10260
- },
10261
- {
10262
- id: asFooterStyleId("calm"),
10263
- label: "Calm",
10264
- description: "Soft centered treatment with restrained dividers."
10265
- },
10266
- {
10267
- id: asFooterStyleId("editorial"),
10268
- label: "Editorial",
10269
- description: "Text-forward treatment with fine-line structure."
10270
- },
10271
- {
10272
- id: asFooterStyleId("brand-band"),
10273
- label: "Brand band",
10274
- description: "High-contrast brand treatment with a stronger bottom bar."
10275
- }
10276
- ]);
10277
- new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
10278
- new Map(footerStyleCatalog.map((style) => [style.id, style]));
10279
- /**
10280
- * No-nav-safe identity footer: brand and legal/supporting copy carry the
10281
- * footer without implying missing navigation.
10282
- */
10283
- function identityQuietFooter(theme) {
10284
- return {
10285
- ...theme.footer,
10286
- variant: "simple",
10287
- maxWidth: "container",
10288
- background: {
10289
- type: "color",
10290
- color: "surface"
10291
- },
10292
- navStyle: "minimal",
10293
- navWeight: "regular",
10294
- navColor: "text",
10295
- navLinkStyle: {
10296
- typography: "body",
10297
- fontWeight: "regular",
10298
- textTransform: "none",
10299
- italic: false,
10300
- colorToken: "text",
10301
- hoverColorToken: "primary",
10302
- padding: "none",
10303
- borderRadius: "none"
10304
- },
10305
- navLayout: {
10306
- layout: "inline-wrap",
10307
- align: "start",
10308
- gapX: "default",
10309
- gapY: "tight"
10310
- },
10311
- logo: {
10312
- showLogo: true,
10313
- showLogoText: true,
10314
- placement: "left",
10315
- size: "sm",
10316
- align: "start"
10317
- },
10318
- bottomBar: {
10319
- enabled: false,
10320
- fullBleed: false,
10321
- textAlign: "left",
10322
- paddingX: "default",
10323
- paddingY: "compact",
10324
- borderTop: { width: "none" }
10325
- }
10326
- };
10327
- }
10328
- /**
10329
- * Back-compat alias for the previous default footer Look. It keeps existing
10330
- * persisted selections valid while staying hidden from the new layout/style UI.
10331
- */
10332
- function mutedGroundingFooter(theme) {
10333
- return {
10334
- ...identityQuietFooter(theme),
10335
- background: theme.footer.background,
10336
- navStyle: theme.footer.navStyle,
10337
- navColor: theme.footer.navColor,
10338
- navWeight: theme.footer.navWeight,
10339
- navLinkStyle: theme.footer.navLinkStyle,
10340
- bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
10341
- };
10342
- }
10343
- /** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
10344
- function brandTwoBandFooter(theme) {
10345
- return {
10346
- ...theme.footer,
10347
- variant: "split",
10348
- maxWidth: "container",
10349
- background: {
10350
- type: "color",
10351
- color: "primary-800"
10352
- },
10353
- navStyle: "minimal",
10354
- navWeight: "medium",
10355
- navColor: "primaryForeground",
10356
- navLinkStyle: {
10357
- typography: "body",
10358
- fontWeight: "medium",
10359
- textTransform: "none",
10360
- italic: false,
10361
- colorToken: "primaryForeground",
10362
- hoverColorToken: "secondary",
10363
- padding: "none",
10364
- borderRadius: "none"
10365
- },
10366
- bottomTextLinkStyle: {
10367
- colorToken: "secondary",
10368
- decorationColorToken: "secondary"
10369
- },
10370
- navLayout: {
10371
- layout: "inline-wrap",
10372
- align: "start",
10373
- gapX: "default",
10374
- gapY: "tight"
10375
- },
10376
- logo: {
10377
- showLogo: true,
10378
- showLogoText: false,
10379
- placement: "left",
10380
- size: "sm",
10381
- align: "start"
10280
+ structure: "centered-stack",
10281
+ treatment: "light-serif",
10282
+ behavior: "normal-flow"
10382
10283
  },
10383
- bottomBar: {
10384
- enabled: true,
10385
- fullBleed: true,
10386
- background: {
10387
- type: "color",
10388
- color: "primary-900"
10389
- },
10390
- textColor: "primaryForeground",
10391
- textAlign: "center",
10392
- paddingX: "default",
10393
- paddingY: "compact",
10394
- borderTop: { width: "none" }
10395
- }
10396
- };
10397
- }
10398
- /**
10399
- * Centered stack on a softly tinted band: logo, inline nav, address, and a
10400
- * hairline-topped copyright line, all centered.
10401
- */
10402
- function centeredCalmFooter(theme) {
10403
- return {
10404
- ...theme.footer,
10405
- variant: "simple",
10406
- maxWidth: "container",
10407
- background: {
10408
- type: "color",
10409
- color: "surfaceAlt"
10284
+ openingRequirement: "none",
10285
+ maxRecommendedNavItems: 5,
10286
+ logoAccommodations: centeredLogoAccommodations,
10287
+ compile: centeredCalmHeader
10288
+ },
10289
+ {
10290
+ id: asHeaderLookId("practical-utility"),
10291
+ label: "Practical utility",
10292
+ visualTreatment: "solid-neutral",
10293
+ layoutBehavior: "sticky-shrink",
10294
+ configuration: {
10295
+ structure: "inline-classic",
10296
+ treatment: "solid-neutral",
10297
+ behavior: "sticky-shrink"
10410
10298
  },
10411
- navStyle: "minimal",
10412
- navWeight: "regular",
10413
- navColor: "text",
10414
- navLinkStyle: {
10415
- typography: "body",
10416
- fontWeight: "regular",
10417
- textTransform: "none",
10418
- italic: false,
10419
- colorToken: "text",
10420
- hoverColorToken: "primary",
10421
- padding: "none",
10422
- borderRadius: "none"
10299
+ openingRequirement: "none",
10300
+ requiresProminentCta: true,
10301
+ logoAccommodations: inlineClassicLogoAccommodations,
10302
+ compile: practicalUtilityHeader
10303
+ },
10304
+ {
10305
+ id: asHeaderLookId("minimal-transparent"),
10306
+ label: "Minimal transparent",
10307
+ visualTreatment: "minimal-transparent",
10308
+ layoutBehavior: "normal-flow",
10309
+ configuration: {
10310
+ structure: "inline-classic",
10311
+ treatment: "minimal-transparent",
10312
+ behavior: "normal-flow"
10423
10313
  },
10424
- navLayout: {
10425
- layout: "inline-wrap",
10426
- align: "center",
10427
- gapX: "relaxed",
10428
- gapY: "tight"
10314
+ openingRequirement: "reserved-space-ok",
10315
+ logoAccommodations: inlineClassicLogoAccommodations,
10316
+ compile: minimalTransparentHeader
10317
+ },
10318
+ {
10319
+ id: asHeaderLookId("transparent-overlay"),
10320
+ label: "Transparent overlay",
10321
+ visualTreatment: "transparent-overlay",
10322
+ layoutBehavior: "fixed-overlay",
10323
+ configuration: {
10324
+ structure: "inline-classic",
10325
+ treatment: "transparent-overlay",
10326
+ behavior: "fixed-overlay"
10429
10327
  },
10430
- logo: {
10431
- showLogo: true,
10432
- showLogoText: false,
10433
- placement: "above",
10434
- size: "sm",
10435
- align: "center"
10328
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10329
+ maxRecommendedNavItems: 5,
10330
+ logoAccommodations: overlayLogoAccommodations,
10331
+ compile: transparentOverlayHeader
10332
+ },
10333
+ {
10334
+ id: asHeaderLookId("floating-glass"),
10335
+ label: "Floating glass",
10336
+ visualTreatment: "floating-glass",
10337
+ layoutBehavior: "fixed-floating",
10338
+ configuration: {
10339
+ structure: "floating-shell",
10340
+ treatment: "floating-glass",
10341
+ behavior: "fixed-floating"
10436
10342
  },
10437
- bottomBar: {
10438
- enabled: true,
10439
- fullBleed: false,
10440
- textAlign: "center",
10441
- paddingX: "default",
10442
- paddingY: "compact",
10443
- borderTop: { width: "thin" }
10444
- }
10445
- };
10343
+ openingRequirement: "requires-image-hero-with-contrast-overlay",
10344
+ maxRecommendedNavItems: 5,
10345
+ logoAccommodations: overlayLogoAccommodations,
10346
+ compile: floatingGlassHeader
10347
+ }
10348
+ ]);
10349
+ new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
10350
+ new Map(headerLookCatalog.map((look) => [look.id, look]));
10351
+ function headerConfigurationKey(configuration) {
10352
+ return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
10353
+ }
10354
+ //#endregion
10355
+ //#region ../theme-core/src/site-styles/footerLooks.ts
10356
+ function asFooterLookId(value) {
10357
+ return value;
10446
10358
  }
10447
- /** Editorial split footer: compact nav on one side, brand signoff on the other. */
10448
- function splitEditorialFooter(theme) {
10359
+ function quietFooterLinks(theme) {
10449
10360
  return {
10450
10361
  ...theme.footer,
10451
- variant: "split",
10452
- maxWidth: "container",
10453
- background: {
10454
- type: "color",
10455
- color: "surface"
10456
- },
10457
10362
  navStyle: "minimal",
10458
10363
  navWeight: "regular",
10459
10364
  navColor: "text",
@@ -10466,120 +10371,38 @@ function splitEditorialFooter(theme) {
10466
10371
  hoverColorToken: "primary",
10467
10372
  padding: "none",
10468
10373
  borderRadius: "none"
10469
- },
10470
- navLayout: {
10471
- layout: "inline-wrap",
10472
- align: "start",
10473
- gapX: "relaxed",
10474
- gapY: "tight"
10475
- },
10476
- logo: {
10477
- showLogo: true,
10478
- showLogoText: true,
10479
- placement: "right",
10480
- size: "sm",
10481
- align: "end"
10482
- },
10483
- bottomBar: {
10484
- enabled: true,
10485
- fullBleed: false,
10486
- textAlign: "left",
10487
- paddingX: "default",
10488
- paddingY: "compact",
10489
- borderTop: { width: "thin" }
10490
10374
  }
10491
10375
  };
10492
10376
  }
10493
- /**
10494
- * Editorial columns: site name and supporting copy on the left, inline nav on
10495
- * the right, with a hairline-topped bottom line. Uses the footer block's
10496
- * columns layout.
10497
- */
10498
- function editorialColumnsFooter(theme) {
10377
+ function emphasizedFooterLinks(theme) {
10499
10378
  return {
10500
10379
  ...theme.footer,
10501
- variant: "columns",
10502
- maxWidth: "container",
10503
- background: {
10504
- type: "color",
10505
- color: "surface"
10506
- },
10507
10380
  navStyle: "minimal",
10508
- navWeight: "regular",
10381
+ navWeight: "medium",
10509
10382
  navColor: "text",
10510
10383
  navLinkStyle: {
10511
10384
  typography: "body",
10512
- fontWeight: "regular",
10385
+ fontWeight: "medium",
10513
10386
  textTransform: "none",
10514
10387
  italic: false,
10515
10388
  colorToken: "text",
10516
10389
  hoverColorToken: "primary",
10517
10390
  padding: "none",
10518
10391
  borderRadius: "none"
10519
- },
10520
- logo: {
10521
- showLogo: true,
10522
- showLogoText: true,
10523
- placement: "left",
10524
- size: "sm",
10525
- align: "start"
10526
- },
10527
- bottomBar: {
10528
- enabled: true,
10529
- fullBleed: false,
10530
- textAlign: "center",
10531
- paddingX: "default",
10532
- paddingY: "compact",
10533
- borderTop: { width: "thin" }
10534
10392
  }
10535
10393
  };
10536
10394
  }
10537
- const footerLookCatalog = defineExactCatalog()([
10538
- {
10539
- id: asFooterLookId("footer-identity-quiet"),
10540
- label: "Identity footer",
10541
- layoutId: asFooterLayoutId("identity"),
10542
- styleId: asFooterStyleId("quiet"),
10543
- compile: identityQuietFooter
10544
- },
10545
- {
10546
- id: asFooterLookId("footer-muted-grounding"),
10547
- label: "Muted grounding footer",
10548
- layoutId: asFooterLayoutId("identity"),
10549
- styleId: asFooterStyleId("quiet"),
10550
- hiddenFromLayoutStyleControls: true,
10551
- compile: mutedGroundingFooter
10552
- },
10553
- {
10554
- id: asFooterLookId("footer-centered-calm"),
10555
- label: "Centered calm footer",
10556
- layoutId: asFooterLayoutId("centered"),
10557
- styleId: asFooterStyleId("calm"),
10558
- compile: centeredCalmFooter
10559
- },
10560
- {
10561
- id: asFooterLookId("footer-split-editorial"),
10562
- label: "Split editorial footer",
10563
- layoutId: asFooterLayoutId("split"),
10564
- styleId: asFooterStyleId("editorial"),
10565
- compile: splitEditorialFooter
10566
- },
10567
- {
10568
- id: asFooterLookId("footer-editorial-columns"),
10569
- label: "Editorial columns footer",
10570
- layoutId: asFooterLayoutId("columns"),
10571
- styleId: asFooterStyleId("editorial"),
10572
- compile: editorialColumnsFooter
10573
- },
10574
- {
10575
- id: asFooterLookId("site-footer-brand-two-band"),
10576
- label: "Two-band brand footer",
10577
- layoutId: asFooterLayoutId("split"),
10578
- styleId: asFooterStyleId("brand-band"),
10579
- allowedContentPresence: ["default-footer", "default-and-blocks"],
10580
- compile: brandTwoBandFooter
10581
- }
10582
- ]);
10395
+ const footerLookCatalog = defineExactCatalog()([{
10396
+ id: asFooterLookId("footer-links-quiet"),
10397
+ label: "Quiet links",
10398
+ description: "Regular-weight footer navigation with a restrained hover.",
10399
+ compile: quietFooterLinks
10400
+ }, {
10401
+ id: asFooterLookId("footer-links-emphasized"),
10402
+ label: "Emphasized links",
10403
+ description: "Medium-weight footer navigation with a clearer emphasis.",
10404
+ compile: emphasizedFooterLinks
10405
+ }]);
10583
10406
  new Map(footerLookCatalog.map((look) => [look.id, look]));
10584
10407
  //#endregion
10585
10408
  //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -11708,17 +11531,21 @@ function defineCuratedSiteStyle(input) {
11708
11531
  })),
11709
11532
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
11710
11533
  recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
11711
- buttonPersonalityChoices: input.buttonPersonalityChoices,
11534
+ buttonStyleChoices: input.buttonStyleChoices,
11712
11535
  paletteRecommendations: input.paletteRecommendations,
11713
11536
  typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
11714
11537
  ...input.heroTypography ? { heroTypography: input.heroTypography } : {}
11715
11538
  };
11716
11539
  }
11717
- function buttonChoice(id, note) {
11540
+ function buttonChoice(styleId, note, parameters) {
11541
+ const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
11542
+ styleId,
11543
+ parameters
11544
+ });
11718
11545
  return note ? {
11719
- id: asButtonPersonalityId(id),
11546
+ ...selection,
11720
11547
  note
11721
- } : { id: asButtonPersonalityId(id) };
11548
+ } : selection;
11722
11549
  }
11723
11550
  function paletteRecommendation(authoringKey, note) {
11724
11551
  const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -11903,9 +11730,8 @@ const curatedSiteStyles = [
11903
11730
  "minimal-transparent",
11904
11731
  "clean-base"
11905
11732
  ],
11906
- buttonPersonalityChoices: [
11733
+ buttonStyleChoices: [
11907
11734
  buttonChoice("soft-pill"),
11908
- buttonChoice("two-tone-pill"),
11909
11735
  buttonChoice("pebble"),
11910
11736
  buttonChoice("editorial-link"),
11911
11737
  buttonChoice("brushed-wash")
@@ -11941,7 +11767,7 @@ const curatedSiteStyles = [
11941
11767
  "brand-solid",
11942
11768
  "clean-base"
11943
11769
  ],
11944
- buttonPersonalityChoices: [
11770
+ buttonStyleChoices: [
11945
11771
  buttonChoice("confident-chip"),
11946
11772
  buttonChoice("soft-pill"),
11947
11773
  buttonChoice("editorial-link")
@@ -11980,7 +11806,7 @@ const curatedSiteStyles = [
11980
11806
  "minimal-transparent",
11981
11807
  "centered-calm"
11982
11808
  ],
11983
- buttonPersonalityChoices: [
11809
+ buttonStyleChoices: [
11984
11810
  buttonChoice("editorial-link"),
11985
11811
  buttonChoice("soft-pill"),
11986
11812
  buttonChoice("brushed-wash")
@@ -12020,7 +11846,7 @@ const curatedSiteStyles = [
12020
11846
  "practical-utility",
12021
11847
  "clean-base"
12022
11848
  ],
12023
- buttonPersonalityChoices: [
11849
+ buttonStyleChoices: [
12024
11850
  buttonChoice("pebble"),
12025
11851
  buttonChoice("brushed-wash"),
12026
11852
  buttonChoice("confident-chip")
@@ -12081,7 +11907,7 @@ const curatedSiteStyles = [
12081
11907
  "serif-line",
12082
11908
  "clean-base"
12083
11909
  ],
12084
- buttonPersonalityChoices: [
11910
+ buttonStyleChoices: [
12085
11911
  buttonChoice("editorial-link"),
12086
11912
  buttonChoice("confident-chip"),
12087
11913
  buttonChoice("soft-pill")
@@ -12143,7 +11969,7 @@ const curatedSiteStyles = [
12143
11969
  "brand-solid",
12144
11970
  "clean-base"
12145
11971
  ],
12146
- buttonPersonalityChoices: [
11972
+ buttonStyleChoices: [
12147
11973
  buttonChoice("confident-chip"),
12148
11974
  buttonChoice("pebble"),
12149
11975
  buttonChoice("ink-stamp")
@@ -12182,7 +12008,7 @@ const curatedSiteStyles = [
12182
12008
  "minimal-transparent",
12183
12009
  "clean-base"
12184
12010
  ],
12185
- buttonPersonalityChoices: [
12011
+ buttonStyleChoices: [
12186
12012
  buttonChoice("soft-pill"),
12187
12013
  buttonChoice("pebble"),
12188
12014
  buttonChoice("confident-chip")
@@ -12255,7 +12081,7 @@ const curatedSiteStyles = [
12255
12081
  "clean-base",
12256
12082
  "centered-calm"
12257
12083
  ],
12258
- buttonPersonalityChoices: [
12084
+ buttonStyleChoices: [
12259
12085
  buttonChoice("pebble"),
12260
12086
  buttonChoice("soft-pill"),
12261
12087
  buttonChoice("editorial-link")
@@ -12374,12 +12200,8 @@ const curatedSiteStyles = [
12374
12200
  "serif-line",
12375
12201
  "minimal-transparent"
12376
12202
  ],
12377
- recommendedFooterLookIds: [
12378
- "footer-centered-calm",
12379
- "footer-editorial-columns",
12380
- "footer-muted-grounding"
12381
- ],
12382
- buttonPersonalityChoices: [
12203
+ recommendedFooterLookIds: ["footer-links-quiet"],
12204
+ buttonStyleChoices: [
12383
12205
  buttonChoice("soft-pill"),
12384
12206
  buttonChoice("pebble"),
12385
12207
  buttonChoice("editorial-link")
@@ -12453,7 +12275,7 @@ const curatedSiteStyles = [
12453
12275
  "centered-calm",
12454
12276
  "minimal-transparent"
12455
12277
  ],
12456
- buttonPersonalityChoices: [
12278
+ buttonStyleChoices: [
12457
12279
  buttonChoice("editorial-link"),
12458
12280
  buttonChoice("soft-pill"),
12459
12281
  buttonChoice("brushed-wash")
@@ -12526,8 +12348,8 @@ const curatedSiteStyles = [
12526
12348
  "practical-utility",
12527
12349
  "clean-base"
12528
12350
  ],
12529
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12530
- buttonPersonalityChoices: [
12351
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12352
+ buttonStyleChoices: [
12531
12353
  buttonChoice("pebble"),
12532
12354
  buttonChoice("confident-chip"),
12533
12355
  buttonChoice("ink-stamp"),
@@ -12648,8 +12470,8 @@ const curatedSiteStyles = [
12648
12470
  "minimal-transparent",
12649
12471
  "serif-line"
12650
12472
  ],
12651
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
12652
- buttonPersonalityChoices: [
12473
+ recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
12474
+ buttonStyleChoices: [
12653
12475
  buttonChoice("earth-pill"),
12654
12476
  buttonChoice("soft-pill"),
12655
12477
  buttonChoice("pebble"),
@@ -12720,7 +12542,7 @@ const curatedSiteStyles = [
12720
12542
  "floating-glass",
12721
12543
  "brand-solid"
12722
12544
  ],
12723
- buttonPersonalityChoices: [
12545
+ buttonStyleChoices: [
12724
12546
  buttonChoice("ink-stamp"),
12725
12547
  buttonChoice("confident-chip"),
12726
12548
  buttonChoice("brushed-wash"),
@@ -12775,8 +12597,8 @@ const curatedSiteStyles = [
12775
12597
  "transparent-overlay",
12776
12598
  "practical-utility"
12777
12599
  ],
12778
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12779
- buttonPersonalityChoices: [
12600
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12601
+ buttonStyleChoices: [
12780
12602
  buttonChoice("showtime-pill"),
12781
12603
  buttonChoice("confident-chip"),
12782
12604
  buttonChoice("ink-stamp"),
@@ -12857,8 +12679,8 @@ const curatedSiteStyles = [
12857
12679
  headerStyleChoice("glass")
12858
12680
  ] },
12859
12681
  recommendedHeaderLookIds: ["minimal-transparent"],
12860
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12861
- buttonPersonalityChoices: [
12682
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12683
+ buttonStyleChoices: [
12862
12684
  buttonChoice("ornate-ritual"),
12863
12685
  buttonChoice("joy-stamp"),
12864
12686
  buttonChoice("ink-stamp")
@@ -12911,8 +12733,8 @@ const curatedSiteStyles = [
12911
12733
  headerStyleChoice("glass")
12912
12734
  ] },
12913
12735
  recommendedHeaderLookIds: ["minimal-transparent"],
12914
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
12915
- buttonPersonalityChoices: [
12736
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
12737
+ buttonStyleChoices: [
12916
12738
  buttonChoice("joy-stamp"),
12917
12739
  buttonChoice("ink-stamp"),
12918
12740
  buttonChoice("showtime-pill")
@@ -13002,8 +12824,8 @@ const curatedSiteStyles = [
13002
12824
  "centered-calm",
13003
12825
  "clean-base"
13004
12826
  ],
13005
- recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
13006
- buttonPersonalityChoices: [
12827
+ recommendedFooterLookIds: ["footer-links-quiet"],
12828
+ buttonStyleChoices: [
13007
12829
  buttonChoice("flat-ink"),
13008
12830
  buttonChoice("confident-chip"),
13009
12831
  buttonChoice("editorial-link")
@@ -13080,14 +12902,9 @@ const curatedSiteStyles = [
13080
12902
  "serif-line",
13081
12903
  "clean-base"
13082
12904
  ],
13083
- recommendedFooterLookIds: [
13084
- "footer-editorial-columns",
13085
- "footer-muted-grounding",
13086
- "footer-identity-quiet"
13087
- ],
13088
- buttonPersonalityChoices: [
13089
- buttonChoice("quiet-arrow"),
13090
- buttonChoice("two-tone-pill"),
12905
+ recommendedFooterLookIds: ["footer-links-quiet"],
12906
+ buttonStyleChoices: [
12907
+ buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
13091
12908
  buttonChoice("flat-ink"),
13092
12909
  buttonChoice("editorial-link")
13093
12910
  ],
@@ -17326,25 +17143,41 @@ const heroLayoutControlsFragment = defineFragment({
17326
17143
  layout: []
17327
17144
  });
17328
17145
  //#endregion
17146
+ //#region ../blocks/src/system/constants/buttonRoles.ts
17147
+ /**
17148
+ * Semantic button roles available to block authors.
17149
+ *
17150
+ * These roles are deliberately independent of a site's visual button style:
17151
+ * the active theme owns how each role looks.
17152
+ */
17153
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
17154
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
17155
+ /**
17156
+ * Temporary rollout boundary for persisted content written before issue #1220.
17157
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
17158
+ * only until the post-deploy role rewrite has been audited in production.
17159
+ */
17160
+ function canonicalizePersistedBlockButtonRole(value) {
17161
+ return value === "link" || value === "tertiary" ? "ghost" : value;
17162
+ }
17163
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
17164
+ const BLOCK_BUTTON_ROLE_LABELS = {
17165
+ primary: "Primary",
17166
+ secondary: "Secondary",
17167
+ outline: "Outline",
17168
+ ghost: "Ghost",
17169
+ accent: "Accent"
17170
+ };
17171
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
17172
+ value,
17173
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
17174
+ }));
17175
+ function isBlockButtonRole(value) {
17176
+ return blockButtonRoleSchema.safeParse(value).success;
17177
+ }
17178
+ //#endregion
17329
17179
  //#region ../blocks/src/system/fields/button.ts
17330
- const DEFAULT_THEME_BUTTON_VARIANTS = [
17331
- {
17332
- value: "primary",
17333
- label: "Primary"
17334
- },
17335
- {
17336
- value: "secondary",
17337
- label: "Secondary"
17338
- },
17339
- {
17340
- value: "outline",
17341
- label: "Outline"
17342
- },
17343
- {
17344
- value: "link",
17345
- label: "Link"
17346
- }
17347
- ];
17180
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
17348
17181
  function createButtonVariantField(options = {}) {
17349
17182
  return {
17350
17183
  id: options.id ?? "buttonVariant",
@@ -17362,20 +17195,7 @@ function createButtonVariantField(options = {}) {
17362
17195
  };
17363
17196
  }
17364
17197
  function createButtonGroup(options = {}) {
17365
- const { variants = [
17366
- {
17367
- value: "primary",
17368
- label: "Primary"
17369
- },
17370
- {
17371
- value: "secondary",
17372
- label: "Secondary"
17373
- },
17374
- {
17375
- value: "outline",
17376
- label: "Outline"
17377
- }
17378
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17198
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17379
17199
  const mainFields = [
17380
17200
  {
17381
17201
  id: "label",
@@ -17511,29 +17331,7 @@ const ctaRowFragment = defineFragment({
17511
17331
  fields: [createCtasRepeater({
17512
17332
  label: "Calls to action",
17513
17333
  itemLabel: "CTA",
17514
- maxItems: 3,
17515
- button: { variants: [
17516
- {
17517
- value: "primary",
17518
- label: "Primary"
17519
- },
17520
- {
17521
- value: "secondary",
17522
- label: "Secondary"
17523
- },
17524
- {
17525
- value: "outline",
17526
- label: "Outline"
17527
- },
17528
- {
17529
- value: "link",
17530
- label: "Link"
17531
- },
17532
- {
17533
- value: "accent",
17534
- label: "Accent"
17535
- }
17536
- ] }
17334
+ maxItems: 3
17537
17335
  })],
17538
17336
  layout: [ctaRow({
17539
17337
  collectionPath: "content.ctas",
@@ -17552,10 +17350,6 @@ const heroCtaRowFragment = defineFragment({
17552
17350
  defaultValue: [],
17553
17351
  button: {
17554
17352
  variants: [
17555
- {
17556
- value: "default",
17557
- label: "Default"
17558
- },
17559
17353
  {
17560
17354
  value: "primary",
17561
17355
  label: "Primary"
@@ -17567,9 +17361,17 @@ const heroCtaRowFragment = defineFragment({
17567
17361
  {
17568
17362
  value: "outline",
17569
17363
  label: "Outline"
17364
+ },
17365
+ {
17366
+ value: "ghost",
17367
+ label: "Ghost"
17368
+ },
17369
+ {
17370
+ value: "accent",
17371
+ label: "Accent"
17570
17372
  }
17571
17373
  ],
17572
- defaultVariant: "default",
17374
+ defaultVariant: "primary",
17573
17375
  includeSize: true,
17574
17376
  defaultSize: "lg"
17575
17377
  }
@@ -18260,11 +18062,13 @@ const blogFeaturedPostFragment = defineFragment({
18260
18062
  as: "p",
18261
18063
  style: textColorStyle("text/80")
18262
18064
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
18263
- link({
18264
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
18265
- style: textColorStyle("primary"),
18266
- href: { $bind: { from: "post.path" } }
18267
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
18065
+ button({
18066
+ className: "rb-self-start",
18067
+ href: { $bind: { from: "post.path" } },
18068
+ variantId: "ghost",
18069
+ size: "sm",
18070
+ linkRequired: true
18071
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
18268
18072
  ])], when("post")), stack({
18269
18073
  gap: "sm",
18270
18074
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -18535,21 +18339,7 @@ const newsletterFormFragment = defineFragment({
18535
18339
  createButtonVariantField({
18536
18340
  id: "buttonVariant",
18537
18341
  label: "Button style",
18538
- defaultValue: "primary",
18539
- variants: [
18540
- {
18541
- value: "primary",
18542
- label: "Primary"
18543
- },
18544
- {
18545
- value: "secondary",
18546
- label: "Secondary"
18547
- },
18548
- {
18549
- value: "outline",
18550
- label: "Outline"
18551
- }
18552
- ]
18342
+ defaultValue: "primary"
18553
18343
  }),
18554
18344
  {
18555
18345
  id: "successMessage",
@@ -20098,7 +19888,8 @@ function postExcerpt(className) {
20098
19888
  function postReadMore() {
20099
19889
  return button({
20100
19890
  href: { $bind: { from: "post.path" } },
20101
- className: "rb-self-start"
19891
+ className: "rb-self-start",
19892
+ variantId: "ghost"
20102
19893
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
20103
19894
  as: "span",
20104
19895
  value: "Read more"
@@ -23680,31 +23471,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
23680
23471
  label: "Calls to action",
23681
23472
  itemLabel: "CTA",
23682
23473
  maxItems: 1,
23683
- button: {
23684
- variants: [
23685
- {
23686
- value: "primary",
23687
- label: "Primary"
23688
- },
23689
- {
23690
- value: "secondary",
23691
- label: "Secondary"
23692
- },
23693
- {
23694
- value: "outline",
23695
- label: "Outline"
23696
- },
23697
- {
23698
- value: "ghost",
23699
- label: "Ghost"
23700
- },
23701
- {
23702
- value: "link",
23703
- label: "Link"
23704
- }
23705
- ],
23706
- defaultVariant: "ghost"
23707
- }
23474
+ button: { defaultVariant: "ghost" }
23708
23475
  })
23709
23476
  ] }
23710
23477
  },
@@ -25797,17 +25564,8 @@ function readAmount(value) {
25797
25564
  //#endregion
25798
25565
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
25799
25566
  const previewStageSchema = z$1.enum(["preview", "published"]);
25800
- const registrationButtonVariantSchema = z$1.enum([
25801
- "primary",
25802
- "secondary",
25803
- "outline"
25804
- ]);
25805
- const eventButtonVariantSchema = z$1.enum([
25806
- "primary",
25807
- "secondary",
25808
- "outline",
25809
- "link"
25810
- ]);
25567
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
25568
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
25811
25569
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
25812
25570
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
25813
25571
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -26172,23 +25930,7 @@ const eventRegistrationBlockDefinition = {
26172
25930
  defaultValue: "Complete Registration",
26173
25931
  maxLength: 40
26174
25932
  },
26175
- createButtonVariantField({
26176
- description: "Choose a button style from your theme",
26177
- variants: [
26178
- {
26179
- value: "primary",
26180
- label: "Primary"
26181
- },
26182
- {
26183
- value: "secondary",
26184
- label: "Secondary"
26185
- },
26186
- {
26187
- value: "outline",
26188
- label: "Outline"
26189
- }
26190
- ]
26191
- })
25933
+ createButtonVariantField()
26192
25934
  ],
26193
25935
  layout: [styledSection({
26194
25936
  baseClass: "",
@@ -26495,23 +26237,7 @@ const courseRegistrationBlockDefinition = {
26495
26237
  defaultValue: "Sign up",
26496
26238
  maxLength: 40
26497
26239
  },
26498
- createButtonVariantField({
26499
- description: "Choose a button style from your theme",
26500
- variants: [
26501
- {
26502
- value: "primary",
26503
- label: "Primary"
26504
- },
26505
- {
26506
- value: "secondary",
26507
- label: "Secondary"
26508
- },
26509
- {
26510
- value: "outline",
26511
- label: "Outline"
26512
- }
26513
- ]
26514
- })
26240
+ createButtonVariantField()
26515
26241
  ],
26516
26242
  layout: [styledSection({
26517
26243
  baseClass: "",
@@ -29600,36 +29326,7 @@ const offeringsPreviewFields = [
29600
29326
  ui: { intent: "content" },
29601
29327
  schema: { fields: groupOverrideFields }
29602
29328
  },
29603
- {
29604
- id: "buttonVariant",
29605
- type: "select",
29606
- label: "Button style",
29607
- required: false,
29608
- multiple: false,
29609
- defaultValue: "primary",
29610
- options: [
29611
- {
29612
- value: "primary",
29613
- label: "Primary"
29614
- },
29615
- {
29616
- value: "secondary",
29617
- label: "Secondary"
29618
- },
29619
- {
29620
- value: "outline",
29621
- label: "Outline"
29622
- },
29623
- {
29624
- value: "link",
29625
- label: "Link"
29626
- }
29627
- ],
29628
- ui: {
29629
- intent: "display",
29630
- widget: "buttonVariant"
29631
- }
29632
- },
29329
+ createButtonVariantField(),
29633
29330
  {
29634
29331
  id: "buttonText",
29635
29332
  type: "text",
@@ -29835,7 +29532,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
29835
29532
  return [override];
29836
29533
  }
29837
29534
  function isButtonVariant(value) {
29838
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
29535
+ return value === null || isBlockButtonRole(value);
29839
29536
  }
29840
29537
  function normalizeCardStylesContent(value) {
29841
29538
  return isRecord$3(value) || value === null ? value : void 0;
@@ -31687,12 +31384,7 @@ const shopSourceSchema = z$1.object({
31687
31384
  showPrices: z$1.boolean().optional(),
31688
31385
  showValidityPeriod: z$1.boolean().optional(),
31689
31386
  showPricePerCredit: z$1.boolean().nullable().optional(),
31690
- buttonVariant: z$1.enum([
31691
- "primary",
31692
- "secondary",
31693
- "outline",
31694
- "link"
31695
- ]).optional(),
31387
+ buttonVariant: blockButtonRoleSchema.optional(),
31696
31388
  passesHeading: z$1.string().optional(),
31697
31389
  membershipsHeading: z$1.string().optional(),
31698
31390
  buyButtonText: z$1.string().optional(),
@@ -31837,12 +31529,7 @@ const passesMembershipsHydrationSchema = z$1.object({
31837
31529
  passes: z$1.array(publicPassProductSchema),
31838
31530
  memberships: z$1.array(publicMembershipProductSchema),
31839
31531
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
31840
- buttonVariant: z$1.enum([
31841
- "primary",
31842
- "secondary",
31843
- "outline",
31844
- "link"
31845
- ])
31532
+ buttonVariant: blockButtonRoleSchema
31846
31533
  });
31847
31534
  const productListHydrationSchema = z$1.object({
31848
31535
  products: z$1.array(publicProductSchema),
@@ -33166,11 +32853,7 @@ const newsletterPresetSchema = z$1.enum([
33166
32853
  "emailNameCompany"
33167
32854
  ]);
33168
32855
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
33169
- const newsletterButtonVariantSchema = z$1.enum([
33170
- "primary",
33171
- "secondary",
33172
- "outline"
33173
- ]);
32856
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
33174
32857
  const newsletterFieldSchema = z$1.object({
33175
32858
  id: z$1.string(),
33176
32859
  type: z$1.enum(["email", "text"]),