sdga-ui 1.0.7 → 1.0.8

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 (33) hide show
  1. package/css/dga-ui.css +24869 -27624
  2. package/css/dga-ui.css.map +1 -1
  3. package/demo-angular/angular.json +3 -0
  4. package/demo-angular/package.json +2 -2
  5. package/demo-angular/src/app/app.html +1 -1
  6. package/demo-angular/src/app/app.routes.ts +0 -4
  7. package/demo-angular/src/app/app.ts +5 -2
  8. package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
  9. package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
  10. package/demo-angular/src/app/views/buttons/buttons.component.html +95 -24
  11. package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
  12. package/demo-angular/src/app/views/buttons/buttons.component.ts +77 -7
  13. package/demo-angular/src/app/views/footer/footer.html +138 -150
  14. package/demo-angular/src/app/views/footer/footer.ts +200 -66
  15. package/demo-angular/src/app/views/links/links.component.ts +1 -1
  16. package/demo-angular/tsconfig.app.json +2 -1
  17. package/package.json +1 -1
  18. package/theme/_variables.scss +0 -1
  19. package/theme/components/_buttons.scss +1 -302
  20. package/theme/config/_base.scss +1 -1
  21. package/theme/customizations/_alerts.scss +15 -14
  22. package/theme/customizations/_buttons.scss +305 -244
  23. package/theme/customizations/_footer.scss +122 -45
  24. package/theme/customizations/_global.scss +20 -2
  25. package/theme/customizations/_links.scss +45 -44
  26. package/theme/customizations/_toasts.scss +13 -14
  27. package/theme/dga-ui.scss +1 -2
  28. package/demo-angular/src/app/views/contexts/contexts.component.html +0 -204
  29. package/demo-angular/src/app/views/contexts/contexts.component.ts +0 -10
  30. package/demo-angular/src/app/views/footer/footer.scss +0 -0
  31. package/demo-angular/src/app/views/footer/footer.spec.ts +0 -23
  32. package/theme/config/_contexts.scss +0 -471
  33. package/theme/customizations/_contexts.scss +0 -432
@@ -62,7 +62,7 @@ $btn-link-disabled-color: $gray-600;
62
62
  // Button close
63
63
  $btn-close-width: .7031rem;
64
64
  $btn-close-height: $btn-close-width;
65
- $btn-close-padding-x: .6481rem;
65
+ $btn-close-padding-x: .5rem;
66
66
  $btn-close-padding-y: $btn-close-padding-x;
67
67
  $btn-close-color: $black;
68
68
  $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
@@ -72,304 +72,3 @@ $btn-close-hover-opacity: 0.75;
72
72
  $btn-close-focus-opacity: 1;
73
73
  $btn-close-disabled-opacity: 0.25;
74
74
  $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
75
-
76
- // ============================================
77
- // CUSTOM BUTTON VARIANTS
78
- // ============================================
79
-
80
- // Primary Button Variant
81
- $btn-primary-color: $white;
82
- $btn-primary-bg: $primary-600;
83
- $btn-primary-border-color: $primary-600;
84
- $btn-primary-hover-color: $white;
85
- $btn-primary-hover-bg: $primary-700;
86
- $btn-primary-hover-border-color: $primary-700;
87
- $btn-primary-active-color: $white;
88
- $btn-primary-active-bg: $primary-800;
89
- $btn-primary-active-border-color: $primary-800;
90
- $btn-primary-focus-color: $white;
91
- $btn-primary-focus-bg: $primary-600;
92
- $btn-primary-focus-border-color: $black;
93
- $btn-primary-focus-shadow-rgb: null;
94
- $btn-primary-disabled-color: $white;
95
- $btn-primary-disabled-bg: $primary-200;
96
- $btn-primary-disabled-border-color: $primary-200;
97
-
98
- // Primary Outline Button Variant
99
- $btn-outline-primary-color: $primary-600;
100
- $btn-outline-primary-border-color: $primary-600;
101
- $btn-outline-primary-hover-color: $white;
102
- $btn-outline-primary-hover-bg: $primary-600;
103
- $btn-outline-primary-hover-border-color: $primary-600;
104
- $btn-outline-primary-active-color: $white;
105
- $btn-outline-primary-active-bg: $primary-700;
106
- $btn-outline-primary-active-border-color: $primary-700;
107
- $btn-outline-primary-focus-color: $primary-700;
108
- $btn-outline-primary-focus-bg: transparent;
109
- $btn-outline-primary-focus-border-color: $black;
110
- $btn-outline-primary-focus-shadow-rgb: null;
111
- $btn-outline-primary-disabled-color: $primary-400;
112
- $btn-outline-primary-disabled-bg: transparent;
113
- $btn-outline-primary-disabled-border-color: $primary-400;
114
-
115
- // Secondary Button Variant
116
- $btn-secondary-color: $black;
117
- $btn-secondary-bg: $secondary-100;
118
- $btn-secondary-border-color: $secondary-100;
119
- $btn-secondary-hover-color: $black;
120
- $btn-secondary-hover-bg: $secondary-200;
121
- $btn-secondary-hover-border-color: $secondary-200;
122
- $btn-secondary-active-color: $black;
123
- $btn-secondary-active-bg: $secondary-200;
124
- $btn-secondary-active-border-color: $secondary-200;
125
- $btn-secondary-focus-color: $black;
126
- $btn-secondary-focus-bg: $secondary-100;
127
- $btn-secondary-focus-border-color: $black;
128
- $btn-secondary-focus-shadow-rgb: null;
129
- $btn-secondary-disabled-color: $secondary-400;
130
- $btn-secondary-disabled-bg: $secondary-200;
131
- $btn-secondary-disabled-border-color: $secondary-200;
132
-
133
- // Secondary Outline Button Variant
134
- $btn-outline-secondary-color: $black;
135
- $btn-outline-secondary-border-color: $secondary-300;
136
- $btn-outline-secondary-hover-color: $black;
137
- $btn-outline-secondary-hover-bg: $secondary-100;
138
- $btn-outline-secondary-hover-border-color: $secondary-200;
139
- $btn-outline-secondary-active-color: $black;
140
- $btn-outline-secondary-active-bg: $secondary-200;
141
- $btn-outline-secondary-active-border-color: $secondary-300;
142
- $btn-outline-secondary-focus-color: $black;
143
- $btn-outline-secondary-focus-bg: transparent;
144
- $btn-outline-secondary-focus-border-color: $black;
145
- $btn-outline-secondary-focus-shadow-rgb: null;
146
- $btn-outline-secondary-disabled-color: $secondary-400;
147
- $btn-outline-secondary-disabled-bg: transparent;
148
- $btn-outline-secondary-disabled-border-color: $secondary-400;
149
-
150
- // Danger/Destructive Button Variant
151
- $btn-danger-color: $white;
152
- $btn-danger-bg: $danger-600;
153
- $btn-danger-border-color: $danger-600;
154
- $btn-danger-hover-color: $white;
155
- $btn-danger-hover-bg: $danger-700;
156
- $btn-danger-hover-border-color: $danger-700;
157
- $btn-danger-active-color: $white;
158
- $btn-danger-active-bg: $danger-800;
159
- $btn-danger-active-border-color: $danger-800;
160
- $btn-danger-focus-color: $white;
161
- $btn-danger-focus-bg: $danger-600;
162
- $btn-danger-focus-border-color: $black;
163
- $btn-danger-focus-shadow-rgb: null;
164
- $btn-danger-disabled-color: $white;
165
- $btn-danger-disabled-bg: $danger-200;
166
- $btn-danger-disabled-border-color: $danger-200;
167
-
168
- // Danger Outline Button Variant
169
- $btn-outline-danger-color: $danger-600;
170
- $btn-outline-danger-border-color: $danger-600;
171
- $btn-outline-danger-hover-color: $white;
172
- $btn-outline-danger-hover-bg: $danger-600;
173
- $btn-outline-danger-hover-border-color: $danger-600;
174
- $btn-outline-danger-active-color: $white;
175
- $btn-outline-danger-active-bg: $danger-700;
176
- $btn-outline-danger-active-border-color: $danger-700;
177
- $btn-outline-danger-focus-color: $danger-700;
178
- $btn-outline-danger-focus-bg: transparent;
179
- $btn-outline-danger-focus-border-color: $black;
180
- $btn-outline-danger-focus-shadow-rgb: null;
181
- $btn-outline-danger-disabled-color: $danger-400;
182
- $btn-outline-danger-disabled-bg: transparent;
183
- $btn-outline-danger-disabled-border-color: $danger-400;
184
-
185
- // Success Button Variant
186
- $btn-success-color: $white;
187
- $btn-success-bg: $success-600;
188
- $btn-success-border-color: $success-600;
189
- $btn-success-hover-color: $white;
190
- $btn-success-hover-bg: $success-700;
191
- $btn-success-hover-border-color: $success-700;
192
- $btn-success-active-color: $white;
193
- $btn-success-active-bg: $success-800;
194
- $btn-success-active-border-color: $success-800;
195
- $btn-success-focus-color: $white;
196
- $btn-success-focus-bg: $success-600;
197
- $btn-success-focus-border-color: $black;
198
- $btn-success-focus-shadow-rgb: null;
199
- $btn-success-disabled-color: $white;
200
- $btn-success-disabled-bg: $success-200;
201
- $btn-success-disabled-border-color: $success-200;
202
-
203
- // Success Outline Button Variant
204
- $btn-outline-success-color: $success-600;
205
- $btn-outline-success-border-color: $success-600;
206
- $btn-outline-success-hover-color: $white;
207
- $btn-outline-success-hover-bg: $success-600;
208
- $btn-outline-success-hover-border-color: $success-600;
209
- $btn-outline-success-active-color: $white;
210
- $btn-outline-success-active-bg: $success-700;
211
- $btn-outline-success-active-border-color: $success-700;
212
- $btn-outline-success-focus-color: $success-700;
213
- $btn-outline-success-focus-bg: transparent;
214
- $btn-outline-success-focus-border-color: $black;
215
- $btn-outline-success-focus-shadow-rgb: null;
216
- $btn-outline-success-disabled-color: $success-400;
217
- $btn-outline-success-disabled-bg: transparent;
218
- $btn-outline-success-disabled-border-color: $success-400;
219
-
220
- // Warning Button Variant
221
- $btn-warning-color: $white;
222
- $btn-warning-bg: $warning-600;
223
- $btn-warning-border-color: $warning-600;
224
- $btn-warning-hover-color: $white;
225
- $btn-warning-hover-bg: $warning-700;
226
- $btn-warning-hover-border-color: $warning-700;
227
- $btn-warning-active-color: $white;
228
- $btn-warning-active-bg: $warning-800;
229
- $btn-warning-active-border-color: $warning-800;
230
- $btn-warning-focus-color: $white;
231
- $btn-warning-focus-bg: $warning-600;
232
- $btn-warning-focus-border-color: $black;
233
- $btn-warning-focus-shadow-rgb: null;
234
- $btn-warning-disabled-color: $white;
235
- $btn-warning-disabled-bg: $warning-200;
236
- $btn-warning-disabled-border-color: $warning-200;
237
-
238
- // Warning Outline Button Variant
239
- $btn-outline-warning-color: $warning-600;
240
- $btn-outline-warning-border-color: $warning-600;
241
- $btn-outline-warning-hover-color: $white;
242
- $btn-outline-warning-hover-bg: $warning-600;
243
- $btn-outline-warning-hover-border-color: $warning-600;
244
- $btn-outline-warning-active-color: $white;
245
- $btn-outline-warning-active-bg: $warning-700;
246
- $btn-outline-warning-active-border-color: $warning-700;
247
- $btn-outline-warning-focus-color: $warning-700;
248
- $btn-outline-warning-focus-bg: transparent;
249
- $btn-outline-warning-focus-border-color: $black;
250
- $btn-outline-warning-focus-shadow-rgb: null;
251
- $btn-outline-warning-disabled-color: $warning-400;
252
- $btn-outline-warning-disabled-bg: transparent;
253
- $btn-outline-warning-disabled-border-color: $warning-400;
254
-
255
- // Info Button Variant
256
- $btn-info-color: $white;
257
- $btn-info-bg: $info-600;
258
- $btn-info-border-color: $info-600;
259
- $btn-info-hover-color: $white;
260
- $btn-info-hover-bg: $info-700;
261
- $btn-info-hover-border-color: $info-700;
262
- $btn-info-active-color: $white;
263
- $btn-info-active-bg: $info-800;
264
- $btn-info-active-border-color: $info-800;
265
- $btn-info-focus-color: $white;
266
- $btn-info-focus-bg: $info-600;
267
- $btn-info-focus-border-color: $black;
268
- $btn-info-focus-shadow-rgb: null;
269
- $btn-info-disabled-color: $white;
270
- $btn-info-disabled-bg: $info-200;
271
- $btn-info-disabled-border-color: $info-200;
272
-
273
- // Info Outline Button Variant
274
- $btn-outline-info-color: $info-600;
275
- $btn-outline-info-border-color: $info-600;
276
- $btn-outline-info-hover-color: $white;
277
- $btn-outline-info-hover-bg: $info-600;
278
- $btn-outline-info-hover-border-color: $info-600;
279
- $btn-outline-info-active-color: $white;
280
- $btn-outline-info-active-bg: $info-700;
281
- $btn-outline-info-active-border-color: $info-700;
282
- $btn-outline-info-focus-color: $info-700;
283
- $btn-outline-info-focus-bg: transparent;
284
- $btn-outline-info-focus-border-color: $black;
285
- $btn-outline-info-focus-shadow-rgb: null;
286
- $btn-outline-info-disabled-color: $info-400;
287
- $btn-outline-info-disabled-bg: transparent;
288
- $btn-outline-info-disabled-border-color: $info-400;
289
-
290
- // Neutral Button Variant
291
- $btn-neutral-color: $white;
292
- $btn-neutral-bg: $neutral-950;
293
- $btn-neutral-border-color: $neutral-950;
294
- $btn-neutral-hover-color: $white;
295
- $btn-neutral-hover-bg: $neutral-800;
296
- $btn-neutral-hover-border-color: $neutral-800;
297
- $btn-neutral-active-color: $white;
298
- $btn-neutral-active-bg: $neutral-600;
299
- $btn-neutral-active-border-color: $neutral-600;
300
- $btn-neutral-focus-color: $white;
301
- $btn-neutral-focus-bg: $neutral-950;
302
- $btn-neutral-focus-border-color: $black;
303
- $btn-neutral-focus-shadow-rgb: 77, 87, 97;
304
- $btn-neutral-disabled-color: $neutral-400;
305
- $btn-neutral-disabled-bg: $neutral-200;
306
- $btn-neutral-disabled-border-color: $neutral-200;
307
-
308
- // Neutral Outline Button Variant
309
- $btn-outline-neutral-color: $neutral-600;
310
- $btn-outline-neutral-border-color: $neutral-600;
311
- $btn-outline-neutral-hover-color: $white;
312
- $btn-outline-neutral-hover-bg: $neutral-600;
313
- $btn-outline-neutral-hover-border-color: $neutral-600;
314
- $btn-outline-neutral-active-color: $white;
315
- $btn-outline-neutral-active-bg: $neutral-700;
316
- $btn-outline-neutral-active-border-color: $neutral-700;
317
- $btn-outline-neutral-focus-color: $neutral-700;
318
- $btn-outline-neutral-focus-bg: transparent;
319
- $btn-outline-neutral-focus-border-color: $neutral-600;
320
- $btn-outline-neutral-focus-shadow-rgb: null;
321
- $btn-outline-neutral-disabled-color: $neutral-400;
322
- $btn-outline-neutral-disabled-bg: transparent;
323
- $btn-outline-neutral-disabled-border-color: $neutral-400;
324
-
325
- // Subtle Outline Button Variant
326
- $btn-subtle-color: $black;
327
- $btn-subtle-border-color: transparent;
328
- $btn-subtle-hover-color: $black;
329
- $btn-subtle-hover-bg: transparent;
330
- $btn-subtle-hover-border-color: transparent;
331
- $btn-subtle-active-color: $black;
332
- $btn-subtle-active-bg: transparent;
333
- $btn-subtle-active-border-color: transparent;
334
- $btn-subtle-focus-color: $black;
335
- $btn-subtle-focus-bg: transparent;
336
- $btn-subtle-focus-border-color: transparent;
337
- $btn-subtle-focus-shadow-rgb: null;
338
- $btn-subtle-disabled-color: $neutral-400;
339
- $btn-subtle-disabled-bg: transparent;
340
- $btn-subtle-disabled-border-color: transparent;
341
-
342
- // Lavender Button Variant
343
- $btn-lavender-color: $white;
344
- $btn-lavender-bg: $lavender-600;
345
- $btn-lavender-border-color: $lavender-600;
346
- $btn-lavender-hover-color: $white;
347
- $btn-lavender-hover-bg: $lavender-700;
348
- $btn-lavender-hover-border-color: $lavender-700;
349
- $btn-lavender-active-color: $white;
350
- $btn-lavender-active-bg: $lavender-800;
351
- $btn-lavender-active-border-color: $lavender-800;
352
- $btn-lavender-focus-color: $white;
353
- $btn-lavender-focus-bg: $lavender-600;
354
- $btn-lavender-focus-border-color: $lavender-700;
355
- $btn-lavender-focus-shadow-rgb: null;
356
- $btn-lavender-disabled-color: $white;
357
- $btn-lavender-disabled-bg: $lavender-400;
358
- $btn-lavender-disabled-border-color: $lavender-400;
359
-
360
- // Lavender Outline Button Variant
361
- $btn-outline-lavender-color: $lavender-600;
362
- $btn-outline-lavender-border-color: $lavender-600;
363
- $btn-outline-lavender-hover-color: $white;
364
- $btn-outline-lavender-hover-bg: $lavender-600;
365
- $btn-outline-lavender-hover-border-color: $lavender-600;
366
- $btn-outline-lavender-active-color: $white;
367
- $btn-outline-lavender-active-bg: $lavender-700;
368
- $btn-outline-lavender-active-border-color: $lavender-700;
369
- $btn-outline-lavender-focus-color: $lavender-700;
370
- $btn-outline-lavender-focus-bg: transparent;
371
- $btn-outline-lavender-focus-border-color: $lavender-600;
372
- $btn-outline-lavender-focus-shadow-rgb: null;
373
- $btn-outline-lavender-disabled-color: $lavender-400;
374
- $btn-outline-lavender-disabled-bg: transparent;
375
- $btn-outline-lavender-disabled-border-color: $lavender-400;
@@ -37,7 +37,7 @@ $component-active-bg: $primary;
37
37
 
38
38
  // Shadow base color (using SDGA neutral-900 shade)
39
39
  $shadow-color: $gray-900;
40
- $border-color: $gray-500;
40
+ $border-color: $gray-300;
41
41
 
42
42
  // Focus
43
43
  $focus-ring-width: 0.25rem;
@@ -186,23 +186,24 @@ $alert-variants: (
186
186
  flex-direction: column;
187
187
  margin-inline-start: 0;
188
188
 
189
+
189
190
  button {
190
191
  width: 100%;
191
192
  justify-content: center;
192
193
  &:first-of-type {
193
- --#{$prefix}btn-color: #{$btn-secondary-color};
194
- --#{$prefix}btn-bg: #{$btn-secondary-bg};
195
- --#{$prefix}btn-border-color: #{$btn-secondary-border-color};
196
- --#{$prefix}btn-hover-color: #{$btn-secondary-hover-color};
197
- --#{$prefix}btn-hover-bg: #{$btn-secondary-hover-bg};
198
- --#{$prefix}btn-hover-border-color: #{$btn-secondary-hover-border-color};
199
- --#{$prefix}btn-focus-shadow-rgb: #{$btn-secondary-focus-shadow-rgb};
200
- --#{$prefix}btn-active-color: #{$btn-secondary-active-color};
201
- --#{$prefix}btn-active-bg: #{$btn-secondary-active-bg};
202
- --#{$prefix}btn-active-border-color: #{$btn-secondary-active-border-color};
203
- --#{$prefix}btn-disabled-color: #{$btn-secondary-disabled-color};
204
- --#{$prefix}btn-disabled-bg: #{$btn-secondary-disabled-bg};
205
- --#{$prefix}btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
194
+ --#{$prefix}btn-color: #{$black};
195
+ --#{$prefix}btn-bg: #{$secondary-100};
196
+ --#{$prefix}btn-border-color: #{$secondary-100};
197
+ --#{$prefix}btn-hover-color: #{$black};
198
+ --#{$prefix}btn-hover-bg: #{$secondary-200};
199
+ --#{$prefix}btn-hover-border-color: #{$secondary-200};
200
+ --#{$prefix}btn-focus-shadow-rgb: null;
201
+ --#{$prefix}btn-active-color: #{$black};
202
+ --#{$prefix}btn-active-bg: #{$secondary-200};
203
+ --#{$prefix}btn-active-border-color: #{$secondary-200};
204
+ --#{$prefix}btn-disabled-color: #{$secondary-400};
205
+ --#{$prefix}btn-disabled-bg: #{$secondary-200};
206
+ --#{$prefix}btn-disabled-border-color: #{$secondary-200};
206
207
  }
207
208
  }
208
209
  }
@@ -213,7 +214,7 @@ $alert-variants: (
213
214
  // ============================================
214
215
  .alert-dismissible {
215
216
  .btn-close {
216
- padding: 0.5rem;
217
+ padding: $btn-close-padding-y $btn-close-padding-x;
217
218
  position: absolute;
218
219
  top: 1rem;
219
220
  right: unset;