@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
@@ -53,7 +53,7 @@ const TAG_TEMPLATES = {
53
53
  blockedDemoMutationPolicy("blocked-hidden", "This action is not available in demo sites.");
54
54
  blockedDemoMutationPolicy("blocked-disabled", "This setting is disabled in demo sites.");
55
55
  blockedDemoMutationPolicy("internal-only", "This internal operation is not available in demo sites.");
56
- 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;
56
+ 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;
57
57
  //#endregion
58
58
  //#region ../core/src/result.ts
59
59
  function ok(value) {
@@ -3739,7 +3739,7 @@ const gradientDirectionSchema$1 = z$1.enum([
3739
3739
  "to-br",
3740
3740
  "to-bl"
3741
3741
  ]);
3742
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3742
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
3743
3743
  z$1.object({
3744
3744
  type: z$1.literal("solid"),
3745
3745
  colorToken: opaqueButtonColourTokenSchema
@@ -3763,6 +3763,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
3763
3763
  role: z$1.literal("link")
3764
3764
  })
3765
3765
  ]);
3766
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
3766
3767
  const effectApplicationSchema$1 = z$1.object({
3767
3768
  effectId: z$1.string(),
3768
3769
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -3975,265 +3976,429 @@ function isUnknownArray(value) {
3975
3976
  }
3976
3977
  buttonSizeNameSchema.options;
3977
3978
  //#endregion
3978
- //#region ../theme-core/src/buttons/personalities/types.ts
3979
- function asButtonPersonalityId(value) {
3980
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
3981
- return value;
3979
+ //#region ../theme-core/src/buttons/styles/domain.ts
3980
+ const PUBLIC_BUTTON_ROLES = [
3981
+ "primary",
3982
+ "secondary",
3983
+ "outline",
3984
+ "ghost",
3985
+ "accent"
3986
+ ];
3987
+ function defineButtonStyleRecipe(recipe) {
3988
+ return recipe;
3989
+ }
3990
+ function materializeButtonRoles(definitions) {
3991
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
3992
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
3993
+ const completeRoles = {
3994
+ primary,
3995
+ secondary
3996
+ };
3997
+ return {
3998
+ primary,
3999
+ secondary,
4000
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
4001
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
4002
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
4003
+ };
3982
4004
  }
3983
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
3984
- z$1.object({
3985
- id: buttonPersonalityIdSchema,
3986
- name: z$1.string().min(1),
3987
- description: z$1.string().min(1),
3988
- tags: styleTagsSchema,
3989
- buttonSystem: buttonSystemSchema
3990
- });
3991
- /**
3992
- * Helper for personality file modules to keep the call site short and
3993
- * type-safe. `as const satisfies ...` would also work but produces wider
3994
- * types at use sites.
3995
- */
3996
- function defineButtonPersonality(input) {
4005
+ function resolveButtonStyleRecipe(recipe, parameters) {
4006
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
4007
+ if (!parsedParameters.success) return {
4008
+ kind: "error",
4009
+ error: {
4010
+ kind: "invalid-parameters",
4011
+ styleId: recipe.id,
4012
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
4013
+ }
4014
+ };
4015
+ const definition = recipe.defineSystem(parsedParameters.data);
4016
+ const roles = materializeButtonRoles(definition.roles);
4017
+ const buttonSystem = {
4018
+ global: definition.global,
4019
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
4020
+ ...definition.sizes ? { sizes: definition.sizes } : {}
4021
+ };
4022
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
4023
+ if (!parsedButtonSystem.success) return {
4024
+ kind: "error",
4025
+ error: {
4026
+ kind: "invalid-button-system",
4027
+ styleId: recipe.id,
4028
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
4029
+ }
4030
+ };
3997
4031
  return {
3998
- id: asButtonPersonalityId(input.id),
3999
- name: input.name,
4000
- description: input.description,
4001
- tags: input.tags,
4002
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
4032
+ kind: "resolved",
4033
+ buttonSystem: parsedButtonSystem.data
4034
+ };
4035
+ }
4036
+ function materializeSupportingRole(role, definition, completeRoles) {
4037
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
4038
+ return {
4039
+ ...completeRoles[definition.from],
4040
+ ...definition.overrides,
4041
+ id: role,
4042
+ name: roleName(role),
4043
+ enabled: true,
4044
+ priority: 3
4045
+ };
4046
+ }
4047
+ function materializeCompleteRole(role, appearance) {
4048
+ return {
4049
+ ...appearance,
4050
+ id: role,
4051
+ name: roleName(role),
4052
+ enabled: true,
4053
+ priority: rolePriority(role)
4003
4054
  };
4004
4055
  }
4056
+ function roleName(role) {
4057
+ return role.charAt(0).toUpperCase() + role.slice(1);
4058
+ }
4059
+ function rolePriority(role) {
4060
+ if (role === "primary") return 1;
4061
+ if (role === "secondary") return 2;
4062
+ return 3;
4063
+ }
4064
+ //#endregion
4065
+ //#region ../theme-core/src/buttons/styles/selection.ts
4066
+ const BUTTON_STYLE_IDS = [
4067
+ "soft-pill",
4068
+ "earth-pill",
4069
+ "confident-chip",
4070
+ "editorial-link",
4071
+ "pebble",
4072
+ "ink-stamp",
4073
+ "flat-ink",
4074
+ "brushed-wash",
4075
+ "showtime-pill",
4076
+ "joy-stamp",
4077
+ "ornate-ritual",
4078
+ "quiet-arrow"
4079
+ ];
4080
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
4081
+ const emptyParametersSchema$1 = z$1.object({}).strict();
4082
+ function selectionBranch(styleId, parameters) {
4083
+ return z$1.object({
4084
+ styleId: z$1.literal(styleId),
4085
+ parameters
4086
+ }).strict();
4087
+ }
4088
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
4089
+ selectionBranch("soft-pill", emptyParametersSchema$1),
4090
+ selectionBranch("earth-pill", emptyParametersSchema$1),
4091
+ selectionBranch("confident-chip", emptyParametersSchema$1),
4092
+ selectionBranch("editorial-link", emptyParametersSchema$1),
4093
+ selectionBranch("pebble", emptyParametersSchema$1),
4094
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
4095
+ selectionBranch("flat-ink", emptyParametersSchema$1),
4096
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
4097
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
4098
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
4099
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
4100
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
4101
+ ]);
4005
4102
  //#endregion
4006
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
4007
- /**
4008
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
4009
- * Generous padding, soft shadows; pairs with vibrant organic brands.
4010
- */
4011
- const brushedWash = defineButtonPersonality({
4012
- id: "brushed-wash",
4013
- name: "Brushed Wash",
4014
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
4103
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
4104
+ const quietArrowRecipe = defineButtonStyleRecipe({
4105
+ id: "quiet-arrow",
4106
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
4015
4107
  tags: {
4016
4108
  tone: "classic",
4017
- energy: "vibrant",
4018
- motion: "standard",
4019
- era: "organic"
4109
+ energy: "calm",
4110
+ motion: "subtle",
4111
+ era: "editorial"
4020
4112
  },
4021
- buttonSystem: {
4113
+ parameterSchema: quietArrowParametersSchema,
4114
+ defaultParameters: { secondaryTreatment: "outlined" },
4115
+ controls: [{
4116
+ kind: "choice",
4117
+ parameter: "secondaryTreatment",
4118
+ label: "Secondary button treatment",
4119
+ options: [{
4120
+ value: "outlined",
4121
+ label: "Outlined"
4122
+ }, {
4123
+ value: "solid-accent",
4124
+ label: "Solid accent"
4125
+ }]
4126
+ }],
4127
+ defineSystem: (parameters) => ({
4022
4128
  global: {
4023
4129
  cornerStyle: "rounded",
4024
- shadow: "low",
4025
- textTransform: "none",
4130
+ textTransform: "uppercase",
4026
4131
  fontWeight: 500,
4027
4132
  borderWidth: 1,
4133
+ typography: "body",
4134
+ fontSize: "text-sm",
4135
+ letterSpacing: "loose",
4028
4136
  hoverTransform: "none",
4029
4137
  hoverColor: "none"
4030
4138
  },
4031
4139
  sizes: {
4032
4140
  sm: {
4033
- padding: "0.75rem 2rem",
4141
+ padding: "0.625rem 1.25rem",
4142
+ fontSize: "text-xs"
4143
+ },
4144
+ md: {
4145
+ padding: "0.8125rem 1.75rem",
4034
4146
  fontSize: "text-sm"
4035
4147
  },
4036
- md: { padding: "1rem 2.5rem" },
4037
4148
  lg: {
4038
- padding: "1.25rem 3rem",
4039
- fontSize: "text-lg"
4149
+ padding: "0.9375rem 2.125rem",
4150
+ fontSize: "text-sm"
4040
4151
  },
4041
4152
  xl: {
4042
- padding: "1.625rem 3.75rem",
4043
- fontSize: "text-xl"
4153
+ padding: "1.0625rem 2.5rem",
4154
+ fontSize: "text-base"
4044
4155
  }
4045
4156
  },
4046
- variants: [
4047
- {
4048
- id: "primary",
4049
- name: "Primary",
4050
- enabled: true,
4051
- priority: 1,
4052
- background: {
4053
- type: "gradient",
4054
- stops: ["primary", "accent"],
4055
- direction: "to-r",
4056
- foregroundToken: "primaryForeground"
4057
- },
4058
- borderRadius: "rounded-lg",
4059
- shadow: {
4060
- elevation: "low",
4061
- softness: "soft",
4062
- position: "bottom"
4157
+ roles: {
4158
+ primary: {
4159
+ kind: "complete",
4160
+ appearance: {
4161
+ background: {
4162
+ type: "solid",
4163
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
4164
+ },
4165
+ borderRadius: "rounded-xl",
4166
+ affordance: { iconId: "ArrowRight" },
4167
+ effects: { hover: [{
4168
+ effectId: "darken-background",
4169
+ options: { amount: 100 }
4170
+ }] }
4063
4171
  }
4064
4172
  },
4065
- {
4066
- id: "secondary",
4067
- name: "Secondary",
4068
- enabled: true,
4069
- priority: 2,
4070
- background: {
4071
- type: "gradient",
4072
- stops: ["secondary", "accent"],
4073
- direction: "to-br",
4074
- foregroundToken: "primaryForeground"
4075
- },
4076
- borderRadius: "rounded-lg",
4077
- shadow: {
4078
- elevation: "low",
4079
- softness: "soft",
4080
- position: "bottom"
4173
+ secondary: {
4174
+ kind: "complete",
4175
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
4176
+ background: {
4177
+ type: "solid",
4178
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4179
+ },
4180
+ borderRadius: "rounded-xl",
4181
+ affordance: { iconId: "ArrowRight" },
4182
+ effects: { hover: [{
4183
+ effectId: "darken-background",
4184
+ options: { amount: 100 }
4185
+ }] }
4186
+ } : {
4187
+ background: {
4188
+ type: "surface",
4189
+ role: "link"
4190
+ },
4191
+ borderRadius: "rounded-xl",
4192
+ border: { widthClass: "border" },
4193
+ affordance: { iconId: "ArrowRight" },
4194
+ effects: { hover: [{
4195
+ effectId: "background-on-hover",
4196
+ options: { colorToken: "surfaceAlt" }
4197
+ }] }
4081
4198
  }
4082
4199
  },
4083
- {
4084
- id: "outline",
4085
- name: "Outline",
4086
- enabled: true,
4087
- priority: 3,
4088
- background: {
4089
- type: "surface",
4090
- role: "link"
4091
- },
4092
- borderRadius: "rounded-lg",
4093
- border: { widthClass: "border" },
4094
- effects: { hover: [{
4095
- effectId: "background-on-hover",
4096
- options: { colorToken: "surface" }
4097
- }] }
4200
+ outline: {
4201
+ kind: "complete",
4202
+ appearance: {
4203
+ background: {
4204
+ type: "surface",
4205
+ role: "link"
4206
+ },
4207
+ borderRadius: "rounded-xl",
4208
+ border: { widthClass: "border" }
4209
+ }
4098
4210
  },
4099
- {
4100
- id: "ghost",
4101
- name: "Ghost",
4102
- enabled: true,
4103
- priority: 3,
4104
- background: {
4105
- type: "surface",
4106
- role: "link"
4107
- },
4108
- borderRadius: "rounded-lg",
4109
- effects: { hover: [{
4110
- effectId: "background-on-hover",
4111
- options: { colorToken: "surface" }
4112
- }] }
4211
+ ghost: {
4212
+ kind: "complete",
4213
+ appearance: {
4214
+ background: {
4215
+ type: "surface",
4216
+ role: "link"
4217
+ },
4218
+ borderRadius: "rounded-xl"
4219
+ }
4220
+ },
4221
+ accent: {
4222
+ kind: "derive",
4223
+ from: "primary",
4224
+ overrides: { background: {
4225
+ type: "solid",
4226
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
4227
+ } }
4113
4228
  }
4114
- ]
4115
- }
4229
+ }
4230
+ })
4116
4231
  });
4117
4232
  //#endregion
4118
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
4119
- /**
4120
- * Confident Chip — moderate-radius solid buttons that read as competent and
4121
- * direct. Default for Clear Professional; works for any modern brand voice.
4122
- */
4123
- const confidentChip = defineButtonPersonality({
4124
- id: "confident-chip",
4125
- name: "Confident Chip",
4126
- description: "Mid-radius solid buttons with a crisp hover.",
4233
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
4234
+ const emptyParametersSchema = z$1.object({}).strict();
4235
+ function defineStaticButtonStyleRecipe(input) {
4236
+ const system = normalizeSystem(input.system);
4237
+ return defineButtonStyleRecipe({
4238
+ id: input.id,
4239
+ accessibilityLabel: input.accessibilityLabel,
4240
+ tags: input.tags,
4241
+ parameterSchema: emptyParametersSchema,
4242
+ defaultParameters: {},
4243
+ controls: [],
4244
+ defineSystem: () => system
4245
+ });
4246
+ }
4247
+ function normalizeSystem(input) {
4248
+ return {
4249
+ global: buttonGlobalSettingsSchema.parse(input.global),
4250
+ ...input.sizes ? { sizes: input.sizes } : {},
4251
+ roles: {
4252
+ primary: normalizeCompleteRole(input.roles.primary),
4253
+ secondary: normalizeCompleteRole(input.roles.secondary),
4254
+ outline: normalizeSupportingRole(input.roles.outline),
4255
+ ghost: normalizeSupportingRole(input.roles.ghost),
4256
+ accent: normalizeSupportingRole(input.roles.accent)
4257
+ }
4258
+ };
4259
+ }
4260
+ function normalizeCompleteRole(role) {
4261
+ return {
4262
+ kind: "complete",
4263
+ appearance: normalizeAppearance(role.appearance)
4264
+ };
4265
+ }
4266
+ function normalizeSupportingRole(role) {
4267
+ if (role.kind === "complete") return normalizeCompleteRole(role);
4268
+ return {
4269
+ kind: "derive",
4270
+ from: role.from,
4271
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
4272
+ };
4273
+ }
4274
+ function normalizeAppearance(appearance) {
4275
+ const { background, hoverBackgroundToken, ...rest } = appearance;
4276
+ return {
4277
+ ...rest,
4278
+ background: buttonColourTreatmentSchema.parse(background),
4279
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4280
+ };
4281
+ }
4282
+ function normalizeAppearanceOverrides(overrides) {
4283
+ const { background, hoverBackgroundToken, ...rest } = overrides;
4284
+ return {
4285
+ ...rest,
4286
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
4287
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
4288
+ };
4289
+ }
4290
+ //#endregion
4291
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
4292
+ const softPillRecipe = defineStaticButtonStyleRecipe({
4293
+ id: "soft-pill",
4294
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
4127
4295
  tags: {
4128
4296
  tone: "classic",
4129
4297
  energy: "calm",
4130
- motion: "standard",
4131
- era: "modern"
4298
+ motion: "subtle",
4299
+ era: "organic"
4132
4300
  },
4133
- buttonSystem: {
4301
+ system: {
4134
4302
  global: {
4135
- cornerStyle: "rounded",
4136
- shadow: "medium",
4303
+ cornerStyle: "pill",
4304
+ shadow: "low",
4137
4305
  textTransform: "none",
4138
- fontWeight: 600,
4139
- borderWidth: 1,
4140
- hoverTransform: "none",
4306
+ fontWeight: 500,
4307
+ borderWidth: 2,
4308
+ hoverTransform: "lift",
4141
4309
  hoverColor: "none"
4142
4310
  },
4143
- variants: [
4144
- {
4145
- id: "primary",
4146
- name: "Primary",
4147
- enabled: true,
4148
- priority: 1,
4149
- background: {
4150
- type: "solid",
4151
- colorToken: "primary"
4152
- },
4153
- borderRadius: "rounded-md",
4154
- shadow: {
4155
- elevation: "medium",
4156
- softness: "soft",
4157
- position: "bottom"
4158
- },
4159
- effects: {
4160
- hover: [{
4161
- effectId: "darken-background",
4162
- options: { amount: 100 }
4163
- }],
4164
- active: [{
4165
- effectId: "scale-down",
4166
- options: { scale: "0.97" }
4167
- }]
4311
+ roles: {
4312
+ primary: {
4313
+ kind: "complete",
4314
+ appearance: {
4315
+ background: {
4316
+ type: "solid",
4317
+ colorToken: "primary"
4318
+ },
4319
+ borderRadius: "rounded-full",
4320
+ shadow: {
4321
+ elevation: "low",
4322
+ softness: "soft",
4323
+ position: "bottom"
4324
+ },
4325
+ effects: {
4326
+ hover: [{
4327
+ effectId: "lift",
4328
+ options: { translateY: "-1px" }
4329
+ }],
4330
+ active: [{
4331
+ effectId: "scale-down",
4332
+ options: { scale: "0.98" }
4333
+ }]
4334
+ }
4168
4335
  }
4169
4336
  },
4170
- {
4171
- id: "secondary",
4172
- name: "Secondary",
4173
- enabled: true,
4174
- priority: 2,
4175
- background: {
4176
- type: "solid",
4177
- colorToken: "surface"
4178
- },
4179
- borderRadius: "rounded-md",
4180
- border: { widthClass: "border" },
4181
- effects: { hover: [{
4182
- effectId: "background-on-hover",
4183
- options: { colorToken: "background" }
4184
- }] }
4337
+ secondary: {
4338
+ kind: "complete",
4339
+ appearance: {
4340
+ background: {
4341
+ type: "surface",
4342
+ role: "link"
4343
+ },
4344
+ borderRadius: "rounded-full",
4345
+ border: { widthClass: "border-2" },
4346
+ effects: { hover: [{
4347
+ effectId: "background-on-hover",
4348
+ options: { colorToken: "surface" }
4349
+ }] }
4350
+ }
4185
4351
  },
4186
- {
4187
- id: "outline",
4188
- name: "Outline",
4189
- enabled: true,
4190
- priority: 3,
4191
- background: {
4192
- type: "surface",
4193
- role: "link"
4194
- },
4195
- borderRadius: "rounded-md",
4196
- border: { widthClass: "border" },
4197
- effects: { hover: [{
4198
- effectId: "background-on-hover",
4199
- options: { colorToken: "surface" }
4200
- }] }
4352
+ outline: {
4353
+ kind: "complete",
4354
+ appearance: {
4355
+ background: {
4356
+ type: "surface",
4357
+ role: "link"
4358
+ },
4359
+ borderRadius: "rounded-full",
4360
+ border: { widthClass: "border" },
4361
+ effects: { hover: [{
4362
+ effectId: "background-on-hover",
4363
+ options: { colorToken: "surface" }
4364
+ }] }
4365
+ }
4201
4366
  },
4202
- {
4203
- id: "ghost",
4204
- name: "Ghost",
4205
- enabled: true,
4206
- priority: 3,
4207
- background: {
4208
- type: "surface",
4209
- role: "link"
4210
- },
4211
- borderRadius: "rounded-md",
4212
- effects: { hover: [{
4213
- effectId: "background-on-hover",
4214
- options: { colorToken: "surface" }
4215
- }] }
4367
+ ghost: {
4368
+ kind: "complete",
4369
+ appearance: {
4370
+ background: {
4371
+ type: "surface",
4372
+ role: "link"
4373
+ },
4374
+ borderRadius: "rounded-full",
4375
+ effects: { hover: [{
4376
+ effectId: "background-on-hover",
4377
+ options: { colorToken: "surface" }
4378
+ }] }
4379
+ }
4380
+ },
4381
+ accent: {
4382
+ kind: "derive",
4383
+ from: "primary",
4384
+ overrides: { background: {
4385
+ type: "solid",
4386
+ colorToken: "accent"
4387
+ } }
4216
4388
  }
4217
- ]
4389
+ }
4218
4390
  }
4219
4391
  });
4220
- //#endregion
4221
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
4222
- /**
4223
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
4224
- * Built for grounded editorial wellness styles such as Soft Earth.
4225
- */
4226
- const earthPill = defineButtonPersonality({
4392
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
4227
4393
  id: "earth-pill",
4228
- name: "Earth Pill",
4229
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
4394
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
4230
4395
  tags: {
4231
4396
  tone: "classic",
4232
4397
  energy: "calm",
4233
4398
  motion: "subtle",
4234
4399
  era: "organic"
4235
4400
  },
4236
- buttonSystem: {
4401
+ system: {
4237
4402
  global: {
4238
4403
  cornerStyle: "pill",
4239
4404
  shadow: "low",
@@ -4260,940 +4425,808 @@ const earthPill = defineButtonPersonality({
4260
4425
  fontSize: "text-xl"
4261
4426
  }
4262
4427
  },
4263
- variants: [
4264
- {
4265
- id: "primary",
4266
- name: "Primary",
4267
- enabled: true,
4268
- priority: 1,
4269
- background: {
4270
- type: "solid",
4271
- colorToken: "primary"
4272
- },
4273
- borderRadius: "rounded-full",
4274
- shadow: {
4275
- elevation: "low",
4276
- softness: "soft",
4277
- position: "bottom"
4278
- },
4279
- effects: {
4280
- hover: [{
4281
- effectId: "lift",
4282
- options: { translateY: "-1px" }
4283
- }, {
4284
- effectId: "background-on-hover",
4285
- options: { colorToken: "accent" }
4286
- }],
4287
- active: [{
4288
- effectId: "scale-down",
4289
- options: { scale: "0.98" }
4290
- }]
4428
+ roles: {
4429
+ primary: {
4430
+ kind: "complete",
4431
+ appearance: {
4432
+ background: {
4433
+ type: "solid",
4434
+ colorToken: "primary"
4435
+ },
4436
+ borderRadius: "rounded-full",
4437
+ shadow: {
4438
+ elevation: "low",
4439
+ softness: "soft",
4440
+ position: "bottom"
4441
+ },
4442
+ effects: {
4443
+ hover: [{
4444
+ effectId: "lift",
4445
+ options: { translateY: "-1px" }
4446
+ }, {
4447
+ effectId: "background-on-hover",
4448
+ options: { colorToken: "accent" }
4449
+ }],
4450
+ active: [{
4451
+ effectId: "scale-down",
4452
+ options: { scale: "0.98" }
4453
+ }]
4454
+ }
4291
4455
  }
4292
4456
  },
4293
- {
4294
- id: "secondary",
4295
- name: "Secondary",
4296
- enabled: true,
4297
- priority: 2,
4298
- background: {
4299
- type: "surface",
4300
- role: "link"
4301
- },
4302
- borderRadius: "rounded-full",
4303
- border: { widthClass: "border" },
4304
- effects: { hover: [{
4305
- effectId: "background-on-hover",
4306
- options: { colorToken: "muted" }
4307
- }] }
4457
+ secondary: {
4458
+ kind: "complete",
4459
+ appearance: {
4460
+ background: {
4461
+ type: "surface",
4462
+ role: "link"
4463
+ },
4464
+ borderRadius: "rounded-full",
4465
+ border: { widthClass: "border" },
4466
+ effects: { hover: [{
4467
+ effectId: "background-on-hover",
4468
+ options: { colorToken: "muted" }
4469
+ }] }
4470
+ }
4308
4471
  },
4309
- {
4310
- id: "outline",
4311
- name: "Outline",
4312
- enabled: true,
4313
- priority: 3,
4314
- background: {
4315
- type: "surface",
4316
- role: "link"
4317
- },
4318
- borderRadius: "rounded-full",
4319
- border: { widthClass: "border" },
4320
- effects: { hover: [{
4321
- effectId: "background-on-hover",
4322
- options: { colorToken: "surfaceAlt" }
4323
- }] }
4472
+ outline: {
4473
+ kind: "complete",
4474
+ appearance: {
4475
+ background: {
4476
+ type: "surface",
4477
+ role: "link"
4478
+ },
4479
+ borderRadius: "rounded-full",
4480
+ border: { widthClass: "border" },
4481
+ effects: { hover: [{
4482
+ effectId: "background-on-hover",
4483
+ options: { colorToken: "surfaceAlt" }
4484
+ }] }
4485
+ }
4324
4486
  },
4325
- {
4326
- id: "ghost",
4327
- name: "Ghost",
4328
- enabled: true,
4329
- priority: 3,
4330
- background: {
4331
- type: "surface",
4332
- role: "link"
4333
- },
4334
- borderRadius: "rounded-full",
4335
- shadow: {
4336
- elevation: "none",
4337
- softness: null,
4338
- position: "bottom"
4339
- },
4340
- sizes: {
4341
- sm: {
4342
- padding: "0.25rem 0",
4343
- fontSize: "text-sm"
4487
+ ghost: {
4488
+ kind: "complete",
4489
+ appearance: {
4490
+ background: {
4491
+ type: "surface",
4492
+ role: "link"
4344
4493
  },
4345
- md: { padding: "0.375rem 0" },
4346
- lg: {
4347
- padding: "0.5rem 0",
4348
- fontSize: "text-lg"
4494
+ borderRadius: "rounded-full",
4495
+ shadow: {
4496
+ elevation: "none",
4497
+ softness: null,
4498
+ position: "bottom"
4349
4499
  },
4350
- xl: {
4351
- padding: "0.625rem 0",
4352
- fontSize: "text-xl"
4500
+ sizes: {
4501
+ sm: {
4502
+ padding: "0.25rem 0",
4503
+ fontSize: "text-sm"
4504
+ },
4505
+ md: { padding: "0.375rem 0" },
4506
+ lg: {
4507
+ padding: "0.5rem 0",
4508
+ fontSize: "text-lg"
4509
+ },
4510
+ xl: {
4511
+ padding: "0.625rem 0",
4512
+ fontSize: "text-xl"
4513
+ }
4353
4514
  }
4354
4515
  }
4516
+ },
4517
+ accent: {
4518
+ kind: "derive",
4519
+ from: "primary",
4520
+ overrides: { background: {
4521
+ type: "solid",
4522
+ colorToken: "accent"
4523
+ } }
4355
4524
  }
4356
- ]
4525
+ }
4357
4526
  }
4358
4527
  });
4359
- //#endregion
4360
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
4361
- /**
4362
- * Editorial Link — all variants are link-style with a growing underline.
4363
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
4364
- */
4365
- const editorialLink = defineButtonPersonality({
4366
- id: "editorial-link",
4367
- name: "Editorial Link",
4368
- description: "Link-style with a growing underline. Refined, typographic.",
4528
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
4529
+ id: "confident-chip",
4530
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
4369
4531
  tags: {
4370
- tone: "minimal",
4532
+ tone: "classic",
4371
4533
  energy: "calm",
4372
- motion: "subtle",
4373
- era: "editorial"
4534
+ motion: "standard",
4535
+ era: "modern"
4374
4536
  },
4375
- buttonSystem: {
4537
+ system: {
4376
4538
  global: {
4377
- cornerStyle: "square",
4539
+ cornerStyle: "rounded",
4540
+ shadow: "medium",
4378
4541
  textTransform: "none",
4379
- fontWeight: 500,
4542
+ fontWeight: 600,
4380
4543
  borderWidth: 1,
4381
4544
  hoverTransform: "none",
4382
4545
  hoverColor: "none"
4383
4546
  },
4384
- variants: [
4385
- {
4386
- id: "primary",
4387
- name: "Primary",
4388
- enabled: true,
4389
- priority: 1,
4390
- background: {
4391
- type: "surface",
4392
- role: "link"
4393
- },
4394
- borderRadius: "rounded-none",
4395
- sizes: {
4396
- sm: { padding: "0.25rem 0" },
4397
- md: { padding: "0.5rem 0" },
4398
- lg: { padding: "0.625rem 0" },
4399
- xl: { padding: "0.75rem 0" }
4400
- },
4401
- effects: { base: [{
4402
- effectId: "border-bottom-grow",
4403
- options: {
4404
- height: 2,
4405
- colorToken: "text",
4406
- origin: "left"
4547
+ roles: {
4548
+ primary: {
4549
+ kind: "complete",
4550
+ appearance: {
4551
+ background: {
4552
+ type: "solid",
4553
+ colorToken: "primary"
4554
+ },
4555
+ borderRadius: "rounded-md",
4556
+ shadow: {
4557
+ elevation: "medium",
4558
+ softness: "soft",
4559
+ position: "bottom"
4560
+ },
4561
+ effects: {
4562
+ hover: [{
4563
+ effectId: "darken-background",
4564
+ options: { amount: 100 }
4565
+ }],
4566
+ active: [{
4567
+ effectId: "scale-down",
4568
+ options: { scale: "0.97" }
4569
+ }]
4407
4570
  }
4408
- }] }
4571
+ }
4409
4572
  },
4410
- {
4411
- id: "secondary",
4412
- name: "Secondary",
4413
- enabled: true,
4414
- priority: 2,
4415
- background: {
4416
- type: "surface",
4417
- role: "link"
4418
- },
4419
- borderRadius: "rounded-none",
4420
- sizes: {
4421
- sm: { padding: "0.25rem 0" },
4422
- md: { padding: "0.5rem 0" },
4423
- lg: { padding: "0.625rem 0" },
4424
- xl: { padding: "0.75rem 0" }
4425
- },
4426
- effects: { base: [{
4427
- effectId: "border-bottom-grow",
4428
- options: {
4429
- height: 1,
4430
- colorToken: "mutedText",
4431
- origin: "left"
4432
- }
4433
- }] }
4573
+ secondary: {
4574
+ kind: "complete",
4575
+ appearance: {
4576
+ background: {
4577
+ type: "solid",
4578
+ colorToken: "surface"
4579
+ },
4580
+ borderRadius: "rounded-md",
4581
+ border: { widthClass: "border" },
4582
+ effects: { hover: [{
4583
+ effectId: "background-on-hover",
4584
+ options: { colorToken: "background" }
4585
+ }] }
4586
+ }
4434
4587
  },
4435
- {
4436
- id: "outline",
4437
- name: "Outline",
4438
- enabled: true,
4439
- priority: 3,
4440
- background: {
4441
- type: "surface",
4442
- role: "link"
4443
- },
4444
- borderRadius: "rounded-none",
4445
- sizes: {
4446
- sm: { padding: "0.25rem 0" },
4447
- md: { padding: "0.5rem 0" },
4448
- lg: { padding: "0.625rem 0" },
4449
- xl: { padding: "0.75rem 0" }
4450
- },
4451
- effects: { base: [{
4452
- effectId: "border-bottom-grow",
4453
- options: {
4454
- height: 1,
4455
- colorToken: "accent",
4456
- origin: "left"
4457
- }
4458
- }] }
4588
+ outline: {
4589
+ kind: "complete",
4590
+ appearance: {
4591
+ background: {
4592
+ type: "surface",
4593
+ role: "link"
4594
+ },
4595
+ borderRadius: "rounded-md",
4596
+ border: { widthClass: "border" },
4597
+ effects: { hover: [{
4598
+ effectId: "background-on-hover",
4599
+ options: { colorToken: "surface" }
4600
+ }] }
4601
+ }
4459
4602
  },
4460
- {
4461
- id: "ghost",
4462
- name: "Ghost",
4463
- enabled: true,
4464
- priority: 3,
4465
- background: {
4466
- type: "surface",
4467
- role: "link"
4468
- },
4469
- borderRadius: "rounded-none",
4470
- sizes: {
4471
- sm: { padding: "0.25rem 0" },
4472
- md: { padding: "0.5rem 0" },
4473
- lg: { padding: "0.625rem 0" },
4474
- xl: { padding: "0.75rem 0" }
4603
+ ghost: {
4604
+ kind: "complete",
4605
+ appearance: {
4606
+ background: {
4607
+ type: "surface",
4608
+ role: "link"
4609
+ },
4610
+ borderRadius: "rounded-md",
4611
+ effects: { hover: [{
4612
+ effectId: "background-on-hover",
4613
+ options: { colorToken: "surface" }
4614
+ }] }
4475
4615
  }
4616
+ },
4617
+ accent: {
4618
+ kind: "derive",
4619
+ from: "primary",
4620
+ overrides: { background: {
4621
+ type: "solid",
4622
+ colorToken: "accent"
4623
+ } }
4476
4624
  }
4477
- ]
4625
+ }
4478
4626
  }
4479
4627
  });
4480
- //#endregion
4481
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
4482
- /**
4483
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
4484
- * amber accent climax, all completely flat (no drop shadow) with a modest
4485
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
4486
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
4487
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
4488
- * the page's one conversion climax.
4489
- */
4490
- const flatInk = defineButtonPersonality({
4491
- id: "flat-ink",
4492
- name: "Flat Ink",
4493
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
4628
+ const editorialSizes = {
4629
+ sm: { padding: "0.25rem 0" },
4630
+ md: { padding: "0.5rem 0" },
4631
+ lg: { padding: "0.625rem 0" },
4632
+ xl: { padding: "0.75rem 0" }
4633
+ };
4634
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
4635
+ id: "editorial-link",
4636
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
4494
4637
  tags: {
4495
- tone: "classic",
4638
+ tone: "minimal",
4496
4639
  energy: "calm",
4497
4640
  motion: "subtle",
4498
4641
  era: "editorial"
4499
4642
  },
4500
- buttonSystem: {
4643
+ system: {
4501
4644
  global: {
4502
- cornerStyle: "rounded",
4645
+ cornerStyle: "square",
4503
4646
  textTransform: "none",
4504
- fontWeight: 600,
4505
- borderWidth: 1,
4506
- typography: "body",
4507
- letterSpacing: "tight",
4508
- paddingPreset: "default",
4509
- hoverTransform: "lift",
4510
- hoverColor: "none"
4511
- },
4512
- sizes: {
4513
- sm: {
4514
- padding: "0.625rem 1.125rem",
4515
- fontSize: "text-sm"
4516
- },
4517
- md: { padding: "0.8125rem 1.375rem" },
4518
- lg: {
4519
- padding: "0.9375rem 1.625rem",
4520
- fontSize: "text-lg"
4521
- },
4522
- xl: {
4523
- padding: "1.0625rem 2rem",
4524
- fontSize: "text-xl"
4525
- }
4526
- },
4527
- variants: [
4528
- {
4529
- id: "primary",
4530
- name: "Primary",
4531
- enabled: true,
4532
- priority: 1,
4533
- background: {
4534
- type: "solid",
4535
- colorToken: "primary"
4536
- },
4537
- borderRadius: "rounded-lg",
4538
- affordance: { iconId: "ArrowRight" },
4539
- effects: { hover: [{
4540
- effectId: "lift",
4541
- options: { translateY: "-2px" }
4542
- }, {
4543
- effectId: "background-on-hover",
4544
- options: { colorToken: "secondary" }
4545
- }] }
4546
- },
4547
- {
4548
- id: "secondary",
4549
- name: "Secondary",
4550
- enabled: true,
4551
- priority: 2,
4552
- background: {
4553
- type: "surface",
4554
- role: "link"
4555
- },
4556
- borderRadius: "rounded-lg",
4557
- border: { widthClass: "border" },
4558
- effects: { hover: [{
4559
- effectId: "lift",
4560
- options: { translateY: "-2px" }
4561
- }, {
4562
- effectId: "background-on-hover",
4563
- options: { colorToken: "surfaceAlt" }
4564
- }] }
4565
- },
4566
- {
4567
- id: "accent",
4568
- name: "Accent",
4569
- enabled: true,
4570
- priority: 3,
4571
- background: {
4572
- type: "solid",
4573
- colorToken: "accent"
4574
- },
4575
- borderRadius: "rounded-lg",
4576
- affordance: { iconId: "ArrowRight" },
4577
- effects: { hover: [{
4578
- effectId: "lift",
4579
- options: { translateY: "-2px" }
4580
- }] }
4581
- }
4582
- ]
4583
- }
4584
- });
4585
- //#endregion
4586
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
4587
- /**
4588
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
4589
- * feel. Reads as bold and handmade; suits expressive craft brands.
4590
- */
4591
- const inkStamp = defineButtonPersonality({
4592
- id: "ink-stamp",
4593
- name: "Ink Stamp",
4594
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
4595
- tags: {
4596
- tone: "bold",
4597
- energy: "vibrant",
4598
- motion: "standard",
4599
- era: "organic"
4600
- },
4601
- buttonSystem: {
4602
- global: {
4603
- cornerStyle: "rounded",
4604
- textTransform: "uppercase",
4605
- fontWeight: 600,
4647
+ fontWeight: 500,
4606
4648
  borderWidth: 1,
4607
4649
  hoverTransform: "none",
4608
- hoverColor: "none",
4609
- letterSpacing: "loose"
4610
- },
4611
- sizes: {
4612
- sm: {
4613
- padding: "0.5rem 1.25rem",
4614
- fontSize: "text-xs"
4615
- },
4616
- md: {
4617
- padding: "0.75rem 1.75rem",
4618
- fontSize: "text-sm"
4619
- },
4620
- lg: {
4621
- padding: "0.875rem 2.25rem",
4622
- fontSize: "text-base"
4623
- },
4624
- xl: {
4625
- padding: "1.125rem 2.75rem",
4626
- fontSize: "text-lg"
4627
- }
4650
+ hoverColor: "none"
4628
4651
  },
4629
- variants: [
4630
- {
4631
- id: "primary",
4632
- name: "Primary",
4633
- enabled: true,
4634
- priority: 1,
4635
- background: {
4636
- type: "solid",
4637
- colorToken: "primary"
4638
- },
4639
- borderRadius: "rounded-md",
4640
- effects: {
4641
- hover: [{
4642
- effectId: "drop-shadow",
4643
- options: { intensity: "medium" }
4644
- }, {
4645
- effectId: "scale-up",
4646
- options: { scale: "1.02" }
4647
- }],
4648
- active: [{
4649
- effectId: "scale-down",
4650
- options: { scale: "0.98" }
4651
- }]
4652
+ roles: {
4653
+ primary: {
4654
+ kind: "complete",
4655
+ appearance: {
4656
+ background: {
4657
+ type: "surface",
4658
+ role: "link"
4659
+ },
4660
+ borderRadius: "rounded-none",
4661
+ sizes: editorialSizes,
4662
+ effects: { base: [{
4663
+ effectId: "border-bottom-grow",
4664
+ options: {
4665
+ height: 2,
4666
+ colorToken: "text",
4667
+ origin: "left"
4668
+ }
4669
+ }] }
4652
4670
  }
4653
4671
  },
4654
- {
4655
- id: "secondary",
4656
- name: "Secondary",
4657
- enabled: true,
4658
- priority: 2,
4659
- background: {
4660
- type: "surface",
4661
- role: "link"
4662
- },
4663
- borderRadius: "rounded-md",
4664
- border: { widthClass: "border-2" },
4665
- effects: { hover: [{
4666
- effectId: "background-on-hover",
4667
- options: { colorToken: "surface" }
4668
- }] }
4669
- },
4670
- {
4671
- id: "outline",
4672
- name: "Outline",
4673
- enabled: true,
4674
- priority: 3,
4675
- background: {
4676
- type: "surface",
4677
- role: "link"
4678
- },
4679
- borderRadius: "rounded-md",
4680
- border: { widthClass: "border-2" },
4681
- effects: { hover: [{
4682
- effectId: "background-on-hover",
4683
- options: { colorToken: "surface" }
4684
- }] }
4685
- },
4686
- {
4687
- id: "ghost",
4688
- name: "Ghost",
4689
- enabled: true,
4690
- priority: 3,
4691
- background: {
4692
- type: "surface",
4693
- role: "link"
4694
- },
4695
- borderRadius: "rounded-none",
4696
- sizes: {
4697
- sm: {
4698
- padding: "0.375rem 0",
4699
- fontSize: "text-xs"
4672
+ secondary: {
4673
+ kind: "complete",
4674
+ appearance: {
4675
+ background: {
4676
+ type: "surface",
4677
+ role: "link"
4700
4678
  },
4701
- md: {
4702
- padding: "0.5rem 0",
4703
- fontSize: "text-sm"
4679
+ borderRadius: "rounded-none",
4680
+ sizes: editorialSizes,
4681
+ effects: { base: [{
4682
+ effectId: "border-bottom-grow",
4683
+ options: {
4684
+ height: 1,
4685
+ colorToken: "mutedText",
4686
+ origin: "left"
4687
+ }
4688
+ }] }
4689
+ }
4690
+ },
4691
+ outline: {
4692
+ kind: "complete",
4693
+ appearance: {
4694
+ background: {
4695
+ type: "surface",
4696
+ role: "link"
4704
4697
  },
4705
- lg: {
4706
- padding: "0.625rem 0",
4707
- fontSize: "text-base"
4698
+ borderRadius: "rounded-none",
4699
+ sizes: editorialSizes,
4700
+ effects: { base: [{
4701
+ effectId: "border-bottom-grow",
4702
+ options: {
4703
+ height: 1,
4704
+ colorToken: "accent",
4705
+ origin: "left"
4706
+ }
4707
+ }] }
4708
+ }
4709
+ },
4710
+ ghost: {
4711
+ kind: "complete",
4712
+ appearance: {
4713
+ background: {
4714
+ type: "surface",
4715
+ role: "link"
4708
4716
  },
4709
- xl: {
4710
- padding: "0.75rem 0",
4711
- fontSize: "text-lg"
4712
- }
4713
- },
4714
- effects: { base: [{
4717
+ borderRadius: "rounded-none",
4718
+ sizes: editorialSizes
4719
+ }
4720
+ },
4721
+ accent: {
4722
+ kind: "derive",
4723
+ from: "primary",
4724
+ overrides: { effects: { base: [{
4715
4725
  effectId: "border-bottom-grow",
4716
4726
  options: {
4717
- height: 1,
4727
+ height: 2,
4718
4728
  colorToken: "accent",
4719
4729
  origin: "left"
4720
4730
  }
4721
- }] }
4731
+ }] } }
4722
4732
  }
4723
- ]
4733
+ }
4724
4734
  }
4725
4735
  });
4726
- //#endregion
4727
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
4728
- /**
4729
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
4730
- * that collapses as the button presses into it on hover. Authored for the
4731
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
4732
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
4733
- *
4734
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
4735
- * extension; the press is the shared `press-down` effect, which matches its
4736
- * translate to each variant's own shadow offset.
4737
- */
4738
- const joyStamp = defineButtonPersonality({
4739
- id: "joy-stamp",
4740
- name: "Joy Stamp",
4741
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
4736
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
4737
+ id: "pebble",
4738
+ accessibilityLabel: "Generously padded pill buttons",
4742
4739
  tags: {
4743
- tone: "bold",
4744
- energy: "vibrant",
4745
- motion: "expressive",
4740
+ tone: "classic",
4741
+ energy: "calm",
4742
+ motion: "standard",
4746
4743
  era: "organic"
4747
4744
  },
4748
- buttonSystem: {
4745
+ system: {
4749
4746
  global: {
4750
4747
  cornerStyle: "pill",
4751
- shadow: "high",
4752
4748
  textTransform: "none",
4753
- typography: "heading",
4754
- fontWeight: 700,
4755
- fontSize: "text-lg",
4749
+ fontWeight: 500,
4756
4750
  borderWidth: 2,
4757
4751
  hoverTransform: "none",
4758
4752
  hoverColor: "none"
4759
4753
  },
4760
4754
  sizes: {
4761
4755
  sm: {
4762
- padding: "0.625rem 1.25rem",
4763
- fontSize: "text-base"
4764
- },
4765
- md: {
4766
- padding: "0.875rem 1.75rem",
4767
- fontSize: "text-lg"
4756
+ padding: "0.625rem 1.75rem",
4757
+ fontSize: "text-sm"
4768
4758
  },
4759
+ md: { padding: "0.875rem 2.25rem" },
4769
4760
  lg: {
4770
- padding: "1.125rem 2.25rem",
4771
- fontSize: "text-xl"
4761
+ padding: "1.125rem 2.75rem",
4762
+ fontSize: "text-lg"
4772
4763
  },
4773
4764
  xl: {
4774
- padding: "1.25rem 2.75rem",
4775
- fontSize: "text-2xl"
4765
+ padding: "1.5rem 3.5rem",
4766
+ fontSize: "text-xl"
4776
4767
  }
4777
4768
  },
4778
- variants: [{
4779
- id: "primary",
4780
- name: "Primary",
4781
- enabled: true,
4782
- priority: 1,
4783
- background: {
4784
- type: "solid",
4785
- colorToken: "primary"
4769
+ roles: {
4770
+ primary: {
4771
+ kind: "complete",
4772
+ appearance: {
4773
+ background: {
4774
+ type: "solid",
4775
+ colorToken: "primary"
4776
+ },
4777
+ borderRadius: "rounded-full",
4778
+ effects: { hover: [{
4779
+ effectId: "darken-background",
4780
+ options: { amount: 100 }
4781
+ }] }
4782
+ }
4786
4783
  },
4787
- borderRadius: "rounded-full",
4788
- shadow: {
4789
- elevation: "high",
4790
- softness: "hard",
4791
- position: "bottom-right",
4792
- colorToken: "text"
4784
+ secondary: {
4785
+ kind: "complete",
4786
+ appearance: {
4787
+ background: {
4788
+ type: "surface",
4789
+ role: "link"
4790
+ },
4791
+ borderRadius: "rounded-full",
4792
+ border: { widthClass: "border-2" },
4793
+ effects: { hover: [{
4794
+ effectId: "background-on-hover",
4795
+ options: { colorToken: "accent" }
4796
+ }] }
4797
+ }
4793
4798
  },
4794
- effects: { hover: [{ effectId: "press-down" }] }
4795
- }, {
4796
- id: "secondary",
4797
- name: "Secondary",
4798
- enabled: true,
4799
- priority: 2,
4800
- background: {
4801
- type: "surface",
4802
- role: "link"
4803
- },
4804
- borderRadius: "rounded-full",
4805
- border: { widthClass: "border-2" },
4806
- shadow: {
4807
- elevation: "high",
4808
- softness: "hard",
4809
- position: "bottom-right",
4810
- colorToken: "secondary"
4811
- },
4812
- effects: { hover: [{ effectId: "press-down" }] }
4813
- }]
4799
+ outline: {
4800
+ kind: "complete",
4801
+ appearance: {
4802
+ background: {
4803
+ type: "surface",
4804
+ role: "link"
4805
+ },
4806
+ borderRadius: "rounded-full",
4807
+ border: { widthClass: "border" },
4808
+ effects: { hover: [{
4809
+ effectId: "background-on-hover",
4810
+ options: { colorToken: "surface" }
4811
+ }] }
4812
+ }
4813
+ },
4814
+ ghost: {
4815
+ kind: "complete",
4816
+ appearance: {
4817
+ background: {
4818
+ type: "surface",
4819
+ role: "link"
4820
+ },
4821
+ borderRadius: "rounded-full",
4822
+ sizes: {
4823
+ sm: {
4824
+ padding: "0.375rem 0.875rem",
4825
+ fontSize: "text-sm"
4826
+ },
4827
+ md: { padding: "0.5rem 1rem" },
4828
+ lg: {
4829
+ padding: "0.625rem 1.25rem",
4830
+ fontSize: "text-lg"
4831
+ },
4832
+ xl: {
4833
+ padding: "0.75rem 1.5rem",
4834
+ fontSize: "text-xl"
4835
+ }
4836
+ }
4837
+ }
4838
+ },
4839
+ accent: {
4840
+ kind: "derive",
4841
+ from: "primary",
4842
+ overrides: { background: {
4843
+ type: "solid",
4844
+ colorToken: "accent"
4845
+ } }
4846
+ }
4847
+ }
4814
4848
  }
4815
4849
  });
4816
- //#endregion
4817
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
4818
- /**
4819
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
4820
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
4821
- */
4822
- const ornateRitual = defineButtonPersonality({
4823
- id: "ornate-ritual",
4824
- name: "Ornate Ritual",
4825
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
4850
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
4851
+ id: "brushed-wash",
4852
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
4826
4853
  tags: {
4827
4854
  tone: "classic",
4828
4855
  energy: "vibrant",
4829
- motion: "subtle",
4856
+ motion: "standard",
4830
4857
  era: "organic"
4831
4858
  },
4832
- buttonSystem: {
4859
+ system: {
4833
4860
  global: {
4834
4861
  cornerStyle: "rounded",
4835
- textTransform: "uppercase",
4836
- fontWeight: 600,
4862
+ shadow: "low",
4863
+ textTransform: "none",
4864
+ fontWeight: 500,
4837
4865
  borderWidth: 1,
4838
4866
  hoverTransform: "none",
4839
- hoverColor: "none",
4840
- letterSpacing: "loose"
4867
+ hoverColor: "none"
4841
4868
  },
4842
4869
  sizes: {
4843
4870
  sm: {
4844
- padding: "0.5625rem 1.25rem",
4845
- fontSize: "text-xs"
4846
- },
4847
- md: {
4848
- padding: "0.75rem 1.75rem",
4849
- fontSize: "text-xs"
4871
+ padding: "0.75rem 2rem",
4872
+ fontSize: "text-sm"
4850
4873
  },
4874
+ md: { padding: "1rem 2.5rem" },
4851
4875
  lg: {
4852
- padding: "0.875rem 2.25rem",
4853
- fontSize: "text-sm"
4876
+ padding: "1.25rem 3rem",
4877
+ fontSize: "text-lg"
4854
4878
  },
4855
4879
  xl: {
4856
- padding: "1rem 2.75rem",
4857
- fontSize: "text-base"
4880
+ padding: "1.625rem 3.75rem",
4881
+ fontSize: "text-xl"
4858
4882
  }
4859
4883
  },
4860
- variants: [
4861
- {
4862
- id: "primary",
4863
- name: "Primary",
4864
- enabled: true,
4865
- priority: 1,
4866
- background: {
4867
- type: "solid",
4868
- colorToken: "primary"
4869
- },
4870
- borderRadius: "rounded-md",
4871
- border: { widthClass: "border" },
4872
- effects: {
4873
- hover: [{
4874
- effectId: "background-on-hover",
4875
- options: { colorToken: "primary-100" }
4876
- }],
4877
- active: [{
4878
- effectId: "scale-down",
4879
- options: { scale: "0.98" }
4880
- }]
4884
+ roles: {
4885
+ primary: {
4886
+ kind: "complete",
4887
+ appearance: {
4888
+ background: {
4889
+ type: "gradient",
4890
+ stops: ["primary", "accent"],
4891
+ direction: "to-r",
4892
+ foregroundToken: "primaryForeground"
4893
+ },
4894
+ borderRadius: "rounded-lg",
4895
+ shadow: {
4896
+ elevation: "low",
4897
+ softness: "soft",
4898
+ position: "bottom"
4899
+ }
4881
4900
  }
4882
4901
  },
4883
- {
4884
- id: "secondary",
4885
- name: "Secondary",
4886
- enabled: true,
4887
- priority: 2,
4888
- background: {
4889
- type: "solid",
4890
- colorToken: "secondary"
4891
- },
4892
- borderRadius: "rounded-md",
4893
- border: { widthClass: "border" },
4894
- effects: { hover: [{
4895
- effectId: "background-on-hover",
4896
- options: { colorToken: "surface" }
4897
- }] }
4898
- },
4899
- {
4900
- id: "outline",
4901
- name: "Outline",
4902
- enabled: true,
4903
- priority: 3,
4904
- background: {
4905
- type: "surface",
4906
- role: "link"
4907
- },
4908
- borderRadius: "rounded-md",
4909
- border: { widthClass: "border" },
4910
- effects: { hover: [{
4911
- effectId: "background-on-hover",
4912
- options: { colorToken: "muted" }
4913
- }] }
4914
- },
4915
- {
4916
- id: "ghost",
4917
- name: "Ghost",
4918
- enabled: true,
4919
- priority: 3,
4920
- background: {
4921
- type: "surface",
4922
- role: "link"
4923
- },
4924
- borderRadius: "rounded-none",
4925
- sizes: {
4926
- sm: {
4927
- padding: "0.375rem 0",
4928
- fontSize: "text-xs"
4902
+ secondary: {
4903
+ kind: "complete",
4904
+ appearance: {
4905
+ background: {
4906
+ type: "gradient",
4907
+ stops: ["secondary", "accent"],
4908
+ direction: "to-br",
4909
+ foregroundToken: "primaryForeground"
4929
4910
  },
4930
- md: {
4931
- padding: "0.5rem 0",
4932
- fontSize: "text-sm"
4911
+ borderRadius: "rounded-lg",
4912
+ shadow: {
4913
+ elevation: "low",
4914
+ softness: "soft",
4915
+ position: "bottom"
4916
+ }
4917
+ }
4918
+ },
4919
+ outline: {
4920
+ kind: "complete",
4921
+ appearance: {
4922
+ background: {
4923
+ type: "surface",
4924
+ role: "link"
4933
4925
  },
4934
- lg: {
4935
- padding: "0.625rem 0",
4936
- fontSize: "text-base"
4926
+ borderRadius: "rounded-lg",
4927
+ border: { widthClass: "border" },
4928
+ effects: { hover: [{
4929
+ effectId: "background-on-hover",
4930
+ options: { colorToken: "surface" }
4931
+ }] }
4932
+ }
4933
+ },
4934
+ ghost: {
4935
+ kind: "complete",
4936
+ appearance: {
4937
+ background: {
4938
+ type: "surface",
4939
+ role: "link"
4937
4940
  },
4938
- xl: {
4939
- padding: "0.75rem 0",
4940
- fontSize: "text-lg"
4941
- }
4942
- },
4943
- effects: { base: [{
4944
- effectId: "border-bottom-grow",
4945
- options: {
4946
- height: 1,
4947
- colorToken: "accent",
4948
- origin: "left"
4949
- }
4950
- }] }
4941
+ borderRadius: "rounded-lg",
4942
+ effects: { hover: [{
4943
+ effectId: "background-on-hover",
4944
+ options: { colorToken: "surface" }
4945
+ }] }
4946
+ }
4947
+ },
4948
+ accent: {
4949
+ kind: "derive",
4950
+ from: "primary",
4951
+ overrides: { background: {
4952
+ type: "solid",
4953
+ colorToken: "accent"
4954
+ } }
4951
4955
  }
4952
- ]
4956
+ }
4953
4957
  }
4954
4958
  });
4955
- //#endregion
4956
- //#region ../theme-core/src/buttons/personalities/pebble.ts
4957
- /**
4958
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
4959
- * and natural; pairs well with wellness/yoga/dance brands.
4960
- */
4961
- const pebble = defineButtonPersonality({
4962
- id: "pebble",
4963
- name: "Pebble",
4964
- description: "Generous pill buttons with a quiet colour-softening hover.",
4959
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
4960
+ id: "ink-stamp",
4961
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
4965
4962
  tags: {
4966
- tone: "classic",
4967
- energy: "calm",
4963
+ tone: "bold",
4964
+ energy: "vibrant",
4968
4965
  motion: "standard",
4969
4966
  era: "organic"
4970
4967
  },
4971
- buttonSystem: {
4968
+ system: {
4972
4969
  global: {
4973
- cornerStyle: "pill",
4974
- textTransform: "none",
4975
- fontWeight: 500,
4976
- borderWidth: 2,
4970
+ cornerStyle: "rounded",
4971
+ textTransform: "uppercase",
4972
+ fontWeight: 600,
4973
+ borderWidth: 1,
4977
4974
  hoverTransform: "none",
4978
- hoverColor: "none"
4975
+ hoverColor: "none",
4976
+ letterSpacing: "loose"
4979
4977
  },
4980
4978
  sizes: {
4981
4979
  sm: {
4982
- padding: "0.625rem 1.75rem",
4980
+ padding: "0.5rem 1.25rem",
4981
+ fontSize: "text-xs"
4982
+ },
4983
+ md: {
4984
+ padding: "0.75rem 1.75rem",
4983
4985
  fontSize: "text-sm"
4984
4986
  },
4985
- md: { padding: "0.875rem 2.25rem" },
4986
4987
  lg: {
4987
- padding: "1.125rem 2.75rem",
4988
- fontSize: "text-lg"
4988
+ padding: "0.875rem 2.25rem",
4989
+ fontSize: "text-base"
4989
4990
  },
4990
4991
  xl: {
4991
- padding: "1.5rem 3.5rem",
4992
- fontSize: "text-xl"
4992
+ padding: "1.125rem 2.75rem",
4993
+ fontSize: "text-lg"
4993
4994
  }
4994
4995
  },
4995
- variants: [
4996
- {
4997
- id: "primary",
4998
- name: "Primary",
4999
- enabled: true,
5000
- priority: 1,
5001
- background: {
5002
- type: "solid",
5003
- colorToken: "primary"
5004
- },
5005
- borderRadius: "rounded-full",
5006
- effects: { hover: [{
5007
- effectId: "darken-background",
5008
- options: { amount: 100 }
5009
- }] }
4996
+ roles: {
4997
+ primary: {
4998
+ kind: "complete",
4999
+ appearance: {
5000
+ background: {
5001
+ type: "solid",
5002
+ colorToken: "primary"
5003
+ },
5004
+ borderRadius: "rounded-md",
5005
+ effects: {
5006
+ hover: [{
5007
+ effectId: "drop-shadow",
5008
+ options: { intensity: "medium" }
5009
+ }, {
5010
+ effectId: "scale-up",
5011
+ options: { scale: "1.02" }
5012
+ }],
5013
+ active: [{
5014
+ effectId: "scale-down",
5015
+ options: { scale: "0.98" }
5016
+ }]
5017
+ }
5018
+ }
5010
5019
  },
5011
- {
5012
- id: "secondary",
5013
- name: "Secondary",
5014
- enabled: true,
5015
- priority: 2,
5016
- background: {
5017
- type: "surface",
5018
- role: "link"
5019
- },
5020
- borderRadius: "rounded-full",
5021
- border: { widthClass: "border-2" },
5022
- effects: { hover: [{
5023
- effectId: "background-on-hover",
5024
- options: { colorToken: "accent" }
5025
- }] }
5020
+ secondary: {
5021
+ kind: "complete",
5022
+ appearance: {
5023
+ background: {
5024
+ type: "surface",
5025
+ role: "link"
5026
+ },
5027
+ borderRadius: "rounded-md",
5028
+ border: { widthClass: "border-2" },
5029
+ effects: { hover: [{
5030
+ effectId: "background-on-hover",
5031
+ options: { colorToken: "surface" }
5032
+ }] }
5033
+ }
5026
5034
  },
5027
- {
5028
- id: "outline",
5029
- name: "Outline",
5030
- enabled: true,
5031
- priority: 3,
5032
- background: {
5033
- type: "surface",
5034
- role: "link"
5035
- },
5036
- borderRadius: "rounded-full",
5037
- border: { widthClass: "border" },
5038
- effects: { hover: [{
5039
- effectId: "background-on-hover",
5040
- options: { colorToken: "surface" }
5041
- }] }
5035
+ outline: {
5036
+ kind: "complete",
5037
+ appearance: {
5038
+ background: {
5039
+ type: "surface",
5040
+ role: "link"
5041
+ },
5042
+ borderRadius: "rounded-md",
5043
+ border: { widthClass: "border-2" },
5044
+ effects: { hover: [{
5045
+ effectId: "background-on-hover",
5046
+ options: { colorToken: "surface" }
5047
+ }] }
5048
+ }
5042
5049
  },
5043
- {
5044
- id: "ghost",
5045
- name: "Ghost",
5046
- enabled: true,
5047
- priority: 3,
5048
- background: {
5049
- type: "surface",
5050
- role: "link"
5051
- },
5052
- borderRadius: "rounded-full",
5053
- sizes: {
5054
- sm: {
5055
- padding: "0.375rem 0.875rem",
5056
- fontSize: "text-sm"
5050
+ ghost: {
5051
+ kind: "complete",
5052
+ appearance: {
5053
+ background: {
5054
+ type: "surface",
5055
+ role: "link"
5057
5056
  },
5058
- md: { padding: "0.5rem 1rem" },
5059
- lg: {
5060
- padding: "0.625rem 1.25rem",
5061
- fontSize: "text-lg"
5057
+ borderRadius: "rounded-none",
5058
+ sizes: {
5059
+ sm: {
5060
+ padding: "0.375rem 0",
5061
+ fontSize: "text-xs"
5062
+ },
5063
+ md: {
5064
+ padding: "0.5rem 0",
5065
+ fontSize: "text-sm"
5066
+ },
5067
+ lg: {
5068
+ padding: "0.625rem 0",
5069
+ fontSize: "text-base"
5070
+ },
5071
+ xl: {
5072
+ padding: "0.75rem 0",
5073
+ fontSize: "text-lg"
5074
+ }
5062
5075
  },
5063
- xl: {
5064
- padding: "0.75rem 1.5rem",
5065
- fontSize: "text-xl"
5066
- }
5076
+ effects: { base: [{
5077
+ effectId: "border-bottom-grow",
5078
+ options: {
5079
+ height: 1,
5080
+ colorToken: "accent",
5081
+ origin: "left"
5082
+ }
5083
+ }] }
5067
5084
  }
5085
+ },
5086
+ accent: {
5087
+ kind: "derive",
5088
+ from: "primary",
5089
+ overrides: { background: {
5090
+ type: "solid",
5091
+ colorToken: "accent"
5092
+ } }
5068
5093
  }
5069
- ]
5094
+ }
5070
5095
  }
5071
5096
  });
5072
- //#endregion
5073
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
5074
- /**
5075
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
5076
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
5077
- * responsible for contrast rather than reversing the button roles.
5078
- */
5079
- const quietArrow = defineButtonPersonality({
5080
- id: "quiet-arrow",
5081
- name: "Quiet Arrow",
5082
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
5097
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
5098
+ id: "flat-ink",
5099
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
5083
5100
  tags: {
5084
5101
  tone: "classic",
5085
5102
  energy: "calm",
5086
5103
  motion: "subtle",
5087
5104
  era: "editorial"
5088
5105
  },
5089
- buttonSystem: {
5106
+ system: {
5090
5107
  global: {
5091
5108
  cornerStyle: "rounded",
5092
- textTransform: "uppercase",
5093
- fontWeight: 500,
5109
+ textTransform: "none",
5110
+ fontWeight: 600,
5094
5111
  borderWidth: 1,
5095
5112
  typography: "body",
5096
- fontSize: "text-sm",
5097
- letterSpacing: "loose",
5098
- hoverTransform: "none",
5113
+ letterSpacing: "tight",
5114
+ paddingPreset: "default",
5115
+ hoverTransform: "lift",
5099
5116
  hoverColor: "none"
5100
5117
  },
5101
5118
  sizes: {
5102
5119
  sm: {
5103
- padding: "0.625rem 1.25rem",
5104
- fontSize: "text-xs"
5105
- },
5106
- md: {
5107
- padding: "0.8125rem 1.75rem",
5120
+ padding: "0.625rem 1.125rem",
5108
5121
  fontSize: "text-sm"
5109
5122
  },
5123
+ md: { padding: "0.8125rem 1.375rem" },
5110
5124
  lg: {
5111
- padding: "0.9375rem 2.125rem",
5112
- fontSize: "text-sm"
5125
+ padding: "0.9375rem 1.625rem",
5126
+ fontSize: "text-lg"
5113
5127
  },
5114
5128
  xl: {
5115
- padding: "1.0625rem 2.5rem",
5116
- fontSize: "text-base"
5129
+ padding: "1.0625rem 2rem",
5130
+ fontSize: "text-xl"
5117
5131
  }
5118
5132
  },
5119
- variants: [
5120
- {
5121
- id: "primary",
5122
- name: "Primary",
5123
- enabled: true,
5124
- priority: 1,
5125
- background: {
5126
- type: "solid",
5127
- colorToken: "primary"
5128
- },
5129
- borderRadius: "rounded-xl",
5130
- affordance: { iconId: "ArrowRight" },
5131
- effects: { hover: [{
5132
- effectId: "darken-background",
5133
- options: { amount: 100 }
5134
- }] }
5133
+ roles: {
5134
+ primary: {
5135
+ kind: "complete",
5136
+ appearance: {
5137
+ background: {
5138
+ type: "solid",
5139
+ colorToken: "primary"
5140
+ },
5141
+ borderRadius: "rounded-lg",
5142
+ affordance: { iconId: "ArrowRight" },
5143
+ effects: { hover: [{
5144
+ effectId: "lift",
5145
+ options: { translateY: "-2px" }
5146
+ }, {
5147
+ effectId: "background-on-hover",
5148
+ options: { colorToken: "secondary" }
5149
+ }] }
5150
+ }
5135
5151
  },
5136
- {
5137
- id: "secondary",
5138
- name: "Secondary",
5139
- enabled: true,
5140
- priority: 2,
5141
- background: {
5142
- type: "surface",
5143
- role: "link"
5144
- },
5145
- borderRadius: "rounded-xl",
5146
- border: { widthClass: "border" },
5147
- affordance: { iconId: "ArrowRight" },
5148
- effects: { hover: [{
5149
- effectId: "background-on-hover",
5150
- options: { colorToken: "surfaceAlt" }
5151
- }] }
5152
+ secondary: {
5153
+ kind: "complete",
5154
+ appearance: {
5155
+ background: {
5156
+ type: "surface",
5157
+ role: "link"
5158
+ },
5159
+ borderRadius: "rounded-lg",
5160
+ border: { widthClass: "border" },
5161
+ effects: { hover: [{
5162
+ effectId: "lift",
5163
+ options: { translateY: "-2px" }
5164
+ }, {
5165
+ effectId: "background-on-hover",
5166
+ options: { colorToken: "surfaceAlt" }
5167
+ }] }
5168
+ }
5152
5169
  },
5153
- {
5154
- id: "outline",
5155
- name: "Outline",
5156
- enabled: true,
5157
- priority: 3,
5158
- background: {
5159
- type: "surface",
5160
- role: "link"
5161
- },
5162
- borderRadius: "rounded-xl",
5163
- border: { widthClass: "border" }
5170
+ outline: {
5171
+ kind: "complete",
5172
+ appearance: {
5173
+ background: {
5174
+ type: "surface",
5175
+ role: "link"
5176
+ },
5177
+ borderRadius: "rounded-lg",
5178
+ border: { widthClass: "border" },
5179
+ effects: { hover: [{
5180
+ effectId: "lift",
5181
+ options: { translateY: "-2px" }
5182
+ }, {
5183
+ effectId: "background-on-hover",
5184
+ options: { colorToken: "surfaceAlt" }
5185
+ }] }
5186
+ }
5164
5187
  },
5165
- {
5166
- id: "ghost",
5167
- name: "Ghost",
5168
- enabled: true,
5169
- priority: 3,
5170
- background: {
5171
- type: "surface",
5172
- role: "link"
5173
- },
5174
- borderRadius: "rounded-xl"
5188
+ ghost: {
5189
+ kind: "complete",
5190
+ appearance: {
5191
+ background: {
5192
+ type: "surface",
5193
+ role: "link"
5194
+ },
5195
+ borderRadius: "rounded-lg",
5196
+ effects: { hover: [{
5197
+ effectId: "lift",
5198
+ options: { translateY: "-2px" }
5199
+ }] }
5200
+ }
5201
+ },
5202
+ accent: {
5203
+ kind: "complete",
5204
+ appearance: {
5205
+ background: {
5206
+ type: "solid",
5207
+ colorToken: "accent"
5208
+ },
5209
+ borderRadius: "rounded-lg",
5210
+ affordance: { iconId: "ArrowRight" },
5211
+ effects: { hover: [{
5212
+ effectId: "lift",
5213
+ options: { translateY: "-2px" }
5214
+ }] }
5215
+ }
5175
5216
  }
5176
- ]
5217
+ }
5177
5218
  }
5178
5219
  });
5179
- //#endregion
5180
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
5181
- /**
5182
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
5183
- * motion. Suits energetic schools, performers, festivals, and community brands
5184
- * that need calls to action to feel loud without becoming visually chaotic.
5185
- */
5186
- const showtimePill = defineButtonPersonality({
5220
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
5187
5221
  id: "showtime-pill",
5188
- name: "Showtime Pill",
5189
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
5222
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
5190
5223
  tags: {
5191
5224
  tone: "bold",
5192
5225
  energy: "vibrant",
5193
5226
  motion: "expressive",
5194
5227
  era: "modern"
5195
5228
  },
5196
- buttonSystem: {
5229
+ system: {
5197
5230
  global: {
5198
5231
  cornerStyle: "pill",
5199
5232
  shadow: "low",
@@ -5224,272 +5257,376 @@ const showtimePill = defineButtonPersonality({
5224
5257
  fontSize: "1.125rem"
5225
5258
  }
5226
5259
  },
5227
- variants: [
5228
- {
5229
- id: "primary",
5230
- name: "Primary",
5231
- enabled: true,
5232
- priority: 1,
5233
- background: {
5234
- type: "solid",
5235
- colorToken: "primary"
5236
- },
5237
- borderRadius: "rounded-full",
5238
- effects: { hover: [{ effectId: "pop" }] }
5260
+ roles: {
5261
+ primary: {
5262
+ kind: "complete",
5263
+ appearance: {
5264
+ background: {
5265
+ type: "solid",
5266
+ colorToken: "primary"
5267
+ },
5268
+ borderRadius: "rounded-full",
5269
+ effects: { hover: [{ effectId: "pop" }] }
5270
+ }
5239
5271
  },
5240
- {
5241
- id: "secondary",
5242
- name: "Secondary",
5243
- enabled: true,
5244
- priority: 2,
5245
- background: {
5246
- type: "surface",
5247
- role: "link"
5248
- },
5249
- borderRadius: "rounded-full",
5250
- border: { widthClass: "border-2" },
5251
- effects: { hover: [{ effectId: "pop" }] }
5272
+ secondary: {
5273
+ kind: "complete",
5274
+ appearance: {
5275
+ background: {
5276
+ type: "surface",
5277
+ role: "link"
5278
+ },
5279
+ borderRadius: "rounded-full",
5280
+ border: { widthClass: "border-2" },
5281
+ effects: { hover: [{ effectId: "pop" }] }
5282
+ }
5252
5283
  },
5253
- {
5254
- id: "hero",
5255
- name: "Hero",
5256
- enabled: true,
5257
- priority: 1,
5258
- background: {
5259
- type: "solid",
5260
- colorToken: "secondary"
5261
- },
5262
- borderRadius: "rounded-full",
5263
- effects: { hover: [{ effectId: "pop" }] }
5284
+ outline: {
5285
+ kind: "complete",
5286
+ appearance: {
5287
+ background: {
5288
+ type: "surface",
5289
+ role: "link"
5290
+ },
5291
+ borderRadius: "rounded-full",
5292
+ border: { widthClass: "border-2" },
5293
+ effects: { hover: [{
5294
+ effectId: "background-on-hover",
5295
+ options: { colorToken: "background" }
5296
+ }] }
5297
+ }
5264
5298
  },
5265
- {
5266
- id: "header",
5267
- name: "Header",
5268
- enabled: true,
5269
- priority: 2,
5270
- background: {
5299
+ ghost: {
5300
+ kind: "complete",
5301
+ appearance: {
5302
+ background: {
5303
+ type: "surface",
5304
+ role: "link"
5305
+ },
5306
+ borderRadius: "rounded-full",
5307
+ effects: { hover: [{
5308
+ effectId: "background-on-hover",
5309
+ options: { colorToken: "surface" }
5310
+ }] }
5311
+ }
5312
+ },
5313
+ accent: {
5314
+ kind: "complete",
5315
+ appearance: {
5316
+ background: {
5317
+ type: "solid",
5318
+ colorToken: "secondary"
5319
+ },
5320
+ borderRadius: "rounded-full",
5321
+ effects: { hover: [{ effectId: "pop" }] }
5322
+ }
5323
+ }
5324
+ }
5325
+ }
5326
+ });
5327
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
5328
+ id: "joy-stamp",
5329
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
5330
+ tags: {
5331
+ tone: "bold",
5332
+ energy: "vibrant",
5333
+ motion: "expressive",
5334
+ era: "organic"
5335
+ },
5336
+ system: {
5337
+ global: {
5338
+ cornerStyle: "pill",
5339
+ shadow: "high",
5340
+ textTransform: "none",
5341
+ typography: "heading",
5342
+ fontWeight: 700,
5343
+ fontSize: "text-lg",
5344
+ borderWidth: 2,
5345
+ hoverTransform: "none",
5346
+ hoverColor: "none"
5347
+ },
5348
+ sizes: {
5349
+ sm: {
5350
+ padding: "0.625rem 1.25rem",
5351
+ fontSize: "text-base"
5352
+ },
5353
+ md: {
5354
+ padding: "0.875rem 1.75rem",
5355
+ fontSize: "text-lg"
5356
+ },
5357
+ lg: {
5358
+ padding: "1.125rem 2.25rem",
5359
+ fontSize: "text-xl"
5360
+ },
5361
+ xl: {
5362
+ padding: "1.25rem 2.75rem",
5363
+ fontSize: "text-2xl"
5364
+ }
5365
+ },
5366
+ roles: {
5367
+ primary: {
5368
+ kind: "complete",
5369
+ appearance: {
5370
+ background: {
5371
+ type: "solid",
5372
+ colorToken: "primary"
5373
+ },
5374
+ borderRadius: "rounded-full",
5375
+ shadow: {
5376
+ elevation: "high",
5377
+ softness: "hard",
5378
+ position: "bottom-right",
5379
+ colorToken: "text"
5380
+ },
5381
+ effects: { hover: [{ effectId: "press-down" }] }
5382
+ }
5383
+ },
5384
+ secondary: {
5385
+ kind: "complete",
5386
+ appearance: {
5387
+ background: {
5388
+ type: "surface",
5389
+ role: "link"
5390
+ },
5391
+ borderRadius: "rounded-full",
5392
+ border: { widthClass: "border-2" },
5393
+ shadow: {
5394
+ elevation: "high",
5395
+ softness: "hard",
5396
+ position: "bottom-right",
5397
+ colorToken: "secondary"
5398
+ },
5399
+ effects: { hover: [{ effectId: "press-down" }] }
5400
+ }
5401
+ },
5402
+ outline: {
5403
+ kind: "derive",
5404
+ from: "secondary"
5405
+ },
5406
+ ghost: {
5407
+ kind: "complete",
5408
+ appearance: {
5409
+ background: {
5410
+ type: "surface",
5411
+ role: "link"
5412
+ },
5413
+ borderRadius: "rounded-full",
5414
+ effects: { hover: [{ effectId: "press-down" }] }
5415
+ }
5416
+ },
5417
+ accent: {
5418
+ kind: "derive",
5419
+ from: "primary",
5420
+ overrides: { background: {
5271
5421
  type: "solid",
5272
- colorToken: "background"
5273
- },
5274
- borderRadius: "rounded-full",
5275
- border: { widthClass: "border-2" },
5276
- effects: { hover: [{
5277
- effectId: "background-on-hover",
5278
- options: { colorToken: "surface" }
5279
- }] }
5422
+ colorToken: "accent"
5423
+ } }
5424
+ }
5425
+ }
5426
+ }
5427
+ });
5428
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
5429
+ id: "ornate-ritual",
5430
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
5431
+ tags: {
5432
+ tone: "classic",
5433
+ energy: "vibrant",
5434
+ motion: "subtle",
5435
+ era: "organic"
5436
+ },
5437
+ system: {
5438
+ global: {
5439
+ cornerStyle: "rounded",
5440
+ textTransform: "uppercase",
5441
+ fontWeight: 600,
5442
+ borderWidth: 1,
5443
+ hoverTransform: "none",
5444
+ hoverColor: "none",
5445
+ letterSpacing: "loose"
5446
+ },
5447
+ sizes: {
5448
+ sm: {
5449
+ padding: "0.5625rem 1.25rem",
5450
+ fontSize: "text-xs"
5280
5451
  },
5281
- {
5282
- id: "outline",
5283
- name: "Outline",
5284
- enabled: true,
5285
- priority: 3,
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
- }] }
5452
+ md: {
5453
+ padding: "0.75rem 1.75rem",
5454
+ fontSize: "text-xs"
5455
+ },
5456
+ lg: {
5457
+ padding: "0.875rem 2.25rem",
5458
+ fontSize: "text-sm"
5296
5459
  },
5297
- {
5298
- id: "ghost",
5299
- name: "Ghost",
5300
- enabled: true,
5301
- priority: 3,
5302
- background: {
5303
- type: "surface",
5304
- role: "link"
5305
- },
5306
- borderRadius: "rounded-full",
5307
- effects: { hover: [{
5308
- effectId: "background-on-hover",
5309
- options: { colorToken: "surface" }
5310
- }] }
5460
+ xl: {
5461
+ padding: "1rem 2.75rem",
5462
+ fontSize: "text-base"
5311
5463
  }
5312
- ]
5313
- }
5314
- });
5315
- //#endregion
5316
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
5317
- /**
5318
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
5319
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
5320
- */
5321
- const softPill = defineButtonPersonality({
5322
- id: "soft-pill",
5323
- name: "Soft Pill",
5324
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
5325
- tags: {
5326
- tone: "classic",
5327
- energy: "calm",
5328
- motion: "subtle",
5329
- era: "organic"
5330
- },
5331
- buttonSystem: {
5332
- global: {
5333
- cornerStyle: "pill",
5334
- shadow: "low",
5335
- textTransform: "none",
5336
- fontWeight: 500,
5337
- borderWidth: 2,
5338
- hoverTransform: "lift",
5339
- hoverColor: "none"
5340
5464
  },
5341
- variants: [
5342
- {
5343
- id: "primary",
5344
- name: "Primary",
5345
- enabled: true,
5346
- priority: 1,
5347
- background: {
5348
- type: "solid",
5349
- colorToken: "primary"
5350
- },
5351
- borderRadius: "rounded-full",
5352
- shadow: {
5353
- elevation: "low",
5354
- softness: "soft",
5355
- position: "bottom"
5356
- },
5357
- effects: {
5358
- hover: [{
5359
- effectId: "lift",
5360
- options: { translateY: "-1px" }
5361
- }],
5362
- active: [{
5363
- effectId: "scale-down",
5364
- options: { scale: "0.98" }
5365
- }]
5465
+ roles: {
5466
+ primary: {
5467
+ kind: "complete",
5468
+ appearance: {
5469
+ background: {
5470
+ type: "solid",
5471
+ colorToken: "primary"
5472
+ },
5473
+ borderRadius: "rounded-md",
5474
+ border: { widthClass: "border" },
5475
+ effects: {
5476
+ hover: [{
5477
+ effectId: "background-on-hover",
5478
+ options: { colorToken: "primary-100" }
5479
+ }],
5480
+ active: [{
5481
+ effectId: "scale-down",
5482
+ options: { scale: "0.98" }
5483
+ }]
5484
+ }
5366
5485
  }
5367
5486
  },
5368
- {
5369
- id: "secondary",
5370
- name: "Secondary",
5371
- enabled: true,
5372
- priority: 2,
5373
- background: {
5374
- type: "surface",
5375
- role: "link"
5376
- },
5377
- borderRadius: "rounded-full",
5378
- border: { widthClass: "border-2" },
5379
- effects: { hover: [{
5380
- effectId: "background-on-hover",
5381
- options: { colorToken: "surface" }
5382
- }] }
5487
+ secondary: {
5488
+ kind: "complete",
5489
+ appearance: {
5490
+ background: {
5491
+ type: "solid",
5492
+ colorToken: "secondary"
5493
+ },
5494
+ borderRadius: "rounded-md",
5495
+ border: { widthClass: "border" },
5496
+ effects: { hover: [{
5497
+ effectId: "background-on-hover",
5498
+ options: { colorToken: "surface" }
5499
+ }] }
5500
+ }
5383
5501
  },
5384
- {
5385
- id: "outline",
5386
- name: "Outline",
5387
- enabled: true,
5388
- priority: 3,
5389
- background: {
5390
- type: "surface",
5391
- role: "link"
5392
- },
5393
- borderRadius: "rounded-full",
5394
- border: { widthClass: "border" },
5395
- effects: { hover: [{
5396
- effectId: "background-on-hover",
5397
- options: { colorToken: "surface" }
5398
- }] }
5502
+ outline: {
5503
+ kind: "complete",
5504
+ appearance: {
5505
+ background: {
5506
+ type: "surface",
5507
+ role: "link"
5508
+ },
5509
+ borderRadius: "rounded-md",
5510
+ border: { widthClass: "border" },
5511
+ effects: { hover: [{
5512
+ effectId: "background-on-hover",
5513
+ options: { colorToken: "muted" }
5514
+ }] }
5515
+ }
5399
5516
  },
5400
- {
5401
- id: "ghost",
5402
- name: "Ghost",
5403
- enabled: true,
5404
- priority: 3,
5405
- background: {
5406
- type: "surface",
5407
- role: "link"
5408
- },
5409
- borderRadius: "rounded-full",
5410
- effects: { hover: [{
5411
- effectId: "background-on-hover",
5412
- options: { colorToken: "surface" }
5413
- }] }
5517
+ ghost: {
5518
+ kind: "complete",
5519
+ appearance: {
5520
+ background: {
5521
+ type: "surface",
5522
+ role: "link"
5523
+ },
5524
+ borderRadius: "rounded-none",
5525
+ sizes: {
5526
+ sm: {
5527
+ padding: "0.375rem 0",
5528
+ fontSize: "text-xs"
5529
+ },
5530
+ md: {
5531
+ padding: "0.5rem 0",
5532
+ fontSize: "text-sm"
5533
+ },
5534
+ lg: {
5535
+ padding: "0.625rem 0",
5536
+ fontSize: "text-base"
5537
+ },
5538
+ xl: {
5539
+ padding: "0.75rem 0",
5540
+ fontSize: "text-lg"
5541
+ }
5542
+ },
5543
+ effects: { base: [{
5544
+ effectId: "border-bottom-grow",
5545
+ options: {
5546
+ height: 1,
5547
+ colorToken: "accent",
5548
+ origin: "left"
5549
+ }
5550
+ }] }
5551
+ }
5552
+ },
5553
+ accent: {
5554
+ kind: "derive",
5555
+ from: "primary",
5556
+ overrides: { background: {
5557
+ type: "solid",
5558
+ colorToken: "accent"
5559
+ } }
5414
5560
  }
5415
- ]
5561
+ }
5416
5562
  }
5417
5563
  });
5418
5564
  //#endregion
5419
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
5420
- const solidSecondary = {
5421
- id: "secondary",
5422
- name: "Secondary",
5423
- enabled: true,
5424
- priority: 2,
5425
- background: {
5426
- type: "solid",
5427
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
5428
- },
5429
- borderRadius: "rounded-full",
5430
- shadow: {
5431
- elevation: "none",
5432
- softness: null,
5433
- position: "bottom"
5434
- },
5435
- effects: {
5436
- hover: [{
5437
- effectId: "background-on-hover-alpha",
5438
- options: {
5439
- colorToken: "secondary",
5440
- opacity: 88
5441
- }
5442
- }],
5443
- active: [{
5444
- effectId: "scale-down",
5445
- options: { scale: "0.98" }
5446
- }]
5447
- }
5448
- };
5449
- //#endregion
5450
- //#region ../theme-core/src/buttons/personalities/index.ts
5451
- const buttonPersonalities = [
5452
- softPill,
5453
- defineButtonPersonality({
5454
- id: "two-tone-pill",
5455
- name: "Two-tone Pill",
5456
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
5457
- tags: softPill.tags,
5458
- buttonSystem: {
5459
- ...softPill.buttonSystem,
5460
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
5461
- }
5462
- }),
5463
- earthPill,
5464
- confidentChip,
5465
- editorialLink,
5466
- pebble,
5467
- inkStamp,
5468
- flatInk,
5469
- brushedWash,
5470
- showtimePill,
5471
- joyStamp,
5472
- ornateRitual,
5473
- quietArrow
5565
+ //#region ../theme-core/src/buttons/styles/registry.ts
5566
+ const buttonStyleRecipes = [
5567
+ softPillRecipe,
5568
+ earthPillRecipe,
5569
+ confidentChipRecipe,
5570
+ editorialLinkRecipe,
5571
+ pebbleRecipe,
5572
+ inkStampRecipe,
5573
+ flatInkRecipe,
5574
+ brushedWashRecipe,
5575
+ showtimePillRecipe,
5576
+ joyStampRecipe,
5577
+ ornateRitualRecipe,
5578
+ quietArrowRecipe
5474
5579
  ];
5475
- new Map(buttonPersonalities.map((p) => [p.id, p]));
5476
- buttonPersonalities.map((personality) => ({
5477
- id: personality.id,
5478
- name: personality.name,
5479
- description: personality.description,
5480
- category: presetCategory(personality),
5481
- buttonSystem: personality.buttonSystem,
5482
- compatibility: {
5483
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
5484
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
5485
- }
5486
- }));
5487
- function presetCategory(personality) {
5488
- switch (personality.tags.era) {
5580
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
5581
+ function findButtonStyleRecipe(id) {
5582
+ const recipe = recipesById.get(id);
5583
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
5584
+ return recipe;
5585
+ }
5586
+ function resolveButtonStyleSelection(selection) {
5587
+ switch (selection.styleId) {
5588
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
5589
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
5590
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
5591
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
5592
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
5593
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
5594
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
5595
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
5596
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
5597
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
5598
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
5599
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
5600
+ }
5601
+ }
5602
+ function defaultButtonStyleSelectionFor(styleId) {
5603
+ return {
5604
+ styleId,
5605
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
5606
+ };
5607
+ }
5608
+ 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");
5609
+ buttonStyleRecipes.map((recipe) => {
5610
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
5611
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
5612
+ return {
5613
+ id: recipe.id,
5614
+ name: recipe.accessibilityLabel,
5615
+ description: recipe.accessibilityLabel,
5616
+ category: presetCategory(recipe),
5617
+ buttonSystem: resolved.buttonSystem,
5618
+ compatibility: {
5619
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
5620
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
5621
+ }
5622
+ };
5623
+ });
5624
+ function presetCategory(recipe) {
5625
+ switch (recipe.tags.era) {
5489
5626
  case "retro": return "retro";
5490
5627
  case "editorial": return "minimal";
5491
5628
  case "organic": return "artistic";
5492
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
5629
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
5493
5630
  case "technical": return "technical";
5494
5631
  case void 0: return "modern";
5495
5632
  }
@@ -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
  ],
@@ -17322,25 +17139,41 @@ const heroLayoutControlsFragment = defineFragment({
17322
17139
  layout: []
17323
17140
  });
17324
17141
  //#endregion
17142
+ //#region ../blocks/src/system/constants/buttonRoles.ts
17143
+ /**
17144
+ * Semantic button roles available to block authors.
17145
+ *
17146
+ * These roles are deliberately independent of a site's visual button style:
17147
+ * the active theme owns how each role looks.
17148
+ */
17149
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
17150
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
17151
+ /**
17152
+ * Temporary rollout boundary for persisted content written before issue #1220.
17153
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
17154
+ * only until the post-deploy role rewrite has been audited in production.
17155
+ */
17156
+ function canonicalizePersistedBlockButtonRole(value) {
17157
+ return value === "link" || value === "tertiary" ? "ghost" : value;
17158
+ }
17159
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
17160
+ const BLOCK_BUTTON_ROLE_LABELS = {
17161
+ primary: "Primary",
17162
+ secondary: "Secondary",
17163
+ outline: "Outline",
17164
+ ghost: "Ghost",
17165
+ accent: "Accent"
17166
+ };
17167
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
17168
+ value,
17169
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
17170
+ }));
17171
+ function isBlockButtonRole(value) {
17172
+ return blockButtonRoleSchema.safeParse(value).success;
17173
+ }
17174
+ //#endregion
17325
17175
  //#region ../blocks/src/system/fields/button.ts
17326
- const DEFAULT_THEME_BUTTON_VARIANTS = [
17327
- {
17328
- value: "primary",
17329
- label: "Primary"
17330
- },
17331
- {
17332
- value: "secondary",
17333
- label: "Secondary"
17334
- },
17335
- {
17336
- value: "outline",
17337
- label: "Outline"
17338
- },
17339
- {
17340
- value: "link",
17341
- label: "Link"
17342
- }
17343
- ];
17176
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
17344
17177
  function createButtonVariantField(options = {}) {
17345
17178
  return {
17346
17179
  id: options.id ?? "buttonVariant",
@@ -17358,20 +17191,7 @@ function createButtonVariantField(options = {}) {
17358
17191
  };
17359
17192
  }
17360
17193
  function createButtonGroup(options = {}) {
17361
- const { variants = [
17362
- {
17363
- value: "primary",
17364
- label: "Primary"
17365
- },
17366
- {
17367
- value: "secondary",
17368
- label: "Secondary"
17369
- },
17370
- {
17371
- value: "outline",
17372
- label: "Outline"
17373
- }
17374
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17194
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
17375
17195
  const mainFields = [
17376
17196
  {
17377
17197
  id: "label",
@@ -17507,29 +17327,7 @@ const ctaRowFragment = defineFragment({
17507
17327
  fields: [createCtasRepeater({
17508
17328
  label: "Calls to action",
17509
17329
  itemLabel: "CTA",
17510
- maxItems: 3,
17511
- button: { variants: [
17512
- {
17513
- value: "primary",
17514
- label: "Primary"
17515
- },
17516
- {
17517
- value: "secondary",
17518
- label: "Secondary"
17519
- },
17520
- {
17521
- value: "outline",
17522
- label: "Outline"
17523
- },
17524
- {
17525
- value: "link",
17526
- label: "Link"
17527
- },
17528
- {
17529
- value: "accent",
17530
- label: "Accent"
17531
- }
17532
- ] }
17330
+ maxItems: 3
17533
17331
  })],
17534
17332
  layout: [ctaRow({
17535
17333
  collectionPath: "content.ctas",
@@ -17548,10 +17346,6 @@ const heroCtaRowFragment = defineFragment({
17548
17346
  defaultValue: [],
17549
17347
  button: {
17550
17348
  variants: [
17551
- {
17552
- value: "default",
17553
- label: "Default"
17554
- },
17555
17349
  {
17556
17350
  value: "primary",
17557
17351
  label: "Primary"
@@ -17563,9 +17357,17 @@ const heroCtaRowFragment = defineFragment({
17563
17357
  {
17564
17358
  value: "outline",
17565
17359
  label: "Outline"
17360
+ },
17361
+ {
17362
+ value: "ghost",
17363
+ label: "Ghost"
17364
+ },
17365
+ {
17366
+ value: "accent",
17367
+ label: "Accent"
17566
17368
  }
17567
17369
  ],
17568
- defaultVariant: "default",
17370
+ defaultVariant: "primary",
17569
17371
  includeSize: true,
17570
17372
  defaultSize: "lg"
17571
17373
  }
@@ -18256,11 +18058,13 @@ const blogFeaturedPostFragment = defineFragment({
18256
18058
  as: "p",
18257
18059
  style: textColorStyle("text/80")
18258
18060
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
18259
- link({
18260
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
18261
- style: textColorStyle("primary"),
18262
- href: { $bind: { from: "post.path" } }
18263
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
18061
+ button({
18062
+ className: "rb-self-start",
18063
+ href: { $bind: { from: "post.path" } },
18064
+ variantId: "ghost",
18065
+ size: "sm",
18066
+ linkRequired: true
18067
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
18264
18068
  ])], when("post")), stack({
18265
18069
  gap: "sm",
18266
18070
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -18531,21 +18335,7 @@ const newsletterFormFragment = defineFragment({
18531
18335
  createButtonVariantField({
18532
18336
  id: "buttonVariant",
18533
18337
  label: "Button style",
18534
- defaultValue: "primary",
18535
- variants: [
18536
- {
18537
- value: "primary",
18538
- label: "Primary"
18539
- },
18540
- {
18541
- value: "secondary",
18542
- label: "Secondary"
18543
- },
18544
- {
18545
- value: "outline",
18546
- label: "Outline"
18547
- }
18548
- ]
18338
+ defaultValue: "primary"
18549
18339
  }),
18550
18340
  {
18551
18341
  id: "successMessage",
@@ -20094,7 +19884,8 @@ function postExcerpt(className) {
20094
19884
  function postReadMore() {
20095
19885
  return button({
20096
19886
  href: { $bind: { from: "post.path" } },
20097
- className: "rb-self-start"
19887
+ className: "rb-self-start",
19888
+ variantId: "ghost"
20098
19889
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
20099
19890
  as: "span",
20100
19891
  value: "Read more"
@@ -23676,31 +23467,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
23676
23467
  label: "Calls to action",
23677
23468
  itemLabel: "CTA",
23678
23469
  maxItems: 1,
23679
- button: {
23680
- variants: [
23681
- {
23682
- value: "primary",
23683
- label: "Primary"
23684
- },
23685
- {
23686
- value: "secondary",
23687
- label: "Secondary"
23688
- },
23689
- {
23690
- value: "outline",
23691
- label: "Outline"
23692
- },
23693
- {
23694
- value: "ghost",
23695
- label: "Ghost"
23696
- },
23697
- {
23698
- value: "link",
23699
- label: "Link"
23700
- }
23701
- ],
23702
- defaultVariant: "ghost"
23703
- }
23470
+ button: { defaultVariant: "ghost" }
23704
23471
  })
23705
23472
  ] }
23706
23473
  },
@@ -25793,17 +25560,8 @@ function readAmount(value) {
25793
25560
  //#endregion
25794
25561
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
25795
25562
  const previewStageSchema = z$1.enum(["preview", "published"]);
25796
- const registrationButtonVariantSchema = z$1.enum([
25797
- "primary",
25798
- "secondary",
25799
- "outline"
25800
- ]);
25801
- const eventButtonVariantSchema = z$1.enum([
25802
- "primary",
25803
- "secondary",
25804
- "outline",
25805
- "link"
25806
- ]);
25563
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
25564
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
25807
25565
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
25808
25566
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
25809
25567
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -26168,23 +25926,7 @@ const eventRegistrationBlockDefinition = {
26168
25926
  defaultValue: "Complete Registration",
26169
25927
  maxLength: 40
26170
25928
  },
26171
- createButtonVariantField({
26172
- description: "Choose a button style from your theme",
26173
- variants: [
26174
- {
26175
- value: "primary",
26176
- label: "Primary"
26177
- },
26178
- {
26179
- value: "secondary",
26180
- label: "Secondary"
26181
- },
26182
- {
26183
- value: "outline",
26184
- label: "Outline"
26185
- }
26186
- ]
26187
- })
25929
+ createButtonVariantField()
26188
25930
  ],
26189
25931
  layout: [styledSection({
26190
25932
  baseClass: "",
@@ -26491,23 +26233,7 @@ const courseRegistrationBlockDefinition = {
26491
26233
  defaultValue: "Sign up",
26492
26234
  maxLength: 40
26493
26235
  },
26494
- createButtonVariantField({
26495
- description: "Choose a button style from your theme",
26496
- variants: [
26497
- {
26498
- value: "primary",
26499
- label: "Primary"
26500
- },
26501
- {
26502
- value: "secondary",
26503
- label: "Secondary"
26504
- },
26505
- {
26506
- value: "outline",
26507
- label: "Outline"
26508
- }
26509
- ]
26510
- })
26236
+ createButtonVariantField()
26511
26237
  ],
26512
26238
  layout: [styledSection({
26513
26239
  baseClass: "",
@@ -29596,36 +29322,7 @@ const offeringsPreviewFields = [
29596
29322
  ui: { intent: "content" },
29597
29323
  schema: { fields: groupOverrideFields }
29598
29324
  },
29599
- {
29600
- id: "buttonVariant",
29601
- type: "select",
29602
- label: "Button style",
29603
- required: false,
29604
- multiple: false,
29605
- defaultValue: "primary",
29606
- options: [
29607
- {
29608
- value: "primary",
29609
- label: "Primary"
29610
- },
29611
- {
29612
- value: "secondary",
29613
- label: "Secondary"
29614
- },
29615
- {
29616
- value: "outline",
29617
- label: "Outline"
29618
- },
29619
- {
29620
- value: "link",
29621
- label: "Link"
29622
- }
29623
- ],
29624
- ui: {
29625
- intent: "display",
29626
- widget: "buttonVariant"
29627
- }
29628
- },
29325
+ createButtonVariantField(),
29629
29326
  {
29630
29327
  id: "buttonText",
29631
29328
  type: "text",
@@ -29831,7 +29528,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
29831
29528
  return [override];
29832
29529
  }
29833
29530
  function isButtonVariant(value) {
29834
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
29531
+ return value === null || isBlockButtonRole(value);
29835
29532
  }
29836
29533
  function normalizeCardStylesContent(value) {
29837
29534
  return isRecord$3(value) || value === null ? value : void 0;
@@ -31683,12 +31380,7 @@ const shopSourceSchema = z$1.object({
31683
31380
  showPrices: z$1.boolean().optional(),
31684
31381
  showValidityPeriod: z$1.boolean().optional(),
31685
31382
  showPricePerCredit: z$1.boolean().nullable().optional(),
31686
- buttonVariant: z$1.enum([
31687
- "primary",
31688
- "secondary",
31689
- "outline",
31690
- "link"
31691
- ]).optional(),
31383
+ buttonVariant: blockButtonRoleSchema.optional(),
31692
31384
  passesHeading: z$1.string().optional(),
31693
31385
  membershipsHeading: z$1.string().optional(),
31694
31386
  buyButtonText: z$1.string().optional(),
@@ -31833,12 +31525,7 @@ const passesMembershipsHydrationSchema = z$1.object({
31833
31525
  passes: z$1.array(publicPassProductSchema),
31834
31526
  memberships: z$1.array(publicMembershipProductSchema),
31835
31527
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
31836
- buttonVariant: z$1.enum([
31837
- "primary",
31838
- "secondary",
31839
- "outline",
31840
- "link"
31841
- ])
31528
+ buttonVariant: blockButtonRoleSchema
31842
31529
  });
31843
31530
  const productListHydrationSchema = z$1.object({
31844
31531
  products: z$1.array(publicProductSchema),
@@ -33162,11 +32849,7 @@ const newsletterPresetSchema = z$1.enum([
33162
32849
  "emailNameCompany"
33163
32850
  ]);
33164
32851
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
33165
- const newsletterButtonVariantSchema = z$1.enum([
33166
- "primary",
33167
- "secondary",
33168
- "outline"
33169
- ]);
32852
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
33170
32853
  const newsletterFieldSchema = z$1.object({
33171
32854
  id: z$1.string(),
33172
32855
  type: z$1.enum(["email", "text"]),