@aziontech/theme 2.5.0 → 4.0.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 (251) hide show
  1. package/README.md +73 -66
  2. package/dist/v4/globals.css +799 -79
  3. package/dist/v4/globals.scss +799 -79
  4. package/package.json +6 -23
  5. package/src/scripts/build-tokens.mjs +197 -230
  6. package/src/scripts/compile-primitives.js +79 -79
  7. package/src/scripts/compile-theme.js +70 -63
  8. package/src/scripts/css-vars.d.ts.map +1 -1
  9. package/src/scripts/css-vars.js +20 -16
  10. package/src/scripts/refs.js +2 -2
  11. package/src/scripts/resolve.d.ts.map +1 -1
  12. package/src/scripts/resolve.js +50 -47
  13. package/src/tokens/README.md +53 -74
  14. package/src/tokens/index.js +5 -5
  15. package/src/tokens/primitives/animations/animate.d.ts +10 -0
  16. package/src/tokens/primitives/animations/animate.d.ts.map +1 -1
  17. package/src/tokens/primitives/animations/animate.js +15 -5
  18. package/src/tokens/primitives/animations/ease.d.ts.map +1 -1
  19. package/src/tokens/primitives/animations/ease.js +3 -3
  20. package/src/tokens/primitives/animations/keyframes.d.ts +63 -0
  21. package/src/tokens/primitives/animations/keyframes.d.ts.map +1 -0
  22. package/src/tokens/primitives/animations/keyframes.js +69 -0
  23. package/src/tokens/primitives/border-widths.d.ts.map +1 -1
  24. package/src/tokens/primitives/border-widths.js +3 -3
  25. package/src/tokens/primitives/breakpoints.d.ts.map +1 -1
  26. package/src/tokens/primitives/breakpoints.js +3 -3
  27. package/src/tokens/primitives/colors/alpha.d.ts +80 -80
  28. package/src/tokens/primitives/colors/alpha.js +84 -84
  29. package/src/tokens/primitives/colors/brand.d.ts +22 -22
  30. package/src/tokens/primitives/colors/brand.js +28 -28
  31. package/src/tokens/primitives/colors/colors.d.ts +88 -88
  32. package/src/tokens/primitives/colors/colors.js +107 -107
  33. package/src/tokens/primitives/effects/blur.d.ts.map +1 -1
  34. package/src/tokens/primitives/effects/blur.js +3 -3
  35. package/src/tokens/primitives/effects/drop-shadow.d.ts.map +1 -1
  36. package/src/tokens/primitives/effects/drop-shadow.js +3 -3
  37. package/src/tokens/primitives/effects/inset-shadow.d.ts.map +1 -1
  38. package/src/tokens/primitives/effects/inset-shadow.js +3 -3
  39. package/src/tokens/primitives/effects/opacity.d.ts.map +1 -1
  40. package/src/tokens/primitives/effects/opacity.js +3 -3
  41. package/src/tokens/primitives/effects/perspective.js +3 -3
  42. package/src/tokens/primitives/effects/shadow.d.ts.map +1 -1
  43. package/src/tokens/primitives/effects/shadow.js +3 -3
  44. package/src/{azion/_fonts.scss → tokens/primitives/fonts.css} +19 -4
  45. package/src/tokens/primitives/ring-offset.d.ts.map +1 -1
  46. package/src/tokens/primitives/ring-offset.js +3 -3
  47. package/src/tokens/primitives/shape/aspect-video.d.ts.map +1 -1
  48. package/src/tokens/primitives/shape/aspect-video.js +2 -2
  49. package/src/tokens/primitives/shape/container.d.ts.map +1 -1
  50. package/src/tokens/primitives/shape/container.js +3 -3
  51. package/src/tokens/primitives/shape/height.d.ts.map +1 -1
  52. package/src/tokens/primitives/shape/height.js +3 -3
  53. package/src/tokens/primitives/shape/radius.d.ts.map +1 -1
  54. package/src/tokens/primitives/shape/radius.js +3 -3
  55. package/src/tokens/primitives/shape/size.d.ts.map +1 -1
  56. package/src/tokens/primitives/shape/size.js +3 -3
  57. package/src/tokens/primitives/shape/spacing.d.ts.map +1 -1
  58. package/src/tokens/primitives/shape/spacing.js +3 -3
  59. package/src/tokens/primitives/shape/width.d.ts.map +1 -1
  60. package/src/tokens/primitives/shape/width.js +4 -4
  61. package/src/tokens/primitives/typography/font-size.d.ts.map +1 -1
  62. package/src/tokens/primitives/typography/font-size.js +4 -4
  63. package/src/tokens/primitives/typography/font-weight.js +3 -3
  64. package/src/tokens/primitives/typography/leading.js +3 -3
  65. package/src/tokens/primitives/typography/line-height.d.ts.map +1 -1
  66. package/src/tokens/primitives/typography/line-height.js +3 -3
  67. package/src/tokens/primitives/typography/tracking.js +3 -3
  68. package/src/tokens/semantic/colors.js +17 -17
  69. package/src/tokens/semantic/containers.data.d.ts.map +1 -1
  70. package/src/tokens/semantic/containers.data.js +3 -3
  71. package/src/tokens/semantic/containers.js +25 -25
  72. package/src/tokens/semantic/spacings.data.d.ts.map +1 -1
  73. package/src/tokens/semantic/spacings.data.js +3 -3
  74. package/src/tokens/semantic/texts.data.d.ts +59 -28
  75. package/src/tokens/semantic/texts.data.d.ts.map +1 -1
  76. package/src/tokens/semantic/texts.data.js +90 -56
  77. package/src/tokens/theme/accent.js +6 -6
  78. package/src/tokens/theme/border.js +6 -6
  79. package/src/tokens/theme/code-sintax.d.ts +53 -0
  80. package/src/tokens/theme/code-sintax.d.ts.map +1 -0
  81. package/src/tokens/theme/code-sintax.js +28 -0
  82. package/src/tokens/theme/feedback/danger.js +6 -6
  83. package/src/tokens/theme/feedback/info.js +6 -6
  84. package/src/tokens/theme/feedback/success.js +6 -6
  85. package/src/tokens/theme/feedback/warning.js +6 -6
  86. package/src/tokens/theme/primary.js +6 -6
  87. package/src/tokens/theme/ring.js +6 -6
  88. package/src/tokens/theme/secondary.js +6 -6
  89. package/src/tokens/theme/surfaces.d.ts.map +1 -1
  90. package/src/tokens/theme/surfaces.js +6 -6
  91. package/src/tokens/theme/text.d.ts +6 -0
  92. package/src/tokens/theme/text.js +2 -0
  93. package/src/tokens/theme.d.ts +110 -110
  94. package/src/tokens/theme.js +9 -9
  95. package/default.js +0 -1
  96. package/dist/v3/globals.css +0 -855
  97. package/dist/v3/globals.scss +0 -855
  98. package/dist/v3/tailwind-preset.js +0 -510
  99. package/dist/v3/tailwind.config.js +0 -518
  100. package/src/azion/_custom.scss +0 -3
  101. package/src/azion/_extensions.scss +0 -37
  102. package/src/azion/_variables-widget.scss +0 -400
  103. package/src/azion/_variables.scss +0 -407
  104. package/src/azion/custom/_code.scss +0 -11
  105. package/src/azion/custom/_focus.scss +0 -5
  106. package/src/azion/custom/_scrollbehavior.scss +0 -6
  107. package/src/azion/custom/_selection.scss +0 -4
  108. package/src/azion/custom/_special-button.scss +0 -57
  109. package/src/azion/extended-components/_autocomplete.scss +0 -13
  110. package/src/azion/extended-components/_badge.scss +0 -53
  111. package/src/azion/extended-components/_breadcumb.scss +0 -18
  112. package/src/azion/extended-components/_button.scss +0 -134
  113. package/src/azion/extended-components/_calendar.scss +0 -310
  114. package/src/azion/extended-components/_carousel.scss +0 -9
  115. package/src/azion/extended-components/_checkbox.scss +0 -33
  116. package/src/azion/extended-components/_datatable.scss +0 -130
  117. package/src/azion/extended-components/_dialog.scss +0 -45
  118. package/src/azion/extended-components/_divider.scss +0 -37
  119. package/src/azion/extended-components/_dropdown.scss +0 -10
  120. package/src/azion/extended-components/_dropdownitem.scss +0 -13
  121. package/src/azion/extended-components/_inlinemessage.scss +0 -10
  122. package/src/azion/extended-components/_inputnumber.scss +0 -40
  123. package/src/azion/extended-components/_inputpassword.scss +0 -4
  124. package/src/azion/extended-components/_inputswitch.scss +0 -53
  125. package/src/azion/extended-components/_listbox.scss +0 -35
  126. package/src/azion/extended-components/_markdown.scss +0 -135
  127. package/src/azion/extended-components/_menuitem.scss +0 -22
  128. package/src/azion/extended-components/_multiselect.scss +0 -167
  129. package/src/azion/extended-components/_overlaypanel.scss +0 -18
  130. package/src/azion/extended-components/_picklist.scss +0 -25
  131. package/src/azion/extended-components/_progressbar.scss +0 -6
  132. package/src/azion/extended-components/_radiobutton.scss +0 -63
  133. package/src/azion/extended-components/_selectbutton.scss +0 -36
  134. package/src/azion/extended-components/_sidebar.scss +0 -28
  135. package/src/azion/extended-components/_splitbutton.scss +0 -22
  136. package/src/azion/extended-components/_tabmenu.scss +0 -21
  137. package/src/azion/extended-components/_tabview.scss +0 -41
  138. package/src/azion/extended-components/_tag.scss +0 -47
  139. package/src/azion/extended-components/_toast.scss +0 -9
  140. package/src/azion/extended-components/_tooltip.scss +0 -7
  141. package/src/azion/extended-components/_treeselect.scss +0 -10
  142. package/src/azion/extended-components/jsonform/_inputcheckbox.scss +0 -41
  143. package/src/azion/extended-components/jsonform/_inputtext.scss +0 -26
  144. package/src/azion/extended-components/jsonform/_label.scss +0 -185
  145. package/src/azion/extended-components/jsonform/_select.scss +0 -34
  146. package/src/azion/theme-base/_colors.scss +0 -18
  147. package/src/azion/theme-base/_common.scss +0 -75
  148. package/src/azion/theme-base/_components.scss +0 -103
  149. package/src/azion/theme-base/_mixins.scss +0 -250
  150. package/src/azion/theme-base/components/button/_button.scss +0 -567
  151. package/src/azion/theme-base/components/button/_speeddial.scss +0 -97
  152. package/src/azion/theme-base/components/button/_splitbutton.scss +0 -390
  153. package/src/azion/theme-base/components/data/_carousel.scss +0 -37
  154. package/src/azion/theme-base/components/data/_datatable.scss +0 -347
  155. package/src/azion/theme-base/components/data/_dataview.scss +0 -47
  156. package/src/azion/theme-base/components/data/_filter.scss +0 -138
  157. package/src/azion/theme-base/components/data/_orderlist.scss +0 -70
  158. package/src/azion/theme-base/components/data/_organizationchart.scss +0 -50
  159. package/src/azion/theme-base/components/data/_paginator.scss +0 -92
  160. package/src/azion/theme-base/components/data/_picklist.scss +0 -70
  161. package/src/azion/theme-base/components/data/_timeline.scss +0 -38
  162. package/src/azion/theme-base/components/data/_tree.scss +0 -90
  163. package/src/azion/theme-base/components/data/_treetable.scss +0 -251
  164. package/src/azion/theme-base/components/file/_fileupload.scss +0 -82
  165. package/src/azion/theme-base/components/input/_autocomplete.scss +0 -114
  166. package/src/azion/theme-base/components/input/_calendar.scss +0 -251
  167. package/src/azion/theme-base/components/input/_cascadeselect.scss +0 -106
  168. package/src/azion/theme-base/components/input/_checkbox.scss +0 -86
  169. package/src/azion/theme-base/components/input/_chips.scss +0 -53
  170. package/src/azion/theme-base/components/input/_colorpicker.scss +0 -18
  171. package/src/azion/theme-base/components/input/_dropdown.scss +0 -147
  172. package/src/azion/theme-base/components/input/_editor.scss +0 -122
  173. package/src/azion/theme-base/components/input/_inputgroup.scss +0 -74
  174. package/src/azion/theme-base/components/input/_inputnumber.scss +0 -5
  175. package/src/azion/theme-base/components/input/_inputswitch.scss +0 -62
  176. package/src/azion/theme-base/components/input/_inputtext.scss +0 -100
  177. package/src/azion/theme-base/components/input/_listbox.scss +0 -89
  178. package/src/azion/theme-base/components/input/_multiselect.scss +0 -166
  179. package/src/azion/theme-base/components/input/_password.scss +0 -33
  180. package/src/azion/theme-base/components/input/_radiobutton.scss +0 -78
  181. package/src/azion/theme-base/components/input/_rating.scss +0 -60
  182. package/src/azion/theme-base/components/input/_selectbutton.scss +0 -50
  183. package/src/azion/theme-base/components/input/_slider.scss +0 -49
  184. package/src/azion/theme-base/components/input/_togglebutton.scss +0 -52
  185. package/src/azion/theme-base/components/input/_treeselect.scss +0 -91
  186. package/src/azion/theme-base/components/menu/_breadcrumb.scss +0 -42
  187. package/src/azion/theme-base/components/menu/_contextmenu.scss +0 -39
  188. package/src/azion/theme-base/components/menu/_dock.scss +0 -95
  189. package/src/azion/theme-base/components/menu/_megamenu.scss +0 -55
  190. package/src/azion/theme-base/components/menu/_menu.scss +0 -33
  191. package/src/azion/theme-base/components/menu/_menubar.scss +0 -141
  192. package/src/azion/theme-base/components/menu/_panelmenu.scss +0 -153
  193. package/src/azion/theme-base/components/menu/_steps.scss +0 -56
  194. package/src/azion/theme-base/components/menu/_tabmenu.scss +0 -49
  195. package/src/azion/theme-base/components/menu/_tieredmenu.scss +0 -43
  196. package/src/azion/theme-base/components/messages/_inlinemessage.scss +0 -64
  197. package/src/azion/theme-base/components/messages/_message.scss +0 -100
  198. package/src/azion/theme-base/components/messages/_toast.scss +0 -100
  199. package/src/azion/theme-base/components/misc/_avatar.scss +0 -30
  200. package/src/azion/theme-base/components/misc/_badge.scss +0 -48
  201. package/src/azion/theme-base/components/misc/_blockui.scss +0 -0
  202. package/src/azion/theme-base/components/misc/_chip.scss +0 -39
  203. package/src/azion/theme-base/components/misc/_inplace.scss +0 -17
  204. package/src/azion/theme-base/components/misc/_progressbar.scss +0 -17
  205. package/src/azion/theme-base/components/misc/_progressspinner.scss +0 -49
  206. package/src/azion/theme-base/components/misc/_scrolltop.scss +0 -25
  207. package/src/azion/theme-base/components/misc/_skeleton.scss +0 -8
  208. package/src/azion/theme-base/components/misc/_tag.scss +0 -40
  209. package/src/azion/theme-base/components/misc/_terminal.scss +0 -12
  210. package/src/azion/theme-base/components/multimedia/_galleria.scss +0 -151
  211. package/src/azion/theme-base/components/multimedia/_image.scss +0 -54
  212. package/src/azion/theme-base/components/overlay/_confirmpopup.scss +0 -72
  213. package/src/azion/theme-base/components/overlay/_dialog.scss +0 -64
  214. package/src/azion/theme-base/components/overlay/_overlaypanel.scss +0 -38
  215. package/src/azion/theme-base/components/overlay/_sidebar.scss +0 -23
  216. package/src/azion/theme-base/components/overlay/_tooltip.scss +0 -33
  217. package/src/azion/theme-base/components/panel/_accordion.scss +0 -118
  218. package/src/azion/theme-base/components/panel/_card.scss +0 -30
  219. package/src/azion/theme-base/components/panel/_divider.scss +0 -40
  220. package/src/azion/theme-base/components/panel/_fieldset.scss +0 -51
  221. package/src/azion/theme-base/components/panel/_panel.scss +0 -47
  222. package/src/azion/theme-base/components/panel/_scrollpanel.scss +0 -11
  223. package/src/azion/theme-base/components/panel/_splitter.scss +0 -24
  224. package/src/azion/theme-base/components/panel/_tabview.scss +0 -66
  225. package/src/azion/theme-base/components/panel/_toolbar.scss +0 -11
  226. package/src/azion/theme-widget.scss +0 -9
  227. package/src/azion/theme.scss +0 -9
  228. package/src/azion/variables/_button.scss +0 -438
  229. package/src/azion/variables/_data.scss +0 -346
  230. package/src/azion/variables/_form.scss +0 -570
  231. package/src/azion/variables/_general.scss +0 -149
  232. package/src/azion/variables/_media.scss +0 -231
  233. package/src/azion/variables/_menu.scss +0 -287
  234. package/src/azion/variables/_message.scss +0 -145
  235. package/src/azion/variables/_misc.scss +0 -143
  236. package/src/azion/variables/_overlay.scss +0 -67
  237. package/src/azion/variables/_panel.scss +0 -327
  238. package/src/tests/primitives.html +0 -293
  239. package/src/tests/theme.html +0 -310
  240. package/src/tests/tokens.html +0 -87
  241. package/src/tokens/semantic/animations.d.ts +0 -3
  242. package/src/tokens/semantic/animations.d.ts.map +0 -1
  243. package/src/tokens/semantic/animations.js +0 -80
  244. package/src/tokens/semantic/spacings.d.ts +0 -3
  245. package/src/tokens/semantic/spacings.d.ts.map +0 -1
  246. package/src/tokens/semantic/spacings.js +0 -163
  247. package/src/tokens/semantic/texts.d.ts +0 -3
  248. package/src/tokens/semantic/texts.d.ts.map +0 -1
  249. package/src/tokens/semantic/texts.js +0 -299
  250. package/tokens.js +0 -7
  251. package/widget.js +0 -1
@@ -1,855 +0,0 @@
1
- /* generated by build-tokens.mjs — target: v3 — do not edit */
2
-
3
- @tailwind components;
4
- @tailwind utilities;
5
-
6
- :root, [data-theme=light], .azion.azion-light {
7
- /* ── Primitives ── */
8
- --color-base-white: #FFFFFF;
9
- --color-base-black: #000000;
10
- --color-blue-50: #E5F1FF;
11
- --color-blue-100: #CCE4FF;
12
- --color-blue-200: #99C9FF;
13
- --color-blue-300: #66ADFF;
14
- --color-blue-400: #3392FF;
15
- --color-blue-500: #0072F5;
16
- --color-blue-600: #005FCC;
17
- --color-blue-700: #004799;
18
- --color-blue-800: #003066;
19
- --color-blue-900: #001833;
20
- --color-blue-950: #000C1A;
21
- --color-gray-50: #FAFAFA;
22
- --color-gray-100: #F5F5F5;
23
- --color-gray-200: #E5E5E5;
24
- --color-gray-300: #B2B2B2;
25
- --color-gray-400: #999999;
26
- --color-gray-500: #808080;
27
- --color-gray-600: #666666;
28
- --color-gray-700: #4D4D4D;
29
- --color-gray-800: #1A1A1A;
30
- --color-gray-900: #141414;
31
- --color-gray-950: #0A0A0A;
32
- --color-violet-50: #F6F6FF;
33
- --color-violet-100: #ECECFF;
34
- --color-violet-200: #D9D7FA;
35
- --color-violet-300: #B5B1F4;
36
- --color-violet-400: #9F9AF1;
37
- --color-violet-500: #8A84EC;
38
- --color-violet-600: #756FE5;
39
- --color-violet-700: #625BD5;
40
- --color-violet-800: #524BBB;
41
- --color-violet-900: #1F1E48;
42
- --color-violet-950: #100F24;
43
- --color-orange-50: #FFF5EF;
44
- --color-orange-100: #FFE7D8;
45
- --color-orange-200: #FFCFB3;
46
- --color-orange-300: #FFB180;
47
- --color-orange-400: #FF8E4D;
48
- --color-orange-500: #F3652B;
49
- --color-orange-600: #D94A03;
50
- --color-orange-700: #B03C02;
51
- --color-orange-800: #8A2F02;
52
- --color-orange-900: #692402;
53
- --color-orange-950: #401602;
54
- --color-slate-50: #F8F7FC;
55
- --color-slate-100: #F0EFF8;
56
- --color-slate-200: #E3E1F0;
57
- --color-slate-300: #D3D2E6;
58
- --color-slate-400: #BEBBD6;
59
- --color-slate-500: #A39FBE;
60
- --color-slate-600: #8884A4;
61
- --color-slate-700: #6D698B;
62
- --color-slate-800: #534F70;
63
- --color-slate-900: #353040;
64
- --color-slate-950: #13131A;
65
- --color-yellow-50: #FEF8E6;
66
- --color-yellow-100: #FDF2CE;
67
- --color-yellow-200: #FCE49C;
68
- --color-yellow-300: #FAD76B;
69
- --color-yellow-400: #F8CA3A;
70
- --color-yellow-500: #F7BD08;
71
- --color-yellow-600: #C59707;
72
- --color-yellow-700: #947105;
73
- --color-yellow-800: #634B03;
74
- --color-yellow-900: #312602;
75
- --color-yellow-950: #191301;
76
- --color-green-50: #F0FDF4;
77
- --color-green-100: #D0FBDF;
78
- --color-green-200: #A4F4C0;
79
- --color-green-300: #78EDA2;
80
- --color-green-400: #52E086;
81
- --color-green-500: #26D968;
82
- --color-green-600: #18B452;
83
- --color-green-700: #16833F;
84
- --color-green-800: #12542B;
85
- --color-green-900: #0A2916;
86
- --color-green-950: #03170B;
87
- --color-red-50: #FCE8E8;
88
- --color-red-100: #F9D2D2;
89
- --color-red-200: #F3A5A5;
90
- --color-red-300: #ED7878;
91
- --color-red-400: #E74B4B;
92
- --color-red-500: #E51A1A;
93
- --color-red-600: #B71515;
94
- --color-red-700: #891010;
95
- --color-red-800: #5B0B0B;
96
- --color-red-900: #2E0606;
97
- --color-red-950: #170303;
98
- --color-surface-0: #FFFFFF;
99
- --color-surface-50: #FAFAFA;
100
- --color-surface-100: #F5F5F5;
101
- --color-surface-200: #E5E5E5;
102
- --color-surface-300: #B2B2B2;
103
- --color-surface-400: #999999;
104
- --color-surface-500: #808080;
105
- --color-surface-600: #666666;
106
- --color-surface-700: #4D4D4D;
107
- --color-surface-800: #1A1A1A;
108
- --color-surface-900: #141414;
109
- --color-surface-950: #0A0A0A;
110
- --color-alpha-violet-50: #8A84EC0D;
111
- --color-alpha-violet-100: #8A84EC1A;
112
- --color-alpha-violet-200: #8A84EC33;
113
- --color-alpha-violet-300: #8A84EC4D;
114
- --color-alpha-violet-400: #8A84EC66;
115
- --color-alpha-violet-500: #8A84EC80;
116
- --color-alpha-violet-600: #8A84EC99;
117
- --color-alpha-violet-700: #8A84ECB2;
118
- --color-alpha-violet-800: #8A84ECCC;
119
- --color-alpha-violet-900: #8A84ECE5;
120
- --color-alpha-orange-50: #FE601F0D;
121
- --color-alpha-orange-100: #FE601F1A;
122
- --color-alpha-orange-200: #FE601F33;
123
- --color-alpha-orange-300: #FE601F4D;
124
- --color-alpha-orange-400: #FE601F66;
125
- --color-alpha-orange-500: #FE601F80;
126
- --color-alpha-orange-600: #FE601F99;
127
- --color-alpha-orange-700: #FE601FB2;
128
- --color-alpha-orange-800: #FE601FCC;
129
- --color-alpha-orange-900: #FE601FE5;
130
- --color-alpha-white-50: #FFFFFF0D;
131
- --color-alpha-white-100: #FFFFFF1A;
132
- --color-alpha-white-200: #FFFFFF33;
133
- --color-alpha-white-300: #FFFFFF4D;
134
- --color-alpha-white-400: #FFFFFF66;
135
- --color-alpha-white-500: #FFFFFF80;
136
- --color-alpha-white-600: #FFFFFF99;
137
- --color-alpha-white-700: #FFFFFFB2;
138
- --color-alpha-white-800: #FFFFFFCC;
139
- --color-alpha-white-900: #FFFFFFE5;
140
- --color-alpha-black-50: #00000005;
141
- --color-alpha-black-100: #00000014;
142
- --color-alpha-black-200: #00000033;
143
- --color-alpha-black-300: #0000004D;
144
- --color-alpha-black-400: #00000066;
145
- --color-alpha-black-500: #00000080;
146
- --color-alpha-black-600: #00000099;
147
- --color-alpha-black-700: #000000B2;
148
- --color-alpha-black-800: #000000CC;
149
- --color-alpha-black-900: #000000E5;
150
- --color-alpha-green-50: #22C55E0D;
151
- --color-alpha-green-100: #22C55E1A;
152
- --color-alpha-green-200: #22C55E33;
153
- --color-alpha-green-300: #22C55E4D;
154
- --color-alpha-green-400: #22C55E66;
155
- --color-alpha-green-500: #22C55E80;
156
- --color-alpha-green-600: #22C55E99;
157
- --color-alpha-green-700: #22C55EB2;
158
- --color-alpha-green-800: #22C55ECC;
159
- --color-alpha-green-900: #22C55EE5;
160
- --color-alpha-red-50: #E51A1A0D;
161
- --color-alpha-red-100: #E51A1A1A;
162
- --color-alpha-red-200: #E51A1A33;
163
- --color-alpha-red-300: #E51A1A4D;
164
- --color-alpha-red-400: #E51A1A66;
165
- --color-alpha-red-500: #E51A1A80;
166
- --color-alpha-red-600: #E51A1A99;
167
- --color-alpha-red-700: #E51A1AB2;
168
- --color-alpha-red-800: #E51A1ACC;
169
- --color-alpha-red-900: #E51A1AE5;
170
- --color-alpha-yellow-50: #F7BD080D;
171
- --color-alpha-yellow-100: #F7BD081A;
172
- --color-alpha-yellow-200: #F7BD0833;
173
- --color-alpha-yellow-300: #F7BD084D;
174
- --color-alpha-yellow-400: #F7BD0866;
175
- --color-alpha-yellow-500: #F7BD0880;
176
- --color-alpha-yellow-600: #F7BD0899;
177
- --color-alpha-yellow-700: #F7BD08B2;
178
- --color-alpha-yellow-800: #F7BD08CC;
179
- --color-alpha-yellow-900: #F7BD08E5;
180
- --color-alpha-blue-50: #0072F50D;
181
- --color-alpha-blue-100: #0072F51A;
182
- --color-alpha-blue-200: #0072F533;
183
- --color-alpha-blue-300: #0072F54D;
184
- --color-alpha-blue-400: #0072F566;
185
- --color-alpha-blue-500: #0072F580;
186
- --color-alpha-blue-600: #0072F599;
187
- --color-alpha-blue-700: #0072F5B2;
188
- --color-alpha-blue-800: #0072F5CC;
189
- --color-alpha-blue-900: #0072F5E5;
190
- --color-alpha-absolute-black: #000000E5;
191
- --color-alpha-absolute-white: #FFFFFFE5;
192
- --color-primary-50: #FFF5EF;
193
- --color-primary-100: #FFE7D8;
194
- --color-primary-200: #FFCFB3;
195
- --color-primary-300: #FFB180;
196
- --color-primary-400: #FF8E4D;
197
- --color-primary-500: #F3652B;
198
- --color-primary-600: #D94A03;
199
- --color-primary-700: #B03C02;
200
- --color-primary-800: #8A2F02;
201
- --color-primary-900: #692402;
202
- --color-primary-950: #401602;
203
- --color-accent-50: #F6F6FF;
204
- --color-accent-100: #ECECFF;
205
- --color-accent-200: #D9D7FA;
206
- --color-accent-300: #B5B1F4;
207
- --color-accent-400: #9F9AF1;
208
- --color-accent-500: #8A84EC;
209
- --color-accent-600: #756FE5;
210
- --color-accent-700: #625BD5;
211
- --color-accent-800: #524BBB;
212
- --color-accent-900: #1F1E48;
213
- --color-accent-950: #100F24;
214
- --color-absolute-black: #0A0A0A;
215
- --color-absolute-white: #FAFAFA;
216
- --breakpoint-sm: 640px;
217
- --breakpoint-md: 768px;
218
- --breakpoint-lg: 1024px;
219
- --breakpoint-xl: 1280px;
220
- --breakpoint-2xl: 1536px;
221
- --border-0: 0;
222
- --border-1: 0.8px;
223
- --border-2: 2px;
224
- --border-3: 3px;
225
- --border-4: 4px;
226
- --container-3xs: 256px;
227
- --container-2xs: 288px;
228
- --container-xs: 320px;
229
- --container-sm: 384px;
230
- --container-md: 448px;
231
- --container-lg: 512px;
232
- --container-xl: 576px;
233
- --container-2xl: 672px;
234
- --container-3xl: 768px;
235
- --container-4xl: 896px;
236
- --container-5xl: 1024px;
237
- --container-6xl: 1152px;
238
- --container-7xl: 1280px;
239
- --height-2: 8px;
240
- --height-3: 12px;
241
- --height-4: 16px;
242
- --height-5: 20px;
243
- --height-6: 24px;
244
- --height-7: 28px;
245
- --height-8: 32px;
246
- --height-9: 36px;
247
- --height-10: 40px;
248
- --height-11: 44px;
249
- --height-12: 48px;
250
- --height-14: 56px;
251
- --height-16: 64px;
252
- --height-20: 80px;
253
- --height-24: 96px;
254
- --height-28: 112px;
255
- --height-32: 128px;
256
- --height-36: 144px;
257
- --height-40: 160px;
258
- --height-44: 176px;
259
- --height-48: 192px;
260
- --height-52: 208px;
261
- --height-56: 224px;
262
- --height-60: 240px;
263
- --height-64: 256px;
264
- --height-72: 288px;
265
- --height-80: 320px;
266
- --height-96: 384px;
267
- --radius-none: 0;
268
- --radius-sm: 2px;
269
- --radius: 4px;
270
- --radius-md: 6px;
271
- --radius-lg: 8px;
272
- --radius-xl: 12px;
273
- --radius-2xl: 16px;
274
- --radius-3xl: 24px;
275
- --radius-full: 9999px;
276
- --size-2: 8px;
277
- --size-3: 12px;
278
- --size-4: 16px;
279
- --size-5: 20px;
280
- --size-6: 24px;
281
- --size-7: 28px;
282
- --size-8: 32px;
283
- --size-9: 36px;
284
- --size-10: 40px;
285
- --size-11: 44px;
286
- --size-12: 48px;
287
- --size-14: 56px;
288
- --size-16: 64px;
289
- --size-20: 80px;
290
- --size-24: 96px;
291
- --size-28: 112px;
292
- --size-32: 128px;
293
- --size-36: 144px;
294
- --size-40: 160px;
295
- --size-44: 176px;
296
- --size-48: 192px;
297
- --size-52: 208px;
298
- --size-56: 224px;
299
- --size-60: 240px;
300
- --size-64: 256px;
301
- --size-72: 288px;
302
- --size-80: 320px;
303
- --size-96: 384px;
304
- --spacing-1: 4px;
305
- --spacing-2: 8px;
306
- --spacing-3: 12px;
307
- --spacing-4: 16px;
308
- --spacing-5: 20px;
309
- --spacing-6: 24px;
310
- --spacing-7: 28px;
311
- --spacing-8: 32px;
312
- --spacing-9: 36px;
313
- --spacing-10: 40px;
314
- --spacing-11: 44px;
315
- --spacing-12: 48px;
316
- --spacing-14: 56px;
317
- --spacing-16: 64px;
318
- --spacing-20: 80px;
319
- --spacing-24: 96px;
320
- --spacing-28: 112px;
321
- --spacing-32: 128px;
322
- --spacing-36: 144px;
323
- --spacing-40: 160px;
324
- --spacing-44: 176px;
325
- --spacing-48: 192px;
326
- --spacing-52: 208px;
327
- --spacing-56: 224px;
328
- --spacing-60: 240px;
329
- --spacing-64: 256px;
330
- --spacing-72: 288px;
331
- --spacing-80: 320px;
332
- --spacing-96: 384px;
333
- --width-3xs: 256px;
334
- --width-2xs: 288px;
335
- --width-xs: 320px;
336
- --width-sm: 384px;
337
- --width-md: 448px;
338
- --width-lg: 512px;
339
- --width-xl: 576px;
340
- --width-2xl: 672px;
341
- --width-3xl: 768px;
342
- --width-4xl: 896px;
343
- --width-5xl: 1024px;
344
- --width-6xl: 1152px;
345
- --width-7xl: 1280px;
346
- --aspect-video: 16 / 9;
347
- --shape-flat: 0;
348
- --shape-card: 8px;
349
- --shape-button: 6px;
350
- --shape-elements: 6px;
351
- --border-width-default: 0.8px;
352
- --font-sans: Sora;
353
- --font-code: Roboto Mono;
354
- --font-display: Proto Mono;
355
- --text-xs: 0.75rem;
356
- --text-xs--line-height: calc(1 / 0.75);
357
- --text-sm: 0.875rem;
358
- --text-sm--line-height: calc(1.25 / 0.875);
359
- --text-base: 1rem;
360
- --text-base--line-height: calc(1.5 / 1);
361
- --text-lg: 1.125rem;
362
- --text-lg--line-height: calc(1.75 / 1.125);
363
- --text-xl: 1.25rem;
364
- --text-xl--line-height: calc(1.75 / 1.25);
365
- --text-2xl: 1.5rem;
366
- --text-2xl--line-height: calc(2 / 1.5);
367
- --text-3xl: 1.875rem;
368
- --text-3xl--line-height: calc(2.25 / 1.875);
369
- --text-4xl: 2.25rem;
370
- --text-4xl--line-height: calc(2.5 / 2.25);
371
- --text-5xl: 3rem;
372
- --text-5xl--line-height: 1;
373
- --text-6xl: 3.75rem;
374
- --text-6xl--line-height: 1;
375
- --text-7xl: 4.5rem;
376
- --text-7xl--line-height: 1;
377
- --text-8xl: 6rem;
378
- --text-8xl--line-height: 1;
379
- --text-9xl: 8rem;
380
- --text-9xl--line-height: 1;
381
- --font-weight-thin: 100;
382
- --font-weight-extralight: 200;
383
- --font-weight-light: 300;
384
- --font-weight-normal: 400;
385
- --font-weight-medium: 500;
386
- --font-weight-semibold: 600;
387
- --font-weight-bold: 700;
388
- --font-weight-extrabold: 800;
389
- --font-weight-black: 900;
390
- --leading-tight: 1.25;
391
- --leading-snug: 1.375;
392
- --leading-normal: 1.5;
393
- --leading-relaxed: 1.625;
394
- --leading-loose: 2;
395
- --line-height-3: 12px;
396
- --line-height-4: 16px;
397
- --line-height-5: 20px;
398
- --line-height-6: 24px;
399
- --line-height-7: 28px;
400
- --line-height-8: 32px;
401
- --line-height-9: 36px;
402
- --line-height-10: 40px;
403
- --line-height-none: 0;
404
- --tracking-tighter: -0.05em;
405
- --tracking-tight: -0.025em;
406
- --tracking-normal: 0em;
407
- --tracking-wide: 0.025em;
408
- --tracking-wider: 0.05em;
409
- --tracking-widest: 0.1em;
410
- --blur-xs: 4px;
411
- --blur-sm: 8px;
412
- --blur-md: 12px;
413
- --blur-lg: 16px;
414
- --blur-xl: 24px;
415
- --blur-2xl: 40px;
416
- --blur-3xl: 64px;
417
- --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
418
- --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
419
- --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
420
- --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
421
- --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
422
- --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
423
- --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
424
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
425
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
426
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
427
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
428
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
429
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
430
- --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
431
- --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
432
- --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
433
- --opacity-25: 0.25;
434
- --opacity-50: 0.5;
435
- --opacity-75: 0.75;
436
- --opacity-100: 1;
437
- --perspective-dramatic: 100px;
438
- --perspective-near: 300px;
439
- --perspective-normal: 500px;
440
- --perspective-midrange: 800px;
441
- --perspective-distant: 1200px;
442
- --ease-in: cubic-bezier(0.4, 0, 1, 1);
443
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
444
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
445
- --animate-spin: spin 1s linear infinite;
446
- --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
447
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
448
- --animate-bounce: bounce 1s infinite;
449
- --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
450
- --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
451
- --ring-offset: 0.5px;
452
-
453
- /* ── Containers ── */
454
- --container-px: 1rem;
455
- --container-py: 4rem;
456
- --container-max-width: 28rem;
457
-
458
- /* ── Spacings ── */
459
- --spacing-xxl: 2rem;
460
- --spacing-xl: 1.5rem;
461
- --spacing-lg: 1rem;
462
- --spacing-md: 1rem;
463
- --spacing-sm: 0.75rem;
464
- --spacing-xs: 0.5rem;
465
- --spacing-xxs: 0.25rem;
466
-
467
- /* ── Texts ── */
468
- --text-big-number-md-font-size: 1.25rem;
469
- --text-big-number-md-line-height: 1.20;
470
- --text-big-number-md-font-family: Proto Mono;
471
- --text-big-number-sm-font-size: 1rem;
472
- --text-big-number-sm-line-height: 1.20;
473
- --text-big-number-sm-font-family: Proto Mono;
474
- --text-big-number-lg-font-size: 1.5rem;
475
- --text-big-number-lg-line-height: 1.20;
476
- --text-big-number-lg-font-family: Proto Mono;
477
- --text-heading-2xl-font-size: 1.875rem;
478
- --text-heading-2xl-line-height: 1.1;
479
- --text-heading-xl-font-size: 1.25rem;
480
- --text-heading-xl-line-height: 1.1;
481
- --text-heading-lg-font-size: 1.125rem;
482
- --text-heading-lg-line-height: 1.2;
483
- --text-heading-md-font-size: 1rem;
484
- --text-heading-md-line-height: 1.3;
485
- --text-heading-sm-font-size: 0.875rem;
486
- --text-heading-sm-line-height: 1.4;
487
- --text-heading-xs-font-size: 1rem;
488
- --text-heading-xs-line-height: 1.4;
489
- --text-heading-xxs-font-size: 0.875rem;
490
- --text-heading-xxs-line-height: 1.4;
491
- --text-label-lg-font-size: 1rem;
492
- --text-label-lg-line-height: 1.5;
493
- --text-label-lg-font-weight: 500;
494
- --text-label-md-font-size: 0.875rem;
495
- --text-label-md-line-height: 1.5;
496
- --text-label-md-font-weight: 500;
497
- --text-label-sm-font-size: 0.75rem;
498
- --text-label-sm-line-height: 1.5;
499
- --text-label-sm-font-weight: 500;
500
- --text-body-lg-font-size: 1rem;
501
- --text-body-lg-line-height: 1.5;
502
- --text-body-md-font-size: 1rem;
503
- --text-body-md-line-height: 1.5;
504
- --text-body-sm-font-size: 0.875rem;
505
- --text-body-sm-line-height: 1.5;
506
- --text-body-xs-font-size: 0.75rem;
507
- --text-body-xs-line-height: 1.5;
508
- --text-tag-sm-font-size: 0.6875rem;
509
- --text-tag-sm-line-height: 1;
510
- --text-tag-sm-font-weight: 600;
511
- --text-tag-md-font-size: 0.75rem;
512
- --text-tag-md-line-height: 1;
513
- --text-tag-md-font-weight: 600;
514
- --text-body-xxs-font-size: 0.625rem;
515
- --text-body-xxs-line-height: 1.5;
516
- --text-overline-md-font-family: Proto Mono;
517
- --text-overline-md-font-size: 0.75rem;
518
- --text-overline-md-line-height: 1.4;
519
- --text-overline-md-letter-spacing: 0.08em;
520
- --text-overline-md-text-transform: uppercase;
521
- --text-overline-sm-font-family: Proto Mono;
522
- --text-overline-sm-font-size: 0.75rem;
523
- --text-overline-sm-line-height: 1.4;
524
- --text-overline-sm-letter-spacing: 0.08em;
525
- --text-overline-sm-text-transform: uppercase;
526
- --text-overline-xs-font-family: Proto Mono;
527
- --text-overline-xs-font-size: 0.625rem;
528
- --text-overline-xs-line-height: 1.4;
529
- --text-overline-xs-letter-spacing: 0.08em;
530
- --text-overline-xs-text-transform: uppercase;
531
- --text-button-lg-font-family: Sora;
532
- --text-button-lg-font-size: 0.875rem;
533
- --text-button-lg-font-weight: 600;
534
- --text-button-lg-line-height: 1;
535
- --text-button-lg-letter-spacing: 0;
536
- --text-button-md-font-family: Sora;
537
- --text-button-md-font-size: 0.75rem;
538
- --text-button-md-font-weight: 600;
539
- --text-button-md-line-height: 1;
540
- --text-button-md-letter-spacing: 0;
541
- --text-link-font-size: inherit;
542
- --text-link-line-height: inherit;
543
- --text-link-color: var(--text-link);
544
- --text-link-border-radius: var(--shape-elements);
545
- --text-link-transition: all 110ms cubic-bezier(0.39, 0.57, 0.56, 1);
546
-
547
- /* ── Semantic colors ── */
548
- --text-default: #141414;
549
- --text-muted: #666666;
550
- --text-link: #005FCC;
551
- --text-code: #666666;
552
- --text-link-hover: #004799;
553
- --text-primary: #F3652B;
554
- --text-primary-hover: #D94A03;
555
- --text-accent: #8A84EC;
556
- --text-accent-hover: #756FE5;
557
- --text-danger-hover: #E51A1A;
558
- --text-warning-hover: #F7BD08;
559
- --text-success-hover: #26D968;
560
- --text-success: #18B452;
561
- --text-danger: #B71515;
562
- --text-warning: #C59707;
563
- --background-surface-raised: #FFFFFF;
564
- --background-surface-overlay: #FAFAFA;
565
- --background-surface: #FFFFFF;
566
- --background-canvas: #F5F5F5;
567
- --background-danger-hover: #E74B4B;
568
- --background-warning-hover: #F8CA3A;
569
- --background-success-hover: #52E086;
570
- --background-success: #A4F4C0;
571
- --background-danger: #F3A5A5;
572
- --background-warning: #FCE49C;
573
- --background-backdrop: primitives.alpha.neutral.25;
574
- --background-primary-hover: #D94A03;
575
- --background-primary: #F3652B;
576
- --background-primary-mask: primitives.alpha.brand.primary.65;
577
- --border-default: #F5F5F5;
578
- --border-strong: #000000;
579
- --border-warning: #C59707;
580
- --border-success: #18B452;
581
- --border-danger: #B71515;
582
- --border-primary: #F3652B;
583
- --border-accent: #8A84EC;
584
- --border-warning-hover: #F7BD08;
585
- --border-success-hover: #26D968;
586
- --border-danger-hover: #E51A1A;
587
- --border-primary-hover: #D94A03;
588
- --border-accent-hover: #756FE5;
589
- --border-subtle: #E5E5E5;
590
- }
591
-
592
- @media (min-width: 640px) {
593
- :root, [data-theme=light], .azion.azion-light {
594
- --container-px: 2.5rem;
595
- --container-py: 8rem;
596
- --container-max-width: 64rem;
597
- --spacing-xxl: 4rem;
598
- --spacing-xl: 2rem;
599
- --spacing-lg: 1.5rem;
600
- --text-big-number-md-font-size: 1.5rem;
601
- --text-big-number-sm-font-size: 1.25rem;
602
- --text-big-number-lg-font-size: 2.25rem;
603
- --text-heading-2xl-font-size: 3rem;
604
- --text-heading-xl-font-size: 1.875rem;
605
- --text-heading-md-font-size: 1.25rem;
606
- --text-heading-sm-font-size: 1rem;
607
- --text-overline-md-font-size: 0.875rem;
608
- }
609
- }
610
-
611
- @media (min-width: 768px) {
612
- :root, [data-theme=light], .azion.azion-light {
613
- --text-big-number-md-font-size: 2.25rem;
614
- --text-big-number-lg-font-size: 3.75rem;
615
- --text-heading-2xl-font-size: 3.75rem;
616
- --text-heading-xl-font-size: 2.25rem;
617
- --text-heading-lg-font-size: 1.875rem;
618
- --text-heading-md-font-size: 1.5rem;
619
- --text-heading-sm-font-size: 1.125rem;
620
- --text-body-lg-font-size: 1.125rem;
621
- }
622
- }
623
-
624
- @media (min-width: 1280px) {
625
- :root, [data-theme=light], .azion.azion-light {
626
- --container-px: 0;
627
- --container-py: 12rem;
628
- --container-max-width: 80rem;
629
- --spacing-xxl: 6rem;
630
- --spacing-xl: 3rem;
631
- }
632
- }
633
-
634
- [data-theme=dark], .dark, .azion.azion-dark {
635
- /* ── Semantic colors (dark) ── */
636
- --text-default: #FAFAFA;
637
- --text-muted: #999999;
638
- --text-link: #3392FF;
639
- --text-code: #999999;
640
- --text-link-hover: #66ADFF;
641
- --text-primary: #F3652B;
642
- --text-primary-hover: #FF8E4D;
643
- --text-accent: #8A84EC;
644
- --text-accent-hover: #9F9AF1;
645
- --text-danger-hover: #E51A1A;
646
- --text-warning-hover: #F7BD08;
647
- --text-success-hover: #26D968;
648
- --text-success: #52E086;
649
- --text-danger: #E74B4B;
650
- --text-warning: #F8CA3A;
651
- --background-surface-raised: #1A1A1A;
652
- --background-surface-overlay: #4D4D4D;
653
- --background-surface: #141414;
654
- --background-canvas: #0A0A0A;
655
- --background-danger-hover: #B71515;
656
- --background-warning-hover: #C59707;
657
- --background-success-hover: #18B452;
658
- --background-success: #12542B;
659
- --background-danger: #5B0B0B;
660
- --background-warning: #634B03;
661
- --background-backdrop: primitives.alpha.neutral.25;
662
- --background-primary-hover: #FF8E4D;
663
- --background-primary: #F3652B;
664
- --background-primary-mask: primitives.alpha.brand.primary.65;
665
- --border-default: #1A1A1A;
666
- --border-strong: #FFFFFF;
667
- --border-warning: #F8CA3A;
668
- --border-success: #52E086;
669
- --border-danger: #E74B4B;
670
- --border-primary: #F3652B;
671
- --border-accent: #8A84EC;
672
- --border-warning-hover: #F7BD08;
673
- --border-success-hover: #26D968;
674
- --border-danger-hover: #E51A1A;
675
- --border-primary-hover: #FF8E4D;
676
- --border-accent-hover: #9F9AF1;
677
- --border-subtle: #4D4D4D;
678
- }
679
-
680
- /* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */
681
- :root, [data-theme=light], .azion.azion-light {
682
- --surface-0: #FFFFFF;
683
- --surface-50: #FAFAFA;
684
- --surface-100: #F5F5F5;
685
- --surface-200: #E5E5E5;
686
- --surface-300: #B2B2B2;
687
- --surface-400: #999999;
688
- --surface-500: #808080;
689
- --surface-600: #666666;
690
- --surface-700: #4D4D4D;
691
- --surface-800: #1A1A1A;
692
- --surface-900: #141414;
693
- --surface-950: #0A0A0A;
694
- --primary: #F3652B;
695
- --primary-mask: #FE601F33;
696
- --primary-selected: #FE601F33;
697
- --primary-contrast: #000000;
698
- --secondary: #0A0A0A;
699
- --secondary-mask: #00000005;
700
- --secondary-selected: #0A0A0A;
701
- --secondary-contrast: #FFFFFF;
702
- --accent: #756FE5;
703
- --accent-mask: #8A84EC0D;
704
- --accent-selected: #8A84EC;
705
- --accent-contrast: #000000;
706
- --bg-canvas: #FAFAFA;
707
- --bg-surface: #FFFFFF;
708
- --bg-surface-raised: #FFFFFF;
709
- --bg-mask: #00000005;
710
- --bg-surface-overlay: #FAFAFA;
711
- --bg-hover: #00000014;
712
- --bg-active: #00000005;
713
- --bg-backdrop: #000000CC;
714
- --bg-selected: #E5E5E5;
715
- --bg-contrast: #141414;
716
- --bg-disabled: #E5E5E5;
717
- --border-default: #00000014;
718
- --border-muted: #00000014;
719
- --border-strong: #000000;
720
- --border-selected: #F3652B;
721
- --text-default: #141414;
722
- --text-muted: #666666;
723
- --text-disabled: #999999;
724
- --text-link: #005FCC;
725
- --text-contrast: #FAFAFA;
726
- --ring-color: #0A0A0A;
727
- --success: #A4F4C0;
728
- --success-border: #22C55E66;
729
- --success-contrast: #12542B;
730
- --warning: #FCE49C;
731
- --warning-border: #F7BD0880;
732
- --warning-contrast: #634B03;
733
- --danger: #F9D2D2;
734
- --danger-border: #E51A1A66;
735
- --danger-contrast: #891010;
736
- --info: #CCE4FF;
737
- --info-border: #8A84EC66;
738
- --info-contrast: #004799;
739
- }
740
-
741
- [data-theme=dark], .dark, .azion.azion-dark {
742
- --surface-0: #FFFFFF;
743
- --surface-50: #FAFAFA;
744
- --surface-100: #F5F5F5;
745
- --surface-200: #E5E5E5;
746
- --surface-300: #B2B2B2;
747
- --surface-400: #999999;
748
- --surface-500: #808080;
749
- --surface-600: #666666;
750
- --surface-700: #4D4D4D;
751
- --surface-800: #1A1A1A;
752
- --surface-900: #141414;
753
- --surface-950: #0A0A0A;
754
- --primary: #F3652B;
755
- --primary-mask: #FE601F33;
756
- --primary-selected: #FE601F33;
757
- --primary-contrast: #FFFFFF;
758
- --secondary: #FFFFFF;
759
- --secondary-mask: #FFFFFF1A;
760
- --secondary-selected: #FFFFFF;
761
- --secondary-contrast: #000000;
762
- --accent: #8A84EC;
763
- --accent-mask: #8A84EC1A;
764
- --accent-selected: #8A84EC;
765
- --accent-contrast: #000000;
766
- --bg-canvas: #000000;
767
- --bg-surface: #0A0A0A;
768
- --bg-surface-raised: #141414;
769
- --bg-mask: #FFFFFF0D;
770
- --bg-surface-overlay: #4D4D4D;
771
- --bg-hover: #00000033;
772
- --bg-active: #00000014;
773
- --bg-backdrop: #000000CC;
774
- --bg-selected: #1A1A1A;
775
- --bg-contrast: #FAFAFA;
776
- --bg-disabled: #1A1A1A;
777
- --border-default: #FFFFFF1A;
778
- --border-muted: #FFFFFF0D;
779
- --border-strong: #FFFFFF;
780
- --border-selected: #F3652B;
781
- --text-default: #FAFAFA;
782
- --text-muted: #999999;
783
- --text-disabled: #4D4D4D;
784
- --text-link: #3392FF;
785
- --text-contrast: #000000;
786
- --ring-color: #FFFFFF;
787
- --success: #0A2916;
788
- --success-border: #22C55E66;
789
- --success-contrast: #52E086;
790
- --warning: #312602;
791
- --warning-border: #F7BD0880;
792
- --warning-contrast: #F7BD08;
793
- --danger: #5B0B0B;
794
- --danger-border: #E51A1A66;
795
- --danger-contrast: #ED7878;
796
- --info: #001833;
797
- --info-border: #0072F580;
798
- --info-contrast: #66ADFF;
799
- }
800
-
801
- @layer components {
802
- /* ── Containers ── */
803
- .px-container { padding-left: var(--container-px); padding-right: var(--container-px); }
804
- .py-container { padding-top: var(--container-py); padding-bottom: var(--container-py); }
805
- .max-container-width { max-width: var(--container-max-width); }
806
-
807
- /* ── Spacings ── */
808
- .gap-spacing-xxl { gap: var(--spacing-xxl); }
809
- .p-spacing-xxl { padding: var(--spacing-xxl); }
810
- .gap-spacing-xl { gap: var(--spacing-xl); }
811
- .p-spacing-xl { padding: var(--spacing-xl); }
812
- .gap-spacing-lg { gap: var(--spacing-lg); }
813
- .p-spacing-lg { padding: var(--spacing-lg); }
814
- .gap-spacing-md { gap: var(--spacing-md); }
815
- .p-spacing-md { padding: var(--spacing-md); }
816
- .gap-spacing-sm { gap: var(--spacing-sm); }
817
- .p-spacing-sm { padding: var(--spacing-sm); }
818
- .gap-spacing-xs { gap: var(--spacing-xs); }
819
- .p-spacing-xs { padding: var(--spacing-xs); }
820
- .gap-spacing-xxs { gap: var(--spacing-xxs); }
821
- .p-spacing-xxs { padding: var(--spacing-xxs); }
822
-
823
- /* ── Texts ── */
824
- .text-big-number-md { font-size: var(--text-big-number-md-font-size); line-height: var(--text-big-number-md-line-height); font-family: var(--text-big-number-md-font-family); }
825
- .text-big-number-sm { font-size: var(--text-big-number-sm-font-size); line-height: var(--text-big-number-sm-line-height); font-family: var(--text-big-number-sm-font-family); }
826
- .text-big-number-lg { font-size: var(--text-big-number-lg-font-size); line-height: var(--text-big-number-lg-line-height); font-family: var(--text-big-number-lg-font-family); }
827
- .text-heading-2xl { font-size: var(--text-heading-2xl-font-size); line-height: var(--text-heading-2xl-line-height); }
828
- .text-heading-xl { font-size: var(--text-heading-xl-font-size); line-height: var(--text-heading-xl-line-height); }
829
- .text-heading-lg { font-size: var(--text-heading-lg-font-size); line-height: var(--text-heading-lg-line-height); }
830
- .text-heading-md { font-size: var(--text-heading-md-font-size); line-height: var(--text-heading-md-line-height); }
831
- .text-heading-sm { font-size: var(--text-heading-sm-font-size); line-height: var(--text-heading-sm-line-height); }
832
- .text-heading-xs { font-size: var(--text-heading-xs-font-size); line-height: var(--text-heading-xs-line-height); }
833
- .text-heading-xxs { font-size: var(--text-heading-xxs-font-size); line-height: var(--text-heading-xxs-line-height); }
834
- .text-label-lg { font-size: var(--text-label-lg-font-size); line-height: var(--text-label-lg-line-height); font-weight: var(--text-label-lg-font-weight); }
835
- .text-label-md { font-size: var(--text-label-md-font-size); line-height: var(--text-label-md-line-height); font-weight: var(--text-label-md-font-weight); }
836
- .text-label-sm { font-size: var(--text-label-sm-font-size); line-height: var(--text-label-sm-line-height); font-weight: var(--text-label-sm-font-weight); }
837
- .text-body-lg { font-size: var(--text-body-lg-font-size); line-height: var(--text-body-lg-line-height); }
838
- .text-body-md { font-size: var(--text-body-md-font-size); line-height: var(--text-body-md-line-height); }
839
- .text-body-sm { font-size: var(--text-body-sm-font-size); line-height: var(--text-body-sm-line-height); }
840
- .text-body-xs { font-size: var(--text-body-xs-font-size); line-height: var(--text-body-xs-line-height); }
841
- .text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); font-weight: var(--text-tag-sm-font-weight); }
842
- .text-tag-md { font-size: var(--text-tag-md-font-size); line-height: var(--text-tag-md-line-height); font-weight: var(--text-tag-md-font-weight); }
843
- .text-body-xxs { font-size: var(--text-body-xxs-font-size); line-height: var(--text-body-xxs-line-height); }
844
- .text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); line-height: var(--text-overline-md-line-height); letter-spacing: var(--text-overline-md-letter-spacing); text-transform: var(--text-overline-md-text-transform); }
845
- .text-overline-sm { font-family: var(--text-overline-sm-font-family); font-size: var(--text-overline-sm-font-size); line-height: var(--text-overline-sm-line-height); letter-spacing: var(--text-overline-sm-letter-spacing); text-transform: var(--text-overline-sm-text-transform); }
846
- .text-overline-xs { font-family: var(--text-overline-xs-font-family); font-size: var(--text-overline-xs-font-size); line-height: var(--text-overline-xs-line-height); letter-spacing: var(--text-overline-xs-letter-spacing); text-transform: var(--text-overline-xs-text-transform); }
847
- .text-button-lg { font-family: var(--text-button-lg-font-family); font-size: var(--text-button-lg-font-size); font-weight: var(--text-button-lg-font-weight); line-height: var(--text-button-lg-line-height); letter-spacing: var(--text-button-lg-letter-spacing); }
848
- .text-button-md { font-family: var(--text-button-md-font-family); font-size: var(--text-button-md-font-size); font-weight: var(--text-button-md-font-weight); line-height: var(--text-button-md-line-height); letter-spacing: var(--text-button-md-letter-spacing); }
849
- .text-link { font-size: var(--text-link-font-size); line-height: var(--text-link-line-height); color: var(--text-link-color); border-radius: var(--text-link-border-radius); transition: var(--text-link-transition); }
850
- .text-link:hover { color: var(--text-link-hover); text-decoration: underline; }
851
- .text-link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
852
- @media (prefers-reduced-motion: reduce) {
853
- .text-link { transition: none; }
854
- }
855
- }