@metropolle/design-system 1.0.0-beta.2025.8.28.1617.0d09f06 → 1.0.0-beta.2025.8.29.1357.b23d6f9
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.
- package/dist/css/components.css +97 -0
- package/package.json +1 -1
package/dist/css/components.css
CHANGED
|
@@ -472,6 +472,103 @@
|
|
|
472
472
|
--mds-dashboard-control-option-color: #1a1a1a;
|
|
473
473
|
}
|
|
474
474
|
|
|
475
|
+
/* Form Input Styles */
|
|
476
|
+
.mds-input {
|
|
477
|
+
position: relative;
|
|
478
|
+
display: block;
|
|
479
|
+
width: 100%;
|
|
480
|
+
padding: var(--mds-spacing-md) var(--mds-spacing-md);
|
|
481
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
482
|
+
font-size: var(--mds-typography-fontSize-base);
|
|
483
|
+
font-weight: var(--mds-typography-fontWeight-normal);
|
|
484
|
+
line-height: var(--mds-typography-lineHeight-normal);
|
|
485
|
+
color: var(--mds-color-text-primary);
|
|
486
|
+
background-color: var(--mds-color-background-primary);
|
|
487
|
+
border: 2px solid var(--mds-color-border-medium);
|
|
488
|
+
border-radius: var(--mds-spacing-borderRadius-md);
|
|
489
|
+
outline: none;
|
|
490
|
+
transition: var(--mds-effects-transition-normal);
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.mds-input:focus {
|
|
494
|
+
border-color: var(--mds-color-brand-primary);
|
|
495
|
+
box-shadow: 0 0 0 3px rgba(0, 111, 238, 0.1);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.mds-input:disabled {
|
|
499
|
+
opacity: var(--mds-effects-opacity-disabled);
|
|
500
|
+
cursor: not-allowed;
|
|
501
|
+
background-color: var(--mds-color-background-secondary);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.mds-input--error {
|
|
505
|
+
border-color: #dc2626;
|
|
506
|
+
background-color: #fef2f2;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.mds-input--error:focus {
|
|
510
|
+
border-color: #dc2626;
|
|
511
|
+
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
/* Textarea specific styles */
|
|
515
|
+
.mds-textarea {
|
|
516
|
+
resize: vertical;
|
|
517
|
+
min-height: 80px;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
/* Select specific styles */
|
|
521
|
+
.mds-select {
|
|
522
|
+
-webkit-appearance: none;
|
|
523
|
+
-moz-appearance: none;
|
|
524
|
+
appearance: none;
|
|
525
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
526
|
+
background-position: right var(--mds-spacing-md) center;
|
|
527
|
+
background-repeat: no-repeat;
|
|
528
|
+
background-size: 16px;
|
|
529
|
+
padding-right: calc(var(--mds-spacing-md) + 24px);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.mds-select:disabled {
|
|
533
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* Label styles */
|
|
537
|
+
.mds-label {
|
|
538
|
+
display: block;
|
|
539
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
540
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
541
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
542
|
+
color: var(--mds-color-text-primary);
|
|
543
|
+
margin-bottom: var(--mds-spacing-xs);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.mds-label--required::after {
|
|
547
|
+
content: " *";
|
|
548
|
+
color: #dc2626;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* Field group */
|
|
552
|
+
.mds-field {
|
|
553
|
+
margin-bottom: var(--mds-spacing-lg);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.mds-field-error {
|
|
557
|
+
display: block;
|
|
558
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
559
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
560
|
+
color: #dc2626;
|
|
561
|
+
margin-top: var(--mds-spacing-xs);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.mds-field-help {
|
|
565
|
+
display: block;
|
|
566
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
567
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
568
|
+
color: var(--mds-color-text-secondary);
|
|
569
|
+
margin-top: var(--mds-spacing-xs);
|
|
570
|
+
}
|
|
571
|
+
|
|
475
572
|
/* Dashboard Layout Utilities */
|
|
476
573
|
.mds-dashboard-grid {
|
|
477
574
|
display: grid;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metropolle/design-system",
|
|
3
|
-
"version": "1.0.0-beta.2025.08.
|
|
3
|
+
"version": "1.0.0-beta.2025.08.29.1357.b23d6f9",
|
|
4
4
|
"description": "Sistema de design unificado para a plataforma Metropolle",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/react/index.js",
|