@birdapi/velinstyle 0.8.0 → 0.9.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 (313) hide show
  1. package/README.de.md +135 -246
  2. package/README.md +134 -245
  3. package/cli/blueprints/onboarding.html +2 -2
  4. package/cli/cli-manifest.json +97 -0
  5. package/cli/docgen/extract-a11y.js +89 -0
  6. package/cli/docgen/extract-attributes.js +95 -0
  7. package/cli/docgen/extract-cli.js +50 -0
  8. package/cli/docgen/extract-components.js +175 -0
  9. package/cli/docgen/extract-meta.js +32 -0
  10. package/cli/docgen/extract-rules.js +76 -0
  11. package/cli/docgen/extract-tokens.js +79 -0
  12. package/cli/docgen/extract-utilities.js +75 -0
  13. package/cli/docgen/markdown.js +43 -0
  14. package/cli/docs-generate.js +196 -0
  15. package/cli/index.js +121 -5
  16. package/cli/meta.js +97 -0
  17. package/cli/perf-audit.js +174 -0
  18. package/cli/pii-scanner.js +134 -0
  19. package/cli/scanner-rules-data.js +62 -0
  20. package/cli/scanner.js +68 -1
  21. package/cli/search-index.js +163 -0
  22. package/cli/tokens-build.js +21 -1
  23. package/cli/tokens-validate.js +69 -0
  24. package/components/a11y-entry.js +42 -0
  25. package/components/a11y-utils.js +71 -0
  26. package/components/focus-manager.js +45 -8
  27. package/components/index.js +22 -12
  28. package/components/runtime/component-loaders.js +43 -0
  29. package/components/runtime/index.js +77 -0
  30. package/components/runtime-entry.js +10 -0
  31. package/components/sanitize.js +135 -54
  32. package/components/velin-accordion.js +12 -0
  33. package/components/velin-bottom-nav.js +19 -0
  34. package/components/velin-carousel.js +2 -2
  35. package/components/velin-code-block.js +142 -0
  36. package/components/velin-command.js +15 -0
  37. package/components/velin-copy.js +18 -5
  38. package/components/velin-counter.js +3 -0
  39. package/components/velin-dialog.js +9 -1
  40. package/components/velin-email.js +94 -0
  41. package/components/velin-icon.js +65 -22
  42. package/components/velin-lightbox.js +8 -3
  43. package/components/velin-live-dot.js +5 -0
  44. package/components/velin-modal.js +6 -3
  45. package/components/velin-popover.js +34 -2
  46. package/components/velin-reveal.js +7 -65
  47. package/components/velin-scroll-top.js +1 -1
  48. package/components/velin-search.js +267 -0
  49. package/components/velin-secure-field.js +99 -0
  50. package/components/velin-sparkline.js +27 -7
  51. package/components/{velin-stepper-wc.js → velin-stepper.js} +37 -8
  52. package/components/velin-theme-toggle.js +12 -5
  53. package/components/velin-toast.js +4 -0
  54. package/components/{velin-tooltip-wc.js → velin-tooltip.js} +22 -3
  55. package/core/a11y/component-contracts.json +221 -0
  56. package/core/attributes/index.js +6 -0
  57. package/core/attributes/registry.js +268 -0
  58. package/core/highlight/highlight.js +114 -0
  59. package/core/highlight/index.js +29 -0
  60. package/core/highlight/languages/_utils.js +52 -0
  61. package/core/highlight/languages/blade.js +16 -0
  62. package/core/highlight/languages/css.js +26 -0
  63. package/core/highlight/languages/html.js +17 -0
  64. package/core/highlight/languages/js.js +58 -0
  65. package/core/highlight/languages/json.js +14 -0
  66. package/core/highlight/languages/markdown.js +16 -0
  67. package/core/highlight/languages/php.js +39 -0
  68. package/core/highlight/languages/plain.js +7 -0
  69. package/core/highlight/languages/shell.js +33 -0
  70. package/core/highlight/languages/sql.js +20 -0
  71. package/core/highlight/languages/typescript.js +28 -0
  72. package/core/highlight/observe.js +53 -0
  73. package/core/highlight/registry.js +107 -0
  74. package/core/highlight/render.js +35 -0
  75. package/core/highlight/types.js +28 -0
  76. package/core/meta/build.js +293 -0
  77. package/core/meta/index.js +17 -0
  78. package/core/meta/schema.js +49 -0
  79. package/core/motion/effects.js +54 -0
  80. package/core/motion/index.js +76 -0
  81. package/core/motion/scheduler.js +72 -0
  82. package/core/motion/scroll.js +32 -0
  83. package/core/motion/stagger.js +24 -0
  84. package/core/search/docs-url.js +96 -0
  85. package/core/search/engine.js +139 -0
  86. package/core/search/highlight.js +48 -0
  87. package/core/search/index.js +126 -0
  88. package/core/search/providers.js +36 -0
  89. package/core/search/types.js +61 -0
  90. package/core/search/worker-client.js +56 -0
  91. package/core/search/worker.js +20 -0
  92. package/dist/chunks/a11y-utils-IRC7LOPF.js +16 -0
  93. package/dist/chunks/attributes-3BZLI7XF.js +364 -0
  94. package/dist/chunks/attributes-4N5JP4CG.js +364 -0
  95. package/dist/chunks/attributes-5Q2WXGRC.js +374 -0
  96. package/dist/chunks/attributes-AIR7SVLK.js +364 -0
  97. package/dist/chunks/attributes-BGRN5XZO.js +364 -0
  98. package/dist/chunks/attributes-BVSQAYLR.js +364 -0
  99. package/dist/chunks/attributes-CDYFUY7Y.js +364 -0
  100. package/dist/chunks/attributes-JMYJZBPE.js +364 -0
  101. package/dist/chunks/attributes-R5JY3X4O.js +374 -0
  102. package/dist/chunks/attributes-STYCS3O5.js +391 -0
  103. package/dist/chunks/attributes-TNSPQTHX.js +374 -0
  104. package/dist/chunks/attributes-TPANLMLF.js +391 -0
  105. package/dist/chunks/blade-LIQLVKZQ.js +19 -0
  106. package/dist/chunks/browser-MRKYZPEH.js +1149 -0
  107. package/dist/chunks/chunk-2354NEBP.js +109 -0
  108. package/dist/chunks/chunk-2VNA7G7S.js +109 -0
  109. package/dist/chunks/chunk-42VVPW6N.js +132 -0
  110. package/dist/chunks/chunk-7FFAMRFV.js +44 -0
  111. package/dist/chunks/chunk-7MCGPHVC.js +69 -0
  112. package/dist/chunks/chunk-AQLRJSGG.js +109 -0
  113. package/dist/chunks/chunk-EWPSDMQT.js +109 -0
  114. package/dist/chunks/chunk-F7OLHTGX.js +22 -0
  115. package/dist/chunks/chunk-J472ERN2.js +242 -0
  116. package/dist/chunks/chunk-LA7264K4.js +85 -0
  117. package/dist/chunks/chunk-M5CHQVP6.js +61 -0
  118. package/dist/chunks/chunk-MKZP2TBH.js +89 -0
  119. package/dist/chunks/chunk-QTJJ3DPO.js +109 -0
  120. package/dist/chunks/chunk-RDE3QE7Z.js +89 -0
  121. package/dist/chunks/chunk-RSMRR27R.js +109 -0
  122. package/dist/chunks/chunk-RZQVWFHW.js +109 -0
  123. package/dist/chunks/chunk-SRL6EWHP.js +109 -0
  124. package/dist/chunks/chunk-U4XHMZ7D.js +109 -0
  125. package/dist/chunks/chunk-V5YIUA6G.js +109 -0
  126. package/dist/chunks/chunk-XIET2VSZ.js +109 -0
  127. package/dist/chunks/chunk-XYLJ2GCB.js +205 -0
  128. package/dist/chunks/chunk-Z4JYQ2XX.js +51 -0
  129. package/dist/chunks/chunk-ZPSPKUYD.js +109 -0
  130. package/dist/chunks/css-MQ5YU77P.js +28 -0
  131. package/dist/chunks/highlight-GJHHV4KM.js +37 -0
  132. package/dist/chunks/highlight-XTHRKBA3.js +37 -0
  133. package/dist/chunks/html-ZODC4DLQ.js +20 -0
  134. package/dist/chunks/js-MNSNYTJU.js +7 -0
  135. package/dist/chunks/json-VEM2HFH3.js +17 -0
  136. package/dist/chunks/markdown-E7OPGS3S.js +19 -0
  137. package/dist/chunks/php-MLL7T3LT.js +41 -0
  138. package/dist/chunks/plain-LJJDC5TN.js +8 -0
  139. package/dist/chunks/runtime-entry.js +14 -0
  140. package/dist/chunks/shell-QTRK4U4E.js +35 -0
  141. package/dist/chunks/sql-PPWLHGJ2.js +23 -0
  142. package/dist/chunks/typescript-JT3CCYWL.js +30 -0
  143. package/dist/chunks/velin-accordion-FBIPAEXG.js +105 -0
  144. package/dist/chunks/velin-accordion-QAQO7BI7.js +117 -0
  145. package/dist/chunks/velin-announcer-PVTXXCWR.js +33 -0
  146. package/dist/chunks/velin-bottom-nav-2N2TYWOF.js +86 -0
  147. package/dist/chunks/velin-bottom-nav-7GEMPIM6.js +86 -0
  148. package/dist/chunks/velin-bottom-nav-CTU6FFZV.js +101 -0
  149. package/dist/chunks/velin-bottom-nav-N3DFQR66.js +86 -0
  150. package/dist/chunks/velin-carousel-Y5VCOABZ.js +213 -0
  151. package/dist/chunks/velin-carousel-ZTBANFQQ.js +213 -0
  152. package/dist/chunks/velin-code-block-ASUBTAQV.js +119 -0
  153. package/dist/chunks/velin-code-block-CIAURDRJ.js +132 -0
  154. package/dist/chunks/velin-code-block-TSUKPY4C.js +123 -0
  155. package/dist/chunks/velin-code-block-Y6CM726Q.js +119 -0
  156. package/dist/chunks/velin-collapse-5XYBUIID.js +80 -0
  157. package/dist/chunks/velin-combobox-2KDTCQ7N.js +155 -0
  158. package/dist/chunks/velin-combobox-NXS4QB4R.js +155 -0
  159. package/dist/chunks/velin-combobox-UGA56HP3.js +155 -0
  160. package/dist/chunks/velin-command-CKDNO4BW.js +148 -0
  161. package/dist/chunks/velin-command-M7RNHUPR.js +136 -0
  162. package/dist/chunks/velin-command-ONKO2A3J.js +136 -0
  163. package/dist/chunks/velin-command-TMLSRGIU.js +136 -0
  164. package/dist/chunks/velin-copy-G2TZ5YBB.js +81 -0
  165. package/dist/chunks/velin-copy-NYDBOKXT.js +81 -0
  166. package/dist/chunks/velin-copy-T5KDTDXP.js +81 -0
  167. package/dist/chunks/velin-countdown-4ZVDGK4R.js +101 -0
  168. package/dist/chunks/velin-countdown-5XSTN3BH.js +101 -0
  169. package/dist/chunks/velin-countdown-7AIY66CU.js +101 -0
  170. package/dist/chunks/velin-counter-ISCTEAHI.js +118 -0
  171. package/dist/chunks/velin-counter-L5FYJF7A.js +121 -0
  172. package/dist/chunks/velin-dialog-D2GUHSCD.js +144 -0
  173. package/dist/chunks/velin-dialog-ELFOZIXZ.js +152 -0
  174. package/dist/chunks/velin-dialog-GTTZI564.js +147 -0
  175. package/dist/chunks/velin-dialog-IJLFDXAJ.js +144 -0
  176. package/dist/chunks/velin-dialog-TNS3WXMB.js +144 -0
  177. package/dist/chunks/velin-drawer-BE6TYN3H.js +130 -0
  178. package/dist/chunks/velin-drawer-DLL2GLT6.js +130 -0
  179. package/dist/chunks/velin-drawer-MJS6WCF7.js +130 -0
  180. package/dist/chunks/velin-dropdown-PLUIFA5M.js +172 -0
  181. package/dist/chunks/velin-email-N5B5ZYTE.js +90 -0
  182. package/dist/chunks/velin-email-NTM6DG3V.js +90 -0
  183. package/dist/chunks/velin-email-RBX6ZR4S.js +90 -0
  184. package/dist/chunks/velin-haptic-4QQTM3RK.js +50 -0
  185. package/dist/chunks/velin-icon-7M76DOPB.js +164 -0
  186. package/dist/chunks/velin-icon-KZO3IEHG.js +164 -0
  187. package/dist/chunks/velin-icon-WTFPG2DD.js +191 -0
  188. package/dist/chunks/velin-icon-ZTSKUOVN.js +193 -0
  189. package/dist/chunks/velin-lightbox-6E7CAATP.js +149 -0
  190. package/dist/chunks/velin-lightbox-I75U6JF4.js +140 -0
  191. package/dist/chunks/velin-lightbox-QOTB4PRL.js +140 -0
  192. package/dist/chunks/velin-lightbox-UCD6N7HF.js +140 -0
  193. package/dist/chunks/velin-live-dot-RJHX2DGY.js +74 -0
  194. package/dist/chunks/velin-live-dot-XHUZCIDZ.js +67 -0
  195. package/dist/chunks/velin-menubar-I426AED2.js +86 -0
  196. package/dist/chunks/velin-menubar-J66JXRWW.js +86 -0
  197. package/dist/chunks/velin-menubar-SFEXJE56.js +86 -0
  198. package/dist/chunks/velin-modal-2HOBXE6F.js +176 -0
  199. package/dist/chunks/velin-modal-5HYNNNUI.js +176 -0
  200. package/dist/chunks/velin-modal-AEOTZ67O.js +177 -0
  201. package/dist/chunks/velin-modal-GLI2XZZB.js +176 -0
  202. package/dist/chunks/velin-persist-DFPL3QP4.js +110 -0
  203. package/dist/chunks/velin-popover-EXINRIGJ.js +145 -0
  204. package/dist/chunks/velin-popover-HQW6Q2Y6.js +172 -0
  205. package/dist/chunks/velin-popover-OXX7MRZ6.js +145 -0
  206. package/dist/chunks/velin-popover-T72HK3DF.js +151 -0
  207. package/dist/chunks/velin-popover-YKCCROJG.js +145 -0
  208. package/dist/chunks/velin-progress-ring-E4YRLZHH.js +66 -0
  209. package/dist/chunks/velin-rating-6CDBI6DG.js +91 -0
  210. package/dist/chunks/velin-rating-N4DI2XNL.js +91 -0
  211. package/dist/chunks/velin-rating-XRQJV4LO.js +91 -0
  212. package/dist/chunks/velin-scroll-top-F2FCZNYD.js +58 -0
  213. package/dist/chunks/velin-scroll-top-OHYVVHHY.js +58 -0
  214. package/dist/chunks/velin-scrollspy-OKCT4FDV.js +50 -0
  215. package/dist/chunks/velin-search-2XRQFBCS.js +556 -0
  216. package/dist/chunks/velin-search-4YHJWYSS.js +556 -0
  217. package/dist/chunks/velin-search-7B4KJ6TX.js +557 -0
  218. package/dist/chunks/velin-search-LWHY23Q5.js +474 -0
  219. package/dist/chunks/velin-secure-field-6PV7RZDJ.js +95 -0
  220. package/dist/chunks/velin-secure-field-H7FSBUJW.js +95 -0
  221. package/dist/chunks/velin-secure-field-OFNAXCDP.js +95 -0
  222. package/dist/chunks/velin-segmented-control-EKL4E3BL.js +109 -0
  223. package/dist/chunks/velin-segmented-control-GYD5BIXQ.js +109 -0
  224. package/dist/chunks/velin-segmented-control-PQX6LKOJ.js +109 -0
  225. package/dist/chunks/velin-sheet-3OGI4HD7.js +119 -0
  226. package/dist/chunks/velin-sheet-OUK6572T.js +119 -0
  227. package/dist/chunks/velin-sheet-R2Y67X6H.js +119 -0
  228. package/dist/chunks/velin-sparkline-GVEANJVW.js +184 -0
  229. package/dist/chunks/velin-sparkline-KDA3GQAN.js +162 -0
  230. package/dist/chunks/velin-sparkline-XVTFC6GE.js +181 -0
  231. package/dist/chunks/velin-stepper-2ZIHLKGM.js +141 -0
  232. package/dist/chunks/velin-stepper-7ECRUYHD.js +148 -0
  233. package/dist/chunks/velin-stepper-FYEUEWE6.js +141 -0
  234. package/dist/chunks/velin-stepper-X54WGHDG.js +141 -0
  235. package/dist/chunks/velin-stepper-wc-QU3KRVQR.js +133 -0
  236. package/dist/chunks/velin-tabs-5UQ5ZVMV.js +138 -0
  237. package/dist/chunks/velin-theme-toggle-32J2CBNC.js +291 -0
  238. package/dist/chunks/velin-theme-toggle-BNNS7WLV.js +285 -0
  239. package/dist/chunks/velin-theme-toggle-NO7V4TWI.js +285 -0
  240. package/dist/chunks/velin-theme-toggle-QELCJM2Q.js +291 -0
  241. package/dist/chunks/velin-toast-OMMOA2DK.js +109 -0
  242. package/dist/chunks/velin-toast-RCZ4CSUC.js +109 -0
  243. package/dist/chunks/velin-toast-RSF2IHT3.js +113 -0
  244. package/dist/chunks/velin-toast-WEUBTJG6.js +109 -0
  245. package/dist/chunks/velin-tooltip-664IOHZA.js +112 -0
  246. package/dist/chunks/velin-tooltip-BDHGRTQB.js +112 -0
  247. package/dist/chunks/velin-tooltip-HVUOKNVX.js +112 -0
  248. package/dist/chunks/velin-tooltip-wc-LXDVT6DE.js +103 -0
  249. package/dist/chunks/worker-client-R6DBYPFT.js +46 -0
  250. package/dist/llms.test.txt +40 -0
  251. package/dist/llms.txt +40 -0
  252. package/dist/search-index.json +1773 -0
  253. package/dist/search-index.test.json +1773 -0
  254. package/dist/themes/brutalist.min.css +1 -1
  255. package/dist/themes/midnight.min.css +1 -1
  256. package/dist/themes/pastel.min.css +1 -1
  257. package/dist/themes/retro.min.css +1 -1
  258. package/dist/themes/sunset.min.css +1 -1
  259. package/dist/velin-agent.json +684 -0
  260. package/dist/velin-agent.test.json +684 -0
  261. package/dist/velinstyle-components.iife.js +7715 -3515
  262. package/dist/velinstyle-components.js +7087 -2859
  263. package/dist/velinstyle-components.min.js +196 -109
  264. package/dist/velinstyle.css +604 -65
  265. package/dist/velinstyle.d.ts +54 -0
  266. package/dist/velinstyle.min.css +1 -1
  267. package/examples/search-index.schema.json +33 -0
  268. package/package.json +56 -10
  269. package/src/a11y/authentication.css +37 -0
  270. package/src/a11y/consistent-help.css +22 -0
  271. package/src/a11y/dragging-alternatives.css +30 -0
  272. package/src/a11y/focus-appearance.css +20 -0
  273. package/src/a11y/high-contrast-aaa.css +16 -26
  274. package/src/a11y/skip-link.css +3 -1
  275. package/src/a11y/sr-only.css +1 -1
  276. package/src/base/reset.css +0 -36
  277. package/src/base/wc-placeholder.css +102 -0
  278. package/src/components/attributes.css +42 -0
  279. package/src/components/highlight.css +182 -0
  280. package/src/components/input-group.css +1 -2
  281. package/src/components/nav.css +2 -3
  282. package/src/components/search.css +95 -0
  283. package/src/components/stepper.css +2 -4
  284. package/src/components/timeline.css +1 -2
  285. package/src/components/tooltip.css +2 -4
  286. package/src/layout/container.css +5 -5
  287. package/src/layout/grid.css +8 -8
  288. package/src/layout/patterns.css +5 -5
  289. package/src/themes/brutalist.css +2 -11
  290. package/src/themes/corporate.css +0 -9
  291. package/src/themes/earth.css +0 -9
  292. package/src/themes/forest.css +0 -9
  293. package/src/themes/midnight.css +1 -10
  294. package/src/themes/neon.css +0 -9
  295. package/src/themes/nordic.css +0 -9
  296. package/src/themes/ocean.css +0 -9
  297. package/src/themes/pastel.css +1 -10
  298. package/src/themes/retro.css +2 -11
  299. package/src/themes/sharp.css +0 -7
  300. package/src/themes/soft.css +0 -7
  301. package/src/themes/sunset.css +1 -10
  302. package/src/tokens/color.css +45 -46
  303. package/src/tokens/fonts.css +10 -0
  304. package/src/tokens/typography.css +4 -5
  305. package/src/utilities/animation.css +2 -2
  306. package/src/utilities/display.css +3 -3
  307. package/src/utilities/divide.css +2 -6
  308. package/src/utilities/responsive.css +4 -4
  309. package/src/utilities/safe-area.css +1 -1
  310. package/src/utilities/scroll-animation.css +34 -0
  311. package/src/utilities/spacing.css +17 -8
  312. package/src/utilities/text.css +4 -1
  313. package/src/velinstyle.css +9 -0
package/src/themes/midnight.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 1rem;
12
12
  --velin-radius-full: 9999px;
13
13
  --velin-radius-pill: 9999px;
14
-
15
- --velin-color-primary: oklch(65% 0.2 290);
14
+ --velin-color-primary: oklch(48% 0.18 290);
16
15
  --velin-color-primary-hover: oklch(70% 0.22 290);
17
16
  --velin-color-primary-active: oklch(58% 0.18 290);
18
17
  --velin-color-primary-subtle: oklch(20% 0.06 290);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(55% 0.15 260);
22
20
  --velin-color-secondary-hover: oklch(60% 0.17 260);
23
21
  --velin-color-secondary-subtle: oklch(18% 0.05 260);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(12% 0.02 280);
27
24
  --velin-color-surface-dim: oklch(8% 0.02 280);
28
25
  --velin-color-surface-bright: oklch(18% 0.025 280);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(60% 0.02 270);
31
28
  --velin-color-border: oklch(25% 0.03 280);
32
29
  --velin-color-border-strong: oklch(40% 0.05 280);
33
-
34
30
  --velin-shadow-sm: 0 1px 4px oklch(10% 0.03 290 / 0.3);
35
31
  --velin-shadow-md: 0 3px 10px oklch(10% 0.03 290 / 0.35), 0 0 6px oklch(65% 0.2 290 / 0.08);
36
32
  --velin-shadow-lg: 0 6px 20px oklch(10% 0.03 290 / 0.4), 0 0 10px oklch(65% 0.2 290 / 0.1);
37
33
  --velin-shadow-xl: 0 10px 30px oklch(10% 0.03 290 / 0.45), 0 0 15px oklch(65% 0.2 290 / 0.12);
38
34
  --velin-shadow-2xl: 0 16px 44px oklch(10% 0.03 290 / 0.5), 0 0 20px oklch(65% 0.2 290 / 0.15);
39
-
40
35
  --velin-font-heading: "Inter", system-ui, sans-serif;
41
36
  --velin-font-body: "Inter", system-ui, sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 800;
48
-
49
42
  --velin-tracking-normal: -0.01em;
50
43
  --velin-tracking-wide: 0.02em;
51
44
  --velin-tracking-wider: 0.05em;
52
-
53
45
  --velin-leading-tight: 1.2;
54
46
  --velin-leading-normal: 1.55;
55
-
56
47
  --velin-duration-normal: 200ms;
57
48
  --velin-duration-slow: 300ms;
58
49
  }
package/src/themes/neon.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 0;
12
12
  --velin-radius-full: 0;
13
13
  --velin-radius-pill: 0;
14
-
15
14
  --velin-color-primary: oklch(80% 0.2 195);
16
15
  --velin-color-primary-hover: oklch(85% 0.22 195);
17
16
  --velin-color-primary-active: oklch(75% 0.18 195);
18
17
  --velin-color-primary-subtle: oklch(25% 0.06 195);
19
18
  --velin-color-on-primary: oklch(5% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(70% 0.25 330);
22
20
  --velin-color-secondary-hover: oklch(75% 0.27 330);
23
21
  --velin-color-secondary-subtle: oklch(22% 0.07 330);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(8% 0.005 280);
27
24
  --velin-color-surface-dim: oklch(5% 0.005 280);
28
25
  --velin-color-surface-bright: oklch(15% 0.01 280);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(65% 0.02 195);
31
28
  --velin-color-border: oklch(80% 0.2 195 / 0.6);
32
29
  --velin-color-border-strong: oklch(80% 0.2 195);
33
-
34
30
  --velin-shadow-sm: 0 0 6px oklch(80% 0.2 195 / 0.4);
35
31
  --velin-shadow-md: 0 0 10px oklch(80% 0.2 195 / 0.5);
36
32
  --velin-shadow-lg: 0 0 20px oklch(80% 0.2 195 / 0.5);
37
33
  --velin-shadow-xl: 0 0 30px oklch(80% 0.2 195 / 0.5), 0 0 10px oklch(70% 0.25 330 / 0.3);
38
34
  --velin-shadow-2xl: 0 0 40px oklch(80% 0.2 195 / 0.6), 0 0 15px oklch(70% 0.25 330 / 0.4);
39
-
40
35
  --velin-font-heading: "JetBrains Mono", "Fira Code", monospace;
41
36
  --velin-font-body: "JetBrains Mono", "Fira Code", monospace;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 800;
48
-
49
42
  --velin-tracking-normal: 0.02em;
50
43
  --velin-tracking-wide: 0.08em;
51
44
  --velin-tracking-wider: 0.14em;
52
-
53
45
  --velin-leading-tight: 1.2;
54
46
  --velin-leading-normal: 1.5;
55
-
56
47
  --velin-duration-normal: 150ms;
57
48
  --velin-duration-slow: 250ms;
58
49
  }
package/src/themes/nordic.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 0.25rem;
12
12
  --velin-radius-full: 9999px;
13
13
  --velin-radius-pill: 9999px;
14
-
15
14
  --velin-color-primary: oklch(60% 0.08 230);
16
15
  --velin-color-primary-hover: oklch(53% 0.08 230);
17
16
  --velin-color-primary-active: oklch(47% 0.08 230);
18
17
  --velin-color-primary-subtle: oklch(95% 0.015 230);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(50% 0.03 250);
22
20
  --velin-color-secondary-hover: oklch(43% 0.03 250);
23
21
  --velin-color-secondary-subtle: oklch(94% 0.01 250);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(98% 0.005 250);
27
24
  --velin-color-surface-dim: oklch(95% 0.005 250);
28
25
  --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(50% 0.01 250);
31
28
  --velin-color-border: oklch(88% 0.005 250);
32
29
  --velin-color-border-strong: oklch(70% 0.01 250);
33
-
34
30
  --velin-shadow-sm: 0 1px 2px oklch(20% 0.01 250 / 0.04);
35
31
  --velin-shadow-md: 0 2px 4px oklch(20% 0.01 250 / 0.06);
36
32
  --velin-shadow-lg: 0 4px 8px oklch(20% 0.01 250 / 0.06);
37
33
  --velin-shadow-xl: 0 6px 12px oklch(20% 0.01 250 / 0.08);
38
34
  --velin-shadow-2xl: 0 8px 16px oklch(20% 0.01 250 / 0.08);
39
-
40
35
  --velin-font-heading: "DM Sans", system-ui, sans-serif;
41
36
  --velin-font-body: "DM Sans", system-ui, sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 500;
46
40
  --velin-weight-bold: 600;
47
41
  --velin-weight-extrabold: 700;
48
-
49
42
  --velin-tracking-normal: 0.01em;
50
43
  --velin-tracking-wide: 0.06em;
51
44
  --velin-tracking-wider: 0.12em;
52
-
53
45
  --velin-leading-tight: 1.2;
54
46
  --velin-leading-normal: 1.6;
55
-
56
47
  --velin-duration-normal: 150ms;
57
48
  --velin-duration-slow: 250ms;
58
49
  }
package/src/themes/ocean.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 1rem;
12
12
  --velin-radius-full: 9999px;
13
13
  --velin-radius-pill: 9999px;
14
-
15
14
  --velin-color-primary: oklch(55% 0.15 195);
16
15
  --velin-color-primary-hover: oklch(48% 0.15 195);
17
16
  --velin-color-primary-active: oklch(42% 0.15 195);
18
17
  --velin-color-primary-subtle: oklch(94% 0.03 195);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(45% 0.12 250);
22
20
  --velin-color-secondary-hover: oklch(38% 0.12 250);
23
21
  --velin-color-secondary-subtle: oklch(93% 0.03 250);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(97% 0.01 220);
27
24
  --velin-color-surface-dim: oklch(93% 0.015 220);
28
25
  --velin-color-surface-bright: oklch(100% 0.005 220);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(40% 0.03 230);
31
28
  --velin-color-border: oklch(82% 0.03 220);
32
29
  --velin-color-border-strong: oklch(60% 0.06 220);
33
-
34
30
  --velin-shadow-sm: 0 1px 3px oklch(30% 0.03 220 / 0.1);
35
31
  --velin-shadow-md: 0 3px 8px oklch(30% 0.03 220 / 0.14);
36
32
  --velin-shadow-lg: 0 6px 16px oklch(30% 0.03 220 / 0.18);
37
33
  --velin-shadow-xl: 0 10px 24px oklch(30% 0.03 220 / 0.2);
38
34
  --velin-shadow-2xl: 0 16px 40px oklch(30% 0.03 220 / 0.25);
39
-
40
35
  --velin-font-heading: "Inter", system-ui, sans-serif;
41
36
  --velin-font-body: "Inter", system-ui, sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 800;
48
-
49
42
  --velin-tracking-normal: -0.01em;
50
43
  --velin-tracking-wide: 0.02em;
51
44
  --velin-tracking-wider: 0.04em;
52
-
53
45
  --velin-leading-tight: 1.2;
54
46
  --velin-leading-normal: 1.55;
55
-
56
47
  --velin-duration-normal: 200ms;
57
48
  --velin-duration-slow: 300ms;
58
49
  }
package/src/themes/pastel.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 1.5rem;
12
12
  --velin-radius-full: 9999px;
13
13
  --velin-radius-pill: 9999px;
14
-
15
- --velin-color-primary: oklch(75% 0.1 290);
14
+ --velin-color-primary: oklch(40% 0.12 290);
16
15
  --velin-color-primary-hover: oklch(68% 0.1 290);
17
16
  --velin-color-primary-active: oklch(62% 0.1 290);
18
17
  --velin-color-primary-subtle: oklch(95% 0.03 290);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(80% 0.1 160);
22
20
  --velin-color-secondary-hover: oklch(73% 0.1 160);
23
21
  --velin-color-secondary-subtle: oklch(96% 0.025 160);
24
22
  --velin-color-on-secondary: oklch(15% 0 0);
25
-
26
23
  --velin-color-surface: oklch(97% 0.01 320);
27
24
  --velin-color-surface-dim: oklch(94% 0.015 320);
28
25
  --velin-color-surface-bright: oklch(100% 0.005 320);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(50% 0.03 290);
31
28
  --velin-color-border: oklch(88% 0.03 290);
32
29
  --velin-color-border-strong: oklch(75% 0.05 290);
33
-
34
30
  --velin-shadow-sm: 0 2px 6px oklch(60% 0.04 290 / 0.1);
35
31
  --velin-shadow-md: 0 4px 12px oklch(60% 0.04 290 / 0.12);
36
32
  --velin-shadow-lg: 0 8px 24px oklch(60% 0.04 290 / 0.14);
37
33
  --velin-shadow-xl: 0 14px 36px oklch(60% 0.04 290 / 0.16);
38
34
  --velin-shadow-2xl: 0 20px 48px oklch(60% 0.04 290 / 0.18);
39
-
40
35
  --velin-font-heading: "Quicksand", "Nunito", sans-serif;
41
36
  --velin-font-body: "Quicksand", "Nunito", sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 700;
48
-
49
42
  --velin-tracking-normal: 0.01em;
50
43
  --velin-tracking-wide: 0.04em;
51
44
  --velin-tracking-wider: 0.08em;
52
-
53
45
  --velin-leading-tight: 1.25;
54
46
  --velin-leading-normal: 1.6;
55
-
56
47
  --velin-duration-normal: 250ms;
57
48
  --velin-duration-slow: 400ms;
58
49
  }
package/src/themes/retro.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 0;
12
12
  --velin-radius-full: 0;
13
13
  --velin-radius-pill: 0;
14
-
15
- --velin-color-primary: oklch(70% 0.15 85);
14
+ --velin-color-primary: oklch(42% 0.14 85);
16
15
  --velin-color-primary-hover: oklch(63% 0.15 85);
17
16
  --velin-color-primary-active: oklch(57% 0.15 85);
18
17
  --velin-color-primary-subtle: oklch(94% 0.04 85);
19
- --velin-color-on-primary: oklch(10% 0 0);
20
-
18
+ --velin-color-on-primary: oklch(100% 0 0);
21
19
  --velin-color-secondary: oklch(55% 0.15 45);
22
20
  --velin-color-secondary-hover: oklch(48% 0.15 45);
23
21
  --velin-color-secondary-subtle: oklch(93% 0.04 45);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(95% 0.02 85);
27
24
  --velin-color-surface-dim: oklch(90% 0.025 85);
28
25
  --velin-color-surface-bright: oklch(98% 0.01 85);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(35% 0.03 45);
31
28
  --velin-color-border: oklch(25% 0.02 45);
32
29
  --velin-color-border-strong: oklch(10% 0.01 45);
33
-
34
30
  --velin-shadow-sm: 2px 2px 0 oklch(10% 0.02 45);
35
31
  --velin-shadow-md: 3px 3px 0 oklch(10% 0.02 45);
36
32
  --velin-shadow-lg: 5px 5px 0 oklch(10% 0.02 45);
37
33
  --velin-shadow-xl: 7px 7px 0 oklch(10% 0.02 45);
38
34
  --velin-shadow-2xl: 10px 10px 0 oklch(10% 0.02 45);
39
-
40
35
  --velin-font-heading: "VT323", "Press Start 2P", monospace;
41
36
  --velin-font-body: "Space Grotesk", "IBM Plex Sans", sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 800;
48
-
49
42
  --velin-tracking-normal: 0.01em;
50
43
  --velin-tracking-wide: 0.05em;
51
44
  --velin-tracking-wider: 0.1em;
52
-
53
45
  --velin-leading-tight: 1.15;
54
46
  --velin-leading-normal: 1.5;
55
-
56
47
  --velin-duration-normal: 100ms;
57
48
  --velin-duration-slow: 150ms;
58
49
  }
package/src/themes/sharp.css CHANGED
@@ -11,36 +11,29 @@
11
11
  --velin-radius-2xl: 4px;
12
12
  --velin-radius-full: 0;
13
13
  --velin-radius-pill: 0;
14
-
15
14
  --velin-color-primary: oklch(45% 0.18 260);
16
15
  --velin-color-primary-hover: oklch(38% 0.18 260);
17
16
  --velin-color-primary-active: oklch(32% 0.18 260);
18
17
  --velin-color-primary-subtle: oklch(94% 0.03 260);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(50% 0.01 260);
22
20
  --velin-color-secondary-hover: oklch(40% 0.01 260);
23
-
24
21
  --velin-color-surface: oklch(99% 0.002 260);
25
22
  --velin-color-surface-dim: oklch(95% 0.003 260);
26
23
  --velin-color-surface-bright: oklch(100% 0 0);
27
24
  --velin-color-text: oklch(10% 0.005 260);
28
25
  --velin-color-border: oklch(70% 0.005 260);
29
26
  --velin-color-border-strong: oklch(40% 0.005 260);
30
-
31
27
  --velin-shadow-sm: none;
32
28
  --velin-shadow-md: 0 2px 0 oklch(0% 0 0 / 0.08);
33
29
  --velin-shadow-lg: 0 4px 0 oklch(0% 0 0 / 0.1);
34
30
  --velin-shadow-xl: 0 6px 0 oklch(0% 0 0 / 0.12);
35
-
36
31
  --velin-font-heading: "Inter", "Helvetica Neue", Arial, var(--velin-font-sans);
37
32
  --velin-font-body: "Inter", "Helvetica Neue", Arial, var(--velin-font-sans);
38
-
39
33
  --velin-weight-normal: 400;
40
34
  --velin-weight-medium: 500;
41
35
  --velin-weight-semibold: 700;
42
36
  --velin-weight-bold: 800;
43
-
44
37
  --velin-tracking-normal: -0.01em;
45
38
  --velin-tracking-tight: -0.03em;
46
39
  }
package/src/themes/soft.css CHANGED
@@ -8,17 +8,14 @@
8
8
  --velin-radius-lg: 1rem;
9
9
  --velin-radius-xl: 1.5rem;
10
10
  --velin-radius-2xl: 2rem;
11
-
12
11
  --velin-color-primary: oklch(58% 0.14 280);
13
12
  --velin-color-primary-hover: oklch(52% 0.14 280);
14
13
  --velin-color-primary-active: oklch(46% 0.14 280);
15
14
  --velin-color-primary-subtle: oklch(95% 0.03 280);
16
15
  --velin-color-on-primary: oklch(100% 0 0);
17
-
18
16
  --velin-color-secondary: oklch(62% 0.1 340);
19
17
  --velin-color-secondary-hover: oklch(55% 0.1 340);
20
18
  --velin-color-secondary-subtle: oklch(95% 0.02 340);
21
-
22
19
  --velin-color-surface: oklch(98% 0.008 280);
23
20
  --velin-color-surface-dim: oklch(94% 0.008 280);
24
21
  --velin-color-surface-bright: oklch(100% 0.002 280);
@@ -26,20 +23,16 @@
26
23
  --velin-color-text-muted: oklch(50% 0.01 280);
27
24
  --velin-color-border: oklch(88% 0.01 280);
28
25
  --velin-color-border-strong: oklch(72% 0.01 280);
29
-
30
26
  --velin-shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.04);
31
27
  --velin-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.06);
32
28
  --velin-shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.08);
33
29
  --velin-shadow-xl: 0 16px 40px oklch(0% 0 0 / 0.1);
34
-
35
30
  --velin-font-heading: "Nunito", "Quicksand", var(--velin-font-sans);
36
31
  --velin-font-body: "Nunito", "Quicksand", var(--velin-font-sans);
37
-
38
32
  --velin-weight-normal: 400;
39
33
  --velin-weight-medium: 600;
40
34
  --velin-weight-semibold: 700;
41
35
  --velin-weight-bold: 800;
42
-
43
36
  --velin-duration-normal: 250ms;
44
37
  --velin-ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
45
38
  }
package/src/themes/sunset.css CHANGED
@@ -11,18 +11,15 @@
11
11
  --velin-radius-2xl: 2rem;
12
12
  --velin-radius-full: 9999px;
13
13
  --velin-radius-pill: 9999px;
14
-
15
- --velin-color-primary: oklch(70% 0.2 50);
14
+ --velin-color-primary: oklch(40% 0.18 50);
16
15
  --velin-color-primary-hover: oklch(63% 0.2 50);
17
16
  --velin-color-primary-active: oklch(57% 0.2 50);
18
17
  --velin-color-primary-subtle: oklch(95% 0.04 50);
19
18
  --velin-color-on-primary: oklch(100% 0 0);
20
-
21
19
  --velin-color-secondary: oklch(60% 0.2 350);
22
20
  --velin-color-secondary-hover: oklch(53% 0.2 350);
23
21
  --velin-color-secondary-subtle: oklch(94% 0.04 350);
24
22
  --velin-color-on-secondary: oklch(100% 0 0);
25
-
26
23
  --velin-color-surface: oklch(97% 0.01 60);
27
24
  --velin-color-surface-dim: oklch(93% 0.015 60);
28
25
  --velin-color-surface-bright: oklch(100% 0.005 60);
@@ -30,29 +27,23 @@
30
27
  --velin-color-text-muted: oklch(42% 0.04 40);
31
28
  --velin-color-border: oklch(85% 0.04 55);
32
29
  --velin-color-border-strong: oklch(65% 0.08 50);
33
-
34
30
  --velin-shadow-sm: 0 1px 4px oklch(50% 0.05 50 / 0.1);
35
31
  --velin-shadow-md: 0 4px 10px oklch(50% 0.05 50 / 0.14);
36
32
  --velin-shadow-lg: 0 8px 20px oklch(50% 0.05 50 / 0.16);
37
33
  --velin-shadow-xl: 0 12px 28px oklch(50% 0.05 50 / 0.2);
38
34
  --velin-shadow-2xl: 0 20px 44px oklch(50% 0.05 50 / 0.25);
39
-
40
35
  --velin-font-heading: "Outfit", sans-serif;
41
36
  --velin-font-body: "Inter", sans-serif;
42
-
43
37
  --velin-weight-normal: 400;
44
38
  --velin-weight-medium: 500;
45
39
  --velin-weight-semibold: 600;
46
40
  --velin-weight-bold: 700;
47
41
  --velin-weight-extrabold: 800;
48
-
49
42
  --velin-tracking-normal: 0;
50
43
  --velin-tracking-wide: 0.03em;
51
44
  --velin-tracking-wider: 0.06em;
52
-
53
45
  --velin-leading-tight: 1.2;
54
46
  --velin-leading-normal: 1.55;
55
-
56
47
  --velin-duration-normal: 200ms;
57
48
  --velin-duration-slow: 350ms;
58
49
  }
package/src/tokens/color.css CHANGED
@@ -1,9 +1,10 @@
1
1
  @layer tokens {
2
2
  :root {
3
- /* Primary palette */
4
- --velin-color-primary: oklch(55% 0.15 250);
5
- --velin-color-primary-hover: oklch(48% 0.15 250);
6
- --velin-color-primary-active: oklch(42% 0.15 250);
3
+ /* Primary palette (AAA text/link contrast on light surfaces) */
4
+ --velin-color-primary: oklch(38% 0.18 250);
5
+ --velin-color-primary-text: oklch(38% 0.18 250);
6
+ --velin-color-primary-hover: oklch(32% 0.18 250);
7
+ --velin-color-primary-active: oklch(32% 0.18 250);
7
8
  --velin-color-primary-subtle: oklch(92% 0.04 250);
8
9
  --velin-color-on-primary: oklch(100% 0 0);
9
10
 
@@ -18,24 +19,27 @@
18
19
  --velin-color-surface: oklch(98% 0.005 250);
19
20
  --velin-color-surface-dim: oklch(93% 0.005 250);
20
21
  --velin-color-surface-bright: oklch(100% 0 0);
21
- --velin-color-text: oklch(15% 0.01 250);
22
- --velin-color-text-muted: oklch(45% 0.01 250);
23
- --velin-color-text-subtle: oklch(60% 0.005 250);
24
- --velin-color-border: oklch(82% 0.01 250);
25
- --velin-color-border-strong: oklch(65% 0.01 250);
22
+ --velin-color-text: oklch(8% 0.01 250);
23
+ --velin-color-text-muted: oklch(28% 0.01 250);
24
+ --velin-color-text-subtle: oklch(38% 0.005 250);
25
+ --velin-color-border: oklch(35% 0.01 250);
26
+ --velin-color-border-strong: oklch(20% 0.01 250);
26
27
 
27
28
  /* Semantic: success */
28
29
  --velin-color-success: oklch(55% 0.16 145);
30
+ --velin-color-success-text: oklch(38% 0.16 145);
29
31
  --velin-color-success-subtle: oklch(92% 0.04 145);
30
32
  --velin-color-on-success: oklch(100% 0 0);
31
33
 
32
34
  /* Semantic: warning */
33
35
  --velin-color-warning: oklch(75% 0.15 85);
36
+ --velin-color-warning-text: oklch(42% 0.14 85);
34
37
  --velin-color-warning-subtle: oklch(95% 0.04 85);
35
38
  --velin-color-on-warning: oklch(20% 0.02 85);
36
39
 
37
40
  /* Semantic: danger */
38
41
  --velin-color-danger: oklch(55% 0.2 25);
42
+ --velin-color-danger-text: oklch(40% 0.2 25);
39
43
  --velin-color-danger-hover: oklch(48% 0.2 25);
40
44
  --velin-color-danger-subtle: oklch(92% 0.04 25);
41
45
  --velin-color-on-danger: oklch(100% 0 0);
@@ -48,51 +52,48 @@
48
52
  /* Overlay */
49
53
  --velin-color-overlay: oklch(0% 0 0 / 0.4);
50
54
 
51
- /* Focus ring */
52
- --velin-color-focus: oklch(60% 0.2 250);
55
+ /* Focus ring (AAA 2.4.13) */
56
+ --velin-color-focus: oklch(35% 0.22 250);
53
57
  }
54
58
 
55
59
  /* Dark mode: automatic via system preference */
56
60
  @media (prefers-color-scheme: dark) {
57
61
  :root:not([data-velin-theme="light"]) {
58
- --velin-color-primary: oklch(72% 0.12 250);
59
- --velin-color-primary-hover: oklch(78% 0.12 250);
60
- --velin-color-primary-active: oklch(65% 0.12 250);
62
+ --velin-color-primary: oklch(48% 0.14 250);
63
+ --velin-color-primary-hover: oklch(55% 0.14 250);
64
+ --velin-color-primary-active: oklch(42% 0.14 250);
61
65
  --velin-color-primary-subtle: oklch(25% 0.06 250);
62
- --velin-color-on-primary: oklch(10% 0.01 250);
63
-
66
+ --velin-color-on-primary: oklch(98% 0 0);
64
67
  --velin-color-secondary: oklch(72% 0.1 320);
65
68
  --velin-color-secondary-hover: oklch(78% 0.1 320);
66
69
  --velin-color-secondary-active: oklch(65% 0.1 320);
67
70
  --velin-color-secondary-subtle: oklch(25% 0.04 320);
68
71
  --velin-color-on-secondary: oklch(10% 0.01 320);
69
-
70
72
  --velin-color-surface: oklch(15% 0.01 250);
71
73
  --velin-color-surface-dim: oklch(10% 0.01 250);
72
74
  --velin-color-surface-bright: oklch(22% 0.01 250);
73
75
  --velin-color-text: oklch(92% 0.005 250);
74
- --velin-color-text-muted: oklch(70% 0.005 250);
75
- --velin-color-text-subtle: oklch(55% 0.005 250);
76
+ --velin-color-text-muted: oklch(85% 0.005 250);
77
+ --velin-color-text-subtle: oklch(72% 0.005 250);
76
78
  --velin-color-border: oklch(30% 0.01 250);
77
79
  --velin-color-border-strong: oklch(45% 0.01 250);
78
-
80
+ --velin-color-primary-text: oklch(82% 0.12 250);
79
81
  --velin-color-success: oklch(72% 0.14 145);
82
+ --velin-color-success-text: oklch(82% 0.14 145);
80
83
  --velin-color-success-subtle: oklch(25% 0.06 145);
81
84
  --velin-color-on-success: oklch(10% 0.01 145);
82
-
83
85
  --velin-color-warning: oklch(80% 0.12 85);
86
+ --velin-color-warning-text: oklch(80% 0.12 85);
84
87
  --velin-color-warning-subtle: oklch(25% 0.06 85);
85
88
  --velin-color-on-warning: oklch(10% 0.02 85);
86
-
87
- --velin-color-danger: oklch(70% 0.16 25);
88
- --velin-color-danger-hover: oklch(76% 0.16 25);
89
+ --velin-color-danger: oklch(52% 0.16 25);
90
+ --velin-color-danger-text: oklch(82% 0.16 25);
91
+ --velin-color-danger-hover: oklch(58% 0.16 25);
89
92
  --velin-color-danger-subtle: oklch(25% 0.06 25);
90
- --velin-color-on-danger: oklch(10% 0.01 25);
91
-
93
+ --velin-color-on-danger: oklch(98% 0 0);
92
94
  --velin-color-info: oklch(72% 0.1 240);
93
95
  --velin-color-info-subtle: oklch(25% 0.04 240);
94
96
  --velin-color-on-info: oklch(10% 0.01 240);
95
-
96
97
  --velin-color-overlay: oklch(0% 0 0 / 0.6);
97
98
  --velin-color-focus: oklch(72% 0.18 250);
98
99
  }
@@ -100,45 +101,43 @@
100
101
 
101
102
  /* Dark mode: explicit attribute */
102
103
  [data-velin-theme="dark"] {
103
- --velin-color-primary: oklch(72% 0.12 250);
104
- --velin-color-primary-hover: oklch(78% 0.12 250);
105
- --velin-color-primary-active: oklch(65% 0.12 250);
104
+ --velin-color-primary: oklch(48% 0.12 250);
105
+ --velin-color-primary-text: oklch(82% 0.12 250);
106
+ --velin-color-primary-hover: oklch(55% 0.12 250);
107
+ --velin-color-primary-active: oklch(42% 0.12 250);
106
108
  --velin-color-primary-subtle: oklch(25% 0.06 250);
107
- --velin-color-on-primary: oklch(10% 0.01 250);
108
-
109
+ --velin-color-on-primary: oklch(98% 0 0);
109
110
  --velin-color-secondary: oklch(72% 0.1 320);
110
111
  --velin-color-secondary-hover: oklch(78% 0.1 320);
111
112
  --velin-color-secondary-active: oklch(65% 0.1 320);
112
113
  --velin-color-secondary-subtle: oklch(25% 0.04 320);
113
114
  --velin-color-on-secondary: oklch(10% 0.01 320);
114
-
115
115
  --velin-color-surface: oklch(15% 0.01 250);
116
116
  --velin-color-surface-dim: oklch(10% 0.01 250);
117
117
  --velin-color-surface-bright: oklch(22% 0.01 250);
118
118
  --velin-color-text: oklch(92% 0.005 250);
119
- --velin-color-text-muted: oklch(70% 0.005 250);
120
- --velin-color-text-subtle: oklch(55% 0.005 250);
121
- --velin-color-border: oklch(30% 0.01 250);
122
- --velin-color-border-strong: oklch(45% 0.01 250);
123
-
119
+ --velin-color-text-muted: oklch(88% 0.005 250);
120
+ --velin-color-text-subtle: oklch(78% 0.005 250);
121
+ --velin-color-border: oklch(30% 0.01 250);
122
+ --velin-color-border-strong: oklch(45% 0.01 250);
123
+ --velin-color-primary-text: oklch(82% 0.12 250);
124
124
  --velin-color-success: oklch(72% 0.14 145);
125
+ --velin-color-success-text: oklch(82% 0.14 145);
125
126
  --velin-color-success-subtle: oklch(25% 0.06 145);
126
127
  --velin-color-on-success: oklch(10% 0.01 145);
127
-
128
128
  --velin-color-warning: oklch(80% 0.12 85);
129
+ --velin-color-warning-text: oklch(80% 0.12 85);
129
130
  --velin-color-warning-subtle: oklch(25% 0.06 85);
130
131
  --velin-color-on-warning: oklch(10% 0.02 85);
131
-
132
- --velin-color-danger: oklch(70% 0.16 25);
132
+ --velin-color-danger: oklch(52% 0.16 25);
133
+ --velin-color-danger-text: oklch(82% 0.16 25);
133
134
  --velin-color-danger-hover: oklch(76% 0.16 25);
134
135
  --velin-color-danger-subtle: oklch(25% 0.06 25);
135
- --velin-color-on-danger: oklch(10% 0.01 25);
136
-
136
+ --velin-color-on-danger: oklch(98% 0 0);
137
137
  --velin-color-info: oklch(72% 0.1 240);
138
138
  --velin-color-info-subtle: oklch(25% 0.04 240);
139
- --velin-color-on-info: oklch(10% 0.01 240);
140
-
139
+ --velin-color-on-info: oklch(98% 0 0);
141
140
  --velin-color-overlay: oklch(0% 0 0 / 0.6);
142
- --velin-color-focus: oklch(72% 0.18 250);
141
+ --velin-color-focus: oklch(82% 0.18 250);
143
142
  }
144
143
  }
package/src/tokens/fonts.css ADDED
@@ -0,0 +1,10 @@
1
+ @layer tokens {
2
+ :root {
3
+ --velin-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
4
+ --velin-font-text: var(--velin-font-display);
5
+ --velin-font-code: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
6
+ --velin-font-features: "cv02", "ss01";
7
+ --velin-font-optical: auto;
8
+ --velin-font-size-adjust-fallback: 0.52;
9
+ }
10
+ }
package/src/tokens/typography.css CHANGED
@@ -1,16 +1,15 @@
1
1
  @layer tokens {
2
2
  :root {
3
3
  /* Font families */
4
- --velin-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
4
+ --velin-font-sans: var(--velin-font-text, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
5
5
  --velin-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
6
- --velin-font-mono: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
7
- --velin-font-heading: var(--velin-font-sans);
8
- --velin-font-body: var(--velin-font-sans);
6
+ --velin-font-mono: var(--velin-font-code, "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace);
7
+ --velin-font-heading: var(--velin-font-display, var(--velin-font-sans));
8
+ --velin-font-body: var(--velin-font-text, var(--velin-font-sans));
9
9
 
10
10
  /* Fluid Type Scale -- clamp(min, preferred, max) */
11
11
  --velin-fluid-min-vw: 20; /* 320px */
12
12
  --velin-fluid-max-vw: 90; /* 1440px */
13
-
14
13
  --velin-text-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);
15
14
  --velin-text-sm: clamp(0.8rem, 0.76rem + 0.15vw, 0.875rem);
16
15
  --velin-text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
package/src/utilities/animation.css CHANGED
@@ -186,10 +186,10 @@
186
186
  }
187
187
 
188
188
  @keyframes velin-flip {
189
- from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
189
+ 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
190
190
  40% { transform: perspective(400px) rotateY(-15deg); }
191
191
  70% { transform: perspective(400px) rotateY(15deg); }
192
- to { opacity: 1; transform: perspective(400px) rotateY(0); }
192
+ 100% { opacity: 1; transform: perspective(400px) rotateY(0); }
193
193
  }
194
194
 
195
195
  @keyframes velin-drop-in {