fluid-ui-svelte 0.3.1 → 0.3.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/dist/app.css +0 -284
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluid-ui-svelte",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "author": {
5
5
  "name": "Emre Ayaz",
6
6
  "email": "ayazthemre@gmail.com"
package/dist/app.css DELETED
@@ -1,284 +0,0 @@
1
- @import 'tailwindcss';
2
-
3
- @custom-variant dark (&:where(.dark, .dark *));
4
-
5
- @theme {
6
- --font-family-sans: 'Inter', sans-serif;
7
- --color-*: initial;
8
- --color-white: #fff;
9
- --color-black: #000;
10
-
11
- --color-neutral-50: #fafafa;
12
- --color-neutral-100: #f4f4f5;
13
- --color-neutral-200: #e4e4e7;
14
- --color-neutral-300: #dedee1;
15
- --color-neutral-400: #a1a1aa;
16
- --color-neutral-500: #71717a;
17
- --color-neutral-600: #52525b;
18
- --color-neutral-700: #3f3f46;
19
- --color-neutral-800: #27272a;
20
- --color-neutral-900: #18181b;
21
- --color-neutral-950: #09090b;
22
-
23
- --color-primary-50: #eff4ff;
24
- --color-primary-100: #dce6fd;
25
- --color-primary-200: #c0d4fd;
26
- --color-primary-300: #95bafb;
27
- --color-primary-400: #6295f8;
28
- --color-primary-500: #3e6ff3;
29
- --color-primary-600: #284fe8;
30
- --color-primary-700: #203bd5;
31
- --color-primary-800: #2032ad;
32
- --color-primary-900: #203088;
33
- --color-primary-950: #182053;
34
-
35
- --color-secondary-50: #f5f3ff;
36
- --color-secondary-100: #ede9fe;
37
- --color-secondary-200: #ddd6fe;
38
- --color-secondary-300: #c4b5fd;
39
- --color-secondary-400: #a78bfa;
40
- --color-secondary-500: #8b5cf6;
41
- --color-secondary-600: #7c3aed;
42
- --color-secondary-700: #6d28d9;
43
- --color-secondary-800: #5b21b6;
44
- --color-secondary-900: #4c1d95;
45
- --color-secondary-950: #2a1065;
46
-
47
- --color-tetriary-50: #f5f3ff;
48
- --color-tetriary-100: #ede9fe;
49
- --color-tetriary-200: #ddd6fe;
50
- --color-tetriary-300: #c4b5fd;
51
- --color-tetriary-400: #a78bfa;
52
- --color-tetriary-500: #8b5cf6;
53
- --color-tetriary-600: #7c3aed;
54
- --color-tetriary-700: #6d28d9;
55
- --color-tetriary-800: #5b21b6;
56
- --color-tetriary-900: #4c1d95;
57
- --color-tetriary-950: #2a1065;
58
-
59
- --color-success-50: #ecfdf5;
60
- --color-success-100: #d1fae5;
61
- --color-success-200: #a7f3d0;
62
- --color-success-300: #6ee7b7;
63
- --color-success-400: #34d399;
64
- --color-success-500: #10b981;
65
- --color-success-600: #059669;
66
- --color-success-700: #0f766e;
67
- --color-success-800: #065f46;
68
- --color-success-900: #064e3b;
69
- --color-success-950: #022c22;
70
-
71
- --color-warning-50: #fffbeb;
72
- --color-warning-100: #fef3c7;
73
- --color-warning-200: #fde68a;
74
- --color-warning-300: #fcd34d;
75
- --color-warning-400: #fbbf24;
76
- --color-warning-500: #f59e0b;
77
- --color-warning-600: #d97706;
78
- --color-warning-700: #b45309;
79
- --color-warning-800: #92400e;
80
- --color-warning-900: #78350f;
81
- --color-warning-950: #451a03;
82
-
83
- --color-info-50: #f0f9ff;
84
- --color-info-100: #e0f2fe;
85
- --color-info-200: #bae6fd;
86
- --color-info-300: #7dd3fc;
87
- --color-info-400: #38bdf8;
88
- --color-info-500: #0ea5e9;
89
- --color-info-600: #0284c7;
90
- --color-info-700: #0369a1;
91
- --color-info-800: #075985;
92
- --color-info-900: #0c4a6e;
93
- --color-info-950: #082f49;
94
-
95
- --color-error-50: #fef2f2;
96
- --color-error-100: #fee2e2;
97
- --color-error-200: #fecaca;
98
- --color-error-300: #fca5a5;
99
- --color-error-400: #f87171;
100
- --color-error-500: #ef4444;
101
- --color-error-600: #dc2626;
102
- --color-error-700: #b91c1c;
103
- --color-error-800: #991b1b;
104
- --color-error-900: #7f1d1d;
105
- --color-error-950: #450a0a;
106
- }
107
-
108
- /* ==========================================================================
109
- BASE LAYER STYLES
110
- Fundamental building blocks and semantic wrappers.
111
- ========================================================================== */
112
-
113
- /* Button -------------------------- */
114
- .fluid-button {
115
- @apply flex cursor-pointer items-center gap-1 rounded-md p-2 transition-all duration-500;
116
- }
117
- .fluid-button-primary {
118
- @apply bg-primary-500 text-neutral-50 hover:bg-primary-400;
119
- }
120
- .fluid-button-secondary {
121
- @apply bg-secondary-500 text-neutral-50 hover:bg-secondary-400;
122
- }
123
- .fluid-button-outline {
124
- @apply text-primary-500 outline-2 outline-primary-500 hover:bg-primary-500 hover:text-neutral-50;
125
- }
126
- .fluid-button-transparent {
127
- @apply text-primary-500 hover:text-primary-700 dark:hover:text-neutral-50;
128
- }
129
-
130
- /* Container ----------------------- */
131
- .fluid-container {
132
- @apply transition-all duration-500;
133
- }
134
-
135
- section,
136
- main.fluid-container {
137
- @apply min-w-0 bg-neutral-50 transition-all duration-500 dark:bg-neutral-900;
138
- }
139
-
140
- /* Image --------------------------- */
141
- .fluid-image {
142
- @apply object-contain;
143
- }
144
- .fluid-image-loading {
145
- @apply animate-pulse bg-primary-500;
146
- }
147
-
148
- /* Input Field --------------------- */
149
- .fluid-input-field {
150
- @apply rounded-md bg-neutral-50 p-1 outline-1 outline-primary-500 transition-all focus:outline-2 focus:outline-primary-500 dark:bg-neutral-800 dark:text-neutral-50;
151
- }
152
- .fluid-input-field-error {
153
- @apply outline-2 outline-error-500;
154
- }
155
-
156
- /* Link ---------------------------- */
157
- .fluid-link {
158
- @apply text-neutral-950 transition-all visited:text-primary-300 hover:text-neutral-500 dark:text-neutral-50 dark:hover:text-neutral-300;
159
- }
160
-
161
- /* List ---------------------------- */
162
- .fluid-unordered-list {
163
- @apply list-disc text-neutral-950 dark:text-neutral-50;
164
- }
165
- .fluid-ordered-list {
166
- @apply list-decimal text-neutral-950 dark:text-neutral-50;
167
- }
168
-
169
- /* Table --------------------------- */
170
- .fluid-table {
171
- @apply w-full border-separate border-spacing-0 overflow-hidden rounded-md border dark:border-neutral-300;
172
- }
173
- .fluid-table-head {
174
- @apply bg-neutral-200 dark:bg-neutral-800;
175
- }
176
- .fluid-table-row {
177
- @apply even:bg-neutral-200 dark:even:bg-neutral-800;
178
- }
179
- .fluid-table-cell {
180
- @apply border-collapse bg-clip-padding text-center;
181
- }
182
- .fluid-table-body {
183
- }
184
- .fluid-table-footer {
185
- @apply bg-clip-padding p-2 odd:bg-neutral-100 dark:odd:bg-neutral-800;
186
- }
187
-
188
- /* Text ---------------------------- */
189
- .fluid-text {
190
- @apply text-neutral-950 transition-all duration-500 dark:text-neutral-50;
191
- }
192
-
193
- /* ==========================================================================
194
- COMPONENT LAYER STYLES
195
- Complex UI elements composed from the Base Layer.
196
- ========================================================================== */
197
-
198
- /* Accordion ----------------------- */
199
- .fluid-accordion-wrapper {
200
- @apply flex-col;
201
- }
202
- .fluid-accordion-header {
203
- @apply flex w-full cursor-pointer flex-nowrap items-center justify-between rounded-md p-2 transition-all hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-800;
204
- }
205
- .fluid-accordion-body {
206
- @apply flex w-full flex-col gap-1 p-2;
207
- }
208
-
209
- /* Calendar ------------------------ */
210
- .fluid-calendar {
211
- }
212
- .fluid-calendar-container {
213
- @apply flex flex-wrap;
214
- }
215
- .fluid-calendar-wrapper {
216
- @apply flex flex-col items-center gap-1 p-2;
217
- }
218
- .fluid-calendar-header {
219
- @apply flex w-full justify-center;
220
- }
221
- .fluid-calendar-body {
222
- @apply grid grid-cols-7 justify-items-center gap-4;
223
- }
224
- .fluid-calendar-cell {
225
- @apply dark:text-neutral-50;
226
- }
227
- .fluid-calendar-cell-selected {
228
- @apply bg-primary-600 text-neutral-50;
229
- }
230
- .fluid-calendar-cell-in-range {
231
- @apply bg-primary-400 text-neutral-50;
232
- }
233
- .fluid-calendar-cell-rolling-day {
234
- @apply opacity-25;
235
- }
236
-
237
- /* Carousel ------------------------ */
238
- .fluid-carousel-container {
239
- @apply flex snap-mandatory overflow-hidden scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
240
- }
241
- .fluid-carousel-item {
242
- @apply size-full shrink-0 snap-center;
243
- }
244
-
245
- /* Code Block ---------------------- */
246
- .fluid-code-block-container {
247
- @apply flex flex-col overflow-scroll rounded-md bg-neutral-200 p-4 font-mono dark:bg-neutral-800;
248
- }
249
- .fluid-code-block-row {
250
- @apply flex items-center gap-1;
251
- }
252
- .fluid-code-block-index {
253
- @apply min-w-8 gap-1 border-r dark:border-neutral-50;
254
- }
255
- .fluid-code-block-content {
256
- @apply flex flex-col gap-1 px-2;
257
- }
258
-
259
- /* Drawer -------------------------- */
260
- .fluid-drawer-container {
261
- @apply fixed inset-0 z-10 bg-black/30 backdrop-blur-sm;
262
- }
263
- .fluid-drawer-panel {
264
- @apply fixed z-20 bg-white p-6 shadow-xl transition-all dark:bg-neutral-900;
265
- }
266
-
267
- /* Page ---------------------------- */
268
- .fluid-page {
269
- @apply flex w-full flex-1 flex-col p-8 md:p-16;
270
- }
271
-
272
- /* Switch -------------------------- */
273
- .fluid-switch-button {
274
- @apply relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-neutral-200 transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
275
- }
276
- .fluid-switch-circle {
277
- @apply pointer-events-none inline-block h-4 w-4 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out checked:translate-x-4;
278
- }
279
- .fluid-switch-button.checked {
280
- @apply bg-primary-600;
281
- }
282
- .fluid-switch-button.checked .fluid-switch-circle {
283
- @apply translate-x-4;
284
- }