@morscherlab/mld-sdk 0.7.1 → 0.7.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 (6) hide show
  1. package/dist/styles.css +42 -37
  2. package/package.json +1 -1
  3. package/src/styles/components/app-top-bar.css +9 -9
  4. package/src/styles/components/form-field.css +5 -3
  5. package/src/styles/components/tabs.css +1 -1
  6. package/src/styles/variables.css +12 -11
package/dist/styles.css CHANGED
@@ -28,8 +28,9 @@
28
28
  --text-muted: #94A3B8;
29
29
 
30
30
  /* Brand colors */
31
- --color-primary: #3B82F6;
32
- --color-primary-hover: #2563EB;
31
+ --color-primary: #6366F1;
32
+ --color-primary-hover: #4F46E5;
33
+ --color-primary-soft: rgba(99, 102, 241, 0.12);
33
34
  --color-cta: #F97316;
34
35
  --color-cta-hover: #EA580C;
35
36
  --color-purple: #8B5CF6;
@@ -289,7 +290,7 @@ code, pre {
289
290
  }
290
291
  .input-modern:focus {
291
292
  border-color: var(--color-primary);
292
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
293
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
293
294
  }
294
295
  .input-modern::placeholder {
295
296
  color: var(--text-muted);
@@ -318,7 +319,7 @@ code, pre {
318
319
  }
319
320
  .select-modern:focus {
320
321
  border-color: var(--color-primary);
321
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
322
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
322
323
  }
323
324
  /* Label styles */
324
325
  .label-modern {
@@ -493,7 +494,7 @@ code, pre {
493
494
  border-color: var(--border-color);
494
495
  }
495
496
  .bg-mld-primary {
496
- background-color: #3B82F6;
497
+ background-color: var(--color-primary);
497
498
  }
498
499
  .text-mld-primary {
499
500
  color: var(--color-primary);
@@ -502,10 +503,10 @@ code, pre {
502
503
  border-color: var(--color-primary);
503
504
  }
504
505
  .bg-mld-primary\/5 {
505
- background-color: rgba(59, 130, 246, 0.05);
506
+ background-color: rgba(99, 102, 241, 0.05);
506
507
  }
507
508
  .hover\:border-mld-primary\/50:hover {
508
- border-color: rgba(59, 130, 246, 0.5);
509
+ border-color: rgba(99, 102, 241, 0.5);
509
510
  }
510
511
  /* Danger/error color utilities */
511
512
  .text-mld-danger {
@@ -561,10 +562,10 @@ code, pre {
561
562
  background-color: #DC2626;
562
563
  }
563
564
  .bg-mld-primary\/10 {
564
- background-color: rgba(59, 130, 246, 0.1);
565
+ background-color: rgba(99, 102, 241, 0.1);
565
566
  }
566
567
  .hover\:bg-mld-primary\/20:hover {
567
- background-color: rgba(59, 130, 246, 0.2);
568
+ background-color: rgba(99, 102, 241, 0.2);
568
569
  }
569
570
  .bg-mld-info {
570
571
  background-color: var(--mld-info);
@@ -594,10 +595,10 @@ code, pre {
594
595
  color: var(--color-primary);
595
596
  }
596
597
  .text-mld-primary\/80 {
597
- color: rgba(59, 130, 246, 0.8);
598
+ color: rgba(99, 102, 241, 0.8);
598
599
  }
599
600
  .hover\:text-mld-primary\/70:hover {
600
- color: rgba(59, 130, 246, 0.7);
601
+ color: rgba(99, 102, 241, 0.7);
601
602
  }
602
603
  /* ==========================================================================
603
604
  Border Color Utilities (Tailwind v4 compatibility)
@@ -1248,7 +1249,7 @@ html.dark .focus\:ring-offset-2:focus {
1248
1249
  .mld-topbar__logo-icon {
1249
1250
  width: 2rem;
1250
1251
  height: 2rem;
1251
- background-color: var(--color-primary, #3B82F6);
1252
+ background-color: var(--color-primary, #6366F1);
1252
1253
  border-radius: 0.5rem;
1253
1254
  display: flex;
1254
1255
  align-items: center;
@@ -1377,8 +1378,8 @@ html.dark .focus\:ring-offset-2:focus {
1377
1378
  background: var(--mld-bg-hover, rgba(0, 0, 0, 0.05));
1378
1379
  }
1379
1380
  .mld-topbar-dropdown-item--active {
1380
- background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
1381
- color: var(--mld-info, #3b82f6);
1381
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
1382
+ color: var(--color-primary, #6366F1);
1382
1383
  }
1383
1384
  .mld-topbar-dropdown-item--disabled {
1384
1385
  opacity: 0.5;
@@ -1393,7 +1394,7 @@ html.dark .focus\:ring-offset-2:focus {
1393
1394
  margin-top: 0.125rem;
1394
1395
  }
1395
1396
  .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
1396
- color: var(--mld-info, #3b82f6);
1397
+ color: var(--color-primary, #6366F1);
1397
1398
  opacity: 0.8;
1398
1399
  }
1399
1400
  /* Tabs in center of topbar */
@@ -1425,8 +1426,8 @@ html.dark .focus\:ring-offset-2:focus {
1425
1426
  color: var(--mld-text-primary, #111827);
1426
1427
  }
1427
1428
  .mld-topbar-tab--active {
1428
- background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
1429
- color: var(--mld-primary, #6366f1);
1429
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
1430
+ color: var(--color-primary, #6366F1);
1430
1431
  }
1431
1432
  .mld-topbar-tab--disabled {
1432
1433
  opacity: 0.5;
@@ -1481,13 +1482,13 @@ html.dark .focus\:ring-offset-2:focus {
1481
1482
  border: none;
1482
1483
  background: transparent;
1483
1484
  border-radius: var(--mld-radius-sm, 0.25rem);
1484
- color: #2563EB;
1485
+ color: var(--color-primary, #6366F1);
1485
1486
  cursor: pointer;
1486
1487
  text-decoration: none;
1487
1488
  transition: background-color 0.15s ease;
1488
1489
  }
1489
1490
  .mld-topbar__admin-btn:hover {
1490
- background: rgba(37, 99, 235, 0.1);
1491
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
1491
1492
  }
1492
1493
  .mld-topbar__admin-icon {
1493
1494
  width: 1.25rem;
@@ -1518,7 +1519,7 @@ html.dark .focus\:ring-offset-2:focus {
1518
1519
  font-size: 0.75rem;
1519
1520
  font-weight: 500;
1520
1521
  color: white;
1521
- background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
1522
+ background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
1522
1523
  flex-shrink: 0;
1523
1524
  }
1524
1525
  .mld-topbar__profile-name {
@@ -3079,9 +3080,11 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
3079
3080
  }
3080
3081
  .mld-form-field__label {
3081
3082
  display: block;
3082
- font-size: 0.875rem;
3083
- font-weight: 500;
3084
- color: var(--text-primary);
3083
+ font-size: 0.6875rem;
3084
+ font-weight: 600;
3085
+ text-transform: uppercase;
3086
+ letter-spacing: 0.05em;
3087
+ color: var(--text-secondary);
3085
3088
  }
3086
3089
  .mld-form-field__required {
3087
3090
  color: var(--mld-error);
@@ -4469,7 +4472,7 @@ html.dark .mld-slider__track {
4469
4472
  padding: 0.125rem 0.375rem;
4470
4473
  font-size: 0.75rem;
4471
4474
  border-radius: 9999px;
4472
- background-color: rgba(59, 130, 246, 0.1);
4475
+ background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
4473
4476
  color: var(--color-primary);
4474
4477
  }
4475
4478
  /* TagsInput Component Styles */
@@ -12879,7 +12882,7 @@ html.dark .mld-slider__track {
12879
12882
  padding: 0.125rem 0.375rem;
12880
12883
  font-size: 0.75rem;
12881
12884
  border-radius: 9999px;
12882
- background-color: rgba(59, 130, 246, 0.1);
12885
+ background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
12883
12886
  color: var(--color-primary);
12884
12887
  }
12885
12888
  /* BaseModal Component Styles */
@@ -14161,9 +14164,11 @@ to { transform: rotate(360deg);
14161
14164
  }
14162
14165
  .mld-form-field__label {
14163
14166
  display: block;
14164
- font-size: 0.875rem;
14165
- font-weight: 500;
14166
- color: var(--text-primary);
14167
+ font-size: 0.6875rem;
14168
+ font-weight: 600;
14169
+ text-transform: uppercase;
14170
+ letter-spacing: 0.05em;
14171
+ color: var(--text-secondary);
14167
14172
  }
14168
14173
  .mld-form-field__required {
14169
14174
  color: var(--mld-error);
@@ -15852,7 +15857,7 @@ html.dark .mld-settings-modal__option-btn--active {
15852
15857
  .mld-topbar__logo-icon {
15853
15858
  width: 2rem;
15854
15859
  height: 2rem;
15855
- background-color: var(--color-primary, #3B82F6);
15860
+ background-color: var(--color-primary, #6366F1);
15856
15861
  border-radius: 0.5rem;
15857
15862
  display: flex;
15858
15863
  align-items: center;
@@ -15983,8 +15988,8 @@ html.dark .mld-settings-modal__option-btn--active {
15983
15988
  background: var(--mld-bg-hover, rgba(0, 0, 0, 0.05));
15984
15989
  }
15985
15990
  .mld-topbar-dropdown-item--active {
15986
- background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
15987
- color: var(--mld-info, #3b82f6);
15991
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
15992
+ color: var(--color-primary, #6366F1);
15988
15993
  }
15989
15994
  .mld-topbar-dropdown-item--disabled {
15990
15995
  opacity: 0.5;
@@ -15999,7 +16004,7 @@ html.dark .mld-settings-modal__option-btn--active {
15999
16004
  margin-top: 0.125rem;
16000
16005
  }
16001
16006
  .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
16002
- color: var(--mld-info, #3b82f6);
16007
+ color: var(--color-primary, #6366F1);
16003
16008
  opacity: 0.8;
16004
16009
  }
16005
16010
 
@@ -16032,8 +16037,8 @@ html.dark .mld-settings-modal__option-btn--active {
16032
16037
  color: var(--mld-text-primary, #111827);
16033
16038
  }
16034
16039
  .mld-topbar-tab--active {
16035
- background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
16036
- color: var(--mld-primary, #6366f1);
16040
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
16041
+ color: var(--color-primary, #6366F1);
16037
16042
  }
16038
16043
  .mld-topbar-tab--disabled {
16039
16044
  opacity: 0.5;
@@ -16090,13 +16095,13 @@ html.dark .mld-settings-modal__option-btn--active {
16090
16095
  border: none;
16091
16096
  background: transparent;
16092
16097
  border-radius: var(--mld-radius-sm, 0.25rem);
16093
- color: #2563EB;
16098
+ color: var(--color-primary, #6366F1);
16094
16099
  cursor: pointer;
16095
16100
  text-decoration: none;
16096
16101
  transition: background-color 0.15s ease;
16097
16102
  }
16098
16103
  .mld-topbar__admin-btn:hover {
16099
- background: rgba(37, 99, 235, 0.1);
16104
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
16100
16105
  }
16101
16106
  .mld-topbar__admin-icon {
16102
16107
  width: 1.25rem;
@@ -16128,7 +16133,7 @@ html.dark .mld-settings-modal__option-btn--active {
16128
16133
  font-size: 0.75rem;
16129
16134
  font-weight: 500;
16130
16135
  color: white;
16131
- background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
16136
+ background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
16132
16137
  flex-shrink: 0;
16133
16138
  }
16134
16139
  .mld-topbar__profile-name {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@morscherlab/mld-sdk",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/styles/components/app-top-bar.css CHANGED
@@ -49,7 +49,7 @@
49
49
  .mld-topbar__logo-icon {
50
50
  width: 2rem;
51
51
  height: 2rem;
52
- background-color: var(--color-primary, #3B82F6);
52
+ background-color: var(--color-primary, #6366F1);
53
53
  border-radius: 0.5rem;
54
54
  display: flex;
55
55
  align-items: center;
@@ -199,8 +199,8 @@
199
199
  }
200
200
 
201
201
  .mld-topbar-dropdown-item--active {
202
- background: var(--mld-info-bg, rgba(59, 130, 246, 0.1));
203
- color: var(--mld-info, #3b82f6);
202
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
203
+ color: var(--color-primary, #6366F1);
204
204
  }
205
205
 
206
206
  .mld-topbar-dropdown-item--disabled {
@@ -219,7 +219,7 @@
219
219
  }
220
220
 
221
221
  .mld-topbar-dropdown-item--active .mld-topbar-dropdown-item__description {
222
- color: var(--mld-info, #3b82f6);
222
+ color: var(--color-primary, #6366F1);
223
223
  opacity: 0.8;
224
224
  }
225
225
 
@@ -256,8 +256,8 @@
256
256
  }
257
257
 
258
258
  .mld-topbar-tab--active {
259
- background: var(--mld-primary-bg, rgba(99, 102, 241, 0.1));
260
- color: var(--mld-primary, #6366f1);
259
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
260
+ color: var(--color-primary, #6366F1);
261
261
  }
262
262
 
263
263
  .mld-topbar-tab--disabled {
@@ -320,14 +320,14 @@
320
320
  border: none;
321
321
  background: transparent;
322
322
  border-radius: var(--mld-radius-sm, 0.25rem);
323
- color: #2563EB;
323
+ color: var(--color-primary, #6366F1);
324
324
  cursor: pointer;
325
325
  text-decoration: none;
326
326
  transition: background-color 0.15s ease;
327
327
  }
328
328
 
329
329
  .mld-topbar__admin-btn:hover {
330
- background: rgba(37, 99, 235, 0.1);
330
+ background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
331
331
  }
332
332
 
333
333
  .mld-topbar__admin-icon {
@@ -362,7 +362,7 @@
362
362
  font-size: 0.75rem;
363
363
  font-weight: 500;
364
364
  color: white;
365
- background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
365
+ background: linear-gradient(135deg, var(--color-primary-hover, #4F46E5) 0%, var(--color-primary, #6366F1) 100%);
366
366
  flex-shrink: 0;
367
367
  }
368
368
 
package/src/styles/components/form-field.css CHANGED
@@ -8,9 +8,11 @@
8
8
 
9
9
  .mld-form-field__label {
10
10
  display: block;
11
- font-size: 0.875rem;
12
- font-weight: 500;
13
- color: var(--text-primary);
11
+ font-size: 0.6875rem;
12
+ font-weight: 600;
13
+ text-transform: uppercase;
14
+ letter-spacing: 0.05em;
15
+ color: var(--text-secondary);
14
16
  }
15
17
 
16
18
  .mld-form-field__required {
package/src/styles/components/tabs.css CHANGED
@@ -103,6 +103,6 @@
103
103
  padding: 0.125rem 0.375rem;
104
104
  font-size: 0.75rem;
105
105
  border-radius: 9999px;
106
- background-color: rgba(59, 130, 246, 0.1);
106
+ background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
107
107
  color: var(--color-primary);
108
108
  }
package/src/styles/variables.css CHANGED
@@ -24,8 +24,9 @@
24
24
  --text-muted: #94A3B8;
25
25
 
26
26
  /* Brand colors */
27
- --color-primary: #3B82F6;
28
- --color-primary-hover: #2563EB;
27
+ --color-primary: #6366F1;
28
+ --color-primary-hover: #4F46E5;
29
+ --color-primary-soft: rgba(99, 102, 241, 0.12);
29
30
  --color-cta: #F97316;
30
31
  --color-cta-hover: #EA580C;
31
32
  --color-purple: #8B5CF6;
@@ -308,7 +309,7 @@ code, pre {
308
309
 
309
310
  .input-modern:focus {
310
311
  border-color: var(--color-primary);
311
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
312
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
312
313
  }
313
314
 
314
315
  .input-modern::placeholder {
@@ -341,7 +342,7 @@ code, pre {
341
342
 
342
343
  .select-modern:focus {
343
344
  border-color: var(--color-primary);
344
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
345
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
345
346
  }
346
347
 
347
348
  /* Label styles */
@@ -549,7 +550,7 @@ code, pre {
549
550
  }
550
551
 
551
552
  .bg-mld-primary {
552
- background-color: #3B82F6;
553
+ background-color: var(--color-primary);
553
554
  }
554
555
 
555
556
  .text-mld-primary {
@@ -561,11 +562,11 @@ code, pre {
561
562
  }
562
563
 
563
564
  .bg-mld-primary\/5 {
564
- background-color: rgba(59, 130, 246, 0.05);
565
+ background-color: rgba(99, 102, 241, 0.05);
565
566
  }
566
567
 
567
568
  .hover\:border-mld-primary\/50:hover {
568
- border-color: rgba(59, 130, 246, 0.5);
569
+ border-color: rgba(99, 102, 241, 0.5);
569
570
  }
570
571
 
571
572
  /* Danger/error color utilities */
@@ -638,11 +639,11 @@ code, pre {
638
639
  }
639
640
 
640
641
  .bg-mld-primary\/10 {
641
- background-color: rgba(59, 130, 246, 0.1);
642
+ background-color: rgba(99, 102, 241, 0.1);
642
643
  }
643
644
 
644
645
  .hover\:bg-mld-primary\/20:hover {
645
- background-color: rgba(59, 130, 246, 0.2);
646
+ background-color: rgba(99, 102, 241, 0.2);
646
647
  }
647
648
 
648
649
  .bg-mld-info {
@@ -681,11 +682,11 @@ code, pre {
681
682
  }
682
683
 
683
684
  .text-mld-primary\/80 {
684
- color: rgba(59, 130, 246, 0.8);
685
+ color: rgba(99, 102, 241, 0.8);
685
686
  }
686
687
 
687
688
  .hover\:text-mld-primary\/70:hover {
688
- color: rgba(59, 130, 246, 0.7);
689
+ color: rgba(99, 102, 241, 0.7);
689
690
  }
690
691
 
691
692
  /* ==========================================================================