@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
@@ -2285,6 +2285,24 @@ const API_ENDPOINTS$1 = {
2285
2285
  auth: "user",
2286
2286
  responseKind: "json"
2287
2287
  },
2288
+ publishEventOfferingPageSurface: {
2289
+ path: "/sites/{siteId}/page-surfaces/{pageSurfaceId}/publication",
2290
+ method: "POST",
2291
+ errors: [
2292
+ "auth:forbidden",
2293
+ "validation:invalid_input",
2294
+ "resource:not_found",
2295
+ "resource:conflict",
2296
+ "server:internal_error"
2297
+ ],
2298
+ tags: [
2299
+ TAG_TEMPLATES.siteCollection,
2300
+ TAG_TEMPLATES.siteRoutableContent,
2301
+ TAG_TEMPLATES.pageSurfaceById
2302
+ ],
2303
+ auth: "user",
2304
+ responseKind: "json"
2305
+ },
2288
2306
  runSdkWorkflow: {
2289
2307
  path: "/sites/{siteId}/content/{type}/{entryId}/workflows/{workflowId}/run",
2290
2308
  method: "POST",
@@ -6147,8 +6165,8 @@ const API_ENDPOINTS$1 = {
6147
6165
  auth: "user",
6148
6166
  responseKind: "blob"
6149
6167
  },
6150
- adminSiteCost: {
6151
- path: "/admin/sites/{siteId}/cost",
6168
+ adminSiteBillingArrangement: {
6169
+ path: "/admin/sites/{siteId}/billing/arrangement",
6152
6170
  method: "GET",
6153
6171
  tags: [
6154
6172
  "admin",
@@ -6156,10 +6174,16 @@ const API_ENDPOINTS$1 = {
6156
6174
  "billing"
6157
6175
  ],
6158
6176
  auth: "admin",
6159
- responseKind: "json"
6177
+ responseKind: "json",
6178
+ errors: [
6179
+ "validation:invalid_input",
6180
+ "auth:forbidden",
6181
+ "resource:not_found",
6182
+ "server:internal_error"
6183
+ ]
6160
6184
  },
6161
- adminUpdateSiteCost: {
6162
- path: "/admin/sites/{siteId}/cost",
6185
+ adminUpdateSiteBillingArrangement: {
6186
+ path: "/admin/sites/{siteId}/billing/arrangement",
6163
6187
  method: "POST",
6164
6188
  tags: [
6165
6189
  "admin",
@@ -6167,7 +6191,14 @@ const API_ENDPOINTS$1 = {
6167
6191
  "billing"
6168
6192
  ],
6169
6193
  auth: "admin",
6170
- responseKind: "json"
6194
+ responseKind: "json",
6195
+ errors: [
6196
+ "validation:invalid_input",
6197
+ "auth:forbidden",
6198
+ "resource:not_found",
6199
+ "resource:conflict",
6200
+ "server:internal_error"
6201
+ ]
6171
6202
  },
6172
6203
  adminScheduleBillingComponentEnd: {
6173
6204
  path: "/admin/sites/{siteId}/billing/components/{componentId}/end",
@@ -7786,7 +7817,7 @@ var SimpleCache = class {
7786
7817
  * 1. This constant
7787
7818
  * 2. The "version" field in package.json
7788
7819
  */
7789
- const SDK_VERSION = "0.109.0";
7820
+ const SDK_VERSION = "0.111.0";
7790
7821
  //#endregion
7791
7822
  //#region src/client/error.ts
7792
7823
  let _Symbol$for;
@@ -13915,7 +13946,7 @@ const gradientDirectionSchema$1 = z$1.enum([
13915
13946
  "to-br",
13916
13947
  "to-bl"
13917
13948
  ]);
13918
- const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
13949
+ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
13919
13950
  z$1.object({
13920
13951
  type: z$1.literal("solid"),
13921
13952
  colorToken: opaqueButtonColourTokenSchema
@@ -13939,6 +13970,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
13939
13970
  role: z$1.literal("link")
13940
13971
  })
13941
13972
  ]);
13973
+ const buttonBackgroundSchema = buttonColourTreatmentSchema;
13942
13974
  const effectApplicationSchema$1 = z$1.object({
13943
13975
  effectId: z$1.string(),
13944
13976
  options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -14151,50 +14183,887 @@ function isUnknownArray(value) {
14151
14183
  }
14152
14184
  buttonSizeNameSchema.options;
14153
14185
  //#endregion
14154
- //#region ../theme-core/src/buttons/personalities/types.ts
14155
- function asButtonPersonalityId(value) {
14156
- if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
14157
- return value;
14186
+ //#region ../theme-core/src/buttons/styles/domain.ts
14187
+ const PUBLIC_BUTTON_ROLES = [
14188
+ "primary",
14189
+ "secondary",
14190
+ "outline",
14191
+ "ghost",
14192
+ "accent"
14193
+ ];
14194
+ function defineButtonStyleRecipe(recipe) {
14195
+ return recipe;
14158
14196
  }
14159
- const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
14160
- z$1.object({
14161
- id: buttonPersonalityIdSchema,
14162
- name: z$1.string().min(1),
14163
- description: z$1.string().min(1),
14164
- tags: styleTagsSchema,
14165
- buttonSystem: buttonSystemSchema
14166
- });
14167
- /**
14168
- * Helper for personality file modules to keep the call site short and
14169
- * type-safe. `as const satisfies ...` would also work but produces wider
14170
- * types at use sites.
14171
- */
14172
- function defineButtonPersonality(input) {
14197
+ function materializeButtonRoles(definitions) {
14198
+ const primary = materializeCompleteRole("primary", definitions.primary.appearance);
14199
+ const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
14200
+ const completeRoles = {
14201
+ primary,
14202
+ secondary
14203
+ };
14173
14204
  return {
14174
- id: asButtonPersonalityId(input.id),
14175
- name: input.name,
14176
- description: input.description,
14205
+ primary,
14206
+ secondary,
14207
+ outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
14208
+ ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
14209
+ accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
14210
+ };
14211
+ }
14212
+ function resolveButtonStyleRecipe(recipe, parameters) {
14213
+ const parsedParameters = recipe.parameterSchema.safeParse(parameters);
14214
+ if (!parsedParameters.success) return {
14215
+ kind: "error",
14216
+ error: {
14217
+ kind: "invalid-parameters",
14218
+ styleId: recipe.id,
14219
+ issues: parsedParameters.error.issues.map((issue) => issue.message)
14220
+ }
14221
+ };
14222
+ const definition = recipe.defineSystem(parsedParameters.data);
14223
+ const roles = materializeButtonRoles(definition.roles);
14224
+ const buttonSystem = {
14225
+ global: definition.global,
14226
+ variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
14227
+ ...definition.sizes ? { sizes: definition.sizes } : {}
14228
+ };
14229
+ const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
14230
+ if (!parsedButtonSystem.success) return {
14231
+ kind: "error",
14232
+ error: {
14233
+ kind: "invalid-button-system",
14234
+ styleId: recipe.id,
14235
+ issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
14236
+ }
14237
+ };
14238
+ return {
14239
+ kind: "resolved",
14240
+ buttonSystem: parsedButtonSystem.data
14241
+ };
14242
+ }
14243
+ function materializeSupportingRole(role, definition, completeRoles) {
14244
+ if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
14245
+ return {
14246
+ ...completeRoles[definition.from],
14247
+ ...definition.overrides,
14248
+ id: role,
14249
+ name: roleName(role),
14250
+ enabled: true,
14251
+ priority: 3
14252
+ };
14253
+ }
14254
+ function materializeCompleteRole(role, appearance) {
14255
+ return {
14256
+ ...appearance,
14257
+ id: role,
14258
+ name: roleName(role),
14259
+ enabled: true,
14260
+ priority: rolePriority(role)
14261
+ };
14262
+ }
14263
+ function roleName(role) {
14264
+ return role.charAt(0).toUpperCase() + role.slice(1);
14265
+ }
14266
+ function rolePriority(role) {
14267
+ if (role === "primary") return 1;
14268
+ if (role === "secondary") return 2;
14269
+ return 3;
14270
+ }
14271
+ //#endregion
14272
+ //#region ../theme-core/src/buttons/styles/selection.ts
14273
+ const BUTTON_STYLE_IDS = [
14274
+ "soft-pill",
14275
+ "earth-pill",
14276
+ "confident-chip",
14277
+ "editorial-link",
14278
+ "pebble",
14279
+ "ink-stamp",
14280
+ "flat-ink",
14281
+ "brushed-wash",
14282
+ "showtime-pill",
14283
+ "joy-stamp",
14284
+ "ornate-ritual",
14285
+ "quiet-arrow"
14286
+ ];
14287
+ const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
14288
+ const emptyParametersSchema$1 = z$1.object({}).strict();
14289
+ function selectionBranch(styleId, parameters) {
14290
+ return z$1.object({
14291
+ styleId: z$1.literal(styleId),
14292
+ parameters
14293
+ }).strict();
14294
+ }
14295
+ const buttonStyleSelectionSchema = z$1.discriminatedUnion("styleId", [
14296
+ selectionBranch("soft-pill", emptyParametersSchema$1),
14297
+ selectionBranch("earth-pill", emptyParametersSchema$1),
14298
+ selectionBranch("confident-chip", emptyParametersSchema$1),
14299
+ selectionBranch("editorial-link", emptyParametersSchema$1),
14300
+ selectionBranch("pebble", emptyParametersSchema$1),
14301
+ selectionBranch("ink-stamp", emptyParametersSchema$1),
14302
+ selectionBranch("flat-ink", emptyParametersSchema$1),
14303
+ selectionBranch("brushed-wash", emptyParametersSchema$1),
14304
+ selectionBranch("showtime-pill", emptyParametersSchema$1),
14305
+ selectionBranch("joy-stamp", emptyParametersSchema$1),
14306
+ selectionBranch("ornate-ritual", emptyParametersSchema$1),
14307
+ selectionBranch("quiet-arrow", quietArrowParametersSchema)
14308
+ ]);
14309
+ //#endregion
14310
+ //#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
14311
+ const quietArrowRecipe = defineButtonStyleRecipe({
14312
+ id: "quiet-arrow",
14313
+ accessibilityLabel: "Wide uppercase buttons with trailing arrows",
14314
+ tags: {
14315
+ tone: "classic",
14316
+ energy: "calm",
14317
+ motion: "subtle",
14318
+ era: "editorial"
14319
+ },
14320
+ parameterSchema: quietArrowParametersSchema,
14321
+ defaultParameters: { secondaryTreatment: "outlined" },
14322
+ controls: [{
14323
+ kind: "choice",
14324
+ parameter: "secondaryTreatment",
14325
+ label: "Secondary button treatment",
14326
+ options: [{
14327
+ value: "outlined",
14328
+ label: "Outlined"
14329
+ }, {
14330
+ value: "solid-accent",
14331
+ label: "Solid accent"
14332
+ }]
14333
+ }],
14334
+ defineSystem: (parameters) => ({
14335
+ global: {
14336
+ cornerStyle: "rounded",
14337
+ textTransform: "uppercase",
14338
+ fontWeight: 500,
14339
+ borderWidth: 1,
14340
+ typography: "body",
14341
+ fontSize: "text-sm",
14342
+ letterSpacing: "loose",
14343
+ hoverTransform: "none",
14344
+ hoverColor: "none"
14345
+ },
14346
+ sizes: {
14347
+ sm: {
14348
+ padding: "0.625rem 1.25rem",
14349
+ fontSize: "text-xs"
14350
+ },
14351
+ md: {
14352
+ padding: "0.8125rem 1.75rem",
14353
+ fontSize: "text-sm"
14354
+ },
14355
+ lg: {
14356
+ padding: "0.9375rem 2.125rem",
14357
+ fontSize: "text-sm"
14358
+ },
14359
+ xl: {
14360
+ padding: "1.0625rem 2.5rem",
14361
+ fontSize: "text-base"
14362
+ }
14363
+ },
14364
+ roles: {
14365
+ primary: {
14366
+ kind: "complete",
14367
+ appearance: {
14368
+ background: {
14369
+ type: "solid",
14370
+ colorToken: unsafeAsOpaqueButtonColourToken("primary")
14371
+ },
14372
+ borderRadius: "rounded-xl",
14373
+ affordance: { iconId: "ArrowRight" },
14374
+ effects: { hover: [{
14375
+ effectId: "darken-background",
14376
+ options: { amount: 100 }
14377
+ }] }
14378
+ }
14379
+ },
14380
+ secondary: {
14381
+ kind: "complete",
14382
+ appearance: parameters.secondaryTreatment === "solid-accent" ? {
14383
+ background: {
14384
+ type: "solid",
14385
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
14386
+ },
14387
+ borderRadius: "rounded-xl",
14388
+ affordance: { iconId: "ArrowRight" },
14389
+ effects: { hover: [{
14390
+ effectId: "darken-background",
14391
+ options: { amount: 100 }
14392
+ }] }
14393
+ } : {
14394
+ background: {
14395
+ type: "surface",
14396
+ role: "link"
14397
+ },
14398
+ borderRadius: "rounded-xl",
14399
+ border: { widthClass: "border" },
14400
+ affordance: { iconId: "ArrowRight" },
14401
+ effects: { hover: [{
14402
+ effectId: "background-on-hover",
14403
+ options: { colorToken: "surfaceAlt" }
14404
+ }] }
14405
+ }
14406
+ },
14407
+ outline: {
14408
+ kind: "complete",
14409
+ appearance: {
14410
+ background: {
14411
+ type: "surface",
14412
+ role: "link"
14413
+ },
14414
+ borderRadius: "rounded-xl",
14415
+ border: { widthClass: "border" }
14416
+ }
14417
+ },
14418
+ ghost: {
14419
+ kind: "complete",
14420
+ appearance: {
14421
+ background: {
14422
+ type: "surface",
14423
+ role: "link"
14424
+ },
14425
+ borderRadius: "rounded-xl"
14426
+ }
14427
+ },
14428
+ accent: {
14429
+ kind: "derive",
14430
+ from: "primary",
14431
+ overrides: { background: {
14432
+ type: "solid",
14433
+ colorToken: unsafeAsOpaqueButtonColourToken("accent")
14434
+ } }
14435
+ }
14436
+ }
14437
+ })
14438
+ });
14439
+ //#endregion
14440
+ //#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
14441
+ const emptyParametersSchema = z$1.object({}).strict();
14442
+ function defineStaticButtonStyleRecipe(input) {
14443
+ const system = normalizeSystem(input.system);
14444
+ return defineButtonStyleRecipe({
14445
+ id: input.id,
14446
+ accessibilityLabel: input.accessibilityLabel,
14177
14447
  tags: input.tags,
14178
- buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
14448
+ parameterSchema: emptyParametersSchema,
14449
+ defaultParameters: {},
14450
+ controls: [],
14451
+ defineSystem: () => system
14452
+ });
14453
+ }
14454
+ function normalizeSystem(input) {
14455
+ return {
14456
+ global: buttonGlobalSettingsSchema.parse(input.global),
14457
+ ...input.sizes ? { sizes: input.sizes } : {},
14458
+ roles: {
14459
+ primary: normalizeCompleteRole(input.roles.primary),
14460
+ secondary: normalizeCompleteRole(input.roles.secondary),
14461
+ outline: normalizeSupportingRole(input.roles.outline),
14462
+ ghost: normalizeSupportingRole(input.roles.ghost),
14463
+ accent: normalizeSupportingRole(input.roles.accent)
14464
+ }
14465
+ };
14466
+ }
14467
+ function normalizeCompleteRole(role) {
14468
+ return {
14469
+ kind: "complete",
14470
+ appearance: normalizeAppearance(role.appearance)
14471
+ };
14472
+ }
14473
+ function normalizeSupportingRole(role) {
14474
+ if (role.kind === "complete") return normalizeCompleteRole(role);
14475
+ return {
14476
+ kind: "derive",
14477
+ from: role.from,
14478
+ ...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
14479
+ };
14480
+ }
14481
+ function normalizeAppearance(appearance) {
14482
+ const { background, hoverBackgroundToken, ...rest } = appearance;
14483
+ return {
14484
+ ...rest,
14485
+ background: buttonColourTreatmentSchema.parse(background),
14486
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
14487
+ };
14488
+ }
14489
+ function normalizeAppearanceOverrides(overrides) {
14490
+ const { background, hoverBackgroundToken, ...rest } = overrides;
14491
+ return {
14492
+ ...rest,
14493
+ ...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
14494
+ ...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
14179
14495
  };
14180
14496
  }
14181
14497
  //#endregion
14182
- //#region ../theme-core/src/buttons/personalities/brushed-wash.ts
14183
- /**
14184
- * Brushed Wash — gradient backgrounds that read as watercolour washes.
14185
- * Generous padding, soft shadows; pairs with vibrant organic brands.
14186
- */
14187
- const brushedWash = defineButtonPersonality({
14498
+ //#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
14499
+ const softPillRecipe = defineStaticButtonStyleRecipe({
14500
+ id: "soft-pill",
14501
+ accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
14502
+ tags: {
14503
+ tone: "classic",
14504
+ energy: "calm",
14505
+ motion: "subtle",
14506
+ era: "organic"
14507
+ },
14508
+ system: {
14509
+ global: {
14510
+ cornerStyle: "pill",
14511
+ shadow: "low",
14512
+ textTransform: "none",
14513
+ fontWeight: 500,
14514
+ borderWidth: 2,
14515
+ hoverTransform: "lift",
14516
+ hoverColor: "none"
14517
+ },
14518
+ roles: {
14519
+ primary: {
14520
+ kind: "complete",
14521
+ appearance: {
14522
+ background: {
14523
+ type: "solid",
14524
+ colorToken: "primary"
14525
+ },
14526
+ borderRadius: "rounded-full",
14527
+ shadow: {
14528
+ elevation: "low",
14529
+ softness: "soft",
14530
+ position: "bottom"
14531
+ },
14532
+ effects: {
14533
+ hover: [{
14534
+ effectId: "lift",
14535
+ options: { translateY: "-1px" }
14536
+ }],
14537
+ active: [{
14538
+ effectId: "scale-down",
14539
+ options: { scale: "0.98" }
14540
+ }]
14541
+ }
14542
+ }
14543
+ },
14544
+ secondary: {
14545
+ kind: "complete",
14546
+ appearance: {
14547
+ background: {
14548
+ type: "surface",
14549
+ role: "link"
14550
+ },
14551
+ borderRadius: "rounded-full",
14552
+ border: { widthClass: "border-2" },
14553
+ effects: { hover: [{
14554
+ effectId: "background-on-hover",
14555
+ options: { colorToken: "surface" }
14556
+ }] }
14557
+ }
14558
+ },
14559
+ outline: {
14560
+ kind: "complete",
14561
+ appearance: {
14562
+ background: {
14563
+ type: "surface",
14564
+ role: "link"
14565
+ },
14566
+ borderRadius: "rounded-full",
14567
+ border: { widthClass: "border" },
14568
+ effects: { hover: [{
14569
+ effectId: "background-on-hover",
14570
+ options: { colorToken: "surface" }
14571
+ }] }
14572
+ }
14573
+ },
14574
+ ghost: {
14575
+ kind: "complete",
14576
+ appearance: {
14577
+ background: {
14578
+ type: "surface",
14579
+ role: "link"
14580
+ },
14581
+ borderRadius: "rounded-full",
14582
+ effects: { hover: [{
14583
+ effectId: "background-on-hover",
14584
+ options: { colorToken: "surface" }
14585
+ }] }
14586
+ }
14587
+ },
14588
+ accent: {
14589
+ kind: "derive",
14590
+ from: "primary",
14591
+ overrides: { background: {
14592
+ type: "solid",
14593
+ colorToken: "accent"
14594
+ } }
14595
+ }
14596
+ }
14597
+ }
14598
+ });
14599
+ const earthPillRecipe = defineStaticButtonStyleRecipe({
14600
+ id: "earth-pill",
14601
+ accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
14602
+ tags: {
14603
+ tone: "classic",
14604
+ energy: "calm",
14605
+ motion: "subtle",
14606
+ era: "organic"
14607
+ },
14608
+ system: {
14609
+ global: {
14610
+ cornerStyle: "pill",
14611
+ shadow: "low",
14612
+ textTransform: "none",
14613
+ fontWeight: 500,
14614
+ borderWidth: 1,
14615
+ hoverTransform: "lift",
14616
+ hoverColor: "none",
14617
+ typography: "body",
14618
+ paddingPreset: "default"
14619
+ },
14620
+ sizes: {
14621
+ sm: {
14622
+ padding: "0.5rem 1rem",
14623
+ fontSize: "text-sm"
14624
+ },
14625
+ md: { padding: "0.625rem 1.35rem" },
14626
+ lg: {
14627
+ padding: "0.75rem 1.65rem",
14628
+ fontSize: "text-lg"
14629
+ },
14630
+ xl: {
14631
+ padding: "0.875rem 2rem",
14632
+ fontSize: "text-xl"
14633
+ }
14634
+ },
14635
+ roles: {
14636
+ primary: {
14637
+ kind: "complete",
14638
+ appearance: {
14639
+ background: {
14640
+ type: "solid",
14641
+ colorToken: "primary"
14642
+ },
14643
+ borderRadius: "rounded-full",
14644
+ shadow: {
14645
+ elevation: "low",
14646
+ softness: "soft",
14647
+ position: "bottom"
14648
+ },
14649
+ effects: {
14650
+ hover: [{
14651
+ effectId: "lift",
14652
+ options: { translateY: "-1px" }
14653
+ }, {
14654
+ effectId: "background-on-hover",
14655
+ options: { colorToken: "accent" }
14656
+ }],
14657
+ active: [{
14658
+ effectId: "scale-down",
14659
+ options: { scale: "0.98" }
14660
+ }]
14661
+ }
14662
+ }
14663
+ },
14664
+ secondary: {
14665
+ kind: "complete",
14666
+ appearance: {
14667
+ background: {
14668
+ type: "surface",
14669
+ role: "link"
14670
+ },
14671
+ borderRadius: "rounded-full",
14672
+ border: { widthClass: "border" },
14673
+ effects: { hover: [{
14674
+ effectId: "background-on-hover",
14675
+ options: { colorToken: "muted" }
14676
+ }] }
14677
+ }
14678
+ },
14679
+ outline: {
14680
+ kind: "complete",
14681
+ appearance: {
14682
+ background: {
14683
+ type: "surface",
14684
+ role: "link"
14685
+ },
14686
+ borderRadius: "rounded-full",
14687
+ border: { widthClass: "border" },
14688
+ effects: { hover: [{
14689
+ effectId: "background-on-hover",
14690
+ options: { colorToken: "surfaceAlt" }
14691
+ }] }
14692
+ }
14693
+ },
14694
+ ghost: {
14695
+ kind: "complete",
14696
+ appearance: {
14697
+ background: {
14698
+ type: "surface",
14699
+ role: "link"
14700
+ },
14701
+ borderRadius: "rounded-full",
14702
+ shadow: {
14703
+ elevation: "none",
14704
+ softness: null,
14705
+ position: "bottom"
14706
+ },
14707
+ sizes: {
14708
+ sm: {
14709
+ padding: "0.25rem 0",
14710
+ fontSize: "text-sm"
14711
+ },
14712
+ md: { padding: "0.375rem 0" },
14713
+ lg: {
14714
+ padding: "0.5rem 0",
14715
+ fontSize: "text-lg"
14716
+ },
14717
+ xl: {
14718
+ padding: "0.625rem 0",
14719
+ fontSize: "text-xl"
14720
+ }
14721
+ }
14722
+ }
14723
+ },
14724
+ accent: {
14725
+ kind: "derive",
14726
+ from: "primary",
14727
+ overrides: { background: {
14728
+ type: "solid",
14729
+ colorToken: "accent"
14730
+ } }
14731
+ }
14732
+ }
14733
+ }
14734
+ });
14735
+ const confidentChipRecipe = defineStaticButtonStyleRecipe({
14736
+ id: "confident-chip",
14737
+ accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
14738
+ tags: {
14739
+ tone: "classic",
14740
+ energy: "calm",
14741
+ motion: "standard",
14742
+ era: "modern"
14743
+ },
14744
+ system: {
14745
+ global: {
14746
+ cornerStyle: "rounded",
14747
+ shadow: "medium",
14748
+ textTransform: "none",
14749
+ fontWeight: 600,
14750
+ borderWidth: 1,
14751
+ hoverTransform: "none",
14752
+ hoverColor: "none"
14753
+ },
14754
+ roles: {
14755
+ primary: {
14756
+ kind: "complete",
14757
+ appearance: {
14758
+ background: {
14759
+ type: "solid",
14760
+ colorToken: "primary"
14761
+ },
14762
+ borderRadius: "rounded-md",
14763
+ shadow: {
14764
+ elevation: "medium",
14765
+ softness: "soft",
14766
+ position: "bottom"
14767
+ },
14768
+ effects: {
14769
+ hover: [{
14770
+ effectId: "darken-background",
14771
+ options: { amount: 100 }
14772
+ }],
14773
+ active: [{
14774
+ effectId: "scale-down",
14775
+ options: { scale: "0.97" }
14776
+ }]
14777
+ }
14778
+ }
14779
+ },
14780
+ secondary: {
14781
+ kind: "complete",
14782
+ appearance: {
14783
+ background: {
14784
+ type: "solid",
14785
+ colorToken: "surface"
14786
+ },
14787
+ borderRadius: "rounded-md",
14788
+ border: { widthClass: "border" },
14789
+ effects: { hover: [{
14790
+ effectId: "background-on-hover",
14791
+ options: { colorToken: "background" }
14792
+ }] }
14793
+ }
14794
+ },
14795
+ outline: {
14796
+ kind: "complete",
14797
+ appearance: {
14798
+ background: {
14799
+ type: "surface",
14800
+ role: "link"
14801
+ },
14802
+ borderRadius: "rounded-md",
14803
+ border: { widthClass: "border" },
14804
+ effects: { hover: [{
14805
+ effectId: "background-on-hover",
14806
+ options: { colorToken: "surface" }
14807
+ }] }
14808
+ }
14809
+ },
14810
+ ghost: {
14811
+ kind: "complete",
14812
+ appearance: {
14813
+ background: {
14814
+ type: "surface",
14815
+ role: "link"
14816
+ },
14817
+ borderRadius: "rounded-md",
14818
+ effects: { hover: [{
14819
+ effectId: "background-on-hover",
14820
+ options: { colorToken: "surface" }
14821
+ }] }
14822
+ }
14823
+ },
14824
+ accent: {
14825
+ kind: "derive",
14826
+ from: "primary",
14827
+ overrides: { background: {
14828
+ type: "solid",
14829
+ colorToken: "accent"
14830
+ } }
14831
+ }
14832
+ }
14833
+ }
14834
+ });
14835
+ const editorialSizes = {
14836
+ sm: { padding: "0.25rem 0" },
14837
+ md: { padding: "0.5rem 0" },
14838
+ lg: { padding: "0.625rem 0" },
14839
+ xl: { padding: "0.75rem 0" }
14840
+ };
14841
+ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
14842
+ id: "editorial-link",
14843
+ accessibilityLabel: "Flat typographic buttons with an underline treatment",
14844
+ tags: {
14845
+ tone: "minimal",
14846
+ energy: "calm",
14847
+ motion: "subtle",
14848
+ era: "editorial"
14849
+ },
14850
+ system: {
14851
+ global: {
14852
+ cornerStyle: "square",
14853
+ textTransform: "none",
14854
+ fontWeight: 500,
14855
+ borderWidth: 1,
14856
+ hoverTransform: "none",
14857
+ hoverColor: "none"
14858
+ },
14859
+ roles: {
14860
+ primary: {
14861
+ kind: "complete",
14862
+ appearance: {
14863
+ background: {
14864
+ type: "surface",
14865
+ role: "link"
14866
+ },
14867
+ borderRadius: "rounded-none",
14868
+ sizes: editorialSizes,
14869
+ effects: { base: [{
14870
+ effectId: "border-bottom-grow",
14871
+ options: {
14872
+ height: 2,
14873
+ colorToken: "text",
14874
+ origin: "left"
14875
+ }
14876
+ }] }
14877
+ }
14878
+ },
14879
+ secondary: {
14880
+ kind: "complete",
14881
+ appearance: {
14882
+ background: {
14883
+ type: "surface",
14884
+ role: "link"
14885
+ },
14886
+ borderRadius: "rounded-none",
14887
+ sizes: editorialSizes,
14888
+ effects: { base: [{
14889
+ effectId: "border-bottom-grow",
14890
+ options: {
14891
+ height: 1,
14892
+ colorToken: "mutedText",
14893
+ origin: "left"
14894
+ }
14895
+ }] }
14896
+ }
14897
+ },
14898
+ outline: {
14899
+ kind: "complete",
14900
+ appearance: {
14901
+ background: {
14902
+ type: "surface",
14903
+ role: "link"
14904
+ },
14905
+ borderRadius: "rounded-none",
14906
+ sizes: editorialSizes,
14907
+ effects: { base: [{
14908
+ effectId: "border-bottom-grow",
14909
+ options: {
14910
+ height: 1,
14911
+ colorToken: "accent",
14912
+ origin: "left"
14913
+ }
14914
+ }] }
14915
+ }
14916
+ },
14917
+ ghost: {
14918
+ kind: "complete",
14919
+ appearance: {
14920
+ background: {
14921
+ type: "surface",
14922
+ role: "link"
14923
+ },
14924
+ borderRadius: "rounded-none",
14925
+ sizes: editorialSizes
14926
+ }
14927
+ },
14928
+ accent: {
14929
+ kind: "derive",
14930
+ from: "primary",
14931
+ overrides: { effects: { base: [{
14932
+ effectId: "border-bottom-grow",
14933
+ options: {
14934
+ height: 2,
14935
+ colorToken: "accent",
14936
+ origin: "left"
14937
+ }
14938
+ }] } }
14939
+ }
14940
+ }
14941
+ }
14942
+ });
14943
+ const pebbleRecipe = defineStaticButtonStyleRecipe({
14944
+ id: "pebble",
14945
+ accessibilityLabel: "Generously padded pill buttons",
14946
+ tags: {
14947
+ tone: "classic",
14948
+ energy: "calm",
14949
+ motion: "standard",
14950
+ era: "organic"
14951
+ },
14952
+ system: {
14953
+ global: {
14954
+ cornerStyle: "pill",
14955
+ textTransform: "none",
14956
+ fontWeight: 500,
14957
+ borderWidth: 2,
14958
+ hoverTransform: "none",
14959
+ hoverColor: "none"
14960
+ },
14961
+ sizes: {
14962
+ sm: {
14963
+ padding: "0.625rem 1.75rem",
14964
+ fontSize: "text-sm"
14965
+ },
14966
+ md: { padding: "0.875rem 2.25rem" },
14967
+ lg: {
14968
+ padding: "1.125rem 2.75rem",
14969
+ fontSize: "text-lg"
14970
+ },
14971
+ xl: {
14972
+ padding: "1.5rem 3.5rem",
14973
+ fontSize: "text-xl"
14974
+ }
14975
+ },
14976
+ roles: {
14977
+ primary: {
14978
+ kind: "complete",
14979
+ appearance: {
14980
+ background: {
14981
+ type: "solid",
14982
+ colorToken: "primary"
14983
+ },
14984
+ borderRadius: "rounded-full",
14985
+ effects: { hover: [{
14986
+ effectId: "darken-background",
14987
+ options: { amount: 100 }
14988
+ }] }
14989
+ }
14990
+ },
14991
+ secondary: {
14992
+ kind: "complete",
14993
+ appearance: {
14994
+ background: {
14995
+ type: "surface",
14996
+ role: "link"
14997
+ },
14998
+ borderRadius: "rounded-full",
14999
+ border: { widthClass: "border-2" },
15000
+ effects: { hover: [{
15001
+ effectId: "background-on-hover",
15002
+ options: { colorToken: "accent" }
15003
+ }] }
15004
+ }
15005
+ },
15006
+ outline: {
15007
+ kind: "complete",
15008
+ appearance: {
15009
+ background: {
15010
+ type: "surface",
15011
+ role: "link"
15012
+ },
15013
+ borderRadius: "rounded-full",
15014
+ border: { widthClass: "border" },
15015
+ effects: { hover: [{
15016
+ effectId: "background-on-hover",
15017
+ options: { colorToken: "surface" }
15018
+ }] }
15019
+ }
15020
+ },
15021
+ ghost: {
15022
+ kind: "complete",
15023
+ appearance: {
15024
+ background: {
15025
+ type: "surface",
15026
+ role: "link"
15027
+ },
15028
+ borderRadius: "rounded-full",
15029
+ sizes: {
15030
+ sm: {
15031
+ padding: "0.375rem 0.875rem",
15032
+ fontSize: "text-sm"
15033
+ },
15034
+ md: { padding: "0.5rem 1rem" },
15035
+ lg: {
15036
+ padding: "0.625rem 1.25rem",
15037
+ fontSize: "text-lg"
15038
+ },
15039
+ xl: {
15040
+ padding: "0.75rem 1.5rem",
15041
+ fontSize: "text-xl"
15042
+ }
15043
+ }
15044
+ }
15045
+ },
15046
+ accent: {
15047
+ kind: "derive",
15048
+ from: "primary",
15049
+ overrides: { background: {
15050
+ type: "solid",
15051
+ colorToken: "accent"
15052
+ } }
15053
+ }
15054
+ }
15055
+ }
15056
+ });
15057
+ const brushedWashRecipe = defineStaticButtonStyleRecipe({
14188
15058
  id: "brushed-wash",
14189
- name: "Brushed Wash",
14190
- description: "Watercolour-gradient buttons with soft shadows and generous padding.",
15059
+ accessibilityLabel: "Generously padded gradient buttons with soft shadows",
14191
15060
  tags: {
14192
15061
  tone: "classic",
14193
15062
  energy: "vibrant",
14194
15063
  motion: "standard",
14195
15064
  era: "organic"
14196
15065
  },
14197
- buttonSystem: {
15066
+ system: {
14198
15067
  global: {
14199
15068
  cornerStyle: "rounded",
14200
15069
  shadow: "low",
@@ -14219,461 +15088,229 @@ const brushedWash = defineButtonPersonality({
14219
15088
  fontSize: "text-xl"
14220
15089
  }
14221
15090
  },
14222
- variants: [
14223
- {
14224
- id: "primary",
14225
- name: "Primary",
14226
- enabled: true,
14227
- priority: 1,
14228
- background: {
14229
- type: "gradient",
14230
- stops: ["primary", "accent"],
14231
- direction: "to-r",
14232
- foregroundToken: "primaryForeground"
14233
- },
14234
- borderRadius: "rounded-lg",
14235
- shadow: {
14236
- elevation: "low",
14237
- softness: "soft",
14238
- position: "bottom"
15091
+ roles: {
15092
+ primary: {
15093
+ kind: "complete",
15094
+ appearance: {
15095
+ background: {
15096
+ type: "gradient",
15097
+ stops: ["primary", "accent"],
15098
+ direction: "to-r",
15099
+ foregroundToken: "primaryForeground"
15100
+ },
15101
+ borderRadius: "rounded-lg",
15102
+ shadow: {
15103
+ elevation: "low",
15104
+ softness: "soft",
15105
+ position: "bottom"
15106
+ }
14239
15107
  }
14240
15108
  },
14241
- {
14242
- id: "secondary",
14243
- name: "Secondary",
14244
- enabled: true,
14245
- priority: 2,
14246
- background: {
14247
- type: "gradient",
14248
- stops: ["secondary", "accent"],
14249
- direction: "to-br",
14250
- foregroundToken: "primaryForeground"
14251
- },
14252
- borderRadius: "rounded-lg",
14253
- shadow: {
14254
- elevation: "low",
14255
- softness: "soft",
14256
- position: "bottom"
15109
+ secondary: {
15110
+ kind: "complete",
15111
+ appearance: {
15112
+ background: {
15113
+ type: "gradient",
15114
+ stops: ["secondary", "accent"],
15115
+ direction: "to-br",
15116
+ foregroundToken: "primaryForeground"
15117
+ },
15118
+ borderRadius: "rounded-lg",
15119
+ shadow: {
15120
+ elevation: "low",
15121
+ softness: "soft",
15122
+ position: "bottom"
15123
+ }
14257
15124
  }
14258
15125
  },
14259
- {
14260
- id: "outline",
14261
- name: "Outline",
14262
- enabled: true,
14263
- priority: 3,
14264
- background: {
14265
- type: "surface",
14266
- role: "link"
14267
- },
14268
- borderRadius: "rounded-lg",
14269
- border: { widthClass: "border" },
14270
- effects: { hover: [{
14271
- effectId: "background-on-hover",
14272
- options: { colorToken: "surface" }
14273
- }] }
15126
+ outline: {
15127
+ kind: "complete",
15128
+ appearance: {
15129
+ background: {
15130
+ type: "surface",
15131
+ role: "link"
15132
+ },
15133
+ borderRadius: "rounded-lg",
15134
+ border: { widthClass: "border" },
15135
+ effects: { hover: [{
15136
+ effectId: "background-on-hover",
15137
+ options: { colorToken: "surface" }
15138
+ }] }
15139
+ }
14274
15140
  },
14275
- {
14276
- id: "ghost",
14277
- name: "Ghost",
14278
- enabled: true,
14279
- priority: 3,
14280
- background: {
14281
- type: "surface",
14282
- role: "link"
14283
- },
14284
- borderRadius: "rounded-lg",
14285
- effects: { hover: [{
14286
- effectId: "background-on-hover",
14287
- options: { colorToken: "surface" }
14288
- }] }
14289
- }
14290
- ]
14291
- }
14292
- });
14293
- //#endregion
14294
- //#region ../theme-core/src/buttons/personalities/confident-chip.ts
14295
- /**
14296
- * Confident Chip — moderate-radius solid buttons that read as competent and
14297
- * direct. Default for Clear Professional; works for any modern brand voice.
14298
- */
14299
- const confidentChip = defineButtonPersonality({
14300
- id: "confident-chip",
14301
- name: "Confident Chip",
14302
- description: "Mid-radius solid buttons with a crisp hover.",
14303
- tags: {
14304
- tone: "classic",
14305
- energy: "calm",
14306
- motion: "standard",
14307
- era: "modern"
14308
- },
14309
- buttonSystem: {
14310
- global: {
14311
- cornerStyle: "rounded",
14312
- shadow: "medium",
14313
- textTransform: "none",
14314
- fontWeight: 600,
14315
- borderWidth: 1,
14316
- hoverTransform: "none",
14317
- hoverColor: "none"
14318
- },
14319
- variants: [
14320
- {
14321
- id: "primary",
14322
- name: "Primary",
14323
- enabled: true,
14324
- priority: 1,
14325
- background: {
14326
- type: "solid",
14327
- colorToken: "primary"
14328
- },
14329
- borderRadius: "rounded-md",
14330
- shadow: {
14331
- elevation: "medium",
14332
- softness: "soft",
14333
- position: "bottom"
14334
- },
14335
- effects: {
14336
- hover: [{
14337
- effectId: "darken-background",
14338
- options: { amount: 100 }
14339
- }],
14340
- active: [{
14341
- effectId: "scale-down",
14342
- options: { scale: "0.97" }
14343
- }]
15141
+ ghost: {
15142
+ kind: "complete",
15143
+ appearance: {
15144
+ background: {
15145
+ type: "surface",
15146
+ role: "link"
15147
+ },
15148
+ borderRadius: "rounded-lg",
15149
+ effects: { hover: [{
15150
+ effectId: "background-on-hover",
15151
+ options: { colorToken: "surface" }
15152
+ }] }
14344
15153
  }
14345
15154
  },
14346
- {
14347
- id: "secondary",
14348
- name: "Secondary",
14349
- enabled: true,
14350
- priority: 2,
14351
- background: {
15155
+ accent: {
15156
+ kind: "derive",
15157
+ from: "primary",
15158
+ overrides: { background: {
14352
15159
  type: "solid",
14353
- colorToken: "surface"
14354
- },
14355
- borderRadius: "rounded-md",
14356
- border: { widthClass: "border" },
14357
- effects: { hover: [{
14358
- effectId: "background-on-hover",
14359
- options: { colorToken: "background" }
14360
- }] }
14361
- },
14362
- {
14363
- id: "outline",
14364
- name: "Outline",
14365
- enabled: true,
14366
- priority: 3,
14367
- background: {
14368
- type: "surface",
14369
- role: "link"
14370
- },
14371
- borderRadius: "rounded-md",
14372
- border: { widthClass: "border" },
14373
- effects: { hover: [{
14374
- effectId: "background-on-hover",
14375
- options: { colorToken: "surface" }
14376
- }] }
14377
- },
14378
- {
14379
- id: "ghost",
14380
- name: "Ghost",
14381
- enabled: true,
14382
- priority: 3,
14383
- background: {
14384
- type: "surface",
14385
- role: "link"
14386
- },
14387
- borderRadius: "rounded-md",
14388
- effects: { hover: [{
14389
- effectId: "background-on-hover",
14390
- options: { colorToken: "surface" }
14391
- }] }
15160
+ colorToken: "accent"
15161
+ } }
14392
15162
  }
14393
- ]
15163
+ }
14394
15164
  }
14395
15165
  });
14396
- //#endregion
14397
- //#region ../theme-core/src/buttons/personalities/earth-pill.ts
14398
- /**
14399
- * Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
14400
- * Built for grounded editorial wellness styles such as Soft Earth.
14401
- */
14402
- const earthPill = defineButtonPersonality({
14403
- id: "earth-pill",
14404
- name: "Earth Pill",
14405
- description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
15166
+ const inkStampRecipe = defineStaticButtonStyleRecipe({
15167
+ id: "ink-stamp",
15168
+ accessibilityLabel: "Uppercase block-print buttons with a playful hover",
14406
15169
  tags: {
14407
- tone: "classic",
14408
- energy: "calm",
14409
- motion: "subtle",
15170
+ tone: "bold",
15171
+ energy: "vibrant",
15172
+ motion: "standard",
14410
15173
  era: "organic"
14411
15174
  },
14412
- buttonSystem: {
15175
+ system: {
14413
15176
  global: {
14414
- cornerStyle: "pill",
14415
- shadow: "low",
14416
- textTransform: "none",
14417
- fontWeight: 500,
15177
+ cornerStyle: "rounded",
15178
+ textTransform: "uppercase",
15179
+ fontWeight: 600,
14418
15180
  borderWidth: 1,
14419
- hoverTransform: "lift",
15181
+ hoverTransform: "none",
14420
15182
  hoverColor: "none",
14421
- typography: "body",
14422
- paddingPreset: "default"
15183
+ letterSpacing: "loose"
14423
15184
  },
14424
15185
  sizes: {
14425
15186
  sm: {
14426
- padding: "0.5rem 1rem",
15187
+ padding: "0.5rem 1.25rem",
15188
+ fontSize: "text-xs"
15189
+ },
15190
+ md: {
15191
+ padding: "0.75rem 1.75rem",
14427
15192
  fontSize: "text-sm"
14428
15193
  },
14429
- md: { padding: "0.625rem 1.35rem" },
14430
15194
  lg: {
14431
- padding: "0.75rem 1.65rem",
14432
- fontSize: "text-lg"
15195
+ padding: "0.875rem 2.25rem",
15196
+ fontSize: "text-base"
14433
15197
  },
14434
15198
  xl: {
14435
- padding: "0.875rem 2rem",
14436
- fontSize: "text-xl"
15199
+ padding: "1.125rem 2.75rem",
15200
+ fontSize: "text-lg"
14437
15201
  }
14438
15202
  },
14439
- variants: [
14440
- {
14441
- id: "primary",
14442
- name: "Primary",
14443
- enabled: true,
14444
- priority: 1,
14445
- background: {
14446
- type: "solid",
14447
- colorToken: "primary"
14448
- },
14449
- borderRadius: "rounded-full",
14450
- shadow: {
14451
- elevation: "low",
14452
- softness: "soft",
14453
- position: "bottom"
14454
- },
14455
- effects: {
14456
- hover: [{
14457
- effectId: "lift",
14458
- options: { translateY: "-1px" }
14459
- }, {
14460
- effectId: "background-on-hover",
14461
- options: { colorToken: "accent" }
14462
- }],
14463
- active: [{
14464
- effectId: "scale-down",
14465
- options: { scale: "0.98" }
14466
- }]
15203
+ roles: {
15204
+ primary: {
15205
+ kind: "complete",
15206
+ appearance: {
15207
+ background: {
15208
+ type: "solid",
15209
+ colorToken: "primary"
15210
+ },
15211
+ borderRadius: "rounded-md",
15212
+ effects: {
15213
+ hover: [{
15214
+ effectId: "drop-shadow",
15215
+ options: { intensity: "medium" }
15216
+ }, {
15217
+ effectId: "scale-up",
15218
+ options: { scale: "1.02" }
15219
+ }],
15220
+ active: [{
15221
+ effectId: "scale-down",
15222
+ options: { scale: "0.98" }
15223
+ }]
15224
+ }
14467
15225
  }
14468
15226
  },
14469
- {
14470
- id: "secondary",
14471
- name: "Secondary",
14472
- enabled: true,
14473
- priority: 2,
14474
- background: {
14475
- type: "surface",
14476
- role: "link"
14477
- },
14478
- borderRadius: "rounded-full",
14479
- border: { widthClass: "border" },
14480
- effects: { hover: [{
14481
- effectId: "background-on-hover",
14482
- options: { colorToken: "muted" }
14483
- }] }
15227
+ secondary: {
15228
+ kind: "complete",
15229
+ appearance: {
15230
+ background: {
15231
+ type: "surface",
15232
+ role: "link"
15233
+ },
15234
+ borderRadius: "rounded-md",
15235
+ border: { widthClass: "border-2" },
15236
+ effects: { hover: [{
15237
+ effectId: "background-on-hover",
15238
+ options: { colorToken: "surface" }
15239
+ }] }
15240
+ }
14484
15241
  },
14485
- {
14486
- id: "outline",
14487
- name: "Outline",
14488
- enabled: true,
14489
- priority: 3,
14490
- background: {
14491
- type: "surface",
14492
- role: "link"
14493
- },
14494
- borderRadius: "rounded-full",
14495
- border: { widthClass: "border" },
14496
- effects: { hover: [{
14497
- effectId: "background-on-hover",
14498
- options: { colorToken: "surfaceAlt" }
14499
- }] }
15242
+ outline: {
15243
+ kind: "complete",
15244
+ appearance: {
15245
+ background: {
15246
+ type: "surface",
15247
+ role: "link"
15248
+ },
15249
+ borderRadius: "rounded-md",
15250
+ border: { widthClass: "border-2" },
15251
+ effects: { hover: [{
15252
+ effectId: "background-on-hover",
15253
+ options: { colorToken: "surface" }
15254
+ }] }
15255
+ }
14500
15256
  },
14501
- {
14502
- id: "ghost",
14503
- name: "Ghost",
14504
- enabled: true,
14505
- priority: 3,
14506
- background: {
14507
- type: "surface",
14508
- role: "link"
14509
- },
14510
- borderRadius: "rounded-full",
14511
- shadow: {
14512
- elevation: "none",
14513
- softness: null,
14514
- position: "bottom"
14515
- },
14516
- sizes: {
14517
- sm: {
14518
- padding: "0.25rem 0",
14519
- fontSize: "text-sm"
15257
+ ghost: {
15258
+ kind: "complete",
15259
+ appearance: {
15260
+ background: {
15261
+ type: "surface",
15262
+ role: "link"
14520
15263
  },
14521
- md: { padding: "0.375rem 0" },
14522
- lg: {
14523
- padding: "0.5rem 0",
14524
- fontSize: "text-lg"
15264
+ borderRadius: "rounded-none",
15265
+ sizes: {
15266
+ sm: {
15267
+ padding: "0.375rem 0",
15268
+ fontSize: "text-xs"
15269
+ },
15270
+ md: {
15271
+ padding: "0.5rem 0",
15272
+ fontSize: "text-sm"
15273
+ },
15274
+ lg: {
15275
+ padding: "0.625rem 0",
15276
+ fontSize: "text-base"
15277
+ },
15278
+ xl: {
15279
+ padding: "0.75rem 0",
15280
+ fontSize: "text-lg"
15281
+ }
14525
15282
  },
14526
- xl: {
14527
- padding: "0.625rem 0",
14528
- fontSize: "text-xl"
14529
- }
15283
+ effects: { base: [{
15284
+ effectId: "border-bottom-grow",
15285
+ options: {
15286
+ height: 1,
15287
+ colorToken: "accent",
15288
+ origin: "left"
15289
+ }
15290
+ }] }
14530
15291
  }
14531
- }
14532
- ]
14533
- }
14534
- });
14535
- //#endregion
14536
- //#region ../theme-core/src/buttons/personalities/editorial-link.ts
14537
- /**
14538
- * Editorial Link — all variants are link-style with a growing underline.
14539
- * Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
14540
- */
14541
- const editorialLink = defineButtonPersonality({
14542
- id: "editorial-link",
14543
- name: "Editorial Link",
14544
- description: "Link-style with a growing underline. Refined, typographic.",
14545
- tags: {
14546
- tone: "minimal",
14547
- energy: "calm",
14548
- motion: "subtle",
14549
- era: "editorial"
14550
- },
14551
- buttonSystem: {
14552
- global: {
14553
- cornerStyle: "square",
14554
- textTransform: "none",
14555
- fontWeight: 500,
14556
- borderWidth: 1,
14557
- hoverTransform: "none",
14558
- hoverColor: "none"
14559
- },
14560
- variants: [
14561
- {
14562
- id: "primary",
14563
- name: "Primary",
14564
- enabled: true,
14565
- priority: 1,
14566
- background: {
14567
- type: "surface",
14568
- role: "link"
14569
- },
14570
- borderRadius: "rounded-none",
14571
- sizes: {
14572
- sm: { padding: "0.25rem 0" },
14573
- md: { padding: "0.5rem 0" },
14574
- lg: { padding: "0.625rem 0" },
14575
- xl: { padding: "0.75rem 0" }
14576
- },
14577
- effects: { base: [{
14578
- effectId: "border-bottom-grow",
14579
- options: {
14580
- height: 2,
14581
- colorToken: "text",
14582
- origin: "left"
14583
- }
14584
- }] }
14585
- },
14586
- {
14587
- id: "secondary",
14588
- name: "Secondary",
14589
- enabled: true,
14590
- priority: 2,
14591
- background: {
14592
- type: "surface",
14593
- role: "link"
14594
- },
14595
- borderRadius: "rounded-none",
14596
- sizes: {
14597
- sm: { padding: "0.25rem 0" },
14598
- md: { padding: "0.5rem 0" },
14599
- lg: { padding: "0.625rem 0" },
14600
- xl: { padding: "0.75rem 0" }
14601
- },
14602
- effects: { base: [{
14603
- effectId: "border-bottom-grow",
14604
- options: {
14605
- height: 1,
14606
- colorToken: "mutedText",
14607
- origin: "left"
14608
- }
14609
- }] }
14610
15292
  },
14611
- {
14612
- id: "outline",
14613
- name: "Outline",
14614
- enabled: true,
14615
- priority: 3,
14616
- background: {
14617
- type: "surface",
14618
- role: "link"
14619
- },
14620
- borderRadius: "rounded-none",
14621
- sizes: {
14622
- sm: { padding: "0.25rem 0" },
14623
- md: { padding: "0.5rem 0" },
14624
- lg: { padding: "0.625rem 0" },
14625
- xl: { padding: "0.75rem 0" }
14626
- },
14627
- effects: { base: [{
14628
- effectId: "border-bottom-grow",
14629
- options: {
14630
- height: 1,
14631
- colorToken: "accent",
14632
- origin: "left"
14633
- }
14634
- }] }
14635
- },
14636
- {
14637
- id: "ghost",
14638
- name: "Ghost",
14639
- enabled: true,
14640
- priority: 3,
14641
- background: {
14642
- type: "surface",
14643
- role: "link"
14644
- },
14645
- borderRadius: "rounded-none",
14646
- sizes: {
14647
- sm: { padding: "0.25rem 0" },
14648
- md: { padding: "0.5rem 0" },
14649
- lg: { padding: "0.625rem 0" },
14650
- xl: { padding: "0.75rem 0" }
14651
- }
15293
+ accent: {
15294
+ kind: "derive",
15295
+ from: "primary",
15296
+ overrides: { background: {
15297
+ type: "solid",
15298
+ colorToken: "accent"
15299
+ } }
14652
15300
  }
14653
- ]
15301
+ }
14654
15302
  }
14655
15303
  });
14656
- //#endregion
14657
- //#region ../theme-core/src/buttons/personalities/flat-ink.ts
14658
- /**
14659
- * Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
14660
- * amber accent climax, all completely flat (no drop shadow) with a modest
14661
- * radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
14662
- * physiotherapy voice. The primary shifts to the secondary (moss) on hover and
14663
- * every variant lifts 2px; the amber accent is meant to be used sparingly as
14664
- * the page's one conversion climax.
14665
- */
14666
- const flatInk = defineButtonPersonality({
15304
+ const flatInkRecipe = defineStaticButtonStyleRecipe({
14667
15305
  id: "flat-ink",
14668
- name: "Flat Ink",
14669
- description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
15306
+ accessibilityLabel: "Flat rounded buttons with arrow affordances",
14670
15307
  tags: {
14671
15308
  tone: "classic",
14672
15309
  energy: "calm",
14673
15310
  motion: "subtle",
14674
15311
  era: "editorial"
14675
15312
  },
14676
- buttonSystem: {
15313
+ system: {
14677
15314
  global: {
14678
15315
  cornerStyle: "rounded",
14679
15316
  textTransform: "none",
@@ -14700,228 +15337,210 @@ const flatInk = defineButtonPersonality({
14700
15337
  fontSize: "text-xl"
14701
15338
  }
14702
15339
  },
14703
- variants: [
14704
- {
14705
- id: "primary",
14706
- name: "Primary",
14707
- enabled: true,
14708
- priority: 1,
14709
- background: {
14710
- type: "solid",
14711
- colorToken: "primary"
14712
- },
14713
- borderRadius: "rounded-lg",
14714
- affordance: { iconId: "ArrowRight" },
14715
- effects: { hover: [{
14716
- effectId: "lift",
14717
- options: { translateY: "-2px" }
14718
- }, {
14719
- effectId: "background-on-hover",
14720
- options: { colorToken: "secondary" }
14721
- }] }
15340
+ roles: {
15341
+ primary: {
15342
+ kind: "complete",
15343
+ appearance: {
15344
+ background: {
15345
+ type: "solid",
15346
+ colorToken: "primary"
15347
+ },
15348
+ borderRadius: "rounded-lg",
15349
+ affordance: { iconId: "ArrowRight" },
15350
+ effects: { hover: [{
15351
+ effectId: "lift",
15352
+ options: { translateY: "-2px" }
15353
+ }, {
15354
+ effectId: "background-on-hover",
15355
+ options: { colorToken: "secondary" }
15356
+ }] }
15357
+ }
14722
15358
  },
14723
- {
14724
- id: "secondary",
14725
- name: "Secondary",
14726
- enabled: true,
14727
- priority: 2,
14728
- background: {
14729
- type: "surface",
14730
- role: "link"
14731
- },
14732
- borderRadius: "rounded-lg",
14733
- border: { widthClass: "border" },
14734
- effects: { hover: [{
14735
- effectId: "lift",
14736
- options: { translateY: "-2px" }
14737
- }, {
14738
- effectId: "background-on-hover",
14739
- options: { colorToken: "surfaceAlt" }
14740
- }] }
15359
+ secondary: {
15360
+ kind: "complete",
15361
+ appearance: {
15362
+ background: {
15363
+ type: "surface",
15364
+ role: "link"
15365
+ },
15366
+ borderRadius: "rounded-lg",
15367
+ border: { widthClass: "border" },
15368
+ effects: { hover: [{
15369
+ effectId: "lift",
15370
+ options: { translateY: "-2px" }
15371
+ }, {
15372
+ effectId: "background-on-hover",
15373
+ options: { colorToken: "surfaceAlt" }
15374
+ }] }
15375
+ }
14741
15376
  },
14742
- {
14743
- id: "accent",
14744
- name: "Accent",
14745
- enabled: true,
14746
- priority: 3,
14747
- background: {
14748
- type: "solid",
14749
- colorToken: "accent"
14750
- },
14751
- borderRadius: "rounded-lg",
14752
- affordance: { iconId: "ArrowRight" },
14753
- effects: { hover: [{
14754
- effectId: "lift",
14755
- options: { translateY: "-2px" }
14756
- }] }
15377
+ outline: {
15378
+ kind: "complete",
15379
+ appearance: {
15380
+ background: {
15381
+ type: "surface",
15382
+ role: "link"
15383
+ },
15384
+ borderRadius: "rounded-lg",
15385
+ border: { widthClass: "border" },
15386
+ effects: { hover: [{
15387
+ effectId: "lift",
15388
+ options: { translateY: "-2px" }
15389
+ }, {
15390
+ effectId: "background-on-hover",
15391
+ options: { colorToken: "surfaceAlt" }
15392
+ }] }
15393
+ }
15394
+ },
15395
+ ghost: {
15396
+ kind: "complete",
15397
+ appearance: {
15398
+ background: {
15399
+ type: "surface",
15400
+ role: "link"
15401
+ },
15402
+ borderRadius: "rounded-lg",
15403
+ effects: { hover: [{
15404
+ effectId: "lift",
15405
+ options: { translateY: "-2px" }
15406
+ }] }
15407
+ }
15408
+ },
15409
+ accent: {
15410
+ kind: "complete",
15411
+ appearance: {
15412
+ background: {
15413
+ type: "solid",
15414
+ colorToken: "accent"
15415
+ },
15416
+ borderRadius: "rounded-lg",
15417
+ affordance: { iconId: "ArrowRight" },
15418
+ effects: { hover: [{
15419
+ effectId: "lift",
15420
+ options: { translateY: "-2px" }
15421
+ }] }
15422
+ }
14757
15423
  }
14758
- ]
15424
+ }
14759
15425
  }
14760
15426
  });
14761
- //#endregion
14762
- //#region ../theme-core/src/buttons/personalities/ink-stamp.ts
14763
- /**
14764
- * Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
14765
- * feel. Reads as bold and handmade; suits expressive craft brands.
14766
- */
14767
- const inkStamp = defineButtonPersonality({
14768
- id: "ink-stamp",
14769
- name: "Ink Stamp",
14770
- description: "Hand-stamped block-print buttons with a slight lift on hover.",
15427
+ const showtimePillRecipe = defineStaticButtonStyleRecipe({
15428
+ id: "showtime-pill",
15429
+ accessibilityLabel: "Bold uppercase pill buttons with playful movement",
14771
15430
  tags: {
14772
15431
  tone: "bold",
14773
15432
  energy: "vibrant",
14774
- motion: "standard",
14775
- era: "organic"
15433
+ motion: "expressive",
15434
+ era: "modern"
14776
15435
  },
14777
- buttonSystem: {
15436
+ system: {
14778
15437
  global: {
14779
- cornerStyle: "rounded",
15438
+ cornerStyle: "pill",
15439
+ shadow: "low",
14780
15440
  textTransform: "uppercase",
14781
- fontWeight: 600,
14782
- borderWidth: 1,
14783
- hoverTransform: "none",
14784
- hoverColor: "none",
14785
- letterSpacing: "loose"
15441
+ fontWeight: 700,
15442
+ borderWidth: 2,
15443
+ hoverTransform: "lift",
15444
+ hoverColor: "darken",
15445
+ typography: "body",
15446
+ paddingPreset: "spacious",
15447
+ italic: false
14786
15448
  },
14787
15449
  sizes: {
14788
15450
  sm: {
14789
- padding: "0.5rem 1.25rem",
14790
- fontSize: "text-xs"
15451
+ padding: "0.625rem 1.25rem",
15452
+ fontSize: "0.875rem"
14791
15453
  },
14792
15454
  md: {
14793
- padding: "0.75rem 1.75rem",
14794
- fontSize: "text-sm"
15455
+ padding: "0.875rem 1.75rem",
15456
+ fontSize: "1rem"
14795
15457
  },
14796
15458
  lg: {
14797
- padding: "0.875rem 2.25rem",
14798
- fontSize: "text-base"
15459
+ padding: "1.125rem 2.25rem",
15460
+ fontSize: "1.125rem"
14799
15461
  },
14800
15462
  xl: {
14801
- padding: "1.125rem 2.75rem",
14802
- fontSize: "text-lg"
15463
+ padding: "1.125rem 2.25rem",
15464
+ fontSize: "1.125rem"
14803
15465
  }
14804
15466
  },
14805
- variants: [
14806
- {
14807
- id: "primary",
14808
- name: "Primary",
14809
- enabled: true,
14810
- priority: 1,
14811
- background: {
14812
- type: "solid",
14813
- colorToken: "primary"
14814
- },
14815
- borderRadius: "rounded-md",
14816
- effects: {
14817
- hover: [{
14818
- effectId: "drop-shadow",
14819
- options: { intensity: "medium" }
14820
- }, {
14821
- effectId: "scale-up",
14822
- options: { scale: "1.02" }
14823
- }],
14824
- active: [{
14825
- effectId: "scale-down",
14826
- options: { scale: "0.98" }
14827
- }]
15467
+ roles: {
15468
+ primary: {
15469
+ kind: "complete",
15470
+ appearance: {
15471
+ background: {
15472
+ type: "solid",
15473
+ colorToken: "primary"
15474
+ },
15475
+ borderRadius: "rounded-full",
15476
+ effects: { hover: [{ effectId: "pop" }] }
14828
15477
  }
14829
15478
  },
14830
- {
14831
- id: "secondary",
14832
- name: "Secondary",
14833
- enabled: true,
14834
- priority: 2,
14835
- background: {
14836
- type: "surface",
14837
- role: "link"
14838
- },
14839
- borderRadius: "rounded-md",
14840
- border: { widthClass: "border-2" },
14841
- effects: { hover: [{
14842
- effectId: "background-on-hover",
14843
- options: { colorToken: "surface" }
14844
- }] }
14845
- },
14846
- {
14847
- id: "outline",
14848
- name: "Outline",
14849
- enabled: true,
14850
- priority: 3,
14851
- background: {
14852
- type: "surface",
14853
- role: "link"
14854
- },
14855
- borderRadius: "rounded-md",
14856
- border: { widthClass: "border-2" },
14857
- effects: { hover: [{
14858
- effectId: "background-on-hover",
14859
- options: { colorToken: "surface" }
14860
- }] }
15479
+ secondary: {
15480
+ kind: "complete",
15481
+ appearance: {
15482
+ background: {
15483
+ type: "surface",
15484
+ role: "link"
15485
+ },
15486
+ borderRadius: "rounded-full",
15487
+ border: { widthClass: "border-2" },
15488
+ effects: { hover: [{ effectId: "pop" }] }
15489
+ }
14861
15490
  },
14862
- {
14863
- id: "ghost",
14864
- name: "Ghost",
14865
- enabled: true,
14866
- priority: 3,
14867
- background: {
14868
- type: "surface",
14869
- role: "link"
14870
- },
14871
- borderRadius: "rounded-none",
14872
- sizes: {
14873
- sm: {
14874
- padding: "0.375rem 0",
14875
- fontSize: "text-xs"
15491
+ outline: {
15492
+ kind: "complete",
15493
+ appearance: {
15494
+ background: {
15495
+ type: "surface",
15496
+ role: "link"
14876
15497
  },
14877
- md: {
14878
- padding: "0.5rem 0",
14879
- fontSize: "text-sm"
15498
+ borderRadius: "rounded-full",
15499
+ border: { widthClass: "border-2" },
15500
+ effects: { hover: [{
15501
+ effectId: "background-on-hover",
15502
+ options: { colorToken: "background" }
15503
+ }] }
15504
+ }
15505
+ },
15506
+ ghost: {
15507
+ kind: "complete",
15508
+ appearance: {
15509
+ background: {
15510
+ type: "surface",
15511
+ role: "link"
14880
15512
  },
14881
- lg: {
14882
- padding: "0.625rem 0",
14883
- fontSize: "text-base"
15513
+ borderRadius: "rounded-full",
15514
+ effects: { hover: [{
15515
+ effectId: "background-on-hover",
15516
+ options: { colorToken: "surface" }
15517
+ }] }
15518
+ }
15519
+ },
15520
+ accent: {
15521
+ kind: "complete",
15522
+ appearance: {
15523
+ background: {
15524
+ type: "solid",
15525
+ colorToken: "secondary"
14884
15526
  },
14885
- xl: {
14886
- padding: "0.75rem 0",
14887
- fontSize: "text-lg"
14888
- }
14889
- },
14890
- effects: { base: [{
14891
- effectId: "border-bottom-grow",
14892
- options: {
14893
- height: 1,
14894
- colorToken: "accent",
14895
- origin: "left"
14896
- }
14897
- }] }
15527
+ borderRadius: "rounded-full",
15528
+ effects: { hover: [{ effectId: "pop" }] }
15529
+ }
14898
15530
  }
14899
- ]
15531
+ }
14900
15532
  }
14901
15533
  });
14902
- //#endregion
14903
- //#region ../theme-core/src/buttons/personalities/joy-stamp.ts
14904
- /**
14905
- * Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
14906
- * that collapses as the button presses into it on hover. Authored for the
14907
- * Original Joy site style: a cream "stamp" shadow under the solid primary, and
14908
- * a brown shadow under the cream outline. Reads as bold, warm, and handmade.
14909
- *
14910
- * The coloured offset shadow relies on the per-variant `shadow.colorToken`
14911
- * extension; the press is the shared `press-down` effect, which matches its
14912
- * translate to each variant's own shadow offset.
14913
- */
14914
- const joyStamp = defineButtonPersonality({
15534
+ const joyStampRecipe = defineStaticButtonStyleRecipe({
14915
15535
  id: "joy-stamp",
14916
- name: "Joy Stamp",
14917
- description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
15536
+ accessibilityLabel: "Bold pill buttons with a hard offset shadow",
14918
15537
  tags: {
14919
15538
  tone: "bold",
14920
15539
  energy: "vibrant",
14921
15540
  motion: "expressive",
14922
15541
  era: "organic"
14923
15542
  },
14924
- buttonSystem: {
15543
+ system: {
14925
15544
  global: {
14926
15545
  cornerStyle: "pill",
14927
15546
  shadow: "high",
@@ -14951,61 +15570,78 @@ const joyStamp = defineButtonPersonality({
14951
15570
  fontSize: "text-2xl"
14952
15571
  }
14953
15572
  },
14954
- variants: [{
14955
- id: "primary",
14956
- name: "Primary",
14957
- enabled: true,
14958
- priority: 1,
14959
- background: {
14960
- type: "solid",
14961
- colorToken: "primary"
15573
+ roles: {
15574
+ primary: {
15575
+ kind: "complete",
15576
+ appearance: {
15577
+ background: {
15578
+ type: "solid",
15579
+ colorToken: "primary"
15580
+ },
15581
+ borderRadius: "rounded-full",
15582
+ shadow: {
15583
+ elevation: "high",
15584
+ softness: "hard",
15585
+ position: "bottom-right",
15586
+ colorToken: "text"
15587
+ },
15588
+ effects: { hover: [{ effectId: "press-down" }] }
15589
+ }
14962
15590
  },
14963
- borderRadius: "rounded-full",
14964
- shadow: {
14965
- elevation: "high",
14966
- softness: "hard",
14967
- position: "bottom-right",
14968
- colorToken: "text"
15591
+ secondary: {
15592
+ kind: "complete",
15593
+ appearance: {
15594
+ background: {
15595
+ type: "surface",
15596
+ role: "link"
15597
+ },
15598
+ borderRadius: "rounded-full",
15599
+ border: { widthClass: "border-2" },
15600
+ shadow: {
15601
+ elevation: "high",
15602
+ softness: "hard",
15603
+ position: "bottom-right",
15604
+ colorToken: "secondary"
15605
+ },
15606
+ effects: { hover: [{ effectId: "press-down" }] }
15607
+ }
14969
15608
  },
14970
- effects: { hover: [{ effectId: "press-down" }] }
14971
- }, {
14972
- id: "secondary",
14973
- name: "Secondary",
14974
- enabled: true,
14975
- priority: 2,
14976
- background: {
14977
- type: "surface",
14978
- role: "link"
14979
- },
14980
- borderRadius: "rounded-full",
14981
- border: { widthClass: "border-2" },
14982
- shadow: {
14983
- elevation: "high",
14984
- softness: "hard",
14985
- position: "bottom-right",
14986
- colorToken: "secondary"
14987
- },
14988
- effects: { hover: [{ effectId: "press-down" }] }
14989
- }]
15609
+ outline: {
15610
+ kind: "derive",
15611
+ from: "secondary"
15612
+ },
15613
+ ghost: {
15614
+ kind: "complete",
15615
+ appearance: {
15616
+ background: {
15617
+ type: "surface",
15618
+ role: "link"
15619
+ },
15620
+ borderRadius: "rounded-full",
15621
+ effects: { hover: [{ effectId: "press-down" }] }
15622
+ }
15623
+ },
15624
+ accent: {
15625
+ kind: "derive",
15626
+ from: "primary",
15627
+ overrides: { background: {
15628
+ type: "solid",
15629
+ colorToken: "accent"
15630
+ } }
15631
+ }
15632
+ }
14990
15633
  }
14991
15634
  });
14992
- //#endregion
14993
- //#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
14994
- /**
14995
- * Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
14996
- * deliberate spacing. Designed for music, ceremony, and soulful event sites.
14997
- */
14998
- const ornateRitual = defineButtonPersonality({
15635
+ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
14999
15636
  id: "ornate-ritual",
15000
- name: "Ornate Ritual",
15001
- description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
15637
+ accessibilityLabel: "Uppercase framed buttons with restrained movement",
15002
15638
  tags: {
15003
15639
  tone: "classic",
15004
15640
  energy: "vibrant",
15005
15641
  motion: "subtle",
15006
15642
  era: "organic"
15007
15643
  },
15008
- buttonSystem: {
15644
+ system: {
15009
15645
  global: {
15010
15646
  cornerStyle: "rounded",
15011
15647
  textTransform: "uppercase",
@@ -15033,639 +15669,171 @@ const ornateRitual = defineButtonPersonality({
15033
15669
  fontSize: "text-base"
15034
15670
  }
15035
15671
  },
15036
- variants: [
15037
- {
15038
- id: "primary",
15039
- name: "Primary",
15040
- enabled: true,
15041
- priority: 1,
15042
- background: {
15043
- type: "solid",
15044
- colorToken: "primary"
15045
- },
15046
- borderRadius: "rounded-md",
15047
- border: { widthClass: "border" },
15048
- effects: {
15049
- hover: [{
15050
- effectId: "background-on-hover",
15051
- options: { colorToken: "primary-100" }
15052
- }],
15053
- active: [{
15054
- effectId: "scale-down",
15055
- options: { scale: "0.98" }
15056
- }]
15057
- }
15058
- },
15059
- {
15060
- id: "secondary",
15061
- name: "Secondary",
15062
- enabled: true,
15063
- priority: 2,
15064
- background: {
15065
- type: "solid",
15066
- colorToken: "secondary"
15067
- },
15068
- borderRadius: "rounded-md",
15069
- border: { widthClass: "border" },
15070
- effects: { hover: [{
15071
- effectId: "background-on-hover",
15072
- options: { colorToken: "surface" }
15073
- }] }
15074
- },
15075
- {
15076
- id: "outline",
15077
- name: "Outline",
15078
- enabled: true,
15079
- priority: 3,
15080
- background: {
15081
- type: "surface",
15082
- role: "link"
15083
- },
15084
- borderRadius: "rounded-md",
15085
- border: { widthClass: "border" },
15086
- effects: { hover: [{
15087
- effectId: "background-on-hover",
15088
- options: { colorToken: "muted" }
15089
- }] }
15090
- },
15091
- {
15092
- id: "ghost",
15093
- name: "Ghost",
15094
- enabled: true,
15095
- priority: 3,
15096
- background: {
15097
- type: "surface",
15098
- role: "link"
15099
- },
15100
- borderRadius: "rounded-none",
15101
- sizes: {
15102
- sm: {
15103
- padding: "0.375rem 0",
15104
- fontSize: "text-xs"
15105
- },
15106
- md: {
15107
- padding: "0.5rem 0",
15108
- fontSize: "text-sm"
15672
+ roles: {
15673
+ primary: {
15674
+ kind: "complete",
15675
+ appearance: {
15676
+ background: {
15677
+ type: "solid",
15678
+ colorToken: "primary"
15109
15679
  },
15110
- lg: {
15111
- padding: "0.625rem 0",
15112
- fontSize: "text-base"
15113
- },
15114
- xl: {
15115
- padding: "0.75rem 0",
15116
- fontSize: "text-lg"
15117
- }
15118
- },
15119
- effects: { base: [{
15120
- effectId: "border-bottom-grow",
15121
- options: {
15122
- height: 1,
15123
- colorToken: "accent",
15124
- origin: "left"
15680
+ borderRadius: "rounded-md",
15681
+ border: { widthClass: "border" },
15682
+ effects: {
15683
+ hover: [{
15684
+ effectId: "background-on-hover",
15685
+ options: { colorToken: "primary-100" }
15686
+ }],
15687
+ active: [{
15688
+ effectId: "scale-down",
15689
+ options: { scale: "0.98" }
15690
+ }]
15125
15691
  }
15126
- }] }
15127
- }
15128
- ]
15129
- }
15130
- });
15131
- //#endregion
15132
- //#region ../theme-core/src/buttons/personalities/pebble.ts
15133
- /**
15134
- * Pebble — large pill primaries with generous padding. Reads as spa-luxurious
15135
- * and natural; pairs well with wellness/yoga/dance brands.
15136
- */
15137
- const pebble = defineButtonPersonality({
15138
- id: "pebble",
15139
- name: "Pebble",
15140
- description: "Generous pill buttons with a quiet colour-softening hover.",
15141
- tags: {
15142
- tone: "classic",
15143
- energy: "calm",
15144
- motion: "standard",
15145
- era: "organic"
15146
- },
15147
- buttonSystem: {
15148
- global: {
15149
- cornerStyle: "pill",
15150
- textTransform: "none",
15151
- fontWeight: 500,
15152
- borderWidth: 2,
15153
- hoverTransform: "none",
15154
- hoverColor: "none"
15155
- },
15156
- sizes: {
15157
- sm: {
15158
- padding: "0.625rem 1.75rem",
15159
- fontSize: "text-sm"
15160
- },
15161
- md: { padding: "0.875rem 2.25rem" },
15162
- lg: {
15163
- padding: "1.125rem 2.75rem",
15164
- fontSize: "text-lg"
15165
- },
15166
- xl: {
15167
- padding: "1.5rem 3.5rem",
15168
- fontSize: "text-xl"
15169
- }
15170
- },
15171
- variants: [
15172
- {
15173
- id: "primary",
15174
- name: "Primary",
15175
- enabled: true,
15176
- priority: 1,
15177
- background: {
15178
- type: "solid",
15179
- colorToken: "primary"
15180
- },
15181
- borderRadius: "rounded-full",
15182
- effects: { hover: [{
15183
- effectId: "darken-background",
15184
- options: { amount: 100 }
15185
- }] }
15692
+ }
15186
15693
  },
15187
- {
15188
- id: "secondary",
15189
- name: "Secondary",
15190
- enabled: true,
15191
- priority: 2,
15192
- background: {
15193
- type: "surface",
15194
- role: "link"
15195
- },
15196
- borderRadius: "rounded-full",
15197
- border: { widthClass: "border-2" },
15198
- effects: { hover: [{
15199
- effectId: "background-on-hover",
15200
- options: { colorToken: "accent" }
15201
- }] }
15694
+ secondary: {
15695
+ kind: "complete",
15696
+ appearance: {
15697
+ background: {
15698
+ type: "solid",
15699
+ colorToken: "secondary"
15700
+ },
15701
+ borderRadius: "rounded-md",
15702
+ border: { widthClass: "border" },
15703
+ effects: { hover: [{
15704
+ effectId: "background-on-hover",
15705
+ options: { colorToken: "surface" }
15706
+ }] }
15707
+ }
15202
15708
  },
15203
- {
15204
- id: "outline",
15205
- name: "Outline",
15206
- enabled: true,
15207
- priority: 3,
15208
- background: {
15209
- type: "surface",
15210
- role: "link"
15211
- },
15212
- borderRadius: "rounded-full",
15213
- border: { widthClass: "border" },
15214
- effects: { hover: [{
15215
- effectId: "background-on-hover",
15216
- options: { colorToken: "surface" }
15217
- }] }
15709
+ outline: {
15710
+ kind: "complete",
15711
+ appearance: {
15712
+ background: {
15713
+ type: "surface",
15714
+ role: "link"
15715
+ },
15716
+ borderRadius: "rounded-md",
15717
+ border: { widthClass: "border" },
15718
+ effects: { hover: [{
15719
+ effectId: "background-on-hover",
15720
+ options: { colorToken: "muted" }
15721
+ }] }
15722
+ }
15218
15723
  },
15219
- {
15220
- id: "ghost",
15221
- name: "Ghost",
15222
- enabled: true,
15223
- priority: 3,
15224
- background: {
15225
- type: "surface",
15226
- role: "link"
15227
- },
15228
- borderRadius: "rounded-full",
15229
- sizes: {
15230
- sm: {
15231
- padding: "0.375rem 0.875rem",
15232
- fontSize: "text-sm"
15724
+ ghost: {
15725
+ kind: "complete",
15726
+ appearance: {
15727
+ background: {
15728
+ type: "surface",
15729
+ role: "link"
15233
15730
  },
15234
- md: { padding: "0.5rem 1rem" },
15235
- lg: {
15236
- padding: "0.625rem 1.25rem",
15237
- fontSize: "text-lg"
15731
+ borderRadius: "rounded-none",
15732
+ sizes: {
15733
+ sm: {
15734
+ padding: "0.375rem 0",
15735
+ fontSize: "text-xs"
15736
+ },
15737
+ md: {
15738
+ padding: "0.5rem 0",
15739
+ fontSize: "text-sm"
15740
+ },
15741
+ lg: {
15742
+ padding: "0.625rem 0",
15743
+ fontSize: "text-base"
15744
+ },
15745
+ xl: {
15746
+ padding: "0.75rem 0",
15747
+ fontSize: "text-lg"
15748
+ }
15238
15749
  },
15239
- xl: {
15240
- padding: "0.75rem 1.5rem",
15241
- fontSize: "text-xl"
15242
- }
15750
+ effects: { base: [{
15751
+ effectId: "border-bottom-grow",
15752
+ options: {
15753
+ height: 1,
15754
+ colorToken: "accent",
15755
+ origin: "left"
15756
+ }
15757
+ }] }
15243
15758
  }
15244
- }
15245
- ]
15246
- }
15247
- });
15248
- //#endregion
15249
- //#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
15250
- /**
15251
- * Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
15252
- * Primary and secondary keep stable semantic colours; surrounding surfaces are
15253
- * responsible for contrast rather than reversing the button roles.
15254
- */
15255
- const quietArrow = defineButtonPersonality({
15256
- id: "quiet-arrow",
15257
- name: "Quiet Arrow",
15258
- description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
15259
- tags: {
15260
- tone: "classic",
15261
- energy: "calm",
15262
- motion: "subtle",
15263
- era: "editorial"
15264
- },
15265
- buttonSystem: {
15266
- global: {
15267
- cornerStyle: "rounded",
15268
- textTransform: "uppercase",
15269
- fontWeight: 500,
15270
- borderWidth: 1,
15271
- typography: "body",
15272
- fontSize: "text-sm",
15273
- letterSpacing: "loose",
15274
- hoverTransform: "none",
15275
- hoverColor: "none"
15276
- },
15277
- sizes: {
15278
- sm: {
15279
- padding: "0.625rem 1.25rem",
15280
- fontSize: "text-xs"
15281
- },
15282
- md: {
15283
- padding: "0.8125rem 1.75rem",
15284
- fontSize: "text-sm"
15285
- },
15286
- lg: {
15287
- padding: "0.9375rem 2.125rem",
15288
- fontSize: "text-sm"
15289
- },
15290
- xl: {
15291
- padding: "1.0625rem 2.5rem",
15292
- fontSize: "text-base"
15293
- }
15294
- },
15295
- variants: [
15296
- {
15297
- id: "primary",
15298
- name: "Primary",
15299
- enabled: true,
15300
- priority: 1,
15301
- background: {
15302
- type: "solid",
15303
- colorToken: "primary"
15304
- },
15305
- borderRadius: "rounded-xl",
15306
- affordance: { iconId: "ArrowRight" },
15307
- effects: { hover: [{
15308
- effectId: "darken-background",
15309
- options: { amount: 100 }
15310
- }] }
15311
15759
  },
15312
- {
15313
- id: "secondary",
15314
- name: "Secondary",
15315
- enabled: true,
15316
- priority: 2,
15317
- background: {
15318
- type: "surface",
15319
- role: "link"
15320
- },
15321
- borderRadius: "rounded-xl",
15322
- border: { widthClass: "border" },
15323
- affordance: { iconId: "ArrowRight" },
15324
- effects: { hover: [{
15325
- effectId: "background-on-hover",
15326
- options: { colorToken: "surfaceAlt" }
15327
- }] }
15328
- },
15329
- {
15330
- id: "outline",
15331
- name: "Outline",
15332
- enabled: true,
15333
- priority: 3,
15334
- background: {
15335
- type: "surface",
15336
- role: "link"
15337
- },
15338
- borderRadius: "rounded-xl",
15339
- border: { widthClass: "border" }
15340
- },
15341
- {
15342
- id: "ghost",
15343
- name: "Ghost",
15344
- enabled: true,
15345
- priority: 3,
15346
- background: {
15347
- type: "surface",
15348
- role: "link"
15349
- },
15350
- borderRadius: "rounded-xl"
15351
- }
15352
- ]
15353
- }
15354
- });
15355
- //#endregion
15356
- //#region ../theme-core/src/buttons/personalities/showtime-pill.ts
15357
- /**
15358
- * Showtime Pill — bold, spacious, fully rounded buttons with playful pop
15359
- * motion. Suits energetic schools, performers, festivals, and community brands
15360
- * that need calls to action to feel loud without becoming visually chaotic.
15361
- */
15362
- const showtimePill = defineButtonPersonality({
15363
- id: "showtime-pill",
15364
- name: "Showtime Pill",
15365
- description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
15366
- tags: {
15367
- tone: "bold",
15368
- energy: "vibrant",
15369
- motion: "expressive",
15370
- era: "modern"
15371
- },
15372
- buttonSystem: {
15373
- global: {
15374
- cornerStyle: "pill",
15375
- shadow: "low",
15376
- textTransform: "uppercase",
15377
- fontWeight: 700,
15378
- borderWidth: 2,
15379
- hoverTransform: "lift",
15380
- hoverColor: "darken",
15381
- typography: "body",
15382
- paddingPreset: "spacious",
15383
- italic: false
15384
- },
15385
- sizes: {
15386
- sm: {
15387
- padding: "0.625rem 1.25rem",
15388
- fontSize: "0.875rem"
15389
- },
15390
- md: {
15391
- padding: "0.875rem 1.75rem",
15392
- fontSize: "1rem"
15393
- },
15394
- lg: {
15395
- padding: "1.125rem 2.25rem",
15396
- fontSize: "1.125rem"
15397
- },
15398
- xl: {
15399
- padding: "1.125rem 2.25rem",
15400
- fontSize: "1.125rem"
15401
- }
15402
- },
15403
- variants: [
15404
- {
15405
- id: "primary",
15406
- name: "Primary",
15407
- enabled: true,
15408
- priority: 1,
15409
- background: {
15760
+ accent: {
15761
+ kind: "derive",
15762
+ from: "primary",
15763
+ overrides: { background: {
15410
15764
  type: "solid",
15411
- colorToken: "primary"
15412
- },
15413
- borderRadius: "rounded-full",
15414
- effects: { hover: [{ effectId: "pop" }] }
15415
- },
15416
- {
15417
- id: "secondary",
15418
- name: "Secondary",
15419
- enabled: true,
15420
- priority: 2,
15421
- background: {
15422
- type: "surface",
15423
- role: "link"
15424
- },
15425
- borderRadius: "rounded-full",
15426
- border: { widthClass: "border-2" },
15427
- effects: { hover: [{ effectId: "pop" }] }
15428
- },
15429
- {
15430
- id: "hero",
15431
- name: "Hero",
15432
- enabled: true,
15433
- priority: 1,
15434
- background: {
15435
- type: "solid",
15436
- colorToken: "secondary"
15437
- },
15438
- borderRadius: "rounded-full",
15439
- effects: { hover: [{ effectId: "pop" }] }
15440
- },
15441
- {
15442
- id: "header",
15443
- name: "Header",
15444
- enabled: true,
15445
- priority: 2,
15446
- background: {
15447
- type: "solid",
15448
- colorToken: "background"
15449
- },
15450
- borderRadius: "rounded-full",
15451
- border: { widthClass: "border-2" },
15452
- effects: { hover: [{
15453
- effectId: "background-on-hover",
15454
- options: { colorToken: "surface" }
15455
- }] }
15456
- },
15457
- {
15458
- id: "outline",
15459
- name: "Outline",
15460
- enabled: true,
15461
- priority: 3,
15462
- background: {
15463
- type: "surface",
15464
- role: "link"
15465
- },
15466
- borderRadius: "rounded-full",
15467
- border: { widthClass: "border-2" },
15468
- effects: { hover: [{
15469
- effectId: "background-on-hover",
15470
- options: { colorToken: "background" }
15471
- }] }
15472
- },
15473
- {
15474
- id: "ghost",
15475
- name: "Ghost",
15476
- enabled: true,
15477
- priority: 3,
15478
- background: {
15479
- type: "surface",
15480
- role: "link"
15481
- },
15482
- borderRadius: "rounded-full",
15483
- effects: { hover: [{
15484
- effectId: "background-on-hover",
15485
- options: { colorToken: "surface" }
15486
- }] }
15487
- }
15488
- ]
15489
- }
15490
- });
15491
- //#endregion
15492
- //#region ../theme-core/src/buttons/personalities/soft-pill.ts
15493
- /**
15494
- * Soft Pill — rounded-full pill buttons with a hover lift. The default for
15495
- * Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
15496
- */
15497
- const softPill = defineButtonPersonality({
15498
- id: "soft-pill",
15499
- name: "Soft Pill",
15500
- description: "Rounded pills with a gentle lift on hover. Quietly modern.",
15501
- tags: {
15502
- tone: "classic",
15503
- energy: "calm",
15504
- motion: "subtle",
15505
- era: "organic"
15506
- },
15507
- buttonSystem: {
15508
- global: {
15509
- cornerStyle: "pill",
15510
- shadow: "low",
15511
- textTransform: "none",
15512
- fontWeight: 500,
15513
- borderWidth: 2,
15514
- hoverTransform: "lift",
15515
- hoverColor: "none"
15516
- },
15517
- variants: [
15518
- {
15519
- id: "primary",
15520
- name: "Primary",
15521
- enabled: true,
15522
- priority: 1,
15523
- background: {
15524
- type: "solid",
15525
- colorToken: "primary"
15526
- },
15527
- borderRadius: "rounded-full",
15528
- shadow: {
15529
- elevation: "low",
15530
- softness: "soft",
15531
- position: "bottom"
15532
- },
15533
- effects: {
15534
- hover: [{
15535
- effectId: "lift",
15536
- options: { translateY: "-1px" }
15537
- }],
15538
- active: [{
15539
- effectId: "scale-down",
15540
- options: { scale: "0.98" }
15541
- }]
15542
- }
15543
- },
15544
- {
15545
- id: "secondary",
15546
- name: "Secondary",
15547
- enabled: true,
15548
- priority: 2,
15549
- background: {
15550
- type: "surface",
15551
- role: "link"
15552
- },
15553
- borderRadius: "rounded-full",
15554
- border: { widthClass: "border-2" },
15555
- effects: { hover: [{
15556
- effectId: "background-on-hover",
15557
- options: { colorToken: "surface" }
15558
- }] }
15559
- },
15560
- {
15561
- id: "outline",
15562
- name: "Outline",
15563
- enabled: true,
15564
- priority: 3,
15565
- background: {
15566
- type: "surface",
15567
- role: "link"
15568
- },
15569
- borderRadius: "rounded-full",
15570
- border: { widthClass: "border" },
15571
- effects: { hover: [{
15572
- effectId: "background-on-hover",
15573
- options: { colorToken: "surface" }
15574
- }] }
15575
- },
15576
- {
15577
- id: "ghost",
15578
- name: "Ghost",
15579
- enabled: true,
15580
- priority: 3,
15581
- background: {
15582
- type: "surface",
15583
- role: "link"
15584
- },
15585
- borderRadius: "rounded-full",
15586
- effects: { hover: [{
15587
- effectId: "background-on-hover",
15588
- options: { colorToken: "surface" }
15589
- }] }
15765
+ colorToken: "accent"
15766
+ } }
15590
15767
  }
15591
- ]
15768
+ }
15592
15769
  }
15593
15770
  });
15594
15771
  //#endregion
15595
- //#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
15596
- const solidSecondary = {
15597
- id: "secondary",
15598
- name: "Secondary",
15599
- enabled: true,
15600
- priority: 2,
15601
- background: {
15602
- type: "solid",
15603
- colorToken: unsafeAsOpaqueButtonColourToken("secondary")
15604
- },
15605
- borderRadius: "rounded-full",
15606
- shadow: {
15607
- elevation: "none",
15608
- softness: null,
15609
- position: "bottom"
15610
- },
15611
- effects: {
15612
- hover: [{
15613
- effectId: "background-on-hover-alpha",
15614
- options: {
15615
- colorToken: "secondary",
15616
- opacity: 88
15617
- }
15618
- }],
15619
- active: [{
15620
- effectId: "scale-down",
15621
- options: { scale: "0.98" }
15622
- }]
15623
- }
15624
- };
15625
- //#endregion
15626
- //#region ../theme-core/src/buttons/personalities/index.ts
15627
- const buttonPersonalities = [
15628
- softPill,
15629
- defineButtonPersonality({
15630
- id: "two-tone-pill",
15631
- name: "Two-tone Pill",
15632
- description: "Rounded pills with distinct solid primary and secondary brand colours.",
15633
- tags: softPill.tags,
15634
- buttonSystem: {
15635
- ...softPill.buttonSystem,
15636
- variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
15637
- }
15638
- }),
15639
- earthPill,
15640
- confidentChip,
15641
- editorialLink,
15642
- pebble,
15643
- inkStamp,
15644
- flatInk,
15645
- brushedWash,
15646
- showtimePill,
15647
- joyStamp,
15648
- ornateRitual,
15649
- quietArrow
15772
+ //#region ../theme-core/src/buttons/styles/registry.ts
15773
+ const buttonStyleRecipes = [
15774
+ softPillRecipe,
15775
+ earthPillRecipe,
15776
+ confidentChipRecipe,
15777
+ editorialLinkRecipe,
15778
+ pebbleRecipe,
15779
+ inkStampRecipe,
15780
+ flatInkRecipe,
15781
+ brushedWashRecipe,
15782
+ showtimePillRecipe,
15783
+ joyStampRecipe,
15784
+ ornateRitualRecipe,
15785
+ quietArrowRecipe
15650
15786
  ];
15651
- new Map(buttonPersonalities.map((p) => [p.id, p]));
15652
- buttonPersonalities.map((personality) => ({
15653
- id: personality.id,
15654
- name: personality.name,
15655
- description: personality.description,
15656
- category: presetCategory(personality),
15657
- buttonSystem: personality.buttonSystem,
15658
- compatibility: {
15659
- ...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
15660
- ...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
15661
- }
15662
- }));
15663
- function presetCategory(personality) {
15664
- switch (personality.tags.era) {
15787
+ const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
15788
+ function findButtonStyleRecipe(id) {
15789
+ const recipe = recipesById.get(id);
15790
+ if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
15791
+ return recipe;
15792
+ }
15793
+ function resolveButtonStyleSelection(selection) {
15794
+ switch (selection.styleId) {
15795
+ case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
15796
+ case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
15797
+ case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
15798
+ case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
15799
+ case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
15800
+ case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
15801
+ case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
15802
+ case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
15803
+ case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
15804
+ case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
15805
+ case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
15806
+ case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
15807
+ }
15808
+ }
15809
+ function defaultButtonStyleSelectionFor(styleId) {
15810
+ return {
15811
+ styleId,
15812
+ parameters: findButtonStyleRecipe(styleId).defaultParameters
15813
+ };
15814
+ }
15815
+ 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");
15816
+ buttonStyleRecipes.map((recipe) => {
15817
+ const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
15818
+ if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
15819
+ return {
15820
+ id: recipe.id,
15821
+ name: recipe.accessibilityLabel,
15822
+ description: recipe.accessibilityLabel,
15823
+ category: presetCategory(recipe),
15824
+ buttonSystem: resolved.buttonSystem,
15825
+ compatibility: {
15826
+ ...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
15827
+ ...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
15828
+ }
15829
+ };
15830
+ });
15831
+ function presetCategory(recipe) {
15832
+ switch (recipe.tags.era) {
15665
15833
  case "retro": return "retro";
15666
15834
  case "editorial": return "minimal";
15667
15835
  case "organic": return "artistic";
15668
- case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
15836
+ case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
15669
15837
  case "technical": return "technical";
15670
15838
  case void 0: return "modern";
15671
15839
  }
@@ -20396,76 +20564,9 @@ function headerConfigurationKey(configuration) {
20396
20564
  function asFooterLookId(value) {
20397
20565
  return value;
20398
20566
  }
20399
- function asFooterLayoutId(value) {
20400
- return value;
20401
- }
20402
- function asFooterStyleId(value) {
20403
- return value;
20404
- }
20405
- const footerLayoutCatalog = defineExactCatalog()([
20406
- {
20407
- id: asFooterLayoutId("identity"),
20408
- label: "Identity",
20409
- description: "Logo, site text, address, and legal copy without relying on footer navigation."
20410
- },
20411
- {
20412
- id: asFooterLayoutId("centered"),
20413
- label: "Centered",
20414
- description: "A calm centered stack for identity, short copy, and optional compact navigation.",
20415
- maxRecommendedNavDensity: "sparse"
20416
- },
20417
- {
20418
- id: asFooterLayoutId("split"),
20419
- label: "Split",
20420
- description: "Navigation and brand signoff separated into a wider split footer.",
20421
- requiresFooterNav: true,
20422
- maxRecommendedNavDensity: "balanced"
20423
- },
20424
- {
20425
- id: asFooterLayoutId("columns"),
20426
- label: "Columns",
20427
- description: "Grouped footer navigation columns with a supporting bottom line.",
20428
- requiresFooterNav: true,
20429
- requiresFooterNavGroups: true
20430
- }
20431
- ]);
20432
- const footerStyleCatalog = defineExactCatalog()([
20433
- {
20434
- id: asFooterStyleId("quiet"),
20435
- label: "Quiet",
20436
- description: "Lightweight, practical footer treatment."
20437
- },
20438
- {
20439
- id: asFooterStyleId("calm"),
20440
- label: "Calm",
20441
- description: "Soft centered treatment with restrained dividers."
20442
- },
20443
- {
20444
- id: asFooterStyleId("editorial"),
20445
- label: "Editorial",
20446
- description: "Text-forward treatment with fine-line structure."
20447
- },
20448
- {
20449
- id: asFooterStyleId("brand-band"),
20450
- label: "Brand band",
20451
- description: "High-contrast brand treatment with a stronger bottom bar."
20452
- }
20453
- ]);
20454
- new Map(footerLayoutCatalog.map((layout) => [layout.id, layout]));
20455
- new Map(footerStyleCatalog.map((style) => [style.id, style]));
20456
- /**
20457
- * No-nav-safe identity footer: brand and legal/supporting copy carry the
20458
- * footer without implying missing navigation.
20459
- */
20460
- function identityQuietFooter(theme) {
20567
+ function quietFooterLinks(theme) {
20461
20568
  return {
20462
20569
  ...theme.footer,
20463
- variant: "simple",
20464
- maxWidth: "container",
20465
- background: {
20466
- type: "color",
20467
- color: "surface"
20468
- },
20469
20570
  navStyle: "minimal",
20470
20571
  navWeight: "regular",
20471
20572
  navColor: "text",
@@ -20478,285 +20579,38 @@ function identityQuietFooter(theme) {
20478
20579
  hoverColorToken: "primary",
20479
20580
  padding: "none",
20480
20581
  borderRadius: "none"
20481
- },
20482
- navLayout: {
20483
- layout: "inline-wrap",
20484
- align: "start",
20485
- gapX: "default",
20486
- gapY: "tight"
20487
- },
20488
- logo: {
20489
- showLogo: true,
20490
- showLogoText: true,
20491
- placement: "left",
20492
- size: "sm",
20493
- align: "start"
20494
- },
20495
- bottomBar: {
20496
- enabled: false,
20497
- fullBleed: false,
20498
- textAlign: "left",
20499
- paddingX: "default",
20500
- paddingY: "compact",
20501
- borderTop: { width: "none" }
20502
20582
  }
20503
20583
  };
20504
20584
  }
20505
- /**
20506
- * Back-compat alias for the previous default footer Look. It keeps existing
20507
- * persisted selections valid while staying hidden from the new layout/style UI.
20508
- */
20509
- function mutedGroundingFooter(theme) {
20510
- return {
20511
- ...identityQuietFooter(theme),
20512
- background: theme.footer.background,
20513
- navStyle: theme.footer.navStyle,
20514
- navColor: theme.footer.navColor,
20515
- navWeight: theme.footer.navWeight,
20516
- navLinkStyle: theme.footer.navLinkStyle,
20517
- bottomTextLinkStyle: theme.footer.bottomTextLinkStyle
20518
- };
20519
- }
20520
- /** Applies a high-contrast brand band with a darker full-bleed bottom bar. */
20521
- function brandTwoBandFooter(theme) {
20585
+ function emphasizedFooterLinks(theme) {
20522
20586
  return {
20523
20587
  ...theme.footer,
20524
- variant: "split",
20525
- maxWidth: "container",
20526
- background: {
20527
- type: "color",
20528
- color: "primary-800"
20529
- },
20530
20588
  navStyle: "minimal",
20531
20589
  navWeight: "medium",
20532
- navColor: "primaryForeground",
20533
- navLinkStyle: {
20534
- typography: "body",
20535
- fontWeight: "medium",
20536
- textTransform: "none",
20537
- italic: false,
20538
- colorToken: "primaryForeground",
20539
- hoverColorToken: "secondary",
20540
- padding: "none",
20541
- borderRadius: "none"
20542
- },
20543
- bottomTextLinkStyle: {
20544
- colorToken: "secondary",
20545
- decorationColorToken: "secondary"
20546
- },
20547
- navLayout: {
20548
- layout: "inline-wrap",
20549
- align: "start",
20550
- gapX: "default",
20551
- gapY: "tight"
20552
- },
20553
- logo: {
20554
- showLogo: true,
20555
- showLogoText: false,
20556
- placement: "left",
20557
- size: "sm",
20558
- align: "start"
20559
- },
20560
- bottomBar: {
20561
- enabled: true,
20562
- fullBleed: true,
20563
- background: {
20564
- type: "color",
20565
- color: "primary-900"
20566
- },
20567
- textColor: "primaryForeground",
20568
- textAlign: "center",
20569
- paddingX: "default",
20570
- paddingY: "compact",
20571
- borderTop: { width: "none" }
20572
- }
20573
- };
20574
- }
20575
- /**
20576
- * Centered stack on a softly tinted band: logo, inline nav, address, and a
20577
- * hairline-topped copyright line, all centered.
20578
- */
20579
- function centeredCalmFooter(theme) {
20580
- return {
20581
- ...theme.footer,
20582
- variant: "simple",
20583
- maxWidth: "container",
20584
- background: {
20585
- type: "color",
20586
- color: "surfaceAlt"
20587
- },
20588
- navStyle: "minimal",
20589
- navWeight: "regular",
20590
- navColor: "text",
20591
- navLinkStyle: {
20592
- typography: "body",
20593
- fontWeight: "regular",
20594
- textTransform: "none",
20595
- italic: false,
20596
- colorToken: "text",
20597
- hoverColorToken: "primary",
20598
- padding: "none",
20599
- borderRadius: "none"
20600
- },
20601
- navLayout: {
20602
- layout: "inline-wrap",
20603
- align: "center",
20604
- gapX: "relaxed",
20605
- gapY: "tight"
20606
- },
20607
- logo: {
20608
- showLogo: true,
20609
- showLogoText: false,
20610
- placement: "above",
20611
- size: "sm",
20612
- align: "center"
20613
- },
20614
- bottomBar: {
20615
- enabled: true,
20616
- fullBleed: false,
20617
- textAlign: "center",
20618
- paddingX: "default",
20619
- paddingY: "compact",
20620
- borderTop: { width: "thin" }
20621
- }
20622
- };
20623
- }
20624
- /** Editorial split footer: compact nav on one side, brand signoff on the other. */
20625
- function splitEditorialFooter(theme) {
20626
- return {
20627
- ...theme.footer,
20628
- variant: "split",
20629
- maxWidth: "container",
20630
- background: {
20631
- type: "color",
20632
- color: "surface"
20633
- },
20634
- navStyle: "minimal",
20635
- navWeight: "regular",
20636
20590
  navColor: "text",
20637
20591
  navLinkStyle: {
20638
20592
  typography: "body",
20639
- fontWeight: "regular",
20593
+ fontWeight: "medium",
20640
20594
  textTransform: "none",
20641
20595
  italic: false,
20642
20596
  colorToken: "text",
20643
20597
  hoverColorToken: "primary",
20644
20598
  padding: "none",
20645
20599
  borderRadius: "none"
20646
- },
20647
- navLayout: {
20648
- layout: "inline-wrap",
20649
- align: "start",
20650
- gapX: "relaxed",
20651
- gapY: "tight"
20652
- },
20653
- logo: {
20654
- showLogo: true,
20655
- showLogoText: true,
20656
- placement: "right",
20657
- size: "sm",
20658
- align: "end"
20659
- },
20660
- bottomBar: {
20661
- enabled: true,
20662
- fullBleed: false,
20663
- textAlign: "left",
20664
- paddingX: "default",
20665
- paddingY: "compact",
20666
- borderTop: { width: "thin" }
20667
20600
  }
20668
20601
  };
20669
20602
  }
20670
- /**
20671
- * Editorial columns: site name and supporting copy on the left, inline nav on
20672
- * the right, with a hairline-topped bottom line. Uses the footer block's
20673
- * columns layout.
20674
- */
20675
- function editorialColumnsFooter(theme) {
20676
- return {
20677
- ...theme.footer,
20678
- variant: "columns",
20679
- maxWidth: "container",
20680
- background: {
20681
- type: "color",
20682
- color: "surface"
20683
- },
20684
- navStyle: "minimal",
20685
- navWeight: "regular",
20686
- navColor: "text",
20687
- navLinkStyle: {
20688
- typography: "body",
20689
- fontWeight: "regular",
20690
- textTransform: "none",
20691
- italic: false,
20692
- colorToken: "text",
20693
- hoverColorToken: "primary",
20694
- padding: "none",
20695
- borderRadius: "none"
20696
- },
20697
- logo: {
20698
- showLogo: true,
20699
- showLogoText: true,
20700
- placement: "left",
20701
- size: "sm",
20702
- align: "start"
20703
- },
20704
- bottomBar: {
20705
- enabled: true,
20706
- fullBleed: false,
20707
- textAlign: "center",
20708
- paddingX: "default",
20709
- paddingY: "compact",
20710
- borderTop: { width: "thin" }
20711
- }
20712
- };
20713
- }
20714
- const footerLookCatalog = defineExactCatalog()([
20715
- {
20716
- id: asFooterLookId("footer-identity-quiet"),
20717
- label: "Identity footer",
20718
- layoutId: asFooterLayoutId("identity"),
20719
- styleId: asFooterStyleId("quiet"),
20720
- compile: identityQuietFooter
20721
- },
20722
- {
20723
- id: asFooterLookId("footer-muted-grounding"),
20724
- label: "Muted grounding footer",
20725
- layoutId: asFooterLayoutId("identity"),
20726
- styleId: asFooterStyleId("quiet"),
20727
- hiddenFromLayoutStyleControls: true,
20728
- compile: mutedGroundingFooter
20729
- },
20730
- {
20731
- id: asFooterLookId("footer-centered-calm"),
20732
- label: "Centered calm footer",
20733
- layoutId: asFooterLayoutId("centered"),
20734
- styleId: asFooterStyleId("calm"),
20735
- compile: centeredCalmFooter
20736
- },
20737
- {
20738
- id: asFooterLookId("footer-split-editorial"),
20739
- label: "Split editorial footer",
20740
- layoutId: asFooterLayoutId("split"),
20741
- styleId: asFooterStyleId("editorial"),
20742
- compile: splitEditorialFooter
20743
- },
20744
- {
20745
- id: asFooterLookId("footer-editorial-columns"),
20746
- label: "Editorial columns footer",
20747
- layoutId: asFooterLayoutId("columns"),
20748
- styleId: asFooterStyleId("editorial"),
20749
- compile: editorialColumnsFooter
20750
- },
20751
- {
20752
- id: asFooterLookId("site-footer-brand-two-band"),
20753
- label: "Two-band brand footer",
20754
- layoutId: asFooterLayoutId("split"),
20755
- styleId: asFooterStyleId("brand-band"),
20756
- allowedContentPresence: ["default-footer", "default-and-blocks"],
20757
- compile: brandTwoBandFooter
20758
- }
20759
- ]);
20603
+ const footerLookCatalog = defineExactCatalog()([{
20604
+ id: asFooterLookId("footer-links-quiet"),
20605
+ label: "Quiet links",
20606
+ description: "Regular-weight footer navigation with a restrained hover.",
20607
+ compile: quietFooterLinks
20608
+ }, {
20609
+ id: asFooterLookId("footer-links-emphasized"),
20610
+ label: "Emphasized links",
20611
+ description: "Medium-weight footer navigation with a clearer emphasis.",
20612
+ compile: emphasizedFooterLinks
20613
+ }]);
20760
20614
  new Map(footerLookCatalog.map((look) => [look.id, look]));
20761
20615
  //#endregion
20762
20616
  //#region ../theme-core/src/site-styles/sourceCatalogs.ts
@@ -21885,17 +21739,21 @@ function defineCuratedSiteStyle(input) {
21885
21739
  })),
21886
21740
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
21887
21741
  recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
21888
- buttonPersonalityChoices: input.buttonPersonalityChoices,
21742
+ buttonStyleChoices: input.buttonStyleChoices,
21889
21743
  paletteRecommendations: input.paletteRecommendations,
21890
21744
  typography: input.typography ?? defaultTypographyForRecipe(input.tokenRecipes.typography),
21891
21745
  ...input.heroTypography ? { heroTypography: input.heroTypography } : {}
21892
21746
  };
21893
21747
  }
21894
- function buttonChoice(id, note) {
21748
+ function buttonChoice(styleId, note, parameters) {
21749
+ const selection = parameters === void 0 ? defaultButtonStyleSelectionFor(styleId) : buttonStyleSelectionSchema.parse({
21750
+ styleId,
21751
+ parameters
21752
+ });
21895
21753
  return note ? {
21896
- id: asButtonPersonalityId(id),
21754
+ ...selection,
21897
21755
  note
21898
- } : { id: asButtonPersonalityId(id) };
21756
+ } : selection;
21899
21757
  }
21900
21758
  function paletteRecommendation(authoringKey, note) {
21901
21759
  const valueKey = requireCuratedPaletteValueKey(asCuratedPaletteAuthoringKey(authoringKey));
@@ -22080,9 +21938,8 @@ const curatedSiteStyles = [
22080
21938
  "minimal-transparent",
22081
21939
  "clean-base"
22082
21940
  ],
22083
- buttonPersonalityChoices: [
21941
+ buttonStyleChoices: [
22084
21942
  buttonChoice("soft-pill"),
22085
- buttonChoice("two-tone-pill"),
22086
21943
  buttonChoice("pebble"),
22087
21944
  buttonChoice("editorial-link"),
22088
21945
  buttonChoice("brushed-wash")
@@ -22118,7 +21975,7 @@ const curatedSiteStyles = [
22118
21975
  "brand-solid",
22119
21976
  "clean-base"
22120
21977
  ],
22121
- buttonPersonalityChoices: [
21978
+ buttonStyleChoices: [
22122
21979
  buttonChoice("confident-chip"),
22123
21980
  buttonChoice("soft-pill"),
22124
21981
  buttonChoice("editorial-link")
@@ -22157,7 +22014,7 @@ const curatedSiteStyles = [
22157
22014
  "minimal-transparent",
22158
22015
  "centered-calm"
22159
22016
  ],
22160
- buttonPersonalityChoices: [
22017
+ buttonStyleChoices: [
22161
22018
  buttonChoice("editorial-link"),
22162
22019
  buttonChoice("soft-pill"),
22163
22020
  buttonChoice("brushed-wash")
@@ -22197,7 +22054,7 @@ const curatedSiteStyles = [
22197
22054
  "practical-utility",
22198
22055
  "clean-base"
22199
22056
  ],
22200
- buttonPersonalityChoices: [
22057
+ buttonStyleChoices: [
22201
22058
  buttonChoice("pebble"),
22202
22059
  buttonChoice("brushed-wash"),
22203
22060
  buttonChoice("confident-chip")
@@ -22258,7 +22115,7 @@ const curatedSiteStyles = [
22258
22115
  "serif-line",
22259
22116
  "clean-base"
22260
22117
  ],
22261
- buttonPersonalityChoices: [
22118
+ buttonStyleChoices: [
22262
22119
  buttonChoice("editorial-link"),
22263
22120
  buttonChoice("confident-chip"),
22264
22121
  buttonChoice("soft-pill")
@@ -22320,7 +22177,7 @@ const curatedSiteStyles = [
22320
22177
  "brand-solid",
22321
22178
  "clean-base"
22322
22179
  ],
22323
- buttonPersonalityChoices: [
22180
+ buttonStyleChoices: [
22324
22181
  buttonChoice("confident-chip"),
22325
22182
  buttonChoice("pebble"),
22326
22183
  buttonChoice("ink-stamp")
@@ -22359,7 +22216,7 @@ const curatedSiteStyles = [
22359
22216
  "minimal-transparent",
22360
22217
  "clean-base"
22361
22218
  ],
22362
- buttonPersonalityChoices: [
22219
+ buttonStyleChoices: [
22363
22220
  buttonChoice("soft-pill"),
22364
22221
  buttonChoice("pebble"),
22365
22222
  buttonChoice("confident-chip")
@@ -22432,7 +22289,7 @@ const curatedSiteStyles = [
22432
22289
  "clean-base",
22433
22290
  "centered-calm"
22434
22291
  ],
22435
- buttonPersonalityChoices: [
22292
+ buttonStyleChoices: [
22436
22293
  buttonChoice("pebble"),
22437
22294
  buttonChoice("soft-pill"),
22438
22295
  buttonChoice("editorial-link")
@@ -22551,12 +22408,8 @@ const curatedSiteStyles = [
22551
22408
  "serif-line",
22552
22409
  "minimal-transparent"
22553
22410
  ],
22554
- recommendedFooterLookIds: [
22555
- "footer-centered-calm",
22556
- "footer-editorial-columns",
22557
- "footer-muted-grounding"
22558
- ],
22559
- buttonPersonalityChoices: [
22411
+ recommendedFooterLookIds: ["footer-links-quiet"],
22412
+ buttonStyleChoices: [
22560
22413
  buttonChoice("soft-pill"),
22561
22414
  buttonChoice("pebble"),
22562
22415
  buttonChoice("editorial-link")
@@ -22630,7 +22483,7 @@ const curatedSiteStyles = [
22630
22483
  "centered-calm",
22631
22484
  "minimal-transparent"
22632
22485
  ],
22633
- buttonPersonalityChoices: [
22486
+ buttonStyleChoices: [
22634
22487
  buttonChoice("editorial-link"),
22635
22488
  buttonChoice("soft-pill"),
22636
22489
  buttonChoice("brushed-wash")
@@ -22703,8 +22556,8 @@ const curatedSiteStyles = [
22703
22556
  "practical-utility",
22704
22557
  "clean-base"
22705
22558
  ],
22706
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
22707
- buttonPersonalityChoices: [
22559
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
22560
+ buttonStyleChoices: [
22708
22561
  buttonChoice("pebble"),
22709
22562
  buttonChoice("confident-chip"),
22710
22563
  buttonChoice("ink-stamp"),
@@ -22825,8 +22678,8 @@ const curatedSiteStyles = [
22825
22678
  "minimal-transparent",
22826
22679
  "serif-line"
22827
22680
  ],
22828
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
22829
- buttonPersonalityChoices: [
22681
+ recommendedFooterLookIds: ["footer-links-quiet", "footer-links-emphasized"],
22682
+ buttonStyleChoices: [
22830
22683
  buttonChoice("earth-pill"),
22831
22684
  buttonChoice("soft-pill"),
22832
22685
  buttonChoice("pebble"),
@@ -22897,7 +22750,7 @@ const curatedSiteStyles = [
22897
22750
  "floating-glass",
22898
22751
  "brand-solid"
22899
22752
  ],
22900
- buttonPersonalityChoices: [
22753
+ buttonStyleChoices: [
22901
22754
  buttonChoice("ink-stamp"),
22902
22755
  buttonChoice("confident-chip"),
22903
22756
  buttonChoice("brushed-wash"),
@@ -22952,8 +22805,8 @@ const curatedSiteStyles = [
22952
22805
  "transparent-overlay",
22953
22806
  "practical-utility"
22954
22807
  ],
22955
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
22956
- buttonPersonalityChoices: [
22808
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
22809
+ buttonStyleChoices: [
22957
22810
  buttonChoice("showtime-pill"),
22958
22811
  buttonChoice("confident-chip"),
22959
22812
  buttonChoice("ink-stamp"),
@@ -23034,8 +22887,8 @@ const curatedSiteStyles = [
23034
22887
  headerStyleChoice("glass")
23035
22888
  ] },
23036
22889
  recommendedHeaderLookIds: ["minimal-transparent"],
23037
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
23038
- buttonPersonalityChoices: [
22890
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
22891
+ buttonStyleChoices: [
23039
22892
  buttonChoice("ornate-ritual"),
23040
22893
  buttonChoice("joy-stamp"),
23041
22894
  buttonChoice("ink-stamp")
@@ -23088,8 +22941,8 @@ const curatedSiteStyles = [
23088
22941
  headerStyleChoice("glass")
23089
22942
  ] },
23090
22943
  recommendedHeaderLookIds: ["minimal-transparent"],
23091
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
23092
- buttonPersonalityChoices: [
22944
+ recommendedFooterLookIds: ["footer-links-emphasized", "footer-links-quiet"],
22945
+ buttonStyleChoices: [
23093
22946
  buttonChoice("joy-stamp"),
23094
22947
  buttonChoice("ink-stamp"),
23095
22948
  buttonChoice("showtime-pill")
@@ -23179,8 +23032,8 @@ const curatedSiteStyles = [
23179
23032
  "centered-calm",
23180
23033
  "clean-base"
23181
23034
  ],
23182
- recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
23183
- buttonPersonalityChoices: [
23035
+ recommendedFooterLookIds: ["footer-links-quiet"],
23036
+ buttonStyleChoices: [
23184
23037
  buttonChoice("flat-ink"),
23185
23038
  buttonChoice("confident-chip"),
23186
23039
  buttonChoice("editorial-link")
@@ -23257,14 +23110,9 @@ const curatedSiteStyles = [
23257
23110
  "serif-line",
23258
23111
  "clean-base"
23259
23112
  ],
23260
- recommendedFooterLookIds: [
23261
- "footer-editorial-columns",
23262
- "footer-muted-grounding",
23263
- "footer-identity-quiet"
23264
- ],
23265
- buttonPersonalityChoices: [
23266
- buttonChoice("quiet-arrow"),
23267
- buttonChoice("two-tone-pill"),
23113
+ recommendedFooterLookIds: ["footer-links-quiet"],
23114
+ buttonStyleChoices: [
23115
+ buttonChoice("quiet-arrow", void 0, { secondaryTreatment: "solid-accent" }),
23268
23116
  buttonChoice("flat-ink"),
23269
23117
  buttonChoice("editorial-link")
23270
23118
  ],
@@ -27503,25 +27351,41 @@ const heroLayoutControlsFragment = defineFragment({
27503
27351
  layout: []
27504
27352
  });
27505
27353
  //#endregion
27354
+ //#region ../blocks/src/system/constants/buttonRoles.ts
27355
+ /**
27356
+ * Semantic button roles available to block authors.
27357
+ *
27358
+ * These roles are deliberately independent of a site's visual button style:
27359
+ * the active theme owns how each role looks.
27360
+ */
27361
+ const BLOCK_BUTTON_ROLES = PUBLIC_BUTTON_ROLES;
27362
+ const blockButtonRoleSchema = z$1.enum(BLOCK_BUTTON_ROLES);
27363
+ /**
27364
+ * Temporary rollout boundary for persisted content written before issue #1220.
27365
+ * Authoring remains strict through `blockButtonRoleSchema`; this parser exists
27366
+ * only until the post-deploy role rewrite has been audited in production.
27367
+ */
27368
+ function canonicalizePersistedBlockButtonRole(value) {
27369
+ return value === "link" || value === "tertiary" ? "ghost" : value;
27370
+ }
27371
+ const persistedBlockButtonRoleSchema = z$1.preprocess((value) => typeof value === "string" ? canonicalizePersistedBlockButtonRole(value) : value, blockButtonRoleSchema);
27372
+ const BLOCK_BUTTON_ROLE_LABELS = {
27373
+ primary: "Primary",
27374
+ secondary: "Secondary",
27375
+ outline: "Outline",
27376
+ ghost: "Ghost",
27377
+ accent: "Accent"
27378
+ };
27379
+ const BLOCK_BUTTON_ROLE_OPTIONS = BLOCK_BUTTON_ROLES.map((value) => ({
27380
+ value,
27381
+ label: BLOCK_BUTTON_ROLE_LABELS[value]
27382
+ }));
27383
+ function isBlockButtonRole(value) {
27384
+ return blockButtonRoleSchema.safeParse(value).success;
27385
+ }
27386
+ //#endregion
27506
27387
  //#region ../blocks/src/system/fields/button.ts
27507
- const DEFAULT_THEME_BUTTON_VARIANTS = [
27508
- {
27509
- value: "primary",
27510
- label: "Primary"
27511
- },
27512
- {
27513
- value: "secondary",
27514
- label: "Secondary"
27515
- },
27516
- {
27517
- value: "outline",
27518
- label: "Outline"
27519
- },
27520
- {
27521
- value: "link",
27522
- label: "Link"
27523
- }
27524
- ];
27388
+ const DEFAULT_THEME_BUTTON_VARIANTS = BLOCK_BUTTON_ROLE_OPTIONS;
27525
27389
  function createButtonVariantField(options = {}) {
27526
27390
  return {
27527
27391
  id: options.id ?? "buttonVariant",
@@ -27539,20 +27403,7 @@ function createButtonVariantField(options = {}) {
27539
27403
  };
27540
27404
  }
27541
27405
  function createButtonGroup(options = {}) {
27542
- const { variants = [
27543
- {
27544
- value: "primary",
27545
- label: "Primary"
27546
- },
27547
- {
27548
- value: "secondary",
27549
- label: "Secondary"
27550
- },
27551
- {
27552
- value: "outline",
27553
- label: "Outline"
27554
- }
27555
- ], defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
27406
+ const { variants = BLOCK_BUTTON_ROLE_OPTIONS, defaultVariant, includeSize = true, defaultSize = "md", showGroupLabel = false, groupId = "button", groupLabel = "Button", flattenInRepeater = true } = options;
27556
27407
  const mainFields = [
27557
27408
  {
27558
27409
  id: "label",
@@ -27688,29 +27539,7 @@ const ctaRowFragment = defineFragment({
27688
27539
  fields: [createCtasRepeater({
27689
27540
  label: "Calls to action",
27690
27541
  itemLabel: "CTA",
27691
- maxItems: 3,
27692
- button: { variants: [
27693
- {
27694
- value: "primary",
27695
- label: "Primary"
27696
- },
27697
- {
27698
- value: "secondary",
27699
- label: "Secondary"
27700
- },
27701
- {
27702
- value: "outline",
27703
- label: "Outline"
27704
- },
27705
- {
27706
- value: "link",
27707
- label: "Link"
27708
- },
27709
- {
27710
- value: "accent",
27711
- label: "Accent"
27712
- }
27713
- ] }
27542
+ maxItems: 3
27714
27543
  })],
27715
27544
  layout: [ctaRow({
27716
27545
  collectionPath: "content.ctas",
@@ -27729,10 +27558,6 @@ const heroCtaRowFragment = defineFragment({
27729
27558
  defaultValue: [],
27730
27559
  button: {
27731
27560
  variants: [
27732
- {
27733
- value: "default",
27734
- label: "Default"
27735
- },
27736
27561
  {
27737
27562
  value: "primary",
27738
27563
  label: "Primary"
@@ -27744,9 +27569,17 @@ const heroCtaRowFragment = defineFragment({
27744
27569
  {
27745
27570
  value: "outline",
27746
27571
  label: "Outline"
27572
+ },
27573
+ {
27574
+ value: "ghost",
27575
+ label: "Ghost"
27576
+ },
27577
+ {
27578
+ value: "accent",
27579
+ label: "Accent"
27747
27580
  }
27748
27581
  ],
27749
- defaultVariant: "default",
27582
+ defaultVariant: "primary",
27750
27583
  includeSize: true,
27751
27584
  defaultSize: "lg"
27752
27585
  }
@@ -28437,11 +28270,13 @@ const blogFeaturedPostFragment = defineFragment({
28437
28270
  as: "p",
28438
28271
  style: textColorStyle("text/80")
28439
28272
  }, bind("post.excerpt", { fallback: "Select a blog post to display its preview." })),
28440
- link({
28441
- className: "rb-inline-flex rb-items-center rb-caption rb-hover-opacity-80",
28442
- style: textColorStyle("primary"),
28443
- href: { $bind: { from: "post.path" } }
28444
- }, [text({ as: "strong" }, props({ value: "Read more →" }))])
28273
+ button({
28274
+ className: "rb-self-start",
28275
+ href: { $bind: { from: "post.path" } },
28276
+ variantId: "ghost",
28277
+ size: "sm",
28278
+ linkRequired: true
28279
+ }, [text({ as: "span" }, props({ value: "Read more" }))])
28445
28280
  ])], when("post")), stack({
28446
28281
  gap: "sm",
28447
28282
  className: "rb-rounded-xl rb-border rb-border-dashed rb-p-6",
@@ -28712,21 +28547,7 @@ const newsletterFormFragment = defineFragment({
28712
28547
  createButtonVariantField({
28713
28548
  id: "buttonVariant",
28714
28549
  label: "Button style",
28715
- defaultValue: "primary",
28716
- variants: [
28717
- {
28718
- value: "primary",
28719
- label: "Primary"
28720
- },
28721
- {
28722
- value: "secondary",
28723
- label: "Secondary"
28724
- },
28725
- {
28726
- value: "outline",
28727
- label: "Outline"
28728
- }
28729
- ]
28550
+ defaultValue: "primary"
28730
28551
  }),
28731
28552
  {
28732
28553
  id: "successMessage",
@@ -30275,7 +30096,8 @@ function postExcerpt(className) {
30275
30096
  function postReadMore() {
30276
30097
  return button({
30277
30098
  href: { $bind: { from: "post.path" } },
30278
- className: "rb-self-start"
30099
+ className: "rb-self-start",
30100
+ variantId: "ghost"
30279
30101
  }, [text({ as: "span" }, bind("content.readMoreText", { fallback: "Read more" }), when("content.readMoreText")), text({
30280
30102
  as: "span",
30281
30103
  value: "Read more"
@@ -33857,31 +33679,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
33857
33679
  label: "Calls to action",
33858
33680
  itemLabel: "CTA",
33859
33681
  maxItems: 1,
33860
- button: {
33861
- variants: [
33862
- {
33863
- value: "primary",
33864
- label: "Primary"
33865
- },
33866
- {
33867
- value: "secondary",
33868
- label: "Secondary"
33869
- },
33870
- {
33871
- value: "outline",
33872
- label: "Outline"
33873
- },
33874
- {
33875
- value: "ghost",
33876
- label: "Ghost"
33877
- },
33878
- {
33879
- value: "link",
33880
- label: "Link"
33881
- }
33882
- ],
33883
- defaultVariant: "ghost"
33884
- }
33682
+ button: { defaultVariant: "ghost" }
33885
33683
  })
33886
33684
  ] }
33887
33685
  },
@@ -36002,17 +35800,8 @@ function readAmount(value) {
36002
35800
  //#endregion
36003
35801
  //#region ../blocks/src/system/runtime/nodes/shared/contract-schemas.ts
36004
35802
  const previewStageSchema = z$1.enum(["preview", "published"]);
36005
- const registrationButtonVariantSchema = z$1.enum([
36006
- "primary",
36007
- "secondary",
36008
- "outline"
36009
- ]);
36010
- const eventButtonVariantSchema = z$1.enum([
36011
- "primary",
36012
- "secondary",
36013
- "outline",
36014
- "link"
36015
- ]);
35803
+ const registrationButtonVariantSchema = blockButtonRoleSchema;
35804
+ const eventButtonVariantSchema = persistedBlockButtonRoleSchema;
36016
35805
  const eventLayoutSchema = z$1.enum(eventCalendarListLayoutValues);
36017
35806
  const eventCalendarDisplayModeSchema = z$1.enum(eventCalendarDisplayModeValues);
36018
35807
  const eventCalendarDefaultViewSchema = z$1.enum(eventCalendarDefaultViewValues);
@@ -36377,23 +36166,7 @@ const eventRegistrationBlockDefinition = {
36377
36166
  defaultValue: "Complete Registration",
36378
36167
  maxLength: 40
36379
36168
  },
36380
- createButtonVariantField({
36381
- description: "Choose a button style from your theme",
36382
- variants: [
36383
- {
36384
- value: "primary",
36385
- label: "Primary"
36386
- },
36387
- {
36388
- value: "secondary",
36389
- label: "Secondary"
36390
- },
36391
- {
36392
- value: "outline",
36393
- label: "Outline"
36394
- }
36395
- ]
36396
- })
36169
+ createButtonVariantField()
36397
36170
  ],
36398
36171
  layout: [styledSection({
36399
36172
  baseClass: "",
@@ -36700,23 +36473,7 @@ const courseRegistrationBlockDefinition = {
36700
36473
  defaultValue: "Sign up",
36701
36474
  maxLength: 40
36702
36475
  },
36703
- createButtonVariantField({
36704
- description: "Choose a button style from your theme",
36705
- variants: [
36706
- {
36707
- value: "primary",
36708
- label: "Primary"
36709
- },
36710
- {
36711
- value: "secondary",
36712
- label: "Secondary"
36713
- },
36714
- {
36715
- value: "outline",
36716
- label: "Outline"
36717
- }
36718
- ]
36719
- })
36476
+ createButtonVariantField()
36720
36477
  ],
36721
36478
  layout: [styledSection({
36722
36479
  baseClass: "",
@@ -39805,36 +39562,7 @@ const offeringsPreviewFields = [
39805
39562
  ui: { intent: "content" },
39806
39563
  schema: { fields: groupOverrideFields }
39807
39564
  },
39808
- {
39809
- id: "buttonVariant",
39810
- type: "select",
39811
- label: "Button style",
39812
- required: false,
39813
- multiple: false,
39814
- defaultValue: "primary",
39815
- options: [
39816
- {
39817
- value: "primary",
39818
- label: "Primary"
39819
- },
39820
- {
39821
- value: "secondary",
39822
- label: "Secondary"
39823
- },
39824
- {
39825
- value: "outline",
39826
- label: "Outline"
39827
- },
39828
- {
39829
- value: "link",
39830
- label: "Link"
39831
- }
39832
- ],
39833
- ui: {
39834
- intent: "display",
39835
- widget: "buttonVariant"
39836
- }
39837
- },
39565
+ createButtonVariantField(),
39838
39566
  {
39839
39567
  id: "buttonText",
39840
39568
  type: "text",
@@ -40040,7 +39768,7 @@ function normalizeOfferingsPreviewGroupOverride(value) {
40040
39768
  return [override];
40041
39769
  }
40042
39770
  function isButtonVariant(value) {
40043
- return value === "primary" || value === "secondary" || value === "outline" || value === "link" || value === null;
39771
+ return value === null || isBlockButtonRole(value);
40044
39772
  }
40045
39773
  function normalizeCardStylesContent(value) {
40046
39774
  return isRecord$6(value) || value === null ? value : void 0;
@@ -41892,12 +41620,7 @@ const shopSourceSchema = z$1.object({
41892
41620
  showPrices: z$1.boolean().optional(),
41893
41621
  showValidityPeriod: z$1.boolean().optional(),
41894
41622
  showPricePerCredit: z$1.boolean().nullable().optional(),
41895
- buttonVariant: z$1.enum([
41896
- "primary",
41897
- "secondary",
41898
- "outline",
41899
- "link"
41900
- ]).optional(),
41623
+ buttonVariant: blockButtonRoleSchema.optional(),
41901
41624
  passesHeading: z$1.string().optional(),
41902
41625
  membershipsHeading: z$1.string().optional(),
41903
41626
  buyButtonText: z$1.string().optional(),
@@ -42042,12 +41765,7 @@ const passesMembershipsHydrationSchema = z$1.object({
42042
41765
  passes: z$1.array(publicPassProductSchema),
42043
41766
  memberships: z$1.array(publicMembershipProductSchema),
42044
41767
  passPurchaseMode: z$1.enum(["add_to_cart", "buy_now"]),
42045
- buttonVariant: z$1.enum([
42046
- "primary",
42047
- "secondary",
42048
- "outline",
42049
- "link"
42050
- ])
41768
+ buttonVariant: blockButtonRoleSchema
42051
41769
  });
42052
41770
  const productListHydrationSchema = z$1.object({
42053
41771
  products: z$1.array(publicProductSchema),
@@ -43391,11 +43109,7 @@ const newsletterPresetSchema = z$1.enum([
43391
43109
  "emailNameCompany"
43392
43110
  ]);
43393
43111
  const newsletterDestinationProviderSchema = z$1.enum(["riverbank", "mailchimp"]);
43394
- const newsletterButtonVariantSchema = z$1.enum([
43395
- "primary",
43396
- "secondary",
43397
- "outline"
43398
- ]);
43112
+ const newsletterButtonVariantSchema = blockButtonRoleSchema;
43399
43113
  const newsletterFieldSchema = z$1.object({
43400
43114
  id: z$1.string(),
43401
43115
  type: z$1.enum(["email", "text"]),