sdga-ui 1.0.27 → 1.0.28

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 (8) hide show
  1. package/css/dga-ui.css +270 -10
  2. package/css/dga-ui.css.map +1 -1
  3. package/package.json +1 -1
  4. package/theme/components/_progress.scss +4 -0
  5. package/theme/customizations/_badges.scss +3 -1
  6. package/theme/customizations/_buttons.scss +124 -14
  7. package/theme/customizations/_cards.scss +178 -0
  8. package/theme/customizations/_custom-styles.scss +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdga-ui",
3
- "version": "1.0.27",
3
+ "version": "1.0.28",
4
4
  "description": "DGA UI - Government-Style Bootstrap Theme",
5
5
  "keywords": [
6
6
  "sdga",
package/theme/components/_progress.scss CHANGED
@@ -9,3 +9,7 @@ $progress-bar-color: $white;
9
9
  $progress-bar-bg: $primary;
10
10
  $progress-bar-animation-timing: 1s linear infinite;
11
11
  $progress-bar-transition: width 0.6s ease;
12
+
13
+ .progress-bar.bg-warning {
14
+ color: $white;
15
+ }
package/theme/customizations/_badges.scss CHANGED
@@ -24,7 +24,9 @@
24
24
  color: $white;
25
25
  }
26
26
 
27
- .badge-warning {
27
+ .badge-warning,
28
+ .badge.bg-warning,
29
+ .text-bg-warning {
28
30
  background-color: $warning-600;
29
31
  color: $white;
30
32
  }
package/theme/customizations/_buttons.scss CHANGED
@@ -19,9 +19,9 @@ $button-variants: (
19
19
  active-color: $white,
20
20
  active-bg: $neutral-600,
21
21
  active-border-color: $neutral-600,
22
- disabled-color: $neutral-400,
23
- disabled-bg: $neutral-200,
24
- disabled-border-color: $neutral-200
22
+ disabled-color: $gray-400,
23
+ disabled-bg: $gray-200,
24
+ disabled-border-color: $gray-200
25
25
  ),
26
26
  "primary": (
27
27
  color: $white,
@@ -33,9 +33,9 @@ $button-variants: (
33
33
  active-color: $white,
34
34
  active-bg: $primary-800,
35
35
  active-border-color: $primary-800,
36
- disabled-color: $white,
37
- disabled-bg: $primary-200,
38
- disabled-border-color: $primary-200
36
+ disabled-color: $gray-400,
37
+ disabled-bg: $gray-200,
38
+ disabled-border-color: $gray-200
39
39
  ),
40
40
  "secondary": (
41
41
  color: $black,
@@ -47,9 +47,9 @@ $button-variants: (
47
47
  active-color: $black,
48
48
  active-bg: $secondary-200,
49
49
  active-border-color: $secondary-400,
50
- disabled-color: $secondary-400,
51
- disabled-bg: $secondary-200,
52
- disabled-border-color: $secondary-300
50
+ disabled-color: $gray-400,
51
+ disabled-bg: $gray-200,
52
+ disabled-border-color: $gray-200
53
53
  ),
54
54
  "success": (
55
55
  color: $white,
@@ -79,14 +79,98 @@ $button-variants: (
79
79
  disabled-bg: $danger-100,
80
80
  disabled-border-color: $danger-100
81
81
  ),
82
+ "outline-danger": (
83
+ color: $danger-700,
84
+ bg: transparent,
85
+ border-color: $danger-300,
86
+ hover-color: $danger-700,
87
+ hover-bg: $danger-50,
88
+ hover-border-color: $danger-300,
89
+ active-color: $danger-700,
90
+ active-bg: $danger-100,
91
+ active-border-color: $danger-400,
92
+ disabled-color: $gray-400,
93
+ disabled-bg: $gray-200,
94
+ disabled-border-color: $gray-200
95
+ ),
96
+ "outline-danger-secondary": (
97
+ color: $danger-700,
98
+ bg: transparent,
99
+ border-color: $danger-200,
100
+ hover-color: $danger-700,
101
+ hover-bg: $danger-50,
102
+ hover-border-color: $danger-200,
103
+ active-color: $danger-700,
104
+ active-bg: $danger-100,
105
+ active-border-color: $danger-300,
106
+ disabled-color: $gray-400,
107
+ disabled-bg: $gray-200,
108
+ disabled-border-color: $gray-200
109
+ ),
110
+ "danger-transparent": (
111
+ color: $danger-600,
112
+ bg: transparent,
113
+ border-color: transparent,
114
+ hover-color: $danger-700,
115
+ hover-bg: transparent,
116
+ hover-border-color: transparent,
117
+ active-color: $danger-800,
118
+ active-bg: transparent,
119
+ active-border-color: transparent,
120
+ disabled-color: $gray-400,
121
+ disabled-bg: transparent,
122
+ disabled-border-color: transparent
123
+ ),
124
+ "danger-subtle": (
125
+ color: $danger-700,
126
+ bg: transparent,
127
+ border-color: transparent,
128
+ hover-color: $danger-700,
129
+ hover-bg: $danger-50,
130
+ hover-border-color: transparent,
131
+ active-color: $danger-700,
132
+ active-bg: $danger-100,
133
+ active-border-color: transparent,
134
+ disabled-color: $gray-400,
135
+ disabled-bg: transparent,
136
+ disabled-border-color: transparent
137
+ ),
138
+ "danger-secondary": (
139
+ color: $danger-700,
140
+ bg: $danger-50,
141
+ border-color: transparent,
142
+ hover-color: $danger-700,
143
+ hover-bg: $danger-100,
144
+ hover-border-color: transparent,
145
+ active-color: $danger-700,
146
+ active-bg: $danger-200,
147
+ active-border-color: transparent,
148
+ disabled-color: $gray-400,
149
+ disabled-bg: $gray-200,
150
+ disabled-border-color: $gray-200
151
+ ),
152
+ "danger-primary": (
153
+ color: $white,
154
+ bg: $danger-600,
155
+ border-color: $danger-600,
156
+ hover-color: $white,
157
+ hover-bg: $danger-700,
158
+ hover-border-color: $danger-700,
159
+ active-color: $white,
160
+ active-bg: $danger-800,
161
+ active-border-color: $danger-800,
162
+ disabled-color: $neutral-500,
163
+ disabled-bg: $danger-100,
164
+ disabled-border-color: $danger-100
165
+ ),
82
166
  "warning": (
83
- color: $neutral-950,
167
+ color: $white,
84
168
  bg: $warning-400,
85
169
  border-color: $warning-400,
86
- hover-color: $neutral-950,
170
+ hover-color: $white,
87
171
  hover-bg: $warning-500,
88
172
  hover-border-color: $warning-500,
89
- active-color: $neutral-950,
173
+ active-color: $white,
90
174
  active-bg: $warning-600,
91
175
  active-border-color: $warning-600,
92
176
  disabled-color: $neutral-500,
@@ -156,8 +240,8 @@ $button-variants: (
156
240
  hover-bg: transparent,
157
241
  hover-border-color: transparent,
158
242
  active-color: $black,
159
- active-bg: transparent,
160
- active-border-color: transparent,
243
+ active-bg: $secondary-200,
244
+ active-border-color: $secondary-300,
161
245
  disabled-color: $neutral-400,
162
246
  disabled-bg: transparent,
163
247
  disabled-border-color: transparent
@@ -477,6 +561,32 @@ $on-primary-button-variants: (
477
561
  }
478
562
  }
479
563
 
564
+ // RTL support for horizontal button groups:
565
+ // keep natural RTL ordering and align edge radii/separators correctly.
566
+ [dir="rtl"] .btn-group {
567
+ direction: rtl;
568
+
569
+ > :not(.btn-check) + .btn,
570
+ > .btn-group:not(:first-child) {
571
+ margin-right: calc(-1 * var(--#{$prefix}border-width));
572
+ margin-left: 0;
573
+ }
574
+
575
+ > .btn:first-child {
576
+ border-top-left-radius: 0;
577
+ border-bottom-left-radius: 0;
578
+ border-top-right-radius: var(--#{$prefix}border-radius);
579
+ border-bottom-right-radius: var(--#{$prefix}border-radius);
580
+ }
581
+
582
+ > .btn:last-child {
583
+ border-top-right-radius: 0;
584
+ border-bottom-right-radius: 0;
585
+ border-top-left-radius: var(--#{$prefix}border-radius);
586
+ border-bottom-left-radius: var(--#{$prefix}border-radius);
587
+ }
588
+ }
589
+
480
590
  // ============================================
481
591
  // Dropdown
482
592
  // ============================================
package/theme/customizations/_cards.scss CHANGED
@@ -7,6 +7,184 @@
7
7
 
8
8
 
9
9
 
10
+ // ============================================
11
+ // EXPANDABLE CARD
12
+ // ============================================
13
+
14
+ .card-expandable {
15
+ cursor: pointer;
16
+ border: 1px solid $gray-200 !important;
17
+ transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
18
+
19
+ &:hover:not(.disabled),
20
+ &.card-expandable-hover {
21
+ background-color: $gray-50;
22
+ }
23
+
24
+ &:focus-visible,
25
+ &.card-expandable-focused {
26
+ outline: none;
27
+ border-color: $gray-900 !important;
28
+ box-shadow: 0 0 0 2px $gray-900 !important;
29
+ }
30
+
31
+ .form-check-input:focus {
32
+ box-shadow: none;
33
+ border-color: $gray-300;
34
+ }
35
+
36
+ &.disabled {
37
+ background-color: $gray-100;
38
+ cursor: not-allowed;
39
+ pointer-events: none;
40
+
41
+ .dga-featured-icon {
42
+ background-color: $gray-200;
43
+
44
+ svg, i {
45
+ fill: $gray-400;
46
+ color: $gray-400;
47
+ stroke: $gray-400;
48
+ }
49
+ }
50
+
51
+ .card-subtitle,
52
+ .card-text {
53
+ color: $gray-400 !important;
54
+ }
55
+
56
+ .card-expanded-icon {
57
+ color: $gray-400;
58
+ }
59
+
60
+ .form-check-input {
61
+ border-color: $gray-300;
62
+ background-color: $gray-200;
63
+ }
64
+ }
65
+ }
66
+
67
+ // ============================================
68
+ // SELECT CARD (checkbox selection)
69
+ // ============================================
70
+
71
+ .card-select {
72
+ cursor: pointer;
73
+ border: 1px solid $gray-200 !important;
74
+ transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
75
+
76
+ .form-check-input:focus {
77
+ box-shadow: none;
78
+ border-color: $gray-300;
79
+ }
80
+
81
+ &:hover:not(.disabled),
82
+ &.card-select-hover {
83
+ background-color: $gray-50;
84
+ }
85
+
86
+ &:focus-visible,
87
+ &.card-select-focused {
88
+ outline: none;
89
+ border-color: $gray-900 !important;
90
+ box-shadow: 0 0 0 2px $gray-900 !important;
91
+ }
92
+
93
+ &.disabled {
94
+ background-color: $gray-100;
95
+ cursor: not-allowed;
96
+ pointer-events: none;
97
+
98
+ .dga-featured-icon {
99
+ background-color: $gray-200;
100
+
101
+ svg, i {
102
+ fill: $gray-400;
103
+ color: $gray-400;
104
+ stroke: $gray-400;
105
+ }
106
+ }
107
+
108
+ .card-subtitle,
109
+ .card-text {
110
+ color: $gray-400 !important;
111
+ }
112
+
113
+ .form-check-input {
114
+ border-color: $gray-300;
115
+ background-color: $gray-200;
116
+ }
117
+ }
118
+ }
119
+
120
+ // ============================================
121
+ // SELECTABLE CARD
122
+ // ============================================
123
+
124
+ .card-selectable {
125
+ cursor: pointer;
126
+ border: 1px solid $gray-200 !important;
127
+ transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
128
+
129
+ .card-selectable-icon {
130
+ width: 2.5rem;
131
+ height: 2.5rem;
132
+ border-radius: $radius-full;
133
+ background-color: $primary-50;
134
+ color: $primary;
135
+ display: flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+ font-size: 1.125rem;
139
+ flex-shrink: 0;
140
+ }
141
+
142
+ .card-title {
143
+ margin-bottom: 0.25rem;
144
+ }
145
+
146
+ .form-check-input:focus {
147
+ box-shadow: none;
148
+ border-color: $gray-300;
149
+ }
150
+
151
+ &:hover:not(.disabled),
152
+ &.card-selectable-hover {
153
+ background-color: $gray-50;
154
+ }
155
+
156
+ &:focus-visible,
157
+ &.card-selectable-focused {
158
+ outline: none;
159
+ border-color: $gray-900 !important;
160
+ box-shadow: 0 0 0 2px $gray-900 !important;
161
+ }
162
+
163
+ &.disabled {
164
+ background-color: $gray-100;
165
+ cursor: not-allowed;
166
+ pointer-events: none;
167
+
168
+ .card-selectable-icon {
169
+ background-color: $gray-200;
170
+ color: $gray-400;
171
+ }
172
+
173
+ .card-title {
174
+ color: $gray-400;
175
+ }
176
+
177
+ .card-text {
178
+ color: $gray-400 !important;
179
+ }
180
+
181
+ .form-check-input {
182
+ border-color: $gray-300;
183
+ background-color: $gray-200;
184
+ }
185
+ }
186
+ }
187
+
10
188
  // ============================================
11
189
  // CARD BASE STYLES
12
190
  // ============================================
package/theme/customizations/_custom-styles.scss CHANGED
@@ -1,3 +1,8 @@
1
1
  [dir="rtl"] .mirror-rtl {
2
2
  transform: scaleX(-1);
3
3
  }
4
+
5
+ // Bootstrap auto-contrast picks dark text on warning backgrounds — override to white.
6
+ .bg-warning {
7
+ color: $white;
8
+ }