@fest-lib/veela 0.1.1

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 (78) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +533 -0
  3. package/dist/veela.js +878 -0
  4. package/package.json +83 -0
  5. package/src/scss/_layers.scss +16 -0
  6. package/src/scss/advanced/_index.scss +0 -0
  7. package/src/scss/advanced/animation/_motion.scss +317 -0
  8. package/src/scss/advanced/color/_color.scss +328 -0
  9. package/src/scss/advanced/color/_colorize.scss +325 -0
  10. package/src/scss/advanced/design/_design-tokens.scss +118 -0
  11. package/src/scss/advanced/design/_effects.scss +275 -0
  12. package/src/scss/advanced/design/_shadow.scss +359 -0
  13. package/src/scss/advanced/design/_surfaces.scss +76 -0
  14. package/src/scss/advanced/effects/_animations.scss +124 -0
  15. package/src/scss/advanced/effects/_shadows.scss +50 -0
  16. package/src/scss/advanced/font/_typography.scss +600 -0
  17. package/src/scss/advanced/index.scss +11 -0
  18. package/src/scss/advanced/index.ts +35 -0
  19. package/src/scss/advanced/layout/_content.scss +170 -0
  20. package/src/scss/advanced/layout/_index.scss +5 -0
  21. package/src/scss/advanced/layout/_normalize.scss +541 -0
  22. package/src/scss/advanced/layout/_shared-overlays.scss +162 -0
  23. package/src/scss/advanced/md3/_md3.scss +596 -0
  24. package/src/scss/advanced/md3/_utils.scss +114 -0
  25. package/src/scss/advanced/misc/_config.scss +119 -0
  26. package/src/scss/advanced/misc/_initials.scss +298 -0
  27. package/src/scss/advanced/misc/_mixins.scss +179 -0
  28. package/src/scss/advanced/misc/_queries.scss +34 -0
  29. package/src/scss/advanced/misc/_rendering.scss +82 -0
  30. package/src/scss/advanced/misc/_tokens.scss +74 -0
  31. package/src/scss/advanced/theme/_shared.scss +232 -0
  32. package/src/scss/advanced/theme/_states.scss +332 -0
  33. package/src/scss/advanced/theme/_variants.scss +354 -0
  34. package/src/scss/advanced/tokens/_material-color.scss +120 -0
  35. package/src/scss/advanced/tokens/_variables.scss +171 -0
  36. package/src/scss/basic/_layers.scss +0 -0
  37. package/src/scss/basic/design/_index.scss +3 -0
  38. package/src/scss/basic/design/_keyframes.scss +163 -0
  39. package/src/scss/basic/design/_shapes.scss +266 -0
  40. package/src/scss/basic/design/_wavy-runtime.scss +50 -0
  41. package/src/scss/basic/index.scss +19 -0
  42. package/src/scss/basic/index.ts +29 -0
  43. package/src/scss/basic/misc/_core-layout.scss +272 -0
  44. package/src/scss/basic/misc/_index.scss +18 -0
  45. package/src/scss/basic/misc/_layout.scss +1040 -0
  46. package/src/scss/basic/misc/_mixins.scss +179 -0
  47. package/src/scss/basic/misc/_motion.scss +28 -0
  48. package/src/scss/basic/misc/_normalize.scss +765 -0
  49. package/src/scss/basic/misc/_queries.scss +34 -0
  50. package/src/scss/basic/misc/_shared.scss +232 -0
  51. package/src/scss/basic/misc/_states.scss +135 -0
  52. package/src/scss/basic/misc/_tokens.scss +78 -0
  53. package/src/scss/basic/misc/_veela.scss +12 -0
  54. package/src/scss/core/index.scss +1 -0
  55. package/src/scss/core/interact/_draggable.scss +32 -0
  56. package/src/scss/core/interact/_position.scss +45 -0
  57. package/src/scss/core/interact/_ps-anchor.scss +28 -0
  58. package/src/scss/core/interact/_ps-centered.scss +28 -0
  59. package/src/scss/core/interact/_ps-cursor.scss +18 -0
  60. package/src/scss/core/interact/_ps-draggable.scss +25 -0
  61. package/src/scss/core/interact/_ps-mechanic.scss +0 -0
  62. package/src/scss/core/interact/_ps-properties.scss +54 -0
  63. package/src/scss/core/interact/_ps-resizable.scss +61 -0
  64. package/src/scss/core/interact/_resizable.scss +69 -0
  65. package/src/scss/core/interact/_viewport.scss +469 -0
  66. package/src/scss/core/misc/_color-properties.scss +64 -0
  67. package/src/scss/core/misc/_config.scss +110 -0
  68. package/src/scss/core/misc/_functions.scss +530 -0
  69. package/src/scss/core/misc/_icons.scss +109 -0
  70. package/src/scss/core/misc/_index.scss +6 -0
  71. package/src/scss/core/misc/_layout.scss +49 -0
  72. package/src/scss/core/misc/_mixins.scss +744 -0
  73. package/src/scss/core/misc/_properties.scss +245 -0
  74. package/src/scss/core/misc/_tokens.scss +947 -0
  75. package/src/scss/core/misc/_utilities.scss +941 -0
  76. package/src/scss/core/misc/_utils.scss +17 -0
  77. package/src/scss/index.scss +18 -0
  78. package/src/scss/index.ts +105 -0
package/src/scss/basic/misc/_core-layout.scss ADDED
@@ -0,0 +1,272 @@
1
+ //
2
+ @layer ux-agate {
3
+ @media screen {
4
+ :root, :host, :scope, :where(body) {
5
+ pointer-events: auto;
6
+
7
+ //
8
+ transition-behavior: allow-discrete;
9
+ interpolate-size: allow-keywords;
10
+ content-visibility: auto;
11
+
12
+ //
13
+ --keyboard-inset-bottom: calc(max(env(keyboard-inset-bottom, 0px), 0px) / max(var(--zoom, 1), 0.125));
14
+ --keyboard-inset-height: calc(max(env(keyboard-inset-height, 0px), 0px) / max(var(--zoom, 1), 0.125));
15
+ }
16
+
17
+ //
18
+ :root, :scope, :host {
19
+ --scale: 1;
20
+ --translate-x: 0px;
21
+ --translate-y: 0px;
22
+
23
+ //
24
+ &, & :where(*) {
25
+ --scale: 1;
26
+ --translate-x: 0px;
27
+ --translate-y: 0px;
28
+ }
29
+ }
30
+
31
+ //
32
+ :root, :where(html) {
33
+ translate: none;
34
+ transform: none;
35
+ margin: 0px;
36
+ padding: 0px;
37
+ border: none 0px transparent;
38
+ outline: none 0px transparent;
39
+
40
+ //
41
+ background-color: transparent;
42
+ container-type: size;
43
+ container-name: html root;
44
+ contain: none;
45
+ overflow: visible;
46
+ position: fixed;
47
+ inset: 0px;
48
+ inset-block-end: auto;
49
+
50
+ //
51
+ min-inline-size: min(100cqi, 100dvi);
52
+ min-block-size: min(100cqb, 100dvb);
53
+
54
+ //
55
+ inline-size: stretch;
56
+ block-size: stretch;
57
+
58
+ //
59
+ max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
60
+ max-block-size: min(100%, min(100cqb, 100dvb)) !important;
61
+
62
+ //
63
+ place-content: start;
64
+ place-items: start;
65
+ place-self: start;
66
+
67
+ //
68
+ line-height: normal;
69
+ flex-direction: column;
70
+ display: flex;
71
+ };
72
+
73
+ //
74
+ :where(body) {
75
+ //@include fit-viewport();
76
+
77
+ //
78
+ & {
79
+ translate: none;
80
+ transform: none;
81
+ margin: 0px;
82
+ padding: 0px;
83
+ border: none 0px transparent;
84
+ outline: none 0px transparent;
85
+
86
+ //
87
+ font-size: var(--text-base, 0.9rem);
88
+
89
+ //
90
+ overflow: visible;
91
+ position: relative;
92
+ pointer-events: auto;
93
+ inset: auto;
94
+
95
+ //
96
+ display: inline flex;
97
+ place-content: start;
98
+ place-items: start;
99
+ place-self: start;
100
+
101
+ //
102
+ background-color: transparent;
103
+
104
+ // if needs viewport
105
+ container-name: body;
106
+ container-type: size;
107
+ contain: strict;
108
+
109
+ //
110
+ min-inline-size: 0px;
111
+ min-block-size: 0px;
112
+
113
+ //
114
+ inline-size: stretch;
115
+ block-size: stretch;
116
+
117
+ //
118
+ max-inline-size: min(100%, min(100cqi, 100dvi));
119
+ max-block-size: min(100%, min(100cqb, 100dvb));
120
+ }
121
+
122
+ //
123
+ & > :where(#app, #container, #root, .root) {
124
+ inline-size: stretch;
125
+ block-size: stretch;
126
+ min-inline-size: 0px;
127
+ min-block-size: 0px;
128
+ max-inline-size: min(100%, min(100cqi, 100dvi));
129
+ max-block-size: min(100%, min(100cqb, 100dvb));
130
+ }
131
+
132
+ //
133
+ & > :where(*) {
134
+ max-inline-size: min(100%, min(100cqi, 100dvi));
135
+ max-block-size: min(100%, min(100cqb, 100dvb));
136
+ }
137
+ }
138
+
139
+ :root, :host, :scope, :where(body) {
140
+ pointer-events: auto;
141
+
142
+ //
143
+ transition-behavior: allow-discrete;
144
+ interpolate-size: allow-keywords;
145
+ content-visibility: auto;
146
+
147
+ //
148
+ --keyboard-inset-bottom: calc(max(env(keyboard-inset-bottom, 0px), 0px) / max(var(--zoom, 1), 0.125));
149
+ --keyboard-inset-height: calc(max(env(keyboard-inset-height, 0px), 0px) / max(var(--zoom, 1), 0.125));
150
+ }
151
+
152
+ //
153
+ :root, :scope, :host {
154
+ --scale: 1;
155
+ --translate-x: 0px;
156
+ --translate-y: 0px;
157
+
158
+ //
159
+ &, & :where(*) {
160
+ --scale: 1;
161
+ --translate-x: 0px;
162
+ --translate-y: 0px;
163
+ }
164
+ }
165
+
166
+ //
167
+ :root, :where(html) {
168
+ translate: none;
169
+ transform: none;
170
+ margin: 0px;
171
+ padding: 0px;
172
+ border: none 0px transparent;
173
+ outline: none 0px transparent;
174
+
175
+ //
176
+ background-color: transparent;
177
+ container-type: size;
178
+ container-name: html root;
179
+ contain: none;
180
+ overflow: visible;
181
+ position: fixed;
182
+ inset: 0px;
183
+ inset-block-end: auto;
184
+
185
+ //
186
+ min-inline-size: min(100cqi, 100dvi);
187
+ min-block-size: min(100cqb, 100dvb);
188
+
189
+ //
190
+ inline-size: stretch;
191
+ block-size: stretch;
192
+
193
+ //
194
+ max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
195
+ max-block-size: min(100%, min(100cqb, 100dvb)) !important;
196
+
197
+ //
198
+ place-content: start;
199
+ place-items: start;
200
+ place-self: start;
201
+
202
+ //
203
+ line-height: normal;
204
+ flex-direction: column;
205
+ display: flex;
206
+ };
207
+
208
+ //
209
+ :where(body) {
210
+ & {
211
+ translate: none;
212
+ transform: none;
213
+ margin: 0px;
214
+ padding: 0px;
215
+ border: none 0px transparent;
216
+ outline: none 0px transparent;
217
+
218
+ //
219
+ font-size: var(--text-base, 0.9rem);
220
+
221
+ //
222
+ overflow: visible;
223
+ position: relative;
224
+ pointer-events: auto;
225
+ inset: auto;
226
+
227
+ //
228
+ display: inline flex;
229
+ place-content: start;
230
+ place-items: start;
231
+ place-self: start;
232
+
233
+ //
234
+ background-color: transparent;
235
+
236
+ // if needs viewport
237
+ container-name: body;
238
+ container-type: size;
239
+ contain: strict;
240
+
241
+ //
242
+ min-inline-size: 0px;
243
+ min-block-size: 0px;
244
+
245
+ //
246
+ inline-size: stretch;
247
+ block-size: stretch;
248
+
249
+ //
250
+ max-inline-size: min(100%, min(100cqi, 100dvi));
251
+ max-block-size: min(100%, min(100cqb, 100dvb));
252
+ }
253
+
254
+ //
255
+ & > :where(#app, #container, #root, .root) {
256
+ inline-size: stretch;
257
+ block-size: stretch;
258
+ min-inline-size: 0px;
259
+ min-block-size: 0px;
260
+ max-inline-size: min(100%, min(100cqi, 100dvi));
261
+ max-block-size: min(100%, min(100cqb, 100dvb));
262
+ }
263
+
264
+ //
265
+ & > :where(*) {
266
+ max-inline-size: min(100%, min(100cqi, 100dvi));
267
+ max-block-size: min(100%, min(100cqb, 100dvb));
268
+ }
269
+ }
270
+ };
271
+
272
+ };
package/src/scss/basic/misc/_index.scss ADDED
@@ -0,0 +1,18 @@
1
+ // FL.UI Lib - Unified mixin facade
2
+ // This file provides a consistent API whether using veela or core mixins
3
+ //
4
+ // Usage: @use "fl-ui-lib" as m;
5
+ //
6
+ // This facade can be configured to use:
7
+ // - Core mixins (veela-independent)
8
+ // - Veela mixins (when veela is available)
9
+ // - Custom mixins (your own CSS framework)
10
+
11
+ // Core SCSS mixins - Veela-independent fallbacks
12
+ // These provide basic implementations that work without veela
13
+ // When veela is available, these can be enhanced/overridden
14
+
15
+ @forward "./queries";
16
+ @forward "./mixins";
17
+ @forward "./motion";
18
+ @forward "./layout";