@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
@@ -2280,6 +2280,24 @@ const API_ENDPOINTS$1 = {
2280
2280
  auth: "user",
2281
2281
  responseKind: "json"
2282
2282
  },
2283
+ publishEventOfferingPageSurface: {
2284
+ path: "/sites/{siteId}/page-surfaces/{pageSurfaceId}/publication",
2285
+ method: "POST",
2286
+ errors: [
2287
+ "auth:forbidden",
2288
+ "validation:invalid_input",
2289
+ "resource:not_found",
2290
+ "resource:conflict",
2291
+ "server:internal_error"
2292
+ ],
2293
+ tags: [
2294
+ TAG_TEMPLATES.siteCollection,
2295
+ TAG_TEMPLATES.siteRoutableContent,
2296
+ TAG_TEMPLATES.pageSurfaceById
2297
+ ],
2298
+ auth: "user",
2299
+ responseKind: "json"
2300
+ },
2283
2301
  runSdkWorkflow: {
2284
2302
  path: "/sites/{siteId}/content/{type}/{entryId}/workflows/{workflowId}/run",
2285
2303
  method: "POST",
@@ -6142,8 +6160,8 @@ const API_ENDPOINTS$1 = {
6142
6160
  auth: "user",
6143
6161
  responseKind: "blob"
6144
6162
  },
6145
- adminSiteCost: {
6146
- path: "/admin/sites/{siteId}/cost",
6163
+ adminSiteBillingArrangement: {
6164
+ path: "/admin/sites/{siteId}/billing/arrangement",
6147
6165
  method: "GET",
6148
6166
  tags: [
6149
6167
  "admin",
@@ -6151,10 +6169,16 @@ const API_ENDPOINTS$1 = {
6151
6169
  "billing"
6152
6170
  ],
6153
6171
  auth: "admin",
6154
- responseKind: "json"
6172
+ responseKind: "json",
6173
+ errors: [
6174
+ "validation:invalid_input",
6175
+ "auth:forbidden",
6176
+ "resource:not_found",
6177
+ "server:internal_error"
6178
+ ]
6155
6179
  },
6156
- adminUpdateSiteCost: {
6157
- path: "/admin/sites/{siteId}/cost",
6180
+ adminUpdateSiteBillingArrangement: {
6181
+ path: "/admin/sites/{siteId}/billing/arrangement",
6158
6182
  method: "POST",
6159
6183
  tags: [
6160
6184
  "admin",
@@ -6162,7 +6186,14 @@ const API_ENDPOINTS$1 = {
6162
6186
  "billing"
6163
6187
  ],
6164
6188
  auth: "admin",
6165
- responseKind: "json"
6189
+ responseKind: "json",
6190
+ errors: [
6191
+ "validation:invalid_input",
6192
+ "auth:forbidden",
6193
+ "resource:not_found",
6194
+ "resource:conflict",
6195
+ "server:internal_error"
6196
+ ]
6166
6197
  },
6167
6198
  adminScheduleBillingComponentEnd: {
6168
6199
  path: "/admin/sites/{siteId}/billing/components/{componentId}/end",
@@ -16464,7 +16495,7 @@ const gradientDirectionSchema$1 = z$1.enum([
16464
16495
  "to-br",
16465
16496
  "to-bl"
16466
16497
  ]);
16467
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
16498
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
16468
16499
  z$1.object({
16469
16500
  type: z$1.literal("solid"),
16470
16501
  colorToken: opaqueButtonColourTokenSchema
@@ -16488,6 +16519,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
16488
16519
  role: z$1.literal("link")
16489
16520
  })
16490
16521
  ]);
16522
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
16491
16523
  const effectApplicationSchema$1 = z$1.object({
16492
16524
  effectId: z$1.string(),
16493
16525
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -16699,50 +16731,887 @@ function isUnknownArray$2(value) {
16699
16731
  return Array.isArray(value);
16700
16732
  }
16701
16733
  //#endregion
16702
- //#region ../theme-core/src/buttons/personalities/types.ts
16703
- function asButtonPersonalityId(value) {
16704
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
16705
- return value;
16734
+ //#region ../theme-core/src/buttons/styles/domain.ts
16735
+ const PUBLIC_BUTTON_ROLES = [
16736
+ "primary",
16737
+ "secondary",
16738
+ "outline",
16739
+ "ghost",
16740
+ "accent"
16741
+ ];
16742
+ function defineButtonStyleRecipe(recipe) {
16743
+ return recipe;
16706
16744
  }
16707
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
16708
- z$1.object({
16709
- id: buttonPersonalityIdSchema,
16710
- name: z$1.string().min(1),
16711
- description: z$1.string().min(1),
16712
- tags: styleTagsSchema,
16713
- buttonSystem: buttonSystemSchema
16714
- });
16715
- /**
16716
- * Helper for personality file modules to keep the call site short and
16717
- * type-safe. `as const satisfies ...` would also work but produces wider
16718
- * types at use sites.
16719
- */
16720
- function defineButtonPersonality(input) {
16745
+ function materializeButtonRoles(definitions) {
16746
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
16747
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
16748
+ const completeRoles = {
16749
+ primary,
16750
+ secondary
16751
+ };
16721
16752
  return {
16722
- id: asButtonPersonalityId(input.id),
16723
- name: input.name,
16724
- description: input.description,
16753
+ primary,
16754
+ secondary,
16755
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
16756
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
16757
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
16758
+ };
16759
+ }
16760
+ function resolveButtonStyleRecipe(recipe, parameters) {
16761
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
16762
+ if (!parsedParameters.success) return {
16763
+ kind: "error",
16764
+ error: {
16765
+ kind: "invalid-parameters",
16766
+ styleId: recipe.id,
16767
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
16768
+ }
16769
+ };
16770
+ const definition = recipe.defineSystem(parsedParameters.data);
16771
+ const roles = materializeButtonRoles(definition.roles);
16772
+ const buttonSystem = {
16773
+ global: definition.global,
16774
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
16775
+ ...definition.sizes ? { sizes: definition.sizes } : {}
16776
+ };
16777
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
16778
+ if (!parsedButtonSystem.success) return {
16779
+ kind: "error",
16780
+ error: {
16781
+ kind: "invalid-button-system",
16782
+ styleId: recipe.id,
16783
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
16784
+ }
16785
+ };
16786
+ return {
16787
+ kind: "resolved",
16788
+ buttonSystem: parsedButtonSystem.data
16789
+ };
16790
+ }
16791
+ function materializeSupportingRole(role, definition, completeRoles) {
16792
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
16793
+ return {
16794
+ ...completeRoles[definition.from],
16795
+ ...definition.overrides,
16796
+ id: role,
16797
+ name: roleName(role),
16798
+ enabled: true,
16799
+ priority: 3
16800
+ };
16801
+ }
16802
+ function materializeCompleteRole(role, appearance) {
16803
+ return {
16804
+ ...appearance,
16805
+ id: role,
16806
+ name: roleName(role),
16807
+ enabled: true,
16808
+ priority: rolePriority(role)
16809
+ };
16810
+ }
16811
+ function roleName(role) {
16812
+ return role.charAt(0).toUpperCase() + role.slice(1);
16813
+ }
16814
+ function rolePriority(role) {
16815
+ if (role === "primary") return 1;
16816
+ if (role === "secondary") return 2;
16817
+ return 3;
16818
+ }
16819
+ //#endregion
16820
+ //#region ../theme-core/src/buttons/styles/selection.ts
16821
+ const BUTTON_STYLE_IDS = [
16822
+ "soft-pill",
16823
+ "earth-pill",
16824
+ "confident-chip",
16825
+ "editorial-link",
16826
+ "pebble",
16827
+ "ink-stamp",
16828
+ "flat-ink",
16829
+ "brushed-wash",
16830
+ "showtime-pill",
16831
+ "joy-stamp",
16832
+ "ornate-ritual",
16833
+ "quiet-arrow"
16834
+ ];
16835
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
16836
+ const emptyParametersSchema$1 = z$1.object({}).strict();
16837
+ function selectionBranch(styleId, parameters) {
16838
+ return z$1.object({
16839
+ styleId: z$1.literal(styleId),
16840
+ parameters
16841
+ }).strict();
16842
+ }
16843
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
16844
+ selectionBranch("soft-pill", emptyParametersSchema$1),
16845
+ selectionBranch("earth-pill", emptyParametersSchema$1),
16846
+ selectionBranch("confident-chip", emptyParametersSchema$1),
16847
+ selectionBranch("editorial-link", emptyParametersSchema$1),
16848
+ selectionBranch("pebble", emptyParametersSchema$1),
16849
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
16850
+ selectionBranch("flat-ink", emptyParametersSchema$1),
16851
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
16852
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
16853
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
16854
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
16855
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
16856
+ ]);
16857
+ //#endregion
16858
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
16859
+ const quietArrowRecipe = defineButtonStyleRecipe({
16860
+ id: "quiet-arrow",
16861
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
16862
+ tags: {
16863
+ tone: "classic",
16864
+ energy: "calm",
16865
+ motion: "subtle",
16866
+ era: "editorial"
16867
+ },
16868
+ parameterSchema: quietArrowParametersSchema,
16869
+ defaultParameters: { secondaryTreatment: "outlined" },
16870
+ controls: [{
16871
+ kind: "choice",
16872
+ parameter: "secondaryTreatment",
16873
+ label: "Secondary button treatment",
16874
+ options: [{
16875
+ value: "outlined",
16876
+ label: "Outlined"
16877
+ }, {
16878
+ value: "solid-accent",
16879
+ label: "Solid accent"
16880
+ }]
16881
+ }],
16882
+ defineSystem: (parameters) => ({
16883
+ global: {
16884
+ cornerStyle: "rounded",
16885
+ textTransform: "uppercase",
16886
+ fontWeight: 500,
16887
+ borderWidth: 1,
16888
+ typography: "body",
16889
+ fontSize: "text-sm",
16890
+ letterSpacing: "loose",
16891
+ hoverTransform: "none",
16892
+ hoverColor: "none"
16893
+ },
16894
+ sizes: {
16895
+ sm: {
16896
+ padding: "0.625rem 1.25rem",
16897
+ fontSize: "text-xs"
16898
+ },
16899
+ md: {
16900
+ padding: "0.8125rem 1.75rem",
16901
+ fontSize: "text-sm"
16902
+ },
16903
+ lg: {
16904
+ padding: "0.9375rem 2.125rem",
16905
+ fontSize: "text-sm"
16906
+ },
16907
+ xl: {
16908
+ padding: "1.0625rem 2.5rem",
16909
+ fontSize: "text-base"
16910
+ }
16911
+ },
16912
+ roles: {
16913
+ primary: {
16914
+ kind: "complete",
16915
+ appearance: {
16916
+ background: {
16917
+ type: "solid",
16918
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
16919
+ },
16920
+ borderRadius: "rounded-xl",
16921
+ affordance: { iconId: "ArrowRight" },
16922
+ effects: { hover: [{
16923
+ effectId: "darken-background",
16924
+ options: { amount: 100 }
16925
+ }] }
16926
+ }
16927
+ },
16928
+ secondary: {
16929
+ kind: "complete",
16930
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
16931
+ background: {
16932
+ type: "solid",
16933
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
16934
+ },
16935
+ borderRadius: "rounded-xl",
16936
+ affordance: { iconId: "ArrowRight" },
16937
+ effects: { hover: [{
16938
+ effectId: "darken-background",
16939
+ options: { amount: 100 }
16940
+ }] }
16941
+ } : {
16942
+ background: {
16943
+ type: "surface",
16944
+ role: "link"
16945
+ },
16946
+ borderRadius: "rounded-xl",
16947
+ border: { widthClass: "border" },
16948
+ affordance: { iconId: "ArrowRight" },
16949
+ effects: { hover: [{
16950
+ effectId: "background-on-hover",
16951
+ options: { colorToken: "surfaceAlt" }
16952
+ }] }
16953
+ }
16954
+ },
16955
+ outline: {
16956
+ kind: "complete",
16957
+ appearance: {
16958
+ background: {
16959
+ type: "surface",
16960
+ role: "link"
16961
+ },
16962
+ borderRadius: "rounded-xl",
16963
+ border: { widthClass: "border" }
16964
+ }
16965
+ },
16966
+ ghost: {
16967
+ kind: "complete",
16968
+ appearance: {
16969
+ background: {
16970
+ type: "surface",
16971
+ role: "link"
16972
+ },
16973
+ borderRadius: "rounded-xl"
16974
+ }
16975
+ },
16976
+ accent: {
16977
+ kind: "derive",
16978
+ from: "primary",
16979
+ overrides: { background: {
16980
+ type: "solid",
16981
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
16982
+ } }
16983
+ }
16984
+ }
16985
+ })
16986
+ });
16987
+ //#endregion
16988
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
16989
+ const emptyParametersSchema = z$1.object({}).strict();
16990
+ function defineStaticButtonStyleRecipe(input) {
16991
+ const system = normalizeSystem(input.system);
16992
+ return defineButtonStyleRecipe({
16993
+ id: input.id,
16994
+ accessibilityLabel: input.accessibilityLabel,
16725
16995
  tags: input.tags,
16726
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
16996
+ parameterSchema: emptyParametersSchema,
16997
+ defaultParameters: {},
16998
+ controls: [],
16999
+ defineSystem: () => system
17000
+ });
17001
+ }
17002
+ function normalizeSystem(input) {
17003
+ return {
17004
+ global: buttonGlobalSettingsSchema.parse(input.global),
17005
+ ...input.sizes ? { sizes: input.sizes } : {},
17006
+ roles: {
17007
+ primary: normalizeCompleteRole(input.roles.primary),
17008
+ secondary: normalizeCompleteRole(input.roles.secondary),
17009
+ outline: normalizeSupportingRole(input.roles.outline),
17010
+ ghost: normalizeSupportingRole(input.roles.ghost),
17011
+ accent: normalizeSupportingRole(input.roles.accent)
17012
+ }
17013
+ };
17014
+ }
17015
+ function normalizeCompleteRole(role) {
17016
+ return {
17017
+ kind: "complete",
17018
+ appearance: normalizeAppearance(role.appearance)
17019
+ };
17020
+ }
17021
+ function normalizeSupportingRole(role) {
17022
+ if (role.kind === "complete") return normalizeCompleteRole(role);
17023
+ return {
17024
+ kind: "derive",
17025
+ from: role.from,
17026
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
17027
+ };
17028
+ }
17029
+ function normalizeAppearance(appearance) {
17030
+ const { background, hoverBackgroundToken, ...rest } = appearance;
17031
+ return {
17032
+ ...rest,
17033
+ background: buttonColourTreatmentSchema.parse(background),
17034
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
17035
+ };
17036
+ }
17037
+ function normalizeAppearanceOverrides(overrides) {
17038
+ const { background, hoverBackgroundToken, ...rest } = overrides;
17039
+ return {
17040
+ ...rest,
17041
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
17042
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
16727
17043
  };
16728
17044
  }
16729
17045
  //#endregion
16730
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
16731
- /**
16732
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
16733
- * Generous padding, soft shadows; pairs with vibrant organic brands.
16734
- */
16735
- const brushedWash = defineButtonPersonality({
17046
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
17047
+ const softPillRecipe = defineStaticButtonStyleRecipe({
17048
+ id: "soft-pill",
17049
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
17050
+ tags: {
17051
+ tone: "classic",
17052
+ energy: "calm",
17053
+ motion: "subtle",
17054
+ era: "organic"
17055
+ },
17056
+ system: {
17057
+ global: {
17058
+ cornerStyle: "pill",
17059
+ shadow: "low",
17060
+ textTransform: "none",
17061
+ fontWeight: 500,
17062
+ borderWidth: 2,
17063
+ hoverTransform: "lift",
17064
+ hoverColor: "none"
17065
+ },
17066
+ roles: {
17067
+ primary: {
17068
+ kind: "complete",
17069
+ appearance: {
17070
+ background: {
17071
+ type: "solid",
17072
+ colorToken: "primary"
17073
+ },
17074
+ borderRadius: "rounded-full",
17075
+ shadow: {
17076
+ elevation: "low",
17077
+ softness: "soft",
17078
+ position: "bottom"
17079
+ },
17080
+ effects: {
17081
+ hover: [{
17082
+ effectId: "lift",
17083
+ options: { translateY: "-1px" }
17084
+ }],
17085
+ active: [{
17086
+ effectId: "scale-down",
17087
+ options: { scale: "0.98" }
17088
+ }]
17089
+ }
17090
+ }
17091
+ },
17092
+ secondary: {
17093
+ kind: "complete",
17094
+ appearance: {
17095
+ background: {
17096
+ type: "surface",
17097
+ role: "link"
17098
+ },
17099
+ borderRadius: "rounded-full",
17100
+ border: { widthClass: "border-2" },
17101
+ effects: { hover: [{
17102
+ effectId: "background-on-hover",
17103
+ options: { colorToken: "surface" }
17104
+ }] }
17105
+ }
17106
+ },
17107
+ outline: {
17108
+ kind: "complete",
17109
+ appearance: {
17110
+ background: {
17111
+ type: "surface",
17112
+ role: "link"
17113
+ },
17114
+ borderRadius: "rounded-full",
17115
+ border: { widthClass: "border" },
17116
+ effects: { hover: [{
17117
+ effectId: "background-on-hover",
17118
+ options: { colorToken: "surface" }
17119
+ }] }
17120
+ }
17121
+ },
17122
+ ghost: {
17123
+ kind: "complete",
17124
+ appearance: {
17125
+ background: {
17126
+ type: "surface",
17127
+ role: "link"
17128
+ },
17129
+ borderRadius: "rounded-full",
17130
+ effects: { hover: [{
17131
+ effectId: "background-on-hover",
17132
+ options: { colorToken: "surface" }
17133
+ }] }
17134
+ }
17135
+ },
17136
+ accent: {
17137
+ kind: "derive",
17138
+ from: "primary",
17139
+ overrides: { background: {
17140
+ type: "solid",
17141
+ colorToken: "accent"
17142
+ } }
17143
+ }
17144
+ }
17145
+ }
17146
+ });
17147
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
17148
+ id: "earth-pill",
17149
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
17150
+ tags: {
17151
+ tone: "classic",
17152
+ energy: "calm",
17153
+ motion: "subtle",
17154
+ era: "organic"
17155
+ },
17156
+ system: {
17157
+ global: {
17158
+ cornerStyle: "pill",
17159
+ shadow: "low",
17160
+ textTransform: "none",
17161
+ fontWeight: 500,
17162
+ borderWidth: 1,
17163
+ hoverTransform: "lift",
17164
+ hoverColor: "none",
17165
+ typography: "body",
17166
+ paddingPreset: "default"
17167
+ },
17168
+ sizes: {
17169
+ sm: {
17170
+ padding: "0.5rem 1rem",
17171
+ fontSize: "text-sm"
17172
+ },
17173
+ md: { padding: "0.625rem 1.35rem" },
17174
+ lg: {
17175
+ padding: "0.75rem 1.65rem",
17176
+ fontSize: "text-lg"
17177
+ },
17178
+ xl: {
17179
+ padding: "0.875rem 2rem",
17180
+ fontSize: "text-xl"
17181
+ }
17182
+ },
17183
+ roles: {
17184
+ primary: {
17185
+ kind: "complete",
17186
+ appearance: {
17187
+ background: {
17188
+ type: "solid",
17189
+ colorToken: "primary"
17190
+ },
17191
+ borderRadius: "rounded-full",
17192
+ shadow: {
17193
+ elevation: "low",
17194
+ softness: "soft",
17195
+ position: "bottom"
17196
+ },
17197
+ effects: {
17198
+ hover: [{
17199
+ effectId: "lift",
17200
+ options: { translateY: "-1px" }
17201
+ }, {
17202
+ effectId: "background-on-hover",
17203
+ options: { colorToken: "accent" }
17204
+ }],
17205
+ active: [{
17206
+ effectId: "scale-down",
17207
+ options: { scale: "0.98" }
17208
+ }]
17209
+ }
17210
+ }
17211
+ },
17212
+ secondary: {
17213
+ kind: "complete",
17214
+ appearance: {
17215
+ background: {
17216
+ type: "surface",
17217
+ role: "link"
17218
+ },
17219
+ borderRadius: "rounded-full",
17220
+ border: { widthClass: "border" },
17221
+ effects: { hover: [{
17222
+ effectId: "background-on-hover",
17223
+ options: { colorToken: "muted" }
17224
+ }] }
17225
+ }
17226
+ },
17227
+ outline: {
17228
+ kind: "complete",
17229
+ appearance: {
17230
+ background: {
17231
+ type: "surface",
17232
+ role: "link"
17233
+ },
17234
+ borderRadius: "rounded-full",
17235
+ border: { widthClass: "border" },
17236
+ effects: { hover: [{
17237
+ effectId: "background-on-hover",
17238
+ options: { colorToken: "surfaceAlt" }
17239
+ }] }
17240
+ }
17241
+ },
17242
+ ghost: {
17243
+ kind: "complete",
17244
+ appearance: {
17245
+ background: {
17246
+ type: "surface",
17247
+ role: "link"
17248
+ },
17249
+ borderRadius: "rounded-full",
17250
+ shadow: {
17251
+ elevation: "none",
17252
+ softness: null,
17253
+ position: "bottom"
17254
+ },
17255
+ sizes: {
17256
+ sm: {
17257
+ padding: "0.25rem 0",
17258
+ fontSize: "text-sm"
17259
+ },
17260
+ md: { padding: "0.375rem 0" },
17261
+ lg: {
17262
+ padding: "0.5rem 0",
17263
+ fontSize: "text-lg"
17264
+ },
17265
+ xl: {
17266
+ padding: "0.625rem 0",
17267
+ fontSize: "text-xl"
17268
+ }
17269
+ }
17270
+ }
17271
+ },
17272
+ accent: {
17273
+ kind: "derive",
17274
+ from: "primary",
17275
+ overrides: { background: {
17276
+ type: "solid",
17277
+ colorToken: "accent"
17278
+ } }
17279
+ }
17280
+ }
17281
+ }
17282
+ });
17283
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
17284
+ id: "confident-chip",
17285
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
17286
+ tags: {
17287
+ tone: "classic",
17288
+ energy: "calm",
17289
+ motion: "standard",
17290
+ era: "modern"
17291
+ },
17292
+ system: {
17293
+ global: {
17294
+ cornerStyle: "rounded",
17295
+ shadow: "medium",
17296
+ textTransform: "none",
17297
+ fontWeight: 600,
17298
+ borderWidth: 1,
17299
+ hoverTransform: "none",
17300
+ hoverColor: "none"
17301
+ },
17302
+ roles: {
17303
+ primary: {
17304
+ kind: "complete",
17305
+ appearance: {
17306
+ background: {
17307
+ type: "solid",
17308
+ colorToken: "primary"
17309
+ },
17310
+ borderRadius: "rounded-md",
17311
+ shadow: {
17312
+ elevation: "medium",
17313
+ softness: "soft",
17314
+ position: "bottom"
17315
+ },
17316
+ effects: {
17317
+ hover: [{
17318
+ effectId: "darken-background",
17319
+ options: { amount: 100 }
17320
+ }],
17321
+ active: [{
17322
+ effectId: "scale-down",
17323
+ options: { scale: "0.97" }
17324
+ }]
17325
+ }
17326
+ }
17327
+ },
17328
+ secondary: {
17329
+ kind: "complete",
17330
+ appearance: {
17331
+ background: {
17332
+ type: "solid",
17333
+ colorToken: "surface"
17334
+ },
17335
+ borderRadius: "rounded-md",
17336
+ border: { widthClass: "border" },
17337
+ effects: { hover: [{
17338
+ effectId: "background-on-hover",
17339
+ options: { colorToken: "background" }
17340
+ }] }
17341
+ }
17342
+ },
17343
+ outline: {
17344
+ kind: "complete",
17345
+ appearance: {
17346
+ background: {
17347
+ type: "surface",
17348
+ role: "link"
17349
+ },
17350
+ borderRadius: "rounded-md",
17351
+ border: { widthClass: "border" },
17352
+ effects: { hover: [{
17353
+ effectId: "background-on-hover",
17354
+ options: { colorToken: "surface" }
17355
+ }] }
17356
+ }
17357
+ },
17358
+ ghost: {
17359
+ kind: "complete",
17360
+ appearance: {
17361
+ background: {
17362
+ type: "surface",
17363
+ role: "link"
17364
+ },
17365
+ borderRadius: "rounded-md",
17366
+ effects: { hover: [{
17367
+ effectId: "background-on-hover",
17368
+ options: { colorToken: "surface" }
17369
+ }] }
17370
+ }
17371
+ },
17372
+ accent: {
17373
+ kind: "derive",
17374
+ from: "primary",
17375
+ overrides: { background: {
17376
+ type: "solid",
17377
+ colorToken: "accent"
17378
+ } }
17379
+ }
17380
+ }
17381
+ }
17382
+ });
17383
+ const editorialSizes = {
17384
+ sm: { padding: "0.25rem 0" },
17385
+ md: { padding: "0.5rem 0" },
17386
+ lg: { padding: "0.625rem 0" },
17387
+ xl: { padding: "0.75rem 0" }
17388
+ };
17389
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
17390
+ id: "editorial-link",
17391
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
17392
+ tags: {
17393
+ tone: "minimal",
17394
+ energy: "calm",
17395
+ motion: "subtle",
17396
+ era: "editorial"
17397
+ },
17398
+ system: {
17399
+ global: {
17400
+ cornerStyle: "square",
17401
+ textTransform: "none",
17402
+ fontWeight: 500,
17403
+ borderWidth: 1,
17404
+ hoverTransform: "none",
17405
+ hoverColor: "none"
17406
+ },
17407
+ roles: {
17408
+ primary: {
17409
+ kind: "complete",
17410
+ appearance: {
17411
+ background: {
17412
+ type: "surface",
17413
+ role: "link"
17414
+ },
17415
+ borderRadius: "rounded-none",
17416
+ sizes: editorialSizes,
17417
+ effects: { base: [{
17418
+ effectId: "border-bottom-grow",
17419
+ options: {
17420
+ height: 2,
17421
+ colorToken: "text",
17422
+ origin: "left"
17423
+ }
17424
+ }] }
17425
+ }
17426
+ },
17427
+ secondary: {
17428
+ kind: "complete",
17429
+ appearance: {
17430
+ background: {
17431
+ type: "surface",
17432
+ role: "link"
17433
+ },
17434
+ borderRadius: "rounded-none",
17435
+ sizes: editorialSizes,
17436
+ effects: { base: [{
17437
+ effectId: "border-bottom-grow",
17438
+ options: {
17439
+ height: 1,
17440
+ colorToken: "mutedText",
17441
+ origin: "left"
17442
+ }
17443
+ }] }
17444
+ }
17445
+ },
17446
+ outline: {
17447
+ kind: "complete",
17448
+ appearance: {
17449
+ background: {
17450
+ type: "surface",
17451
+ role: "link"
17452
+ },
17453
+ borderRadius: "rounded-none",
17454
+ sizes: editorialSizes,
17455
+ effects: { base: [{
17456
+ effectId: "border-bottom-grow",
17457
+ options: {
17458
+ height: 1,
17459
+ colorToken: "accent",
17460
+ origin: "left"
17461
+ }
17462
+ }] }
17463
+ }
17464
+ },
17465
+ ghost: {
17466
+ kind: "complete",
17467
+ appearance: {
17468
+ background: {
17469
+ type: "surface",
17470
+ role: "link"
17471
+ },
17472
+ borderRadius: "rounded-none",
17473
+ sizes: editorialSizes
17474
+ }
17475
+ },
17476
+ accent: {
17477
+ kind: "derive",
17478
+ from: "primary",
17479
+ overrides: { effects: { base: [{
17480
+ effectId: "border-bottom-grow",
17481
+ options: {
17482
+ height: 2,
17483
+ colorToken: "accent",
17484
+ origin: "left"
17485
+ }
17486
+ }] } }
17487
+ }
17488
+ }
17489
+ }
17490
+ });
17491
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
17492
+ id: "pebble",
17493
+ accessibilityLabel: "Generously padded pill buttons",
17494
+ tags: {
17495
+ tone: "classic",
17496
+ energy: "calm",
17497
+ motion: "standard",
17498
+ era: "organic"
17499
+ },
17500
+ system: {
17501
+ global: {
17502
+ cornerStyle: "pill",
17503
+ textTransform: "none",
17504
+ fontWeight: 500,
17505
+ borderWidth: 2,
17506
+ hoverTransform: "none",
17507
+ hoverColor: "none"
17508
+ },
17509
+ sizes: {
17510
+ sm: {
17511
+ padding: "0.625rem 1.75rem",
17512
+ fontSize: "text-sm"
17513
+ },
17514
+ md: { padding: "0.875rem 2.25rem" },
17515
+ lg: {
17516
+ padding: "1.125rem 2.75rem",
17517
+ fontSize: "text-lg"
17518
+ },
17519
+ xl: {
17520
+ padding: "1.5rem 3.5rem",
17521
+ fontSize: "text-xl"
17522
+ }
17523
+ },
17524
+ roles: {
17525
+ primary: {
17526
+ kind: "complete",
17527
+ appearance: {
17528
+ background: {
17529
+ type: "solid",
17530
+ colorToken: "primary"
17531
+ },
17532
+ borderRadius: "rounded-full",
17533
+ effects: { hover: [{
17534
+ effectId: "darken-background",
17535
+ options: { amount: 100 }
17536
+ }] }
17537
+ }
17538
+ },
17539
+ secondary: {
17540
+ kind: "complete",
17541
+ appearance: {
17542
+ background: {
17543
+ type: "surface",
17544
+ role: "link"
17545
+ },
17546
+ borderRadius: "rounded-full",
17547
+ border: { widthClass: "border-2" },
17548
+ effects: { hover: [{
17549
+ effectId: "background-on-hover",
17550
+ options: { colorToken: "accent" }
17551
+ }] }
17552
+ }
17553
+ },
17554
+ outline: {
17555
+ kind: "complete",
17556
+ appearance: {
17557
+ background: {
17558
+ type: "surface",
17559
+ role: "link"
17560
+ },
17561
+ borderRadius: "rounded-full",
17562
+ border: { widthClass: "border" },
17563
+ effects: { hover: [{
17564
+ effectId: "background-on-hover",
17565
+ options: { colorToken: "surface" }
17566
+ }] }
17567
+ }
17568
+ },
17569
+ ghost: {
17570
+ kind: "complete",
17571
+ appearance: {
17572
+ background: {
17573
+ type: "surface",
17574
+ role: "link"
17575
+ },
17576
+ borderRadius: "rounded-full",
17577
+ sizes: {
17578
+ sm: {
17579
+ padding: "0.375rem 0.875rem",
17580
+ fontSize: "text-sm"
17581
+ },
17582
+ md: { padding: "0.5rem 1rem" },
17583
+ lg: {
17584
+ padding: "0.625rem 1.25rem",
17585
+ fontSize: "text-lg"
17586
+ },
17587
+ xl: {
17588
+ padding: "0.75rem 1.5rem",
17589
+ fontSize: "text-xl"
17590
+ }
17591
+ }
17592
+ }
17593
+ },
17594
+ accent: {
17595
+ kind: "derive",
17596
+ from: "primary",
17597
+ overrides: { background: {
17598
+ type: "solid",
17599
+ colorToken: "accent"
17600
+ } }
17601
+ }
17602
+ }
17603
+ }
17604
+ });
17605
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
16736
17606
  id: "brushed-wash",
16737
- name: "Brushed Wash",
16738
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
17607
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
16739
17608
  tags: {
16740
17609
  tone: "classic",
16741
17610
  energy: "vibrant",
16742
17611
  motion: "standard",
16743
17612
  era: "organic"
16744
17613
  },
16745
- buttonSystem: {
17614
+ system: {
16746
17615
  global: {
16747
17616
  cornerStyle: "rounded",
16748
17617
  shadow: "low",
@@ -16767,461 +17636,229 @@ const brushedWash = defineButtonPersonality({
16767
17636
  fontSize: "text-xl"
16768
17637
  }
16769
17638
  },
16770
- variants: [
16771
- {
16772
- id: "primary",
16773
- name: "Primary",
16774
- enabled: true,
16775
- priority: 1,
16776
- background: {
16777
- type: "gradient",
16778
- stops: ["primary", "accent"],
16779
- direction: "to-r",
16780
- foregroundToken: "primaryForeground"
16781
- },
16782
- borderRadius: "rounded-lg",
16783
- shadow: {
16784
- elevation: "low",
16785
- softness: "soft",
16786
- position: "bottom"
17639
+ roles: {
17640
+ primary: {
17641
+ kind: "complete",
17642
+ appearance: {
17643
+ background: {
17644
+ type: "gradient",
17645
+ stops: ["primary", "accent"],
17646
+ direction: "to-r",
17647
+ foregroundToken: "primaryForeground"
17648
+ },
17649
+ borderRadius: "rounded-lg",
17650
+ shadow: {
17651
+ elevation: "low",
17652
+ softness: "soft",
17653
+ position: "bottom"
17654
+ }
16787
17655
  }
16788
17656
  },
16789
- {
16790
- id: "secondary",
16791
- name: "Secondary",
16792
- enabled: true,
16793
- priority: 2,
16794
- background: {
16795
- type: "gradient",
16796
- stops: ["secondary", "accent"],
16797
- direction: "to-br",
16798
- foregroundToken: "primaryForeground"
16799
- },
16800
- borderRadius: "rounded-lg",
16801
- shadow: {
16802
- elevation: "low",
16803
- softness: "soft",
16804
- position: "bottom"
17657
+ secondary: {
17658
+ kind: "complete",
17659
+ appearance: {
17660
+ background: {
17661
+ type: "gradient",
17662
+ stops: ["secondary", "accent"],
17663
+ direction: "to-br",
17664
+ foregroundToken: "primaryForeground"
17665
+ },
17666
+ borderRadius: "rounded-lg",
17667
+ shadow: {
17668
+ elevation: "low",
17669
+ softness: "soft",
17670
+ position: "bottom"
17671
+ }
16805
17672
  }
16806
17673
  },
16807
- {
16808
- id: "outline",
16809
- name: "Outline",
16810
- enabled: true,
16811
- priority: 3,
16812
- background: {
16813
- type: "surface",
16814
- role: "link"
16815
- },
16816
- borderRadius: "rounded-lg",
16817
- border: { widthClass: "border" },
16818
- effects: { hover: [{
16819
- effectId: "background-on-hover",
16820
- options: { colorToken: "surface" }
16821
- }] }
17674
+ outline: {
17675
+ kind: "complete",
17676
+ appearance: {
17677
+ background: {
17678
+ type: "surface",
17679
+ role: "link"
17680
+ },
17681
+ borderRadius: "rounded-lg",
17682
+ border: { widthClass: "border" },
17683
+ effects: { hover: [{
17684
+ effectId: "background-on-hover",
17685
+ options: { colorToken: "surface" }
17686
+ }] }
17687
+ }
16822
17688
  },
16823
- {
16824
- id: "ghost",
16825
- name: "Ghost",
16826
- enabled: true,
16827
- priority: 3,
16828
- background: {
16829
- type: "surface",
16830
- role: "link"
16831
- },
16832
- borderRadius: "rounded-lg",
16833
- effects: { hover: [{
16834
- effectId: "background-on-hover",
16835
- options: { colorToken: "surface" }
16836
- }] }
16837
- }
16838
- ]
16839
- }
16840
- });
16841
- //#endregion
16842
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
16843
- /**
16844
- * Confident Chip — moderate-radius solid buttons that read as competent and
16845
- * direct. Default for Clear Professional; works for any modern brand voice.
16846
- */
16847
- const confidentChip = defineButtonPersonality({
16848
- id: "confident-chip",
16849
- name: "Confident Chip",
16850
- description: "Mid-radius solid buttons with a crisp hover.",
16851
- tags: {
16852
- tone: "classic",
16853
- energy: "calm",
16854
- motion: "standard",
16855
- era: "modern"
16856
- },
16857
- buttonSystem: {
16858
- global: {
16859
- cornerStyle: "rounded",
16860
- shadow: "medium",
16861
- textTransform: "none",
16862
- fontWeight: 600,
16863
- borderWidth: 1,
16864
- hoverTransform: "none",
16865
- hoverColor: "none"
16866
- },
16867
- variants: [
16868
- {
16869
- id: "primary",
16870
- name: "Primary",
16871
- enabled: true,
16872
- priority: 1,
16873
- background: {
16874
- type: "solid",
16875
- colorToken: "primary"
16876
- },
16877
- borderRadius: "rounded-md",
16878
- shadow: {
16879
- elevation: "medium",
16880
- softness: "soft",
16881
- position: "bottom"
16882
- },
16883
- effects: {
16884
- hover: [{
16885
- effectId: "darken-background",
16886
- options: { amount: 100 }
16887
- }],
16888
- active: [{
16889
- effectId: "scale-down",
16890
- options: { scale: "0.97" }
16891
- }]
17689
+ ghost: {
17690
+ kind: "complete",
17691
+ appearance: {
17692
+ background: {
17693
+ type: "surface",
17694
+ role: "link"
17695
+ },
17696
+ borderRadius: "rounded-lg",
17697
+ effects: { hover: [{
17698
+ effectId: "background-on-hover",
17699
+ options: { colorToken: "surface" }
17700
+ }] }
16892
17701
  }
16893
17702
  },
16894
- {
16895
- id: "secondary",
16896
- name: "Secondary",
16897
- enabled: true,
16898
- priority: 2,
16899
- background: {
17703
+ accent: {
17704
+ kind: "derive",
17705
+ from: "primary",
17706
+ overrides: { background: {
16900
17707
  type: "solid",
16901
- colorToken: "surface"
16902
- },
16903
- borderRadius: "rounded-md",
16904
- border: { widthClass: "border" },
16905
- effects: { hover: [{
16906
- effectId: "background-on-hover",
16907
- options: { colorToken: "background" }
16908
- }] }
16909
- },
16910
- {
16911
- id: "outline",
16912
- name: "Outline",
16913
- enabled: true,
16914
- priority: 3,
16915
- background: {
16916
- type: "surface",
16917
- role: "link"
16918
- },
16919
- borderRadius: "rounded-md",
16920
- border: { widthClass: "border" },
16921
- effects: { hover: [{
16922
- effectId: "background-on-hover",
16923
- options: { colorToken: "surface" }
16924
- }] }
16925
- },
16926
- {
16927
- id: "ghost",
16928
- name: "Ghost",
16929
- enabled: true,
16930
- priority: 3,
16931
- background: {
16932
- type: "surface",
16933
- role: "link"
16934
- },
16935
- borderRadius: "rounded-md",
16936
- effects: { hover: [{
16937
- effectId: "background-on-hover",
16938
- options: { colorToken: "surface" }
16939
- }] }
17708
+ colorToken: "accent"
17709
+ } }
16940
17710
  }
16941
- ]
17711
+ }
16942
17712
  }
16943
17713
  });
16944
- //#endregion
16945
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
16946
- /**
16947
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
16948
- * Built for grounded editorial wellness styles such as Soft Earth.
16949
- */
16950
- const earthPill = defineButtonPersonality({
16951
- id: "earth-pill",
16952
- name: "Earth Pill",
16953
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
17714
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
17715
+ id: "ink-stamp",
17716
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
16954
17717
  tags: {
16955
- tone: "classic",
16956
- energy: "calm",
16957
- motion: "subtle",
17718
+ tone: "bold",
17719
+ energy: "vibrant",
17720
+ motion: "standard",
16958
17721
  era: "organic"
16959
17722
  },
16960
- buttonSystem: {
17723
+ system: {
16961
17724
  global: {
16962
- cornerStyle: "pill",
16963
- shadow: "low",
16964
- textTransform: "none",
16965
- fontWeight: 500,
17725
+ cornerStyle: "rounded",
17726
+ textTransform: "uppercase",
17727
+ fontWeight: 600,
16966
17728
  borderWidth: 1,
16967
- hoverTransform: "lift",
17729
+ hoverTransform: "none",
16968
17730
  hoverColor: "none",
16969
- typography: "body",
16970
- paddingPreset: "default"
17731
+ letterSpacing: "loose"
16971
17732
  },
16972
17733
  sizes: {
16973
17734
  sm: {
16974
- padding: "0.5rem 1rem",
17735
+ padding: "0.5rem 1.25rem",
17736
+ fontSize: "text-xs"
17737
+ },
17738
+ md: {
17739
+ padding: "0.75rem 1.75rem",
16975
17740
  fontSize: "text-sm"
16976
17741
  },
16977
- md: { padding: "0.625rem 1.35rem" },
16978
17742
  lg: {
16979
- padding: "0.75rem 1.65rem",
16980
- fontSize: "text-lg"
17743
+ padding: "0.875rem 2.25rem",
17744
+ fontSize: "text-base"
16981
17745
  },
16982
17746
  xl: {
16983
- padding: "0.875rem 2rem",
16984
- fontSize: "text-xl"
17747
+ padding: "1.125rem 2.75rem",
17748
+ fontSize: "text-lg"
16985
17749
  }
16986
17750
  },
16987
- variants: [
16988
- {
16989
- id: "primary",
16990
- name: "Primary",
16991
- enabled: true,
16992
- priority: 1,
16993
- background: {
16994
- type: "solid",
16995
- colorToken: "primary"
16996
- },
16997
- borderRadius: "rounded-full",
16998
- shadow: {
16999
- elevation: "low",
17000
- softness: "soft",
17001
- position: "bottom"
17002
- },
17003
- effects: {
17004
- hover: [{
17005
- effectId: "lift",
17006
- options: { translateY: "-1px" }
17007
- }, {
17008
- effectId: "background-on-hover",
17009
- options: { colorToken: "accent" }
17010
- }],
17011
- active: [{
17012
- effectId: "scale-down",
17013
- options: { scale: "0.98" }
17014
- }]
17751
+ roles: {
17752
+ primary: {
17753
+ kind: "complete",
17754
+ appearance: {
17755
+ background: {
17756
+ type: "solid",
17757
+ colorToken: "primary"
17758
+ },
17759
+ borderRadius: "rounded-md",
17760
+ effects: {
17761
+ hover: [{
17762
+ effectId: "drop-shadow",
17763
+ options: { intensity: "medium" }
17764
+ }, {
17765
+ effectId: "scale-up",
17766
+ options: { scale: "1.02" }
17767
+ }],
17768
+ active: [{
17769
+ effectId: "scale-down",
17770
+ options: { scale: "0.98" }
17771
+ }]
17772
+ }
17015
17773
  }
17016
17774
  },
17017
- {
17018
- id: "secondary",
17019
- name: "Secondary",
17020
- enabled: true,
17021
- priority: 2,
17022
- background: {
17023
- type: "surface",
17024
- role: "link"
17025
- },
17026
- borderRadius: "rounded-full",
17027
- border: { widthClass: "border" },
17028
- effects: { hover: [{
17029
- effectId: "background-on-hover",
17030
- options: { colorToken: "muted" }
17031
- }] }
17775
+ secondary: {
17776
+ kind: "complete",
17777
+ appearance: {
17778
+ background: {
17779
+ type: "surface",
17780
+ role: "link"
17781
+ },
17782
+ borderRadius: "rounded-md",
17783
+ border: { widthClass: "border-2" },
17784
+ effects: { hover: [{
17785
+ effectId: "background-on-hover",
17786
+ options: { colorToken: "surface" }
17787
+ }] }
17788
+ }
17032
17789
  },
17033
- {
17034
- id: "outline",
17035
- name: "Outline",
17036
- enabled: true,
17037
- priority: 3,
17038
- background: {
17039
- type: "surface",
17040
- role: "link"
17041
- },
17042
- borderRadius: "rounded-full",
17043
- border: { widthClass: "border" },
17044
- effects: { hover: [{
17045
- effectId: "background-on-hover",
17046
- options: { colorToken: "surfaceAlt" }
17047
- }] }
17790
+ outline: {
17791
+ kind: "complete",
17792
+ appearance: {
17793
+ background: {
17794
+ type: "surface",
17795
+ role: "link"
17796
+ },
17797
+ borderRadius: "rounded-md",
17798
+ border: { widthClass: "border-2" },
17799
+ effects: { hover: [{
17800
+ effectId: "background-on-hover",
17801
+ options: { colorToken: "surface" }
17802
+ }] }
17803
+ }
17048
17804
  },
17049
- {
17050
- id: "ghost",
17051
- name: "Ghost",
17052
- enabled: true,
17053
- priority: 3,
17054
- background: {
17055
- type: "surface",
17056
- role: "link"
17057
- },
17058
- borderRadius: "rounded-full",
17059
- shadow: {
17060
- elevation: "none",
17061
- softness: null,
17062
- position: "bottom"
17063
- },
17064
- sizes: {
17065
- sm: {
17066
- padding: "0.25rem 0",
17067
- fontSize: "text-sm"
17805
+ ghost: {
17806
+ kind: "complete",
17807
+ appearance: {
17808
+ background: {
17809
+ type: "surface",
17810
+ role: "link"
17068
17811
  },
17069
- md: { padding: "0.375rem 0" },
17070
- lg: {
17071
- padding: "0.5rem 0",
17072
- fontSize: "text-lg"
17812
+ borderRadius: "rounded-none",
17813
+ sizes: {
17814
+ sm: {
17815
+ padding: "0.375rem 0",
17816
+ fontSize: "text-xs"
17817
+ },
17818
+ md: {
17819
+ padding: "0.5rem 0",
17820
+ fontSize: "text-sm"
17821
+ },
17822
+ lg: {
17823
+ padding: "0.625rem 0",
17824
+ fontSize: "text-base"
17825
+ },
17826
+ xl: {
17827
+ padding: "0.75rem 0",
17828
+ fontSize: "text-lg"
17829
+ }
17073
17830
  },
17074
- xl: {
17075
- padding: "0.625rem 0",
17076
- fontSize: "text-xl"
17077
- }
17831
+ effects: { base: [{
17832
+ effectId: "border-bottom-grow",
17833
+ options: {
17834
+ height: 1,
17835
+ colorToken: "accent",
17836
+ origin: "left"
17837
+ }
17838
+ }] }
17078
17839
  }
17079
- }
17080
- ]
17081
- }
17082
- });
17083
- //#endregion
17084
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
17085
- /**
17086
- * Editorial Link — all variants are link-style with a growing underline.
17087
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
17088
- */
17089
- const editorialLink = defineButtonPersonality({
17090
- id: "editorial-link",
17091
- name: "Editorial Link",
17092
- description: "Link-style with a growing underline. Refined, typographic.",
17093
- tags: {
17094
- tone: "minimal",
17095
- energy: "calm",
17096
- motion: "subtle",
17097
- era: "editorial"
17098
- },
17099
- buttonSystem: {
17100
- global: {
17101
- cornerStyle: "square",
17102
- textTransform: "none",
17103
- fontWeight: 500,
17104
- borderWidth: 1,
17105
- hoverTransform: "none",
17106
- hoverColor: "none"
17107
- },
17108
- variants: [
17109
- {
17110
- id: "primary",
17111
- name: "Primary",
17112
- enabled: true,
17113
- priority: 1,
17114
- background: {
17115
- type: "surface",
17116
- role: "link"
17117
- },
17118
- borderRadius: "rounded-none",
17119
- sizes: {
17120
- sm: { padding: "0.25rem 0" },
17121
- md: { padding: "0.5rem 0" },
17122
- lg: { padding: "0.625rem 0" },
17123
- xl: { padding: "0.75rem 0" }
17124
- },
17125
- effects: { base: [{
17126
- effectId: "border-bottom-grow",
17127
- options: {
17128
- height: 2,
17129
- colorToken: "text",
17130
- origin: "left"
17131
- }
17132
- }] }
17133
- },
17134
- {
17135
- id: "secondary",
17136
- name: "Secondary",
17137
- enabled: true,
17138
- priority: 2,
17139
- background: {
17140
- type: "surface",
17141
- role: "link"
17142
- },
17143
- borderRadius: "rounded-none",
17144
- sizes: {
17145
- sm: { padding: "0.25rem 0" },
17146
- md: { padding: "0.5rem 0" },
17147
- lg: { padding: "0.625rem 0" },
17148
- xl: { padding: "0.75rem 0" }
17149
- },
17150
- effects: { base: [{
17151
- effectId: "border-bottom-grow",
17152
- options: {
17153
- height: 1,
17154
- colorToken: "mutedText",
17155
- origin: "left"
17156
- }
17157
- }] }
17158
- },
17159
- {
17160
- id: "outline",
17161
- name: "Outline",
17162
- enabled: true,
17163
- priority: 3,
17164
- background: {
17165
- type: "surface",
17166
- role: "link"
17167
- },
17168
- borderRadius: "rounded-none",
17169
- sizes: {
17170
- sm: { padding: "0.25rem 0" },
17171
- md: { padding: "0.5rem 0" },
17172
- lg: { padding: "0.625rem 0" },
17173
- xl: { padding: "0.75rem 0" }
17174
- },
17175
- effects: { base: [{
17176
- effectId: "border-bottom-grow",
17177
- options: {
17178
- height: 1,
17179
- colorToken: "accent",
17180
- origin: "left"
17181
- }
17182
- }] }
17183
17840
  },
17184
- {
17185
- id: "ghost",
17186
- name: "Ghost",
17187
- enabled: true,
17188
- priority: 3,
17189
- background: {
17190
- type: "surface",
17191
- role: "link"
17192
- },
17193
- borderRadius: "rounded-none",
17194
- sizes: {
17195
- sm: { padding: "0.25rem 0" },
17196
- md: { padding: "0.5rem 0" },
17197
- lg: { padding: "0.625rem 0" },
17198
- xl: { padding: "0.75rem 0" }
17199
- }
17841
+ accent: {
17842
+ kind: "derive",
17843
+ from: "primary",
17844
+ overrides: { background: {
17845
+ type: "solid",
17846
+ colorToken: "accent"
17847
+ } }
17200
17848
  }
17201
- ]
17849
+ }
17202
17850
  }
17203
17851
  });
17204
- //#endregion
17205
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
17206
- /**
17207
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
17208
- * amber accent climax, all completely flat (no drop shadow) with a modest
17209
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
17210
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
17211
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
17212
- * the page's one conversion climax.
17213
- */
17214
- const flatInk = defineButtonPersonality({
17852
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
17215
17853
  id: "flat-ink",
17216
- name: "Flat Ink",
17217
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
17854
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
17218
17855
  tags: {
17219
17856
  tone: "classic",
17220
17857
  energy: "calm",
17221
17858
  motion: "subtle",
17222
17859
  era: "editorial"
17223
17860
  },
17224
- buttonSystem: {
17861
+ system: {
17225
17862
  global: {
17226
17863
  cornerStyle: "rounded",
17227
17864
  textTransform: "none",
@@ -17248,228 +17885,210 @@ const flatInk = defineButtonPersonality({
17248
17885
  fontSize: "text-xl"
17249
17886
  }
17250
17887
  },
17251
- variants: [
17252
- {
17253
- id: "primary",
17254
- name: "Primary",
17255
- enabled: true,
17256
- priority: 1,
17257
- background: {
17258
- type: "solid",
17259
- colorToken: "primary"
17260
- },
17261
- borderRadius: "rounded-lg",
17262
- affordance: { iconId: "ArrowRight" },
17263
- effects: { hover: [{
17264
- effectId: "lift",
17265
- options: { translateY: "-2px" }
17266
- }, {
17267
- effectId: "background-on-hover",
17268
- options: { colorToken: "secondary" }
17269
- }] }
17888
+ roles: {
17889
+ primary: {
17890
+ kind: "complete",
17891
+ appearance: {
17892
+ background: {
17893
+ type: "solid",
17894
+ colorToken: "primary"
17895
+ },
17896
+ borderRadius: "rounded-lg",
17897
+ affordance: { iconId: "ArrowRight" },
17898
+ effects: { hover: [{
17899
+ effectId: "lift",
17900
+ options: { translateY: "-2px" }
17901
+ }, {
17902
+ effectId: "background-on-hover",
17903
+ options: { colorToken: "secondary" }
17904
+ }] }
17905
+ }
17270
17906
  },
17271
- {
17272
- id: "secondary",
17273
- name: "Secondary",
17274
- enabled: true,
17275
- priority: 2,
17276
- background: {
17277
- type: "surface",
17278
- role: "link"
17279
- },
17280
- borderRadius: "rounded-lg",
17281
- border: { widthClass: "border" },
17282
- effects: { hover: [{
17283
- effectId: "lift",
17284
- options: { translateY: "-2px" }
17285
- }, {
17286
- effectId: "background-on-hover",
17287
- options: { colorToken: "surfaceAlt" }
17288
- }] }
17907
+ secondary: {
17908
+ kind: "complete",
17909
+ appearance: {
17910
+ background: {
17911
+ type: "surface",
17912
+ role: "link"
17913
+ },
17914
+ borderRadius: "rounded-lg",
17915
+ border: { widthClass: "border" },
17916
+ effects: { hover: [{
17917
+ effectId: "lift",
17918
+ options: { translateY: "-2px" }
17919
+ }, {
17920
+ effectId: "background-on-hover",
17921
+ options: { colorToken: "surfaceAlt" }
17922
+ }] }
17923
+ }
17289
17924
  },
17290
- {
17291
- id: "accent",
17292
- name: "Accent",
17293
- enabled: true,
17294
- priority: 3,
17295
- background: {
17296
- type: "solid",
17297
- colorToken: "accent"
17298
- },
17299
- borderRadius: "rounded-lg",
17300
- affordance: { iconId: "ArrowRight" },
17301
- effects: { hover: [{
17302
- effectId: "lift",
17303
- options: { translateY: "-2px" }
17304
- }] }
17925
+ outline: {
17926
+ kind: "complete",
17927
+ appearance: {
17928
+ background: {
17929
+ type: "surface",
17930
+ role: "link"
17931
+ },
17932
+ borderRadius: "rounded-lg",
17933
+ border: { widthClass: "border" },
17934
+ effects: { hover: [{
17935
+ effectId: "lift",
17936
+ options: { translateY: "-2px" }
17937
+ }, {
17938
+ effectId: "background-on-hover",
17939
+ options: { colorToken: "surfaceAlt" }
17940
+ }] }
17941
+ }
17942
+ },
17943
+ ghost: {
17944
+ kind: "complete",
17945
+ appearance: {
17946
+ background: {
17947
+ type: "surface",
17948
+ role: "link"
17949
+ },
17950
+ borderRadius: "rounded-lg",
17951
+ effects: { hover: [{
17952
+ effectId: "lift",
17953
+ options: { translateY: "-2px" }
17954
+ }] }
17955
+ }
17956
+ },
17957
+ accent: {
17958
+ kind: "complete",
17959
+ appearance: {
17960
+ background: {
17961
+ type: "solid",
17962
+ colorToken: "accent"
17963
+ },
17964
+ borderRadius: "rounded-lg",
17965
+ affordance: { iconId: "ArrowRight" },
17966
+ effects: { hover: [{
17967
+ effectId: "lift",
17968
+ options: { translateY: "-2px" }
17969
+ }] }
17970
+ }
17305
17971
  }
17306
- ]
17972
+ }
17307
17973
  }
17308
17974
  });
17309
- //#endregion
17310
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
17311
- /**
17312
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
17313
- * feel. Reads as bold and handmade; suits expressive craft brands.
17314
- */
17315
- const inkStamp = defineButtonPersonality({
17316
- id: "ink-stamp",
17317
- name: "Ink Stamp",
17318
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
17975
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
17976
+ id: "showtime-pill",
17977
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
17319
17978
  tags: {
17320
17979
  tone: "bold",
17321
17980
  energy: "vibrant",
17322
- motion: "standard",
17323
- era: "organic"
17981
+ motion: "expressive",
17982
+ era: "modern"
17324
17983
  },
17325
- buttonSystem: {
17984
+ system: {
17326
17985
  global: {
17327
- cornerStyle: "rounded",
17986
+ cornerStyle: "pill",
17987
+ shadow: "low",
17328
17988
  textTransform: "uppercase",
17329
- fontWeight: 600,
17330
- borderWidth: 1,
17331
- hoverTransform: "none",
17332
- hoverColor: "none",
17333
- letterSpacing: "loose"
17989
+ fontWeight: 700,
17990
+ borderWidth: 2,
17991
+ hoverTransform: "lift",
17992
+ hoverColor: "darken",
17993
+ typography: "body",
17994
+ paddingPreset: "spacious",
17995
+ italic: false
17334
17996
  },
17335
17997
  sizes: {
17336
17998
  sm: {
17337
- padding: "0.5rem 1.25rem",
17338
- fontSize: "text-xs"
17999
+ padding: "0.625rem 1.25rem",
18000
+ fontSize: "0.875rem"
17339
18001
  },
17340
18002
  md: {
17341
- padding: "0.75rem 1.75rem",
17342
- fontSize: "text-sm"
18003
+ padding: "0.875rem 1.75rem",
18004
+ fontSize: "1rem"
17343
18005
  },
17344
18006
  lg: {
17345
- padding: "0.875rem 2.25rem",
17346
- fontSize: "text-base"
18007
+ padding: "1.125rem 2.25rem",
18008
+ fontSize: "1.125rem"
17347
18009
  },
17348
18010
  xl: {
17349
- padding: "1.125rem 2.75rem",
17350
- fontSize: "text-lg"
18011
+ padding: "1.125rem 2.25rem",
18012
+ fontSize: "1.125rem"
17351
18013
  }
17352
18014
  },
17353
- variants: [
17354
- {
17355
- id: "primary",
17356
- name: "Primary",
17357
- enabled: true,
17358
- priority: 1,
17359
- background: {
17360
- type: "solid",
17361
- colorToken: "primary"
17362
- },
17363
- borderRadius: "rounded-md",
17364
- effects: {
17365
- hover: [{
17366
- effectId: "drop-shadow",
17367
- options: { intensity: "medium" }
17368
- }, {
17369
- effectId: "scale-up",
17370
- options: { scale: "1.02" }
17371
- }],
17372
- active: [{
17373
- effectId: "scale-down",
17374
- options: { scale: "0.98" }
17375
- }]
18015
+ roles: {
18016
+ primary: {
18017
+ kind: "complete",
18018
+ appearance: {
18019
+ background: {
18020
+ type: "solid",
18021
+ colorToken: "primary"
18022
+ },
18023
+ borderRadius: "rounded-full",
18024
+ effects: { hover: [{ effectId: "pop" }] }
17376
18025
  }
17377
18026
  },
17378
- {
17379
- id: "secondary",
17380
- name: "Secondary",
17381
- enabled: true,
17382
- priority: 2,
17383
- background: {
17384
- type: "surface",
17385
- role: "link"
17386
- },
17387
- borderRadius: "rounded-md",
17388
- border: { widthClass: "border-2" },
17389
- effects: { hover: [{
17390
- effectId: "background-on-hover",
17391
- options: { colorToken: "surface" }
17392
- }] }
17393
- },
17394
- {
17395
- id: "outline",
17396
- name: "Outline",
17397
- enabled: true,
17398
- priority: 3,
17399
- background: {
17400
- type: "surface",
17401
- role: "link"
17402
- },
17403
- borderRadius: "rounded-md",
17404
- border: { widthClass: "border-2" },
17405
- effects: { hover: [{
17406
- effectId: "background-on-hover",
17407
- options: { colorToken: "surface" }
17408
- }] }
18027
+ secondary: {
18028
+ kind: "complete",
18029
+ appearance: {
18030
+ background: {
18031
+ type: "surface",
18032
+ role: "link"
18033
+ },
18034
+ borderRadius: "rounded-full",
18035
+ border: { widthClass: "border-2" },
18036
+ effects: { hover: [{ effectId: "pop" }] }
18037
+ }
17409
18038
  },
17410
- {
17411
- id: "ghost",
17412
- name: "Ghost",
17413
- enabled: true,
17414
- priority: 3,
17415
- background: {
17416
- type: "surface",
17417
- role: "link"
17418
- },
17419
- borderRadius: "rounded-none",
17420
- sizes: {
17421
- sm: {
17422
- padding: "0.375rem 0",
17423
- fontSize: "text-xs"
18039
+ outline: {
18040
+ kind: "complete",
18041
+ appearance: {
18042
+ background: {
18043
+ type: "surface",
18044
+ role: "link"
17424
18045
  },
17425
- md: {
17426
- padding: "0.5rem 0",
17427
- fontSize: "text-sm"
18046
+ borderRadius: "rounded-full",
18047
+ border: { widthClass: "border-2" },
18048
+ effects: { hover: [{
18049
+ effectId: "background-on-hover",
18050
+ options: { colorToken: "background" }
18051
+ }] }
18052
+ }
18053
+ },
18054
+ ghost: {
18055
+ kind: "complete",
18056
+ appearance: {
18057
+ background: {
18058
+ type: "surface",
18059
+ role: "link"
17428
18060
  },
17429
- lg: {
17430
- padding: "0.625rem 0",
17431
- fontSize: "text-base"
18061
+ borderRadius: "rounded-full",
18062
+ effects: { hover: [{
18063
+ effectId: "background-on-hover",
18064
+ options: { colorToken: "surface" }
18065
+ }] }
18066
+ }
18067
+ },
18068
+ accent: {
18069
+ kind: "complete",
18070
+ appearance: {
18071
+ background: {
18072
+ type: "solid",
18073
+ colorToken: "secondary"
17432
18074
  },
17433
- xl: {
17434
- padding: "0.75rem 0",
17435
- fontSize: "text-lg"
17436
- }
17437
- },
17438
- effects: { base: [{
17439
- effectId: "border-bottom-grow",
17440
- options: {
17441
- height: 1,
17442
- colorToken: "accent",
17443
- origin: "left"
17444
- }
17445
- }] }
18075
+ borderRadius: "rounded-full",
18076
+ effects: { hover: [{ effectId: "pop" }] }
18077
+ }
17446
18078
  }
17447
- ]
18079
+ }
17448
18080
  }
17449
18081
  });
17450
- //#endregion
17451
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
17452
- /**
17453
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
17454
- * that collapses as the button presses into it on hover. Authored for the
17455
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
17456
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
17457
- *
17458
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
17459
- * extension; the press is the shared `press-down` effect, which matches its
17460
- * translate to each variant's own shadow offset.
17461
- */
17462
- const joyStamp = defineButtonPersonality({
18082
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
17463
18083
  id: "joy-stamp",
17464
- name: "Joy Stamp",
17465
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
18084
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
17466
18085
  tags: {
17467
18086
  tone: "bold",
17468
18087
  energy: "vibrant",
17469
18088
  motion: "expressive",
17470
18089
  era: "organic"
17471
18090
  },
17472
- buttonSystem: {
18091
+ system: {
17473
18092
  global: {
17474
18093
  cornerStyle: "pill",
17475
18094
  shadow: "high",
@@ -17499,61 +18118,78 @@ const joyStamp = defineButtonPersonality({
17499
18118
  fontSize: "text-2xl"
17500
18119
  }
17501
18120
  },
17502
- variants: [{
17503
- id: "primary",
17504
- name: "Primary",
17505
- enabled: true,
17506
- priority: 1,
17507
- background: {
17508
- type: "solid",
17509
- colorToken: "primary"
18121
+ roles: {
18122
+ primary: {
18123
+ kind: "complete",
18124
+ appearance: {
18125
+ background: {
18126
+ type: "solid",
18127
+ colorToken: "primary"
18128
+ },
18129
+ borderRadius: "rounded-full",
18130
+ shadow: {
18131
+ elevation: "high",
18132
+ softness: "hard",
18133
+ position: "bottom-right",
18134
+ colorToken: "text"
18135
+ },
18136
+ effects: { hover: [{ effectId: "press-down" }] }
18137
+ }
17510
18138
  },
17511
- borderRadius: "rounded-full",
17512
- shadow: {
17513
- elevation: "high",
17514
- softness: "hard",
17515
- position: "bottom-right",
17516
- colorToken: "text"
18139
+ secondary: {
18140
+ kind: "complete",
18141
+ appearance: {
18142
+ background: {
18143
+ type: "surface",
18144
+ role: "link"
18145
+ },
18146
+ borderRadius: "rounded-full",
18147
+ border: { widthClass: "border-2" },
18148
+ shadow: {
18149
+ elevation: "high",
18150
+ softness: "hard",
18151
+ position: "bottom-right",
18152
+ colorToken: "secondary"
18153
+ },
18154
+ effects: { hover: [{ effectId: "press-down" }] }
18155
+ }
17517
18156
  },
17518
- effects: { hover: [{ effectId: "press-down" }] }
17519
- }, {
17520
- id: "secondary",
17521
- name: "Secondary",
17522
- enabled: true,
17523
- priority: 2,
17524
- background: {
17525
- type: "surface",
17526
- role: "link"
18157
+ outline: {
18158
+ kind: "derive",
18159
+ from: "secondary"
17527
18160
  },
17528
- borderRadius: "rounded-full",
17529
- border: { widthClass: "border-2" },
17530
- shadow: {
17531
- elevation: "high",
17532
- softness: "hard",
17533
- position: "bottom-right",
17534
- colorToken: "secondary"
18161
+ ghost: {
18162
+ kind: "complete",
18163
+ appearance: {
18164
+ background: {
18165
+ type: "surface",
18166
+ role: "link"
18167
+ },
18168
+ borderRadius: "rounded-full",
18169
+ effects: { hover: [{ effectId: "press-down" }] }
18170
+ }
17535
18171
  },
17536
- effects: { hover: [{ effectId: "press-down" }] }
17537
- }]
18172
+ accent: {
18173
+ kind: "derive",
18174
+ from: "primary",
18175
+ overrides: { background: {
18176
+ type: "solid",
18177
+ colorToken: "accent"
18178
+ } }
18179
+ }
18180
+ }
17538
18181
  }
17539
18182
  });
17540
- //#endregion
17541
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
17542
- /**
17543
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
17544
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
17545
- */
17546
- const ornateRitual = defineButtonPersonality({
18183
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
17547
18184
  id: "ornate-ritual",
17548
- name: "Ornate Ritual",
17549
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
18185
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
17550
18186
  tags: {
17551
18187
  tone: "classic",
17552
18188
  energy: "vibrant",
17553
18189
  motion: "subtle",
17554
18190
  era: "organic"
17555
18191
  },
17556
- buttonSystem: {
18192
+ system: {
17557
18193
  global: {
17558
18194
  cornerStyle: "rounded",
17559
18195
  textTransform: "uppercase",
@@ -17581,622 +18217,150 @@ const ornateRitual = defineButtonPersonality({
17581
18217
  fontSize: "text-base"
17582
18218
  }
17583
18219
  },
17584
- variants: [
17585
- {
17586
- id: "primary",
17587
- name: "Primary",
17588
- enabled: true,
17589
- priority: 1,
17590
- background: {
17591
- type: "solid",
17592
- colorToken: "primary"
17593
- },
17594
- borderRadius: "rounded-md",
17595
- border: { widthClass: "border" },
17596
- effects: {
17597
- hover: [{
17598
- effectId: "background-on-hover",
17599
- options: { colorToken: "primary-100" }
17600
- }],
17601
- active: [{
17602
- effectId: "scale-down",
17603
- options: { scale: "0.98" }
17604
- }]
17605
- }
17606
- },
17607
- {
17608
- id: "secondary",
17609
- name: "Secondary",
17610
- enabled: true,
17611
- priority: 2,
17612
- background: {
17613
- type: "solid",
17614
- colorToken: "secondary"
17615
- },
17616
- borderRadius: "rounded-md",
17617
- border: { widthClass: "border" },
17618
- effects: { hover: [{
17619
- effectId: "background-on-hover",
17620
- options: { colorToken: "surface" }
17621
- }] }
17622
- },
17623
- {
17624
- id: "outline",
17625
- name: "Outline",
17626
- enabled: true,
17627
- priority: 3,
17628
- background: {
17629
- type: "surface",
17630
- role: "link"
17631
- },
17632
- borderRadius: "rounded-md",
17633
- border: { widthClass: "border" },
17634
- effects: { hover: [{
17635
- effectId: "background-on-hover",
17636
- options: { colorToken: "muted" }
17637
- }] }
17638
- },
17639
- {
17640
- id: "ghost",
17641
- name: "Ghost",
17642
- enabled: true,
17643
- priority: 3,
17644
- background: {
17645
- type: "surface",
17646
- role: "link"
17647
- },
17648
- borderRadius: "rounded-none",
17649
- sizes: {
17650
- sm: {
17651
- padding: "0.375rem 0",
17652
- fontSize: "text-xs"
17653
- },
17654
- md: {
17655
- padding: "0.5rem 0",
17656
- fontSize: "text-sm"
17657
- },
17658
- lg: {
17659
- padding: "0.625rem 0",
17660
- fontSize: "text-base"
18220
+ roles: {
18221
+ primary: {
18222
+ kind: "complete",
18223
+ appearance: {
18224
+ background: {
18225
+ type: "solid",
18226
+ colorToken: "primary"
17661
18227
  },
17662
- xl: {
17663
- padding: "0.75rem 0",
17664
- fontSize: "text-lg"
17665
- }
17666
- },
17667
- effects: { base: [{
17668
- effectId: "border-bottom-grow",
17669
- options: {
17670
- height: 1,
17671
- colorToken: "accent",
17672
- origin: "left"
18228
+ borderRadius: "rounded-md",
18229
+ border: { widthClass: "border" },
18230
+ effects: {
18231
+ hover: [{
18232
+ effectId: "background-on-hover",
18233
+ options: { colorToken: "primary-100" }
18234
+ }],
18235
+ active: [{
18236
+ effectId: "scale-down",
18237
+ options: { scale: "0.98" }
18238
+ }]
17673
18239
  }
17674
- }] }
17675
- }
17676
- ]
17677
- }
17678
- });
17679
- //#endregion
17680
- //#region ../theme-core/src/buttons/personalities/pebble.ts
17681
- /**
17682
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
17683
- * and natural; pairs well with wellness/yoga/dance brands.
17684
- */
17685
- const pebble = defineButtonPersonality({
17686
- id: "pebble",
17687
- name: "Pebble",
17688
- description: "Generous pill buttons with a quiet colour-softening hover.",
17689
- tags: {
17690
- tone: "classic",
17691
- energy: "calm",
17692
- motion: "standard",
17693
- era: "organic"
17694
- },
17695
- buttonSystem: {
17696
- global: {
17697
- cornerStyle: "pill",
17698
- textTransform: "none",
17699
- fontWeight: 500,
17700
- borderWidth: 2,
17701
- hoverTransform: "none",
17702
- hoverColor: "none"
17703
- },
17704
- sizes: {
17705
- sm: {
17706
- padding: "0.625rem 1.75rem",
17707
- fontSize: "text-sm"
17708
- },
17709
- md: { padding: "0.875rem 2.25rem" },
17710
- lg: {
17711
- padding: "1.125rem 2.75rem",
17712
- fontSize: "text-lg"
17713
- },
17714
- xl: {
17715
- padding: "1.5rem 3.5rem",
17716
- fontSize: "text-xl"
17717
- }
17718
- },
17719
- variants: [
17720
- {
17721
- id: "primary",
17722
- name: "Primary",
17723
- enabled: true,
17724
- priority: 1,
17725
- background: {
17726
- type: "solid",
17727
- colorToken: "primary"
17728
- },
17729
- borderRadius: "rounded-full",
17730
- effects: { hover: [{
17731
- effectId: "darken-background",
17732
- options: { amount: 100 }
17733
- }] }
18240
+ }
17734
18241
  },
17735
- {
17736
- id: "secondary",
17737
- name: "Secondary",
17738
- enabled: true,
17739
- priority: 2,
17740
- background: {
17741
- type: "surface",
17742
- role: "link"
17743
- },
17744
- borderRadius: "rounded-full",
17745
- border: { widthClass: "border-2" },
17746
- effects: { hover: [{
17747
- effectId: "background-on-hover",
17748
- options: { colorToken: "accent" }
17749
- }] }
18242
+ secondary: {
18243
+ kind: "complete",
18244
+ appearance: {
18245
+ background: {
18246
+ type: "solid",
18247
+ colorToken: "secondary"
18248
+ },
18249
+ borderRadius: "rounded-md",
18250
+ border: { widthClass: "border" },
18251
+ effects: { hover: [{
18252
+ effectId: "background-on-hover",
18253
+ options: { colorToken: "surface" }
18254
+ }] }
18255
+ }
17750
18256
  },
17751
- {
17752
- id: "outline",
17753
- name: "Outline",
17754
- enabled: true,
17755
- priority: 3,
17756
- background: {
17757
- type: "surface",
17758
- role: "link"
17759
- },
17760
- borderRadius: "rounded-full",
17761
- border: { widthClass: "border" },
17762
- effects: { hover: [{
17763
- effectId: "background-on-hover",
17764
- options: { colorToken: "surface" }
17765
- }] }
18257
+ outline: {
18258
+ kind: "complete",
18259
+ appearance: {
18260
+ background: {
18261
+ type: "surface",
18262
+ role: "link"
18263
+ },
18264
+ borderRadius: "rounded-md",
18265
+ border: { widthClass: "border" },
18266
+ effects: { hover: [{
18267
+ effectId: "background-on-hover",
18268
+ options: { colorToken: "muted" }
18269
+ }] }
18270
+ }
17766
18271
  },
17767
- {
17768
- id: "ghost",
17769
- name: "Ghost",
17770
- enabled: true,
17771
- priority: 3,
17772
- background: {
17773
- type: "surface",
17774
- role: "link"
17775
- },
17776
- borderRadius: "rounded-full",
17777
- sizes: {
17778
- sm: {
17779
- padding: "0.375rem 0.875rem",
17780
- fontSize: "text-sm"
18272
+ ghost: {
18273
+ kind: "complete",
18274
+ appearance: {
18275
+ background: {
18276
+ type: "surface",
18277
+ role: "link"
17781
18278
  },
17782
- md: { padding: "0.5rem 1rem" },
17783
- lg: {
17784
- padding: "0.625rem 1.25rem",
17785
- fontSize: "text-lg"
18279
+ borderRadius: "rounded-none",
18280
+ sizes: {
18281
+ sm: {
18282
+ padding: "0.375rem 0",
18283
+ fontSize: "text-xs"
18284
+ },
18285
+ md: {
18286
+ padding: "0.5rem 0",
18287
+ fontSize: "text-sm"
18288
+ },
18289
+ lg: {
18290
+ padding: "0.625rem 0",
18291
+ fontSize: "text-base"
18292
+ },
18293
+ xl: {
18294
+ padding: "0.75rem 0",
18295
+ fontSize: "text-lg"
18296
+ }
17786
18297
  },
17787
- xl: {
17788
- padding: "0.75rem 1.5rem",
17789
- fontSize: "text-xl"
17790
- }
18298
+ effects: { base: [{
18299
+ effectId: "border-bottom-grow",
18300
+ options: {
18301
+ height: 1,
18302
+ colorToken: "accent",
18303
+ origin: "left"
18304
+ }
18305
+ }] }
17791
18306
  }
17792
- }
17793
- ]
17794
- }
17795
- });
17796
- //#endregion
17797
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
17798
- /**
17799
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
17800
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
17801
- * responsible for contrast rather than reversing the button roles.
17802
- */
17803
- const quietArrow = defineButtonPersonality({
17804
- id: "quiet-arrow",
17805
- name: "Quiet Arrow",
17806
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
17807
- tags: {
17808
- tone: "classic",
17809
- energy: "calm",
17810
- motion: "subtle",
17811
- era: "editorial"
17812
- },
17813
- buttonSystem: {
17814
- global: {
17815
- cornerStyle: "rounded",
17816
- textTransform: "uppercase",
17817
- fontWeight: 500,
17818
- borderWidth: 1,
17819
- typography: "body",
17820
- fontSize: "text-sm",
17821
- letterSpacing: "loose",
17822
- hoverTransform: "none",
17823
- hoverColor: "none"
17824
- },
17825
- sizes: {
17826
- sm: {
17827
- padding: "0.625rem 1.25rem",
17828
- fontSize: "text-xs"
17829
- },
17830
- md: {
17831
- padding: "0.8125rem 1.75rem",
17832
- fontSize: "text-sm"
17833
18307
  },
17834
- lg: {
17835
- padding: "0.9375rem 2.125rem",
17836
- fontSize: "text-sm"
17837
- },
17838
- xl: {
17839
- padding: "1.0625rem 2.5rem",
17840
- fontSize: "text-base"
17841
- }
17842
- },
17843
- variants: [
17844
- {
17845
- id: "primary",
17846
- name: "Primary",
17847
- enabled: true,
17848
- priority: 1,
17849
- background: {
17850
- type: "solid",
17851
- colorToken: "primary"
17852
- },
17853
- borderRadius: "rounded-xl",
17854
- affordance: { iconId: "ArrowRight" },
17855
- effects: { hover: [{
17856
- effectId: "darken-background",
17857
- options: { amount: 100 }
17858
- }] }
17859
- },
17860
- {
17861
- id: "secondary",
17862
- name: "Secondary",
17863
- enabled: true,
17864
- priority: 2,
17865
- background: {
17866
- type: "surface",
17867
- role: "link"
17868
- },
17869
- borderRadius: "rounded-xl",
17870
- border: { widthClass: "border" },
17871
- affordance: { iconId: "ArrowRight" },
17872
- effects: { hover: [{
17873
- effectId: "background-on-hover",
17874
- options: { colorToken: "surfaceAlt" }
17875
- }] }
17876
- },
17877
- {
17878
- id: "outline",
17879
- name: "Outline",
17880
- enabled: true,
17881
- priority: 3,
17882
- background: {
17883
- type: "surface",
17884
- role: "link"
17885
- },
17886
- borderRadius: "rounded-xl",
17887
- border: { widthClass: "border" }
17888
- },
17889
- {
17890
- id: "ghost",
17891
- name: "Ghost",
17892
- enabled: true,
17893
- priority: 3,
17894
- background: {
17895
- type: "surface",
17896
- role: "link"
17897
- },
17898
- borderRadius: "rounded-xl"
17899
- }
17900
- ]
17901
- }
17902
- });
17903
- //#endregion
17904
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
17905
- /**
17906
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
17907
- * motion. Suits energetic schools, performers, festivals, and community brands
17908
- * that need calls to action to feel loud without becoming visually chaotic.
17909
- */
17910
- const showtimePill = defineButtonPersonality({
17911
- id: "showtime-pill",
17912
- name: "Showtime Pill",
17913
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
17914
- tags: {
17915
- tone: "bold",
17916
- energy: "vibrant",
17917
- motion: "expressive",
17918
- era: "modern"
17919
- },
17920
- buttonSystem: {
17921
- global: {
17922
- cornerStyle: "pill",
17923
- shadow: "low",
17924
- textTransform: "uppercase",
17925
- fontWeight: 700,
17926
- borderWidth: 2,
17927
- hoverTransform: "lift",
17928
- hoverColor: "darken",
17929
- typography: "body",
17930
- paddingPreset: "spacious",
17931
- italic: false
17932
- },
17933
- sizes: {
17934
- sm: {
17935
- padding: "0.625rem 1.25rem",
17936
- fontSize: "0.875rem"
17937
- },
17938
- md: {
17939
- padding: "0.875rem 1.75rem",
17940
- fontSize: "1rem"
17941
- },
17942
- lg: {
17943
- padding: "1.125rem 2.25rem",
17944
- fontSize: "1.125rem"
17945
- },
17946
- xl: {
17947
- padding: "1.125rem 2.25rem",
17948
- fontSize: "1.125rem"
17949
- }
17950
- },
17951
- variants: [
17952
- {
17953
- id: "primary",
17954
- name: "Primary",
17955
- enabled: true,
17956
- priority: 1,
17957
- background: {
17958
- type: "solid",
17959
- colorToken: "primary"
17960
- },
17961
- borderRadius: "rounded-full",
17962
- effects: { hover: [{ effectId: "pop" }] }
17963
- },
17964
- {
17965
- id: "secondary",
17966
- name: "Secondary",
17967
- enabled: true,
17968
- priority: 2,
17969
- background: {
17970
- type: "surface",
17971
- role: "link"
17972
- },
17973
- borderRadius: "rounded-full",
17974
- border: { widthClass: "border-2" },
17975
- effects: { hover: [{ effectId: "pop" }] }
17976
- },
17977
- {
17978
- id: "hero",
17979
- name: "Hero",
17980
- enabled: true,
17981
- priority: 1,
17982
- background: {
17983
- type: "solid",
17984
- colorToken: "secondary"
17985
- },
17986
- borderRadius: "rounded-full",
17987
- effects: { hover: [{ effectId: "pop" }] }
17988
- },
17989
- {
17990
- id: "header",
17991
- name: "Header",
17992
- enabled: true,
17993
- priority: 2,
17994
- background: {
18308
+ accent: {
18309
+ kind: "derive",
18310
+ from: "primary",
18311
+ overrides: { background: {
17995
18312
  type: "solid",
17996
- colorToken: "background"
17997
- },
17998
- borderRadius: "rounded-full",
17999
- border: { widthClass: "border-2" },
18000
- effects: { hover: [{
18001
- effectId: "background-on-hover",
18002
- options: { colorToken: "surface" }
18003
- }] }
18004
- },
18005
- {
18006
- id: "outline",
18007
- name: "Outline",
18008
- enabled: true,
18009
- priority: 3,
18010
- background: {
18011
- type: "surface",
18012
- role: "link"
18013
- },
18014
- borderRadius: "rounded-full",
18015
- border: { widthClass: "border-2" },
18016
- effects: { hover: [{
18017
- effectId: "background-on-hover",
18018
- options: { colorToken: "background" }
18019
- }] }
18020
- },
18021
- {
18022
- id: "ghost",
18023
- name: "Ghost",
18024
- enabled: true,
18025
- priority: 3,
18026
- background: {
18027
- type: "surface",
18028
- role: "link"
18029
- },
18030
- borderRadius: "rounded-full",
18031
- effects: { hover: [{
18032
- effectId: "background-on-hover",
18033
- options: { colorToken: "surface" }
18034
- }] }
18035
- }
18036
- ]
18037
- }
18038
- });
18039
- //#endregion
18040
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
18041
- /**
18042
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
18043
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
18044
- */
18045
- const softPill = defineButtonPersonality({
18046
- id: "soft-pill",
18047
- name: "Soft Pill",
18048
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
18049
- tags: {
18050
- tone: "classic",
18051
- energy: "calm",
18052
- motion: "subtle",
18053
- era: "organic"
18054
- },
18055
- buttonSystem: {
18056
- global: {
18057
- cornerStyle: "pill",
18058
- shadow: "low",
18059
- textTransform: "none",
18060
- fontWeight: 500,
18061
- borderWidth: 2,
18062
- hoverTransform: "lift",
18063
- hoverColor: "none"
18064
- },
18065
- variants: [
18066
- {
18067
- id: "primary",
18068
- name: "Primary",
18069
- enabled: true,
18070
- priority: 1,
18071
- background: {
18072
- type: "solid",
18073
- colorToken: "primary"
18074
- },
18075
- borderRadius: "rounded-full",
18076
- shadow: {
18077
- elevation: "low",
18078
- softness: "soft",
18079
- position: "bottom"
18080
- },
18081
- effects: {
18082
- hover: [{
18083
- effectId: "lift",
18084
- options: { translateY: "-1px" }
18085
- }],
18086
- active: [{
18087
- effectId: "scale-down",
18088
- options: { scale: "0.98" }
18089
- }]
18090
- }
18091
- },
18092
- {
18093
- id: "secondary",
18094
- name: "Secondary",
18095
- enabled: true,
18096
- priority: 2,
18097
- background: {
18098
- type: "surface",
18099
- role: "link"
18100
- },
18101
- borderRadius: "rounded-full",
18102
- border: { widthClass: "border-2" },
18103
- effects: { hover: [{
18104
- effectId: "background-on-hover",
18105
- options: { colorToken: "surface" }
18106
- }] }
18107
- },
18108
- {
18109
- id: "outline",
18110
- name: "Outline",
18111
- enabled: true,
18112
- priority: 3,
18113
- background: {
18114
- type: "surface",
18115
- role: "link"
18116
- },
18117
- borderRadius: "rounded-full",
18118
- border: { widthClass: "border" },
18119
- effects: { hover: [{
18120
- effectId: "background-on-hover",
18121
- options: { colorToken: "surface" }
18122
- }] }
18123
- },
18124
- {
18125
- id: "ghost",
18126
- name: "Ghost",
18127
- enabled: true,
18128
- priority: 3,
18129
- background: {
18130
- type: "surface",
18131
- role: "link"
18132
- },
18133
- borderRadius: "rounded-full",
18134
- effects: { hover: [{
18135
- effectId: "background-on-hover",
18136
- options: { colorToken: "surface" }
18137
- }] }
18313
+ colorToken: "accent"
18314
+ } }
18138
18315
  }
18139
- ]
18316
+ }
18140
18317
  }
18141
18318
  });
18142
18319
  //#endregion
18143
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
18144
- const solidSecondary = {
18145
- id: "secondary",
18146
- name: "Secondary",
18147
- enabled: true,
18148
- priority: 2,
18149
- background: {
18150
- type: "solid",
18151
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
18152
- },
18153
- borderRadius: "rounded-full",
18154
- shadow: {
18155
- elevation: "none",
18156
- softness: null,
18157
- position: "bottom"
18158
- },
18159
- effects: {
18160
- hover: [{
18161
- effectId: "background-on-hover-alpha",
18162
- options: {
18163
- colorToken: "secondary",
18164
- opacity: 88
18165
- }
18166
- }],
18167
- active: [{
18168
- effectId: "scale-down",
18169
- options: { scale: "0.98" }
18170
- }]
18171
- }
18172
- };
18173
- //#endregion
18174
- //#region ../theme-core/src/buttons/personalities/index.ts
18175
- const buttonPersonalities = [
18176
- softPill,
18177
- defineButtonPersonality({
18178
- id: "two-tone-pill",
18179
- name: "Two-tone Pill",
18180
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
18181
- tags: softPill.tags,
18182
- buttonSystem: {
18183
- ...softPill.buttonSystem,
18184
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
18185
- }
18186
- }),
18187
- earthPill,
18188
- confidentChip,
18189
- editorialLink,
18190
- pebble,
18191
- inkStamp,
18192
- flatInk,
18193
- brushedWash,
18194
- showtimePill,
18195
- joyStamp,
18196
- ornateRitual,
18197
- quietArrow
18320
+ //#region ../theme-core/src/buttons/styles/registry.ts
18321
+ const buttonStyleRecipes = [
18322
+ softPillRecipe,
18323
+ earthPillRecipe,
18324
+ confidentChipRecipe,
18325
+ editorialLinkRecipe,
18326
+ pebbleRecipe,
18327
+ inkStampRecipe,
18328
+ flatInkRecipe,
18329
+ brushedWashRecipe,
18330
+ showtimePillRecipe,
18331
+ joyStampRecipe,
18332
+ ornateRitualRecipe,
18333
+ quietArrowRecipe
18198
18334
  ];
18199
- new Map(buttonPersonalities.map((p) => [p.id, p]));
18335
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
18336
+ function findButtonStyleRecipe(id) {
18337
+ const recipe = recipesById.get(id);
18338
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
18339
+ return recipe;
18340
+ }
18341
+ function resolveButtonStyleSelection(selection) {
18342
+ switch (selection.styleId) {
18343
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
18344
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
18345
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
18346
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
18347
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
18348
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
18349
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
18350
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
18351
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
18352
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
18353
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
18354
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
18355
+ }
18356
+ }
18357
+ function defaultButtonStyleSelectionFor(styleId) {
18358
+ return {
18359
+ styleId,
18360
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
18361
+ };
18362
+ }
18363
+ 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");
18200
18364
  //#endregion
18201
18365
  //#region ../theme-core/src/accordions/siteStyleDefaults.ts
18202
18366
  /**
@@ -19957,76 +20121,9 @@ function headerConfigurationKey(configuration) {
19957
20121
  function asFooterLookId(value) {
19958
20122
  return value;
19959
20123
  }
19960
- function asFooterLayoutId(value) {
19961
- return value;
19962
- }
19963
- function asFooterStyleId(value) {
19964
- return value;
19965
- }
19966
- const footerLayoutCatalog = defineExactCatalog()([
19967
- {
19968
- id: asFooterLayoutId("identity"),
19969
- label: "Identity",
19970
- description: "Logo, site text, address, and legal copy without relying on footer navigation."
19971
- },
19972
- {
19973
- id: asFooterLayoutId("centered"),
19974
- label: "Centered",
19975
- description: "A calm centered stack for identity, short copy, and optional compact navigation.",
19976
- maxRecommendedNavDensity: "sparse"
19977
- },
19978
- {
19979
- id: asFooterLayoutId("split"),
19980
- label: "Split",
19981
- description: "Navigation and brand signoff separated into a wider split footer.",
19982
- requiresFooterNav: true,
19983
- maxRecommendedNavDensity: "balanced"
19984
- },
19985
- {
19986
- id: asFooterLayoutId("columns"),
19987
- label: "Columns",
19988
- description: "Grouped footer navigation columns with a supporting bottom line.",
19989
- requiresFooterNav: true,
19990
- requiresFooterNavGroups: true
19991
- }
19992
- ]);
19993
- const footerStyleCatalog = defineExactCatalog()([
19994
- {
19995
- id: asFooterStyleId("quiet"),
19996
- label: "Quiet",
19997
- description: "Lightweight, practical footer treatment."
19998
- },
19999
- {
20000
- id: asFooterStyleId("calm"),
20001
- label: "Calm",
20002
- description: "Soft centered treatment with restrained dividers."
20003
- },
20004
- {
20005
- id: asFooterStyleId("editorial"),
20006
- label: "Editorial",
20007
- description: "Text-forward treatment with fine-line structure."
20008
- },
20009
- {
20010
- id: asFooterStyleId("brand-band"),
20011
- label: "Brand band",
20012
- description: "High-contrast brand treatment with a stronger bottom bar."
20013
- }
20014
- ]);
20015
- new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
20016
- new Map(footerStyleCatalog.map((style) => [style.id, style]));
20017
- /**
20018
- * No-nav-safe identity footer: brand and legal/supporting copy carry the
20019
- * footer without implying missing navigation.
20020
- */
20021
- function identityQuietFooter(theme) {
20124
+ function quietFooterLinks(theme) {
20022
20125
  return {
20023
20126
  ...theme.footer,
20024
- variant: "simple",
20025
- maxWidth: "container",
20026
- background: {
20027
- type: "color",
20028
- color: "surface"
20029
- },
20030
20127
  navStyle: "minimal",
20031
20128
  navWeight: "regular",
20032
20129
  navColor: "text",
@@ -20039,285 +20136,38 @@ function identityQuietFooter(theme) {
20039
20136
  hoverColorToken: "primary",
20040
20137
  padding: "none",
20041
20138
  borderRadius: "none"
20042
- },
20043
- navLayout: {
20044
- layout: "inline-wrap",
20045
- align: "start",
20046
- gapX: "default",
20047
- gapY: "tight"
20048
- },
20049
- logo: {
20050
- showLogo: true,
20051
- showLogoText: true,
20052
- placement: "left",
20053
- size: "sm",
20054
- align: "start"
20055
- },
20056
- bottomBar: {
20057
- enabled: false,
20058
- fullBleed: false,
20059
- textAlign: "left",
20060
- paddingX: "default",
20061
- paddingY: "compact",
20062
- borderTop: { width: "none" }
20063
20139
  }
20064
20140
  };
20065
20141
  }
20066
- /**
20067
- * Back-compat alias for the previous default footer Look. It keeps existing
20068
- * persisted selections valid while staying hidden from the new layout/style UI.
20069
- */
20070
- function mutedGroundingFooter(theme) {
20071
- return {
20072
- ...identityQuietFooter(theme),
20073
- background: theme.footer.background,
20074
- navStyle: theme.footer.navStyle,
20075
- navColor: theme.footer.navColor,
20076
- navWeight: theme.footer.navWeight,
20077
- navLinkStyle: theme.footer.navLinkStyle,
20078
- bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
20079
- };
20080
- }
20081
- /** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
20082
- function brandTwoBandFooter(theme) {
20142
+ function emphasizedFooterLinks(theme) {
20083
20143
  return {
20084
20144
  ...theme.footer,
20085
- variant: "split",
20086
- maxWidth: "container",
20087
- background: {
20088
- type: "color",
20089
- color: "primary-800"
20090
- },
20091
20145
  navStyle: "minimal",
20092
20146
  navWeight: "medium",
20093
- navColor: "primaryForeground",
20094
- navLinkStyle: {
20095
- typography: "body",
20096
- fontWeight: "medium",
20097
- textTransform: "none",
20098
- italic: false,
20099
- colorToken: "primaryForeground",
20100
- hoverColorToken: "secondary",
20101
- padding: "none",
20102
- borderRadius: "none"
20103
- },
20104
- bottomTextLinkStyle: {
20105
- colorToken: "secondary",
20106
- decorationColorToken: "secondary"
20107
- },
20108
- navLayout: {
20109
- layout: "inline-wrap",
20110
- align: "start",
20111
- gapX: "default",
20112
- gapY: "tight"
20113
- },
20114
- logo: {
20115
- showLogo: true,
20116
- showLogoText: false,
20117
- placement: "left",
20118
- size: "sm",
20119
- align: "start"
20120
- },
20121
- bottomBar: {
20122
- enabled: true,
20123
- fullBleed: true,
20124
- background: {
20125
- type: "color",
20126
- color: "primary-900"
20127
- },
20128
- textColor: "primaryForeground",
20129
- textAlign: "center",
20130
- paddingX: "default",
20131
- paddingY: "compact",
20132
- borderTop: { width: "none" }
20133
- }
20134
- };
20135
- }
20136
- /**
20137
- * Centered stack on a softly tinted band: logo, inline nav, address, and a
20138
- * hairline-topped copyright line, all centered.
20139
- */
20140
- function centeredCalmFooter(theme) {
20141
- return {
20142
- ...theme.footer,
20143
- variant: "simple",
20144
- maxWidth: "container",
20145
- background: {
20146
- type: "color",
20147
- color: "surfaceAlt"
20148
- },
20149
- navStyle: "minimal",
20150
- navWeight: "regular",
20151
- navColor: "text",
20152
- navLinkStyle: {
20153
- typography: "body",
20154
- fontWeight: "regular",
20155
- textTransform: "none",
20156
- italic: false,
20157
- colorToken: "text",
20158
- hoverColorToken: "primary",
20159
- padding: "none",
20160
- borderRadius: "none"
20161
- },
20162
- navLayout: {
20163
- layout: "inline-wrap",
20164
- align: "center",
20165
- gapX: "relaxed",
20166
- gapY: "tight"
20167
- },
20168
- logo: {
20169
- showLogo: true,
20170
- showLogoText: false,
20171
- placement: "above",
20172
- size: "sm",
20173
- align: "center"
20174
- },
20175
- bottomBar: {
20176
- enabled: true,
20177
- fullBleed: false,
20178
- textAlign: "center",
20179
- paddingX: "default",
20180
- paddingY: "compact",
20181
- borderTop: { width: "thin" }
20182
- }
20183
- };
20184
- }
20185
- /** Editorial split footer: compact nav on one side, brand signoff on the other. */
20186
- function splitEditorialFooter(theme) {
20187
- return {
20188
- ...theme.footer,
20189
- variant: "split",
20190
- maxWidth: "container",
20191
- background: {
20192
- type: "color",
20193
- color: "surface"
20194
- },
20195
- navStyle: "minimal",
20196
- navWeight: "regular",
20197
- navColor: "text",
20198
- navLinkStyle: {
20199
- typography: "body",
20200
- fontWeight: "regular",
20201
- textTransform: "none",
20202
- italic: false,
20203
- colorToken: "text",
20204
- hoverColorToken: "primary",
20205
- padding: "none",
20206
- borderRadius: "none"
20207
- },
20208
- navLayout: {
20209
- layout: "inline-wrap",
20210
- align: "start",
20211
- gapX: "relaxed",
20212
- gapY: "tight"
20213
- },
20214
- logo: {
20215
- showLogo: true,
20216
- showLogoText: true,
20217
- placement: "right",
20218
- size: "sm",
20219
- align: "end"
20220
- },
20221
- bottomBar: {
20222
- enabled: true,
20223
- fullBleed: false,
20224
- textAlign: "left",
20225
- paddingX: "default",
20226
- paddingY: "compact",
20227
- borderTop: { width: "thin" }
20228
- }
20229
- };
20230
- }
20231
- /**
20232
- * Editorial columns: site name and supporting copy on the left, inline nav on
20233
- * the right, with a hairline-topped bottom line. Uses the footer block's
20234
- * columns layout.
20235
- */
20236
- function editorialColumnsFooter(theme) {
20237
- return {
20238
- ...theme.footer,
20239
- variant: "columns",
20240
- maxWidth: "container",
20241
- background: {
20242
- type: "color",
20243
- color: "surface"
20244
- },
20245
- navStyle: "minimal",
20246
- navWeight: "regular",
20247
20147
  navColor: "text",
20248
20148
  navLinkStyle: {
20249
20149
  typography: "body",
20250
- fontWeight: "regular",
20150
+ fontWeight: "medium",
20251
20151
  textTransform: "none",
20252
20152
  italic: false,
20253
20153
  colorToken: "text",
20254
20154
  hoverColorToken: "primary",
20255
20155
  padding: "none",
20256
20156
  borderRadius: "none"
20257
- },
20258
- logo: {
20259
- showLogo: true,
20260
- showLogoText: true,
20261
- placement: "left",
20262
- size: "sm",
20263
- align: "start"
20264
- },
20265
- bottomBar: {
20266
- enabled: true,
20267
- fullBleed: false,
20268
- textAlign: "center",
20269
- paddingX: "default",
20270
- paddingY: "compact",
20271
- borderTop: { width: "thin" }
20272
20157
  }
20273
20158
  };
20274
20159
  }
20275
- const footerLookCatalog = defineExactCatalog()([
20276
- {
20277
- id: asFooterLookId("footer-identity-quiet"),
20278
- label: "Identity footer",
20279
- layoutId: asFooterLayoutId("identity"),
20280
- styleId: asFooterStyleId("quiet"),
20281
- compile: identityQuietFooter
20282
- },
20283
- {
20284
- id: asFooterLookId("footer-muted-grounding"),
20285
- label: "Muted grounding footer",
20286
- layoutId: asFooterLayoutId("identity"),
20287
- styleId: asFooterStyleId("quiet"),
20288
- hiddenFromLayoutStyleControls: true,
20289
- compile: mutedGroundingFooter
20290
- },
20291
- {
20292
- id: asFooterLookId("footer-centered-calm"),
20293
- label: "Centered calm footer",
20294
- layoutId: asFooterLayoutId("centered"),
20295
- styleId: asFooterStyleId("calm"),
20296
- compile: centeredCalmFooter
20297
- },
20298
- {
20299
- id: asFooterLookId("footer-split-editorial"),
20300
- label: "Split editorial footer",
20301
- layoutId: asFooterLayoutId("split"),
20302
- styleId: asFooterStyleId("editorial"),
20303
- compile: splitEditorialFooter
20304
- },
20305
- {
20306
- id: asFooterLookId("footer-editorial-columns"),
20307
- label: "Editorial columns footer",
20308
- layoutId: asFooterLayoutId("columns"),
20309
- styleId: asFooterStyleId("editorial"),
20310
- compile: editorialColumnsFooter
20311
- },
20312
- {
20313
- id: asFooterLookId("site-footer-brand-two-band"),
20314
- label: "Two-band brand footer",
20315
- layoutId: asFooterLayoutId("split"),
20316
- styleId: asFooterStyleId("brand-band"),
20317
- allowedContentPresence: ["default-footer", "default-and-blocks"],
20318
- compile: brandTwoBandFooter
20319
- }
20320
- ]);
20160
+ const footerLookCatalog = defineExactCatalog()([{
20161
+ id: asFooterLookId("footer-links-quiet"),
20162
+ label: "Quiet links",
20163
+ description: "Regular-weight footer navigation with a restrained hover.",
20164
+ compile: quietFooterLinks
20165
+ }, {
20166
+ id: asFooterLookId("footer-links-emphasized"),
20167
+ label: "Emphasized links",
20168
+ description: "Medium-weight footer navigation with a clearer emphasis.",
20169
+ compile: emphasizedFooterLinks
20170
+ }]);
20321
20171
  new Map(footerLookCatalog.map((look) => [look.id, look]));
20322
20172
  //#endregion
20323
20173
  //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -23381,23 +23231,27 @@ function resolveBoxShadow(variant, global, theme, tokens) {
23381
23231
  const color = shadowConfig.colorToken ? tokens.getColor(shadowConfig.colorToken) : void 0;
23382
23232
  return generateShadowValue$1(shadowConfig.elevation, shadowConfig.softness, shadowConfig.position ?? "bottom", color);
23383
23233
  }
23384
- buttonPersonalities.map((personality) => ({
23385
- id: personality.id,
23386
- name: personality.name,
23387
- description: personality.description,
23388
- category: presetCategory(personality),
23389
- buttonSystem: personality.buttonSystem,
23390
- compatibility: {
23391
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
23392
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
23393
- }
23394
- }));
23395
- function presetCategory(personality) {
23396
- switch (personality.tags.era) {
23234
+ buttonStyleRecipes.map((recipe) => {
23235
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
23236
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
23237
+ return {
23238
+ id: recipe.id,
23239
+ name: recipe.accessibilityLabel,
23240
+ description: recipe.accessibilityLabel,
23241
+ category: presetCategory(recipe),
23242
+ buttonSystem: resolved.buttonSystem,
23243
+ compatibility: {
23244
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
23245
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
23246
+ }
23247
+ };
23248
+ });
23249
+ function presetCategory(recipe) {
23250
+ switch (recipe.tags.era) {
23397
23251
  case "retro": return "retro";
23398
23252
  case "editorial": return "minimal";
23399
23253
  case "organic": return "artistic";
23400
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
23254
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
23401
23255
  case "technical": return "technical";
23402
23256
  case void 0: return "modern";
23403
23257
  }
@@ -26286,17 +26140,21 @@ function defineCuratedSiteStyle(input) {
26286
26140
  })),
26287
26141
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
26288
26142
  recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
26289
- buttonPersonalityChoices: input.buttonPersonalityChoices,
26143
+ buttonStyleChoices: input.buttonStyleChoices,
26290
26144
  paletteRecommendations: input.paletteRecommendations,
26291
26145
  typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
26292
26146
  ...input.heroTypography ? { heroTypography: input.heroTypography } : {}
26293
26147
  };
26294
26148
  }
26295
- function buttonChoice(id, note) {
26149
+ function buttonChoice(styleId, note, parameters) {
26150
+ const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
26151
+ styleId,
26152
+ parameters
26153
+ });
26296
26154
  return note ? {
26297
- id: asButtonPersonalityId(id),
26155
+ ...selection,
26298
26156
  note
26299
- } : { id: asButtonPersonalityId(id) };
26157
+ } : selection;
26300
26158
  }
26301
26159
  function paletteRecommendation(authoringKey, note) {
26302
26160
  const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -26481,9 +26339,8 @@ const curatedSiteStyles = [
26481
26339
  "minimal-transparent",
26482
26340
  "clean-base"
26483
26341
  ],
26484
- buttonPersonalityChoices: [
26342
+ buttonStyleChoices: [
26485
26343
  buttonChoice("soft-pill"),
26486
- buttonChoice("two-tone-pill"),
26487
26344
  buttonChoice("pebble"),
26488
26345
  buttonChoice("editorial-link"),
26489
26346
  buttonChoice("brushed-wash")
@@ -26519,7 +26376,7 @@ const curatedSiteStyles = [
26519
26376
  "brand-solid",
26520
26377
  "clean-base"
26521
26378
  ],
26522
- buttonPersonalityChoices: [
26379
+ buttonStyleChoices: [
26523
26380
  buttonChoice("confident-chip"),
26524
26381
  buttonChoice("soft-pill"),
26525
26382
  buttonChoice("editorial-link")
@@ -26558,7 +26415,7 @@ const curatedSiteStyles = [
26558
26415
  "minimal-transparent",
26559
26416
  "centered-calm"
26560
26417
  ],
26561
- buttonPersonalityChoices: [
26418
+ buttonStyleChoices: [
26562
26419
  buttonChoice("editorial-link"),
26563
26420
  buttonChoice("soft-pill"),
26564
26421
  buttonChoice("brushed-wash")
@@ -26598,7 +26455,7 @@ const curatedSiteStyles = [
26598
26455
  "practical-utility",
26599
26456
  "clean-base"
26600
26457
  ],
26601
- buttonPersonalityChoices: [
26458
+ buttonStyleChoices: [
26602
26459
  buttonChoice("pebble"),
26603
26460
  buttonChoice("brushed-wash"),
26604
26461
  buttonChoice("confident-chip")
@@ -26659,7 +26516,7 @@ const curatedSiteStyles = [
26659
26516
  "serif-line",
26660
26517
  "clean-base"
26661
26518
  ],
26662
- buttonPersonalityChoices: [
26519
+ buttonStyleChoices: [
26663
26520
  buttonChoice("editorial-link"),
26664
26521
  buttonChoice("confident-chip"),
26665
26522
  buttonChoice("soft-pill")
@@ -26721,7 +26578,7 @@ const curatedSiteStyles = [
26721
26578
  "brand-solid",
26722
26579
  "clean-base"
26723
26580
  ],
26724
- buttonPersonalityChoices: [
26581
+ buttonStyleChoices: [
26725
26582
  buttonChoice("confident-chip"),
26726
26583
  buttonChoice("pebble"),
26727
26584
  buttonChoice("ink-stamp")
@@ -26760,7 +26617,7 @@ const curatedSiteStyles = [
26760
26617
  "minimal-transparent",
26761
26618
  "clean-base"
26762
26619
  ],
26763
- buttonPersonalityChoices: [
26620
+ buttonStyleChoices: [
26764
26621
  buttonChoice("soft-pill"),
26765
26622
  buttonChoice("pebble"),
26766
26623
  buttonChoice("confident-chip")
@@ -26833,7 +26690,7 @@ const curatedSiteStyles = [
26833
26690
  "clean-base",
26834
26691
  "centered-calm"
26835
26692
  ],
26836
- buttonPersonalityChoices: [
26693
+ buttonStyleChoices: [
26837
26694
  buttonChoice("pebble"),
26838
26695
  buttonChoice("soft-pill"),
26839
26696
  buttonChoice("editorial-link")
@@ -26952,12 +26809,8 @@ const curatedSiteStyles = [
26952
26809
  "serif-line",
26953
26810
  "minimal-transparent"
26954
26811
  ],
26955
- recommendedFooterLookIds: [
26956
- "footer-centered-calm",
26957
- "footer-editorial-columns",
26958
- "footer-muted-grounding"
26959
- ],
26960
- buttonPersonalityChoices: [
26812
+ recommendedFooterLookIds: ["footer-links-quiet"],
26813
+ buttonStyleChoices: [
26961
26814
  buttonChoice("soft-pill"),
26962
26815
  buttonChoice("pebble"),
26963
26816
  buttonChoice("editorial-link")
@@ -27031,7 +26884,7 @@ const curatedSiteStyles = [
27031
26884
  "centered-calm",
27032
26885
  "minimal-transparent"
27033
26886
  ],
27034
- buttonPersonalityChoices: [
26887
+ buttonStyleChoices: [
27035
26888
  buttonChoice("editorial-link"),
27036
26889
  buttonChoice("soft-pill"),
27037
26890
  buttonChoice("brushed-wash")
@@ -27104,8 +26957,8 @@ const curatedSiteStyles = [
27104
26957
  "practical-utility",
27105
26958
  "clean-base"
27106
26959
  ],
27107
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
27108
- buttonPersonalityChoices: [
26960
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
26961
+ buttonStyleChoices: [
27109
26962
  buttonChoice("pebble"),
27110
26963
  buttonChoice("confident-chip"),
27111
26964
  buttonChoice("ink-stamp"),
@@ -27226,8 +27079,8 @@ const curatedSiteStyles = [
27226
27079
  "minimal-transparent",
27227
27080
  "serif-line"
27228
27081
  ],
27229
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
27230
- buttonPersonalityChoices: [
27082
+ recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
27083
+ buttonStyleChoices: [
27231
27084
  buttonChoice("earth-pill"),
27232
27085
  buttonChoice("soft-pill"),
27233
27086
  buttonChoice("pebble"),
@@ -27298,7 +27151,7 @@ const curatedSiteStyles = [
27298
27151
  "floating-glass",
27299
27152
  "brand-solid"
27300
27153
  ],
27301
- buttonPersonalityChoices: [
27154
+ buttonStyleChoices: [
27302
27155
  buttonChoice("ink-stamp"),
27303
27156
  buttonChoice("confident-chip"),
27304
27157
  buttonChoice("brushed-wash"),
@@ -27353,8 +27206,8 @@ const curatedSiteStyles = [
27353
27206
  "transparent-overlay",
27354
27207
  "practical-utility"
27355
27208
  ],
27356
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
27357
- buttonPersonalityChoices: [
27209
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
27210
+ buttonStyleChoices: [
27358
27211
  buttonChoice("showtime-pill"),
27359
27212
  buttonChoice("confident-chip"),
27360
27213
  buttonChoice("ink-stamp"),
@@ -27435,8 +27288,8 @@ const curatedSiteStyles = [
27435
27288
  headerStyleChoice("glass")
27436
27289
  ] },
27437
27290
  recommendedHeaderLookIds: ["minimal-transparent"],
27438
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
27439
- buttonPersonalityChoices: [
27291
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
27292
+ buttonStyleChoices: [
27440
27293
  buttonChoice("ornate-ritual"),
27441
27294
  buttonChoice("joy-stamp"),
27442
27295
  buttonChoice("ink-stamp")
@@ -27489,8 +27342,8 @@ const curatedSiteStyles = [
27489
27342
  headerStyleChoice("glass")
27490
27343
  ] },
27491
27344
  recommendedHeaderLookIds: ["minimal-transparent"],
27492
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
27493
- buttonPersonalityChoices: [
27345
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
27346
+ buttonStyleChoices: [
27494
27347
  buttonChoice("joy-stamp"),
27495
27348
  buttonChoice("ink-stamp"),
27496
27349
  buttonChoice("showtime-pill")
@@ -27580,8 +27433,8 @@ const curatedSiteStyles = [
27580
27433
  "centered-calm",
27581
27434
  "clean-base"
27582
27435
  ],
27583
- recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
27584
- buttonPersonalityChoices: [
27436
+ recommendedFooterLookIds: ["footer-links-quiet"],
27437
+ buttonStyleChoices: [
27585
27438
  buttonChoice("flat-ink"),
27586
27439
  buttonChoice("confident-chip"),
27587
27440
  buttonChoice("editorial-link")
@@ -27658,14 +27511,9 @@ const curatedSiteStyles = [
27658
27511
  "serif-line",
27659
27512
  "clean-base"
27660
27513
  ],
27661
- recommendedFooterLookIds: [
27662
- "footer-editorial-columns",
27663
- "footer-muted-grounding",
27664
- "footer-identity-quiet"
27665
- ],
27666
- buttonPersonalityChoices: [
27667
- buttonChoice("quiet-arrow"),
27668
- buttonChoice("two-tone-pill"),
27514
+ recommendedFooterLookIds: ["footer-links-quiet"],
27515
+ buttonStyleChoices: [
27516
+ buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
27669
27517
  buttonChoice("flat-ink"),
27670
27518
  buttonChoice("editorial-link")
27671
27519
  ],
@@ -30862,25 +30710,41 @@ const heroCopyFragment = defineFragment({
30862
30710
  ]
30863
30711
  });
30864
30712
  //#endregion
30713
+ //#region ../blocks/src/system/constants/buttonRoles.ts
30714
+ /**
30715
+ * Semantic button roles available to block authors.
30716
+ *
30717
+ * These roles are deliberately independent of a site's visual button style:
30718
+ * the active theme owns how each role looks.
30719
+ */
30720
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
30721
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
30722
+ /**
30723
+ * Temporary rollout boundary for persisted content written before issue #1220.
30724
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
30725
+ * only until the post-deploy role rewrite has been audited in production.
30726
+ */
30727
+ function canonicalizePersistedBlockButtonRole(value) {
30728
+ return value === "link" || value === "tertiary" ? "ghost" : value;
30729
+ }
30730
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
30731
+ const BLOCK_BUTTON_ROLE_LABELS = {
30732
+ primary: "Primary",
30733
+ secondary: "Secondary",
30734
+ outline: "Outline",
30735
+ ghost: "Ghost",
30736
+ accent: "Accent"
30737
+ };
30738
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
30739
+ value,
30740
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
30741
+ }));
30742
+ function isBlockButtonRole(value) {
30743
+ return blockButtonRoleSchema.safeParse(value).success;
30744
+ }
30745
+ //#endregion
30865
30746
  //#region ../blocks/src/system/fields/button.ts
30866
- const DEFAULT_THEME_BUTTON_VARIANTS = [
30867
- {
30868
- value: "primary",
30869
- label: "Primary"
30870
- },
30871
- {
30872
- value: "secondary",
30873
- label: "Secondary"
30874
- },
30875
- {
30876
- value: "outline",
30877
- label: "Outline"
30878
- },
30879
- {
30880
- value: "link",
30881
- label: "Link"
30882
- }
30883
- ];
30747
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
30884
30748
  function createButtonVariantField(options = {}) {
30885
30749
  return {
30886
30750
  id: options.id ?? "buttonVariant",
@@ -30898,20 +30762,7 @@ function createButtonVariantField(options = {}) {
30898
30762
  };
30899
30763
  }
30900
30764
  function createButtonGroup(options = {}) {
30901
- const { variants = [
30902
- {
30903
- value: "primary",
30904
- label: "Primary"
30905
- },
30906
- {
30907
- value: "secondary",
30908
- label: "Secondary"
30909
- },
30910
- {
30911
- value: "outline",
30912
- label: "Outline"
30913
- }
30914
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
30765
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
30915
30766
  const mainFields = [
30916
30767
  {
30917
30768
  id: "label",
@@ -31047,29 +30898,7 @@ const ctaRowFragment = defineFragment({
31047
30898
  fields: [createCtasRepeater({
31048
30899
  label: "Calls to action",
31049
30900
  itemLabel: "CTA",
31050
- maxItems: 3,
31051
- button: { variants: [
31052
- {
31053
- value: "primary",
31054
- label: "Primary"
31055
- },
31056
- {
31057
- value: "secondary",
31058
- label: "Secondary"
31059
- },
31060
- {
31061
- value: "outline",
31062
- label: "Outline"
31063
- },
31064
- {
31065
- value: "link",
31066
- label: "Link"
31067
- },
31068
- {
31069
- value: "accent",
31070
- label: "Accent"
31071
- }
31072
- ] }
30901
+ maxItems: 3
31073
30902
  })],
31074
30903
  layout: [ctaRow({
31075
30904
  collectionPath: "content.ctas",
@@ -31088,10 +30917,6 @@ const heroCtaRowFragment = defineFragment({
31088
30917
  defaultValue: [],
31089
30918
  button: {
31090
30919
  variants: [
31091
- {
31092
- value: "default",
31093
- label: "Default"
31094
- },
31095
30920
  {
31096
30921
  value: "primary",
31097
30922
  label: "Primary"
@@ -31103,9 +30928,17 @@ const heroCtaRowFragment = defineFragment({
31103
30928
  {
31104
30929
  value: "outline",
31105
30930
  label: "Outline"
30931
+ },
30932
+ {
30933
+ value: "ghost",
30934
+ label: "Ghost"
30935
+ },
30936
+ {
30937
+ value: "accent",
30938
+ label: "Accent"
31106
30939
  }
31107
30940
  ],
31108
- defaultVariant: "default",
30941
+ defaultVariant: "primary",
31109
30942
  includeSize: true,
31110
30943
  defaultSize: "lg"
31111
30944
  }
@@ -31880,11 +31713,13 @@ const blogFeaturedPostFragment = defineFragment({
31880
31713
  as: "p",
31881
31714
  style: textColorStyle("text/80")
31882
31715
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
31883
- link({
31884
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
31885
- style: textColorStyle("primary"),
31886
- href: { $bind: { from: "post.path" } }
31887
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
31716
+ button({
31717
+ className: "rb-self-start",
31718
+ href: { $bind: { from: "post.path" } },
31719
+ variantId: "ghost",
31720
+ size: "sm",
31721
+ linkRequired: true
31722
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
31888
31723
  ])], when("post")), stack({
31889
31724
  gap: "sm",
31890
31725
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -33175,21 +33010,7 @@ const newsletterFormFragment = defineFragment({
33175
33010
  createButtonVariantField({
33176
33011
  id: "buttonVariant",
33177
33012
  label: "Button style",
33178
- defaultValue: "primary",
33179
- variants: [
33180
- {
33181
- value: "primary",
33182
- label: "Primary"
33183
- },
33184
- {
33185
- value: "secondary",
33186
- label: "Secondary"
33187
- },
33188
- {
33189
- value: "outline",
33190
- label: "Outline"
33191
- }
33192
- ]
33013
+ defaultValue: "primary"
33193
33014
  }),
33194
33015
  {
33195
33016
  id: "successMessage",
@@ -34119,7 +33940,8 @@ function postExcerpt(className) {
34119
33940
  function postReadMore() {
34120
33941
  return button({
34121
33942
  href: { $bind: { from: "post.path" } },
34122
- className: "rb-self-start"
33943
+ className: "rb-self-start",
33944
+ variantId: "ghost"
34123
33945
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
34124
33946
  as: "span",
34125
33947
  value: "Read more"
@@ -37855,31 +37677,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
37855
37677
  label: "Calls to action",
37856
37678
  itemLabel: "CTA",
37857
37679
  maxItems: 1,
37858
- button: {
37859
- variants: [
37860
- {
37861
- value: "primary",
37862
- label: "Primary"
37863
- },
37864
- {
37865
- value: "secondary",
37866
- label: "Secondary"
37867
- },
37868
- {
37869
- value: "outline",
37870
- label: "Outline"
37871
- },
37872
- {
37873
- value: "ghost",
37874
- label: "Ghost"
37875
- },
37876
- {
37877
- value: "link",
37878
- label: "Link"
37879
- }
37880
- ],
37881
- defaultVariant: "ghost"
37882
- }
37680
+ button: { defaultVariant: "ghost" }
37883
37681
  })
37884
37682
  ] }
37885
37683
  },
@@ -40091,17 +39889,8 @@ function readAmount(value) {
40091
39889
  //#endregion
40092
39890
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
40093
39891
  const previewStageSchema = z$1.enum(["preview", "published"]);
40094
- const registrationButtonVariantSchema = z$1.enum([
40095
- "primary",
40096
- "secondary",
40097
- "outline"
40098
- ]);
40099
- const eventButtonVariantSchema = z$1.enum([
40100
- "primary",
40101
- "secondary",
40102
- "outline",
40103
- "link"
40104
- ]);
39892
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
39893
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
40105
39894
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
40106
39895
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
40107
39896
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -40478,23 +40267,7 @@ const eventRegistrationBlockDefinition = {
40478
40267
  defaultValue: "Complete Registration",
40479
40268
  maxLength: 40
40480
40269
  },
40481
- createButtonVariantField({
40482
- description: "Choose a button style from your theme",
40483
- variants: [
40484
- {
40485
- value: "primary",
40486
- label: "Primary"
40487
- },
40488
- {
40489
- value: "secondary",
40490
- label: "Secondary"
40491
- },
40492
- {
40493
- value: "outline",
40494
- label: "Outline"
40495
- }
40496
- ]
40497
- })
40270
+ createButtonVariantField()
40498
40271
  ],
40499
40272
  layout: [styledSection({
40500
40273
  baseClass: "",
@@ -40983,23 +40756,7 @@ const courseRegistrationBlockDefinition = {
40983
40756
  defaultValue: "Sign up",
40984
40757
  maxLength: 40
40985
40758
  },
40986
- createButtonVariantField({
40987
- description: "Choose a button style from your theme",
40988
- variants: [
40989
- {
40990
- value: "primary",
40991
- label: "Primary"
40992
- },
40993
- {
40994
- value: "secondary",
40995
- label: "Secondary"
40996
- },
40997
- {
40998
- value: "outline",
40999
- label: "Outline"
41000
- }
41001
- ]
41002
- })
40759
+ createButtonVariantField()
41003
40760
  ],
41004
40761
  layout: [styledSection({
41005
40762
  baseClass: "",
@@ -46631,36 +46388,7 @@ const offeringsPreviewFields = [
46631
46388
  ui: { intent: "content" },
46632
46389
  schema: { fields: groupOverrideFields }
46633
46390
  },
46634
- {
46635
- id: "buttonVariant",
46636
- type: "select",
46637
- label: "Button style",
46638
- required: false,
46639
- multiple: false,
46640
- defaultValue: "primary",
46641
- options: [
46642
- {
46643
- value: "primary",
46644
- label: "Primary"
46645
- },
46646
- {
46647
- value: "secondary",
46648
- label: "Secondary"
46649
- },
46650
- {
46651
- value: "outline",
46652
- label: "Outline"
46653
- },
46654
- {
46655
- value: "link",
46656
- label: "Link"
46657
- }
46658
- ],
46659
- ui: {
46660
- intent: "display",
46661
- widget: "buttonVariant"
46662
- }
46663
- },
46391
+ createButtonVariantField(),
46664
46392
  {
46665
46393
  id: "buttonText",
46666
46394
  type: "text",
@@ -46866,7 +46594,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
46866
46594
  return [override];
46867
46595
  }
46868
46596
  function isButtonVariant(value) {
46869
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
46597
+ return value === null || isBlockButtonRole(value);
46870
46598
  }
46871
46599
  function normalizeCardStylesContent(value) {
46872
46600
  return isRecord$19(value) || value === null ? value : void 0;
@@ -48718,12 +48446,7 @@ const shopSourceSchema = z$1.object({
48718
48446
  showPrices: z$1.boolean().optional(),
48719
48447
  showValidityPeriod: z$1.boolean().optional(),
48720
48448
  showPricePerCredit: z$1.boolean().nullable().optional(),
48721
- buttonVariant: z$1.enum([
48722
- "primary",
48723
- "secondary",
48724
- "outline",
48725
- "link"
48726
- ]).optional(),
48449
+ buttonVariant: blockButtonRoleSchema.optional(),
48727
48450
  passesHeading: z$1.string().optional(),
48728
48451
  membershipsHeading: z$1.string().optional(),
48729
48452
  buyButtonText: z$1.string().optional(),
@@ -48868,12 +48591,7 @@ const passesMembershipsHydrationSchema = z$1.object({
48868
48591
  passes: z$1.array(publicPassProductSchema),
48869
48592
  memberships: z$1.array(publicMembershipProductSchema),
48870
48593
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
48871
- buttonVariant: z$1.enum([
48872
- "primary",
48873
- "secondary",
48874
- "outline",
48875
- "link"
48876
- ])
48594
+ buttonVariant: blockButtonRoleSchema
48877
48595
  });
48878
48596
  const productListHydrationSchema = z$1.object({
48879
48597
  products: z$1.array(publicProductSchema),
@@ -50301,11 +50019,7 @@ const newsletterPresetSchema = z$1.enum([
50301
50019
  "emailNameCompany"
50302
50020
  ]);
50303
50021
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
50304
- const newsletterButtonVariantSchema = z$1.enum([
50305
- "primary",
50306
- "secondary",
50307
- "outline"
50308
- ]);
50022
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
50309
50023
  const newsletterFieldSchema = z$1.object({
50310
50024
  id: z$1.string(),
50311
50025
  type: z$1.enum(["email", "text"]),
@@ -53355,7 +53069,7 @@ const ButtonNode = ({ value, children, href, variantId = "primary", size = "md",
53355
53069
  return null;
53356
53070
  }
53357
53071
  const extraClassName = affordanceIcon ? [className, AFFORDANCE_SUPPRESS_CLASS].filter(Boolean).join(" ") : className;
53358
- const resolvedVariantId = parseThemeButtonVariantId(variantId);
53072
+ const resolvedVariantId = parseThemeButtonVariantId(canonicalizePersistedBlockButtonRole(variantId));
53359
53073
  const combinedClassName = resolvedVariantId ? themeButtonClassName({
53360
53074
  variant: resolvedVariantId,
53361
53075
  size,
@@ -53454,12 +53168,6 @@ const FeatureCardIconNode = ({ value, treatment, generatedIconSizePx, className,
53454
53168
  };
53455
53169
  //#endregion
53456
53170
  //#region ../blocks/src/system/runtime/nodes/file-download.tsx
53457
- const FILE_DOWNLOAD_BUTTON_VARIANTS = [
53458
- "primary",
53459
- "secondary",
53460
- "outline",
53461
- "link"
53462
- ];
53463
53171
  function isDownloadableMediaType(type) {
53464
53172
  return typeof type === "string" && PUBLIC_DOWNLOAD_MEDIA_TYPES.includes(type);
53465
53173
  }
@@ -53491,7 +53199,7 @@ function iconForMediaType(type) {
53491
53199
  }
53492
53200
  }
53493
53201
  function normalizeButtonVariant(value) {
53494
- return typeof value === "string" && FILE_DOWNLOAD_BUTTON_VARIANTS.includes(value) ? value : "primary";
53202
+ return isBlockButtonRole(value) ? value : "primary";
53495
53203
  }
53496
53204
  function FileDownloadNode({ value, title, description, buttonLabel, buttonVariant, className }) {
53497
53205
  if (!value || !isDownloadableMediaType(value.type)) return null;
@@ -57493,8 +57201,11 @@ function LocationMapView({ addressText, location, zoom, heightPx, showAddressTex
57493
57201
  href: directionsUrl,
57494
57202
  target: "_blank",
57495
57203
  rel: "noreferrer",
57496
- className: "rb-inline-flex rb-w-fit rb-items-center rb-justify-center rb-rounded-md rb-border rb-px-4 rb-py-2 rb-text-sm rb-font-medium rb-no-underline transition-theme-standard rb-hover-opacity-90",
57497
- style: mergeStyles(borderColorStyle("border"), backgroundColorStyle("surface"), textColorStyle("text")),
57204
+ className: themeButtonClassName({
57205
+ variant: "ghost",
57206
+ size: "sm",
57207
+ extraClassName: "rb-w-fit"
57208
+ }),
57498
57209
  children: directionsLabel
57499
57210
  }) : null
57500
57211
  ]
@@ -58892,7 +58603,11 @@ function WeeklySlotAvailabilityView({ availability, loading = false, error, empt
58892
58603
  ]
58893
58604
  }),
58894
58605
  resolvedCtaUrl ? /* @__PURE__ */ jsx("a", {
58895
- className: "weekly-slot-availability__cta",
58606
+ className: themeButtonClassName({
58607
+ variant: "ghost",
58608
+ size: "sm",
58609
+ extraClassName: "weekly-slot-availability__cta"
58610
+ }),
58896
58611
  href: buildSlotCtaUrl(resolvedCtaUrl, slot),
58897
58612
  "aria-label": buildSlotCtaLabel(resolvedCtaText, slot),
58898
58613
  children: resolvedCtaText
@@ -87267,7 +86982,7 @@ var CircuitOpenError = class extends Error {
87267
86982
  * 1. This constant
87268
86983
  * 2. The "version" field in package.json
87269
86984
  */
87270
- const SDK_VERSION = "0.109.0";
86985
+ const SDK_VERSION = "0.111.0";
87271
86986
  //#endregion
87272
86987
  //#region src/next/content-load-failure.ts
87273
86988
  const SdkContentLoadError = RiverbankContentLoadError;