@coras-io/embed 0.1.2 → 0.3.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 (236) hide show
  1. package/CHANGELOG.md +139 -0
  2. package/README.md +8 -7
  3. package/dist/components/accordion/accordion-item/accordion-item.styles.js +1 -1
  4. package/dist/components/alert/alert.styles.js +14 -14
  5. package/dist/components/attraction-card/base/attraction-card.styles.js +7 -3
  6. package/dist/components/attraction-discovery/attraction-discovery.styles.js +1 -1
  7. package/dist/components/attraction-header/attraction-header.styles.js +1 -1
  8. package/dist/components/attraction-option/attraction-option.styles.js +4 -4
  9. package/dist/components/basket/basket.styles.js +27 -26
  10. package/dist/components/basket-empty/basket-empty.styles.js +1 -0
  11. package/dist/components/basket-item/basket-item.component.js +10 -4
  12. package/dist/components/basket-item/basket-item.styles.js +9 -3
  13. package/dist/components/basket-item-ticket/basket-item-ticket.styles.js +1 -3
  14. package/dist/components/basket-mobile/basket-mobile.styles.js +5 -5
  15. package/dist/components/better-carousel/better-carousel.styles.js +2 -0
  16. package/dist/components/bottom-drawer/bottom-drawer.styles.js +6 -4
  17. package/dist/components/button/button.component.d.ts +0 -1
  18. package/dist/components/button/button.component.js +1 -8
  19. package/dist/components/button/button.constants.d.ts +1 -1
  20. package/dist/components/button/button.constants.js +1 -1
  21. package/dist/components/button/button.styles.js +66 -39
  22. package/dist/components/calendar/base/calendar.styles.js +3 -5
  23. package/dist/components/calendar/multi/multi.styles.js +7 -0
  24. package/dist/components/category-tag/category-tag.styles.js +10 -7
  25. package/dist/components/checkbox/checkbox.styles.js +2 -2
  26. package/dist/components/chip/chip.styles.js +2 -2
  27. package/dist/components/collect-fida/collect-fida.component.js +5 -3
  28. package/dist/components/collect-fida/collect-fida.styles.js +9 -16
  29. package/dist/components/crypto-auth-modal/crypto-auth-modal.component.js +6 -4
  30. package/dist/components/crypto-auth-modal/crypto-auth-modal.styles.js +2 -2
  31. package/dist/components/dialog/dialog.styles.js +10 -17
  32. package/dist/components/drawer/drawer.component.js +6 -0
  33. package/dist/components/drawer/drawer.styles.js +17 -3
  34. package/dist/components/dropdown/dropdown.component.js +7 -0
  35. package/dist/components/dropdown/dropdown.styles.js +3 -6
  36. package/dist/components/expiration-timer/expiration-timer.styles.js +3 -3
  37. package/dist/components/explore-card/explore-card.styles.js +1 -1
  38. package/dist/components/filter-chip/filter-chip.styles.js +11 -9
  39. package/dist/components/filters-drawer/filters-drawer.component.js +1 -1
  40. package/dist/components/filters-drawer/filters-drawer.styles.js +6 -5
  41. package/dist/components/image/image.styles.js +3 -3
  42. package/dist/components/image-chip/image-chip.styles.js +1 -1
  43. package/dist/components/input-field/input-field.styles.js +22 -17
  44. package/dist/components/itinerary/itinerary-item/itinerary-item.styles.js +1 -1
  45. package/dist/components/joined-fields/joined-fields.styles.js +10 -6
  46. package/dist/components/loading-spinner/loading-spinner.styles.js +1 -1
  47. package/dist/components/location-image/location-image.component.d.ts +6 -0
  48. package/dist/components/location-image/location-image.component.js +15 -2
  49. package/dist/components/location-image/location-image.styles.js +1 -1
  50. package/dist/components/locations-results/locations-results.styles.js +4 -6
  51. package/dist/components/marketing-tag/marketing-tag.styles.js +1 -1
  52. package/dist/components/message-card/message-card.styles.js +6 -6
  53. package/dist/components/option-group/option-chip/option-chip.styles.js +4 -3
  54. package/dist/components/order-confirmation/order-confirmation-item/order-confirmation-item.styles.js +9 -0
  55. package/dist/components/order-confirmation/order-confirmation.component.js +4 -3
  56. package/dist/components/order-confirmation/order-confirmation.styles.js +1 -1
  57. package/dist/components/otp/otp.styles.js +6 -6
  58. package/dist/components/overlay/overlay.styles.js +5 -1
  59. package/dist/components/pay-in/pay-in.styles.js +2 -2
  60. package/dist/components/payment-fiat-method/payment-fiat-method.styles.js +20 -4
  61. package/dist/components/payment-option/payment-option.styles.js +10 -12
  62. package/dist/components/performance-time/performance-time.styles.js +2 -2
  63. package/dist/components/phone-country-code/phone-country-code.styles.js +1 -1
  64. package/dist/components/points/points.styles.js +1 -1
  65. package/dist/components/search-button/search-button.styles.js +15 -7
  66. package/dist/components/seated-selector/seated-selector.component.d.ts +4 -1
  67. package/dist/components/seated-selector/seated-selector.component.js +90 -36
  68. package/dist/components/seated-selector/seated-selector.styles.js +89 -14
  69. package/dist/components/seats-io/seats-io.component.d.ts +2 -0
  70. package/dist/components/seats-io/seats-io.component.js +35 -2
  71. package/dist/components/seats-io/seats-io.constants.d.ts +5 -0
  72. package/dist/components/seats-io/seats-io.constants.js +12 -0
  73. package/dist/components/seats-io/seats-io.transform.d.ts +8 -2
  74. package/dist/components/seats-io/seats-io.transform.js +12 -4
  75. package/dist/components/select-list/select-list.styles.js +1 -0
  76. package/dist/components/select-list/select-option/select-option.styles.js +3 -3
  77. package/dist/components/sort-dropdown/sort-dropdown.styles.js +1 -1
  78. package/dist/components/sort-list/sort-list.styles.js +1 -1
  79. package/dist/components/sport-options/sport-option/sport-option.styles.js +2 -2
  80. package/dist/components/star-rating/star-rating.component.d.ts +1 -0
  81. package/dist/components/star-rating/star-rating.component.js +19 -23
  82. package/dist/components/star-rating/star-rating.styles.js +32 -6
  83. package/dist/components/tab/tab.styles.js +1 -1
  84. package/dist/components/tabs/tabs.styles.js +1 -1
  85. package/dist/components/tag/tag.styles.js +7 -7
  86. package/dist/components/text-section/text-section.styles.js +2 -1
  87. package/dist/components/time-tag/time-tag.styles.js +1 -2
  88. package/dist/components/tooltip/tooltip.styles.js +3 -3
  89. package/dist/components/tour-ticket-type-selector/tour-ticket-type/tour-ticket-type.styles.js +2 -2
  90. package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.component.js +1 -1
  91. package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.styles.js +1 -9
  92. package/dist/components/transfer-modal/transfer-modal.component.js +3 -3
  93. package/dist/components/transfer-modal/transfer-modal.styles.js +6 -8
  94. package/dist/containers/basket/basket.component.d.ts +1 -1
  95. package/dist/containers/basket/basket.component.js +56 -25
  96. package/dist/containers/footer/footer.styles.js +4 -0
  97. package/dist/containers/navbar/navbar.component.d.ts +5 -1
  98. package/dist/containers/navbar/navbar.component.js +38 -9
  99. package/dist/containers/navbar/navbar.styles.js +38 -12
  100. package/dist/contexts/basket/basket.provider.d.ts +1 -0
  101. package/dist/contexts/basket/basket.provider.js +31 -4
  102. package/dist/contexts/properties.context.d.ts +4 -4
  103. package/dist/core/api/middlewares/booking-session/booking-session.constants.d.ts +1 -0
  104. package/dist/core/api/middlewares/booking-session/booking-session.constants.js +1 -0
  105. package/dist/core/api/middlewares/booking-session/booking-session.js +18 -27
  106. package/dist/core/api/middlewares/booking-session/booking-session.utils.d.ts +4 -4
  107. package/dist/core/api/middlewares/booking-session/booking-session.utils.js +13 -10
  108. package/dist/core/api/queries.js +3 -2
  109. package/dist/core/color-scheme.d.ts +14 -0
  110. package/dist/core/color-scheme.js +48 -0
  111. package/dist/core/currency/constants.d.ts +1 -1
  112. package/dist/core/currency/constants.js +4 -3
  113. package/dist/core/i18n/date.js +20 -9
  114. package/dist/core/i18n/locale-codes.d.ts +2 -2
  115. package/dist/core/i18n/locale-codes.js +4 -0
  116. package/dist/core/images/constants.d.ts +0 -5
  117. package/dist/core/images/constants.js +0 -5
  118. package/dist/core/images/helpers.d.ts +8 -0
  119. package/dist/core/images/helpers.js +14 -6
  120. package/dist/core/images/srcset.js +2 -2
  121. package/dist/core/storybook/demo.d.ts +4 -0
  122. package/dist/core/storybook/demo.js +17 -0
  123. package/dist/core/types/locales.d.ts +7 -0
  124. package/dist/core/utils/datetime.js +10 -4
  125. package/dist/core/utils/locale.d.ts +8 -1
  126. package/dist/core/utils/locale.js +10 -0
  127. package/dist/helpers/helpers.d.ts +1 -1
  128. package/dist/index.d.ts +2 -3
  129. package/dist/index.js +1 -2
  130. package/dist/locales/ar-SA.d.ts +279 -0
  131. package/dist/locales/ar-SA.js +288 -0
  132. package/dist/locales/da-DK.d.ts +100 -82
  133. package/dist/locales/da-DK.js +104 -89
  134. package/dist/locales/de-DE.d.ts +100 -82
  135. package/dist/locales/de-DE.js +104 -89
  136. package/dist/locales/en-IE.d.ts +250 -232
  137. package/dist/locales/en-IE.js +253 -238
  138. package/dist/locales/en-US.d.ts +100 -82
  139. package/dist/locales/en-US.js +105 -90
  140. package/dist/locales/es-ES.d.ts +100 -82
  141. package/dist/locales/es-ES.js +104 -89
  142. package/dist/locales/fr-FR.d.ts +100 -82
  143. package/dist/locales/fr-FR.js +104 -89
  144. package/dist/locales/fr-MA.d.ts +100 -82
  145. package/dist/locales/fr-MA.js +104 -89
  146. package/dist/locales/is-IS.d.ts +100 -82
  147. package/dist/locales/is-IS.js +104 -89
  148. package/dist/locales/it-IT.d.ts +100 -82
  149. package/dist/locales/it-IT.js +104 -89
  150. package/dist/locales/ms-MY.d.ts +100 -82
  151. package/dist/locales/ms-MY.js +104 -89
  152. package/dist/locales/nb-NO.d.ts +100 -82
  153. package/dist/locales/nb-NO.js +104 -89
  154. package/dist/locales/pl-PL.d.ts +100 -82
  155. package/dist/locales/pl-PL.js +104 -89
  156. package/dist/locales/pt-PT.d.ts +100 -82
  157. package/dist/locales/pt-PT.js +104 -89
  158. package/dist/locales/sv-SE.d.ts +100 -82
  159. package/dist/locales/sv-SE.js +104 -89
  160. package/dist/locales/th-TH.d.ts +100 -82
  161. package/dist/locales/th-TH.js +104 -89
  162. package/dist/locales/tr-TR.d.ts +100 -82
  163. package/dist/locales/tr-TR.js +104 -89
  164. package/dist/locales/zh-CN.d.ts +100 -82
  165. package/dist/locales/zh-CN.js +105 -90
  166. package/dist/locales/zh-HK.d.ts +279 -0
  167. package/dist/locales/zh-HK.js +288 -0
  168. package/dist/mixins/coinbase.mixin.js +1 -1
  169. package/dist/mixins/error-modal.styles.js +2 -2
  170. package/dist/mixins/location-search/location-search.js +3 -3
  171. package/dist/mixins/location-search/location-search.styles.js +6 -5
  172. package/dist/sdk/chrome.d.ts +9 -3
  173. package/dist/sdk/chrome.js +21 -9
  174. package/dist/sdk/element-adapter.js +11 -8
  175. package/dist/sdk/mount.d.ts +3 -3
  176. package/dist/sdk/mount.js +150 -42
  177. package/dist/sdk/navigation-intent.js +3 -0
  178. package/dist/sdk/page-registry.d.ts +14 -2
  179. package/dist/sdk/page-registry.js +33 -13
  180. package/dist/sdk/theme.d.ts +1 -15
  181. package/dist/sdk/theme.js +4 -39
  182. package/dist/sdk/types.d.ts +55 -24
  183. package/dist/sdk/url.d.ts +24 -3
  184. package/dist/sdk/url.js +66 -27
  185. package/dist/sdk/validation.d.ts +0 -7
  186. package/dist/sdk/validation.js +105 -47
  187. package/dist/styles/contrast-fixtures.d.ts +0 -5
  188. package/dist/styles/contrast-fixtures.js +79 -9
  189. package/dist/styles/contrast.js +4 -3
  190. package/dist/styles/defaults/component.js +17 -1
  191. package/dist/styles/primitives.d.ts +0 -10
  192. package/dist/styles/primitives.js +2 -12
  193. package/dist/styles/tokens.d.ts +1 -1
  194. package/dist/styles/tokens.generated.d.ts +1 -1
  195. package/dist/styles/tokens.generated.js +1 -1
  196. package/dist/styles/tokens.metadata.d.ts +1 -1
  197. package/dist/styles/tokens.metadata.js +360 -90
  198. package/dist/views/details-page/details-page.component.d.ts +5 -5
  199. package/dist/views/details-page/details-page.component.js +97 -71
  200. package/dist/views/details-page/details-page.styles.js +64 -9
  201. package/dist/views/details-page/partials/theater-description/theater-description.component.js +5 -0
  202. package/dist/views/help-page/help-page.component.d.ts +1 -0
  203. package/dist/views/help-page/help-page.component.js +11 -4
  204. package/dist/views/help-page/help-page.styles.js +21 -8
  205. package/dist/views/landing-page/landing-page.component.d.ts +4 -4
  206. package/dist/views/landing-page/landing-page.component.js +65 -65
  207. package/dist/views/landing-page/landing-page.styles.js +70 -3
  208. package/dist/views/payment-page/partials/activity-details/activity-details.styles.js +10 -33
  209. package/dist/views/payment-page/partials/billing-address/billing-address.styles.js +4 -9
  210. package/dist/views/payment-page/partials/confirmation/confirmation.styles.js +6 -6
  211. package/dist/views/payment-page/partials/hotel-pickup-list/hotel-pickup-list.styles.js +4 -4
  212. package/dist/views/payment-page/partials/payment-type-selector/payment-type-selector.styles.js +1 -0
  213. package/dist/views/payment-page/partials/stripe/stripe.component.d.ts +1 -1
  214. package/dist/views/payment-page/partials/stripe/stripe.component.js +11 -12
  215. package/dist/views/payment-page/partials/stripe/stripe.constants.d.ts +2 -15
  216. package/dist/views/payment-page/partials/stripe/stripe.constants.js +4 -17
  217. package/dist/views/payment-page/partials/stripe/stripe.styles.js +16 -23
  218. package/dist/views/payment-page/partials/stripe/stripe.utils.d.ts +25 -14
  219. package/dist/views/payment-page/partials/stripe/stripe.utils.js +111 -62
  220. package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.styles.js +1 -1
  221. package/dist/views/payment-page/payment-page.component.d.ts +1 -0
  222. package/dist/views/payment-page/payment-page.component.js +19 -9
  223. package/dist/views/payment-page/payment-page.styles.js +37 -32
  224. package/dist/views/payment-page/payment-page.utils.d.ts +7 -0
  225. package/dist/views/payment-page/payment-page.utils.js +29 -14
  226. package/dist/views/payment-page/payment-page.validators.js +9 -3
  227. package/dist/views/payment-page/services/payment-api.service.d.ts +1 -1
  228. package/dist/views/search-page/search-page.component.d.ts +1 -0
  229. package/dist/views/search-page/search-page.component.js +12 -6
  230. package/dist/views/search-page/search-page.styles.js +24 -2
  231. package/dist/views/suggestion-widget/suggestion-widget.styles.js +1 -1
  232. package/package.json +62 -75
  233. package/dist/custom-elements.json +0 -37378
  234. package/dist/sdk/meta.d.ts +0 -7
  235. package/dist/sdk/meta.js +0 -9
  236. package/dist/styles/tokens.css +0 -359
package/dist/styles/primitives.js CHANGED
@@ -1,18 +1,10 @@
1
1
  import { css } from "lit";
2
- /**
3
- * Shared CSS primitives (plan F-004, P-063). Components compose these instead
4
- * of re-authoring focus rings, screen-reader helpers, or skeleton shimmer, so
5
- * accessibility and branding stay consistent. All values resolve from the
6
- * semantic token tier.
7
- */
8
- /** Visible focus ring using the brand focus token. */
9
2
  export const focusRing = css `
10
3
  :where(:focus-visible) {
11
4
  outline: 2px solid var(--coras-color-focus-ring);
12
5
  outline-offset: 2px;
13
6
  }
14
7
  `;
15
- /** Accessible "visually hidden" helper that remains in the accessibility tree. */
16
8
  export const visuallyHidden = css `
17
9
  .coras-sr-only {
18
10
  position: absolute;
@@ -26,14 +18,13 @@ export const visuallyHidden = css `
26
18
  border: 0;
27
19
  }
28
20
  `;
29
- /** Loading skeleton shimmer; respects reduced-motion. */
30
21
  export const skeleton = css `
31
22
  .coras-skeleton {
32
23
  background: linear-gradient(
33
24
  90deg,
34
- var(--coras-color-surface-sunken) 25%,
25
+ var(--coras-color-card-sunken) 25%,
35
26
  var(--coras-palette-neutral-100) 37%,
36
- var(--coras-color-surface-sunken) 63%
27
+ var(--coras-color-card-sunken) 63%
37
28
  );
38
29
  background-size: 400% 100%;
39
30
  border-radius: var(--coras-radius-sm);
@@ -55,7 +46,6 @@ export const skeleton = css `
55
46
  }
56
47
  }
57
48
  `;
58
- /** Reset for native controls used as branded buttons/fields. */
59
49
  export const controlReset = css `
60
50
  .coras-control-reset {
61
51
  appearance: none;
package/dist/styles/tokens.d.ts CHANGED
@@ -8,7 +8,7 @@
8
8
  * light-DOM container is enough for every nested Web Component to read them.
9
9
  * `mount()` adopts this sheet into the container's document exactly once.
10
10
  */
11
- export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n@property --coras-brand-footer {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-radius: 1.5rem;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-text-button: var(--coras-brand-primary);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: transparent;\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n --coras-color-primary-500: var(--coras-brand-primary);\n --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n --coras-color-secondary-500: var(--coras-brand-secondary);\n --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n --coras-color-error-500: var(--coras-brand-error);\n --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n --coras-color-success-500: var(--coras-brand-success);\n --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n --coras-color-warning-500: var(--coras-brand-warning);\n --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n --coras-color-info-500: var(--coras-brand-info);\n --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n --coras-color-neutral-50: var(--coras-palette-neutral-50);\n --coras-color-neutral-100: var(--coras-palette-neutral-100);\n --coras-color-neutral-200: var(--coras-palette-neutral-200);\n --coras-color-neutral-300: var(--coras-palette-neutral-300);\n --coras-color-neutral-400: var(--coras-palette-neutral-400);\n --coras-color-neutral-500: var(--coras-palette-neutral-500);\n --coras-color-neutral-600: var(--coras-palette-neutral-600);\n --coras-color-neutral-700: var(--coras-palette-neutral-700);\n --coras-color-neutral-800: var(--coras-palette-neutral-800);\n --coras-color-neutral-900: var(--coras-palette-neutral-900);\n --coras-color-background: var(--coras-brand-background);\n --coras-color-surface: var(--coras-brand-surface);\n --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-palette-neutral-500);\n --coras-state-overlay: #000;\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-state-selected: 12%;\n --coras-color-action: var(--coras-brand-primary);\n --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-action-text: var(--coras-palette-white);\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-hover: var(--coras-color-action-hover);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n --coras-color-focus-ring: var(--coras-brand-primary);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-surface: var(--coras-color-error-50);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-surface: var(--coras-color-success-50);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-surface: var(--coras-color-warning-50);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-surface: var(--coras-color-info-50);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: 0.5rem;\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n --coras-width-mobile: 375px;\n --coras-width-tablet: 768px;\n --coras-width-desktop: 1024px;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-background-color: var(--coras-color-background);\n --coras-base-text-color: var(--coras-color-text);\n --coras-base-primary-background-color: var(--coras-color-text);\n --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n --coras-navbar-background: var(--coras-brand-navbar);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-footer-background-color: var(--coras-brand-footer);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-button-primary-background: var(--coras-color-action);\n --coras-button-primary-text-color: var(--coras-color-action-text);\n --coras-button-primary-background-hover: var(--coras-color-action-hover);\n --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n --coras-button-primary-background-active: var(--coras-color-action-active);\n --coras-button-primary-text-color-active: var(--coras-color-action-text);\n --coras-input-field-background-color: var(--coras-color-background);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n /* SDK-owned query container: embedded pages respond to the container width,\n never the viewport (P-062). Components query `@container coras-page`. */\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n /* The page background is opt-in: transparent by default so the embed adopts\n the host page's background, and painted only when the brand sets a\n background (the theme/override paths mirror it onto --coras-page-background,\n which is intentionally undefined here). The text colour always follows the\n brand; chrome paints its own background on top. */\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n /* The SDK-created page element is the root's only child. Make it block-level\n so it fills the container: custom elements default to `display: inline`,\n whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n The body icon colour is set here as an inherited `fill`: content icons pick\n it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n :where([data-coras-root]) > * {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
11
+ export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-link: var(--coras-brand-text-button);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-focus-ring: var(--coras-brand-primary);\n --coras-brand-scrim: var(--coras-palette-black);\n --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-menu-border: var(--coras-brand-card-border);\n --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-brand-main-button: var(--coras-brand-primary);\n --coras-brand-main-button-text: #ffffff;\n --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n --coras-brand-secondary-button: var(--coras-brand-secondary);\n --coras-brand-secondary-button-text: #ffffff;\n --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n --coras-brand-main-button-border: transparent;\n --coras-brand-secondary-button-border: transparent;\n --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-brand-button-hover-light: 20%;\n --coras-brand-button-hover-dark: 20%;\n --coras-brand-radius: 1.5rem;\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-field-radius: 0.5rem;\n --coras-brand-search-radius: 100px;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-heading-font: var(--coras-brand-font);\n --coras-brand-heading-scale: 1;\n --coras-brand-logo-height: 2rem;\n --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-footer-border: var(--coras-brand-footer-background);\n --coras-brand-footer-padding-bottom: 2rem;\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-tint: var(--coras-brand-primary-tint);\n --coras-color-secondary: var(--coras-brand-secondary);\n --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-background: var(--coras-brand-error-background);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-background: var(--coras-brand-success-background);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-background: var(--coras-brand-warning-background);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-background: var(--coras-brand-info-background);\n --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n --coras-color-background: var(--coras-brand-page-background);\n --coras-color-card: var(--coras-brand-card-background);\n --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-field: var(--coras-brand-field-background);\n --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-menu: var(--coras-brand-menu-background);\n --coras-color-menu-border: var(--coras-brand-menu-border);\n --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-brand-disabled);\n --coras-state-overlay: light-dark(#000, #fff);\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-color-main-button: var(--coras-brand-main-button);\n --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n --coras-color-main-button-text: var(--coras-brand-main-button-text);\n --coras-color-main-button-border: var(--coras-brand-main-button-border);\n --coras-color-secondary-button: var(--coras-brand-secondary-button);\n --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-link: var(--coras-brand-link);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-card-border: var(--coras-brand-card-border);\n --coras-color-divider: var(--coras-brand-divider);\n --coras-color-field-border: var(--coras-brand-field-border);\n --coras-color-footer-border: var(--coras-brand-footer-border);\n --coras-color-focus-ring: var(--coras-brand-focus-ring);\n --coras-color-scrim: var(--coras-brand-scrim);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-family-heading: var(--coras-brand-heading-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: var(--coras-brand-field-radius);\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-radius-search: var(--coras-brand-search-radius);\n --coras-shadow-sm: var(--coras-brand-soft-shadow);\n --coras-shadow-md: var(--coras-brand-button-shadow);\n --coras-shadow-lg: var(--coras-brand-card-shadow);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-text-color: var(--coras-color-text);\n --coras-navbar-background: var(--coras-brand-navbar-background);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-navbar-logo-height: var(--coras-brand-logo-height);\n --coras-footer-background-color: var(--coras-brand-footer-background);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n --coras-button-primary-background: var(--coras-color-main-button);\n --coras-button-primary-text-color: var(--coras-color-main-button-text);\n --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n --coras-button-primary-border-color: var(--coras-color-main-button-border);\n --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n --coras-input-field-background-color: var(--coras-color-field);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n :where([data-coras-root]) > *:where(:not(style)) {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
12
12
  /**
13
13
  * Ensure the token stylesheet is present in `root` (a `Document` or
14
14
  * `ShadowRoot`). Idempotent: adopting the same root twice is a no-op, and the
package/dist/styles/tokens.generated.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n@property --coras-brand-footer {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-radius: 1.5rem;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-text-button: var(--coras-brand-primary);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: transparent;\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n --coras-color-primary-500: var(--coras-brand-primary);\n --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n --coras-color-secondary-500: var(--coras-brand-secondary);\n --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n --coras-color-error-500: var(--coras-brand-error);\n --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n --coras-color-success-500: var(--coras-brand-success);\n --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n --coras-color-warning-500: var(--coras-brand-warning);\n --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n --coras-color-info-500: var(--coras-brand-info);\n --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n --coras-color-neutral-50: var(--coras-palette-neutral-50);\n --coras-color-neutral-100: var(--coras-palette-neutral-100);\n --coras-color-neutral-200: var(--coras-palette-neutral-200);\n --coras-color-neutral-300: var(--coras-palette-neutral-300);\n --coras-color-neutral-400: var(--coras-palette-neutral-400);\n --coras-color-neutral-500: var(--coras-palette-neutral-500);\n --coras-color-neutral-600: var(--coras-palette-neutral-600);\n --coras-color-neutral-700: var(--coras-palette-neutral-700);\n --coras-color-neutral-800: var(--coras-palette-neutral-800);\n --coras-color-neutral-900: var(--coras-palette-neutral-900);\n --coras-color-background: var(--coras-brand-background);\n --coras-color-surface: var(--coras-brand-surface);\n --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-palette-neutral-500);\n --coras-state-overlay: #000;\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-state-selected: 12%;\n --coras-color-action: var(--coras-brand-primary);\n --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-action-text: var(--coras-palette-white);\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-hover: var(--coras-color-action-hover);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n --coras-color-focus-ring: var(--coras-brand-primary);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-surface: var(--coras-color-error-50);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-surface: var(--coras-color-success-50);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-surface: var(--coras-color-warning-50);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-surface: var(--coras-color-info-50);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: 0.5rem;\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n --coras-width-mobile: 375px;\n --coras-width-tablet: 768px;\n --coras-width-desktop: 1024px;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-background-color: var(--coras-color-background);\n --coras-base-text-color: var(--coras-color-text);\n --coras-base-primary-background-color: var(--coras-color-text);\n --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n --coras-navbar-background: var(--coras-brand-navbar);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-footer-background-color: var(--coras-brand-footer);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-button-primary-background: var(--coras-color-action);\n --coras-button-primary-text-color: var(--coras-color-action-text);\n --coras-button-primary-background-hover: var(--coras-color-action-hover);\n --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n --coras-button-primary-background-active: var(--coras-color-action-active);\n --coras-button-primary-text-color-active: var(--coras-color-action-text);\n --coras-input-field-background-color: var(--coras-color-background);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n /* SDK-owned query container: embedded pages respond to the container width,\n never the viewport (P-062). Components query `@container coras-page`. */\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n /* The page background is opt-in: transparent by default so the embed adopts\n the host page's background, and painted only when the brand sets a\n background (the theme/override paths mirror it onto --coras-page-background,\n which is intentionally undefined here). The text colour always follows the\n brand; chrome paints its own background on top. */\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n /* The SDK-created page element is the root's only child. Make it block-level\n so it fills the container: custom elements default to `display: inline`,\n whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n The body icon colour is set here as an inherited `fill`: content icons pick\n it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n :where([data-coras-root]) > * {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
1
+ export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-link: var(--coras-brand-text-button);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-focus-ring: var(--coras-brand-primary);\n --coras-brand-scrim: var(--coras-palette-black);\n --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-menu-border: var(--coras-brand-card-border);\n --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-brand-main-button: var(--coras-brand-primary);\n --coras-brand-main-button-text: #ffffff;\n --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n --coras-brand-secondary-button: var(--coras-brand-secondary);\n --coras-brand-secondary-button-text: #ffffff;\n --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n --coras-brand-main-button-border: transparent;\n --coras-brand-secondary-button-border: transparent;\n --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-brand-button-hover-light: 20%;\n --coras-brand-button-hover-dark: 20%;\n --coras-brand-radius: 1.5rem;\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-field-radius: 0.5rem;\n --coras-brand-search-radius: 100px;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-heading-font: var(--coras-brand-font);\n --coras-brand-heading-scale: 1;\n --coras-brand-logo-height: 2rem;\n --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-footer-border: var(--coras-brand-footer-background);\n --coras-brand-footer-padding-bottom: 2rem;\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-tint: var(--coras-brand-primary-tint);\n --coras-color-secondary: var(--coras-brand-secondary);\n --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-background: var(--coras-brand-error-background);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-background: var(--coras-brand-success-background);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-background: var(--coras-brand-warning-background);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-background: var(--coras-brand-info-background);\n --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n --coras-color-background: var(--coras-brand-page-background);\n --coras-color-card: var(--coras-brand-card-background);\n --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-field: var(--coras-brand-field-background);\n --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-menu: var(--coras-brand-menu-background);\n --coras-color-menu-border: var(--coras-brand-menu-border);\n --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-brand-disabled);\n --coras-state-overlay: light-dark(#000, #fff);\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-color-main-button: var(--coras-brand-main-button);\n --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n --coras-color-main-button-text: var(--coras-brand-main-button-text);\n --coras-color-main-button-border: var(--coras-brand-main-button-border);\n --coras-color-secondary-button: var(--coras-brand-secondary-button);\n --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-link: var(--coras-brand-link);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-card-border: var(--coras-brand-card-border);\n --coras-color-divider: var(--coras-brand-divider);\n --coras-color-field-border: var(--coras-brand-field-border);\n --coras-color-footer-border: var(--coras-brand-footer-border);\n --coras-color-focus-ring: var(--coras-brand-focus-ring);\n --coras-color-scrim: var(--coras-brand-scrim);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-family-heading: var(--coras-brand-heading-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: var(--coras-brand-field-radius);\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-radius-search: var(--coras-brand-search-radius);\n --coras-shadow-sm: var(--coras-brand-soft-shadow);\n --coras-shadow-md: var(--coras-brand-button-shadow);\n --coras-shadow-lg: var(--coras-brand-card-shadow);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-text-color: var(--coras-color-text);\n --coras-navbar-background: var(--coras-brand-navbar-background);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-navbar-logo-height: var(--coras-brand-logo-height);\n --coras-footer-background-color: var(--coras-brand-footer-background);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n --coras-button-primary-background: var(--coras-color-main-button);\n --coras-button-primary-text-color: var(--coras-color-main-button-text);\n --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n --coras-button-primary-border-color: var(--coras-color-main-button-border);\n --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n --coras-input-field-background-color: var(--coras-color-field);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n :where([data-coras-root]) > *:where(:not(style)) {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
package/dist/styles/tokens.generated.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */
2
2
  /* eslint-disable */
3
3
  // CSS-first token system as a string for runtime adoption (see tokens.ts).
4
- export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n@property --coras-brand-footer {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-radius: 1.5rem;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-text-button: var(--coras-brand-primary);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: transparent;\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n --coras-color-primary-500: var(--coras-brand-primary);\n --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n --coras-color-secondary-500: var(--coras-brand-secondary);\n --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n --coras-color-error-500: var(--coras-brand-error);\n --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n --coras-color-success-500: var(--coras-brand-success);\n --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n --coras-color-warning-500: var(--coras-brand-warning);\n --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n --coras-color-info-500: var(--coras-brand-info);\n --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n --coras-color-neutral-50: var(--coras-palette-neutral-50);\n --coras-color-neutral-100: var(--coras-palette-neutral-100);\n --coras-color-neutral-200: var(--coras-palette-neutral-200);\n --coras-color-neutral-300: var(--coras-palette-neutral-300);\n --coras-color-neutral-400: var(--coras-palette-neutral-400);\n --coras-color-neutral-500: var(--coras-palette-neutral-500);\n --coras-color-neutral-600: var(--coras-palette-neutral-600);\n --coras-color-neutral-700: var(--coras-palette-neutral-700);\n --coras-color-neutral-800: var(--coras-palette-neutral-800);\n --coras-color-neutral-900: var(--coras-palette-neutral-900);\n --coras-color-background: var(--coras-brand-background);\n --coras-color-surface: var(--coras-brand-surface);\n --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-palette-neutral-500);\n --coras-state-overlay: #000;\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-state-selected: 12%;\n --coras-color-action: var(--coras-brand-primary);\n --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-action-text: var(--coras-palette-white);\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-hover: var(--coras-color-action-hover);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n --coras-color-focus-ring: var(--coras-brand-primary);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-surface: var(--coras-color-error-50);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-surface: var(--coras-color-success-50);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-surface: var(--coras-color-warning-50);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-surface: var(--coras-color-info-50);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: 0.5rem;\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n --coras-width-mobile: 375px;\n --coras-width-tablet: 768px;\n --coras-width-desktop: 1024px;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-background-color: var(--coras-color-background);\n --coras-base-text-color: var(--coras-color-text);\n --coras-base-primary-background-color: var(--coras-color-text);\n --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n --coras-navbar-background: var(--coras-brand-navbar);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-footer-background-color: var(--coras-brand-footer);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-button-primary-background: var(--coras-color-action);\n --coras-button-primary-text-color: var(--coras-color-action-text);\n --coras-button-primary-background-hover: var(--coras-color-action-hover);\n --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n --coras-button-primary-background-active: var(--coras-color-action-active);\n --coras-button-primary-text-color-active: var(--coras-color-action-text);\n --coras-input-field-background-color: var(--coras-color-background);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n /* SDK-owned query container: embedded pages respond to the container width,\n never the viewport (P-062). Components query `@container coras-page`. */\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n /* The page background is opt-in: transparent by default so the embed adopts\n the host page's background, and painted only when the brand sets a\n background (the theme/override paths mirror it onto --coras-page-background,\n which is intentionally undefined here). The text colour always follows the\n brand; chrome paints its own background on top. */\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n /* The SDK-created page element is the root's only child. Make it block-level\n so it fills the container: custom elements default to `display: inline`,\n whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n The body icon colour is set here as an inherited `fill`: content icons pick\n it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n :where([data-coras-root]) > * {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
4
+ export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #000000;\n}\n@property --coras-brand-error {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #c9224a;\n}\n@property --coras-brand-success {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n syntax: \"<color>\";\n inherits: true;\n initial-value: #670c93;\n}\n\n@layer coras.palette {\n :where([data-coras-root], .coras-theme) {\n --coras-palette-primary-50: #fcfcff;\n --coras-palette-primary-100: #fbfbff;\n --coras-palette-primary-200: #eef0ff;\n --coras-palette-primary-300: #dde1ff;\n --coras-palette-primary-400: #5468ff;\n --coras-palette-primary-500: #4657d4;\n --coras-palette-primary-700: #323e99;\n --coras-palette-secondary-50: #e8e8ec;\n --coras-palette-secondary-100: #d0d2da;\n --coras-palette-secondary-200: #b9bbc7;\n --coras-palette-secondary-300: #a2a4b4;\n --coras-palette-secondary-400: #1c2355;\n --coras-palette-secondary-500: #161c44;\n --coras-palette-secondary-700: #121636;\n --coras-palette-neutral-50: #f5f5f5;\n --coras-palette-neutral-100: #eeeeee;\n --coras-palette-neutral-200: #e6e6e6;\n --coras-palette-neutral-300: #dddddd;\n --coras-palette-neutral-400: #cccccc;\n --coras-palette-neutral-500: #aaaaaa;\n --coras-palette-neutral-600: #888888;\n --coras-palette-neutral-700: #666666;\n --coras-palette-neutral-800: #444444;\n --coras-palette-neutral-900: #292929;\n --coras-palette-error-50: #fae9ed;\n --coras-palette-error-500: #c9224a;\n --coras-palette-error-700: #a11b3b;\n --coras-palette-error-900: #79142c;\n --coras-palette-info-50: #f0e7f4;\n --coras-palette-info-500: #670c93;\n --coras-palette-info-700: #520a76;\n --coras-palette-info-900: #3e0758;\n --coras-palette-success-50: #e6f7f4;\n --coras-palette-success-500: #00ad8f;\n --coras-palette-success-700: #008a72;\n --coras-palette-success-900: #006856;\n --coras-palette-warning-50: #fdf4e8;\n --coras-palette-warning-500: #ed8f1c;\n --coras-palette-warning-700: #be7216;\n --coras-palette-warning-900: #8e5611;\n --coras-palette-pink-500: #ff2d55;\n --coras-palette-black: #000000;\n --coras-palette-white: #ffffff;\n }\n}\n\n@layer coras.brand {\n :where([data-coras-root], .coras-theme) {\n color-scheme: light;\n --coras-brand-primary: var(--coras-palette-primary-500);\n --coras-brand-secondary: var(--coras-palette-secondary-500);\n --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n --coras-brand-link: var(--coras-brand-text-button);\n --coras-brand-body-icon: var(--coras-brand-text);\n --coras-brand-focus-ring: var(--coras-brand-primary);\n --coras-brand-scrim: var(--coras-palette-black);\n --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n --coras-brand-menu-border: var(--coras-brand-card-border);\n --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n --coras-brand-main-button: var(--coras-brand-primary);\n --coras-brand-main-button-text: #ffffff;\n --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n --coras-brand-secondary-button: var(--coras-brand-secondary);\n --coras-brand-secondary-button-text: #ffffff;\n --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n --coras-brand-main-button-border: transparent;\n --coras-brand-secondary-button-border: transparent;\n --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n --coras-brand-button-hover-light: 20%;\n --coras-brand-button-hover-dark: 20%;\n --coras-brand-radius: 1.5rem;\n --coras-brand-button-radius: var(--coras-brand-radius);\n --coras-brand-chip-radius: var(--coras-brand-radius);\n --coras-brand-field-radius: 0.5rem;\n --coras-brand-search-radius: 100px;\n --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --coras-brand-heading-font: var(--coras-brand-font);\n --coras-brand-heading-scale: 1;\n --coras-brand-logo-height: 2rem;\n --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n --coras-brand-footer-link: var(--coras-brand-footer-text);\n --coras-brand-footer-border: var(--coras-brand-footer-background);\n --coras-brand-footer-padding-bottom: 2rem;\n --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n }\n}\n\n@layer coras.semantic {\n :where([data-coras-root], .coras-theme) {\n --coras-color-primary: var(--coras-brand-primary);\n --coras-color-primary-tint: var(--coras-brand-primary-tint);\n --coras-color-secondary: var(--coras-brand-secondary);\n --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n --coras-color-error: var(--coras-brand-error);\n --coras-color-error-background: var(--coras-brand-error-background);\n --coras-color-success: var(--coras-brand-success);\n --coras-color-success-background: var(--coras-brand-success-background);\n --coras-color-warning: var(--coras-brand-warning);\n --coras-color-warning-background: var(--coras-brand-warning-background);\n --coras-color-info: var(--coras-brand-info);\n --coras-color-info-background: var(--coras-brand-info-background);\n --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n --coras-color-background: var(--coras-brand-page-background);\n --coras-color-card: var(--coras-brand-card-background);\n --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n --coras-color-field: var(--coras-brand-field-background);\n --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-menu: var(--coras-brand-menu-background);\n --coras-color-menu-border: var(--coras-brand-menu-border);\n --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n --coras-color-text: var(--coras-brand-text);\n --coras-color-text-primary: var(--coras-brand-text);\n --coras-color-text-muted: var(--coras-brand-text-muted);\n --coras-color-text-disabled: var(--coras-brand-disabled);\n --coras-state-overlay: light-dark(#000, #fff);\n --coras-state-hover: 10%;\n --coras-state-active: 18%;\n --coras-color-main-button: var(--coras-brand-main-button);\n --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n --coras-color-main-button-text: var(--coras-brand-main-button-text);\n --coras-color-main-button-border: var(--coras-brand-main-button-border);\n --coras-color-secondary-button: var(--coras-brand-secondary-button);\n --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n --coras-color-text-button: var(--coras-brand-text-button);\n --coras-color-link: var(--coras-brand-link);\n --coras-color-icon: var(--coras-brand-body-icon);\n --coras-color-card-border: var(--coras-brand-card-border);\n --coras-color-divider: var(--coras-brand-divider);\n --coras-color-field-border: var(--coras-brand-field-border);\n --coras-color-footer-border: var(--coras-brand-footer-border);\n --coras-color-focus-ring: var(--coras-brand-focus-ring);\n --coras-color-scrim: var(--coras-brand-scrim);\n --coras-font-family-sans: var(--coras-brand-font);\n --coras-font-family-heading: var(--coras-brand-heading-font);\n --coras-font-size-xxs: 0.625rem;\n --coras-font-size-xs: 0.75rem;\n --coras-font-size-sm: 0.875rem;\n --coras-font-size-base: 1rem;\n --coras-font-size-lg: 1.125rem;\n --coras-font-size-xl: 1.25rem;\n --coras-font-size-2xl: 1.5rem;\n --coras-font-size-3xl: 2.25rem;\n --coras-font-size-4xl: 3rem;\n --coras-font-size-5xl: 3.5rem;\n --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n --coras-font-weight-light: 300;\n --coras-font-weight-normal: 400;\n --coras-font-weight-medium: 500;\n --coras-font-weight-semibold: 600;\n --coras-font-weight-bold: 700;\n --coras-radius-none: 0;\n --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n --coras-radius-lg: var(--coras-brand-radius);\n --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n --coras-radius-full: 9999px;\n --coras-radius-control: 0.25rem;\n --coras-radius-field: var(--coras-brand-field-radius);\n --coras-radius-button: var(--coras-brand-button-radius);\n --coras-radius-chip: var(--coras-brand-chip-radius);\n --coras-radius-search: var(--coras-brand-search-radius);\n --coras-shadow-sm: var(--coras-brand-soft-shadow);\n --coras-shadow-md: var(--coras-brand-button-shadow);\n --coras-shadow-lg: var(--coras-brand-card-shadow);\n --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n --coras-page-max-width: 950px;\n --coras-container-max-width: 1368px;\n --coras-footer-max-width: 1073px;\n --coras-z-index-overlay: 1000;\n --coras-navbar-padding: 1rem;\n --coras-content-padding: 0 1rem;\n --coras-footer-padding: 4rem 2rem;\n }\n}\n\n@layer coras.components {\n :where([data-coras-root], .coras-theme) {\n --coras-base-text-color: var(--coras-color-text);\n --coras-navbar-background: var(--coras-brand-navbar-background);\n --coras-navbar-text-color: var(--coras-brand-navbar-text);\n --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n --coras-navbar-logo-height: var(--coras-brand-logo-height);\n --coras-footer-background-color: var(--coras-brand-footer-background);\n --coras-footer-text-color: var(--coras-brand-footer-text);\n --coras-footer-link-color: var(--coras-brand-footer-link);\n --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n --coras-button-primary-background: var(--coras-color-main-button);\n --coras-button-primary-text-color: var(--coras-color-main-button-text);\n --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n --coras-button-primary-border-color: var(--coras-color-main-button-border);\n --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n --coras-input-field-background-color: var(--coras-color-field);\n --coras-basket-accent-color: var(--coras-brand-secondary);\n }\n}\n\n@layer coras.components {\n :where([data-coras-root]) {\n container: coras-page / inline-size;\n max-width: 100%;\n background-color: var(--coras-page-background, transparent);\n color: var(--coras-base-text-color);\n }\n :where([data-coras-root]) > *:where(:not(style)) {\n display: block;\n fill: var(--coras-color-icon);\n }\n}\n";
package/dist/styles/tokens.metadata.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type TokenControlType = "color" | "length" | "font";
1
+ export type TokenControlType = "color" | "length" | "font" | "shadow" | "scale";
2
2
  export type TokenControl = {
3
3
  /** Matches the corresponding `CorasTheme` key. */
4
4
  key: string;