@byuhbll/components 7.0.2 → 7.0.3

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 (4) hide show
  1. package/fesm2022/byuhbll-components.mjs +26 -26
  2. package/fesm2022/byuhbll-components.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/scss/hbll-foundation.scss +50 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@byuhbll/components",
3
- "version": "7.0.2",
3
+ "version": "7.0.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.3.15",
6
6
  "@angular/core": "^20.3.15"
package/styles/scss/hbll-foundation.scss CHANGED
@@ -1,10 +1,10 @@
1
- // ---------------------------------------------------
2
- // BYU Library Shared Styles
3
- // ---------------------------------------------------
1
+ /* ---------------------------------------------------
2
+ BYU Library Shared Styles
3
+ --------------------------------------------------- */
4
4
 
5
- // ---------------------------------------------------
6
- // Reset / Base
7
- // ---------------------------------------------------
5
+ /* ---------------------------------------------------
6
+ Reset / Base
7
+ --------------------------------------------------- */
8
8
 
9
9
  html {
10
10
  border: 0;
@@ -24,16 +24,16 @@ body {
24
24
  box-sizing: border-box;
25
25
  }
26
26
 
27
- // ---------------------------------------------------
28
- // Colors (Design Tokens)
29
- // ---------------------------------------------------
27
+ /* ---------------------------------------------------
28
+ Colors (Design Tokens)
29
+ --------------------------------------------------- */
30
30
 
31
- // Brand Colors
31
+ /* Brand Colors */
32
32
  $color-navy: #00245d;
33
33
  $color-royal: #0047ba;
34
34
  $color-white: #ffffff;
35
35
 
36
- // Blues / Royal (Primary)
36
+ /* Blues / Royal (Primary) */
37
37
  $color-blue-500: #00245d;
38
38
  $color-blue-400: #003995;
39
39
  $color-blue-300: #0047ba;
@@ -41,7 +41,7 @@ $color-blue-200: #336cc8;
41
41
  $color-blue-150: #ccdaf1;
42
42
  $color-blue-100: #e5edf8;
43
43
 
44
- // Grays / Neutral
44
+ /* Grays / Neutral */
45
45
  $color-gray-500: #141414;
46
46
  $color-gray-400: #676767;
47
47
  $color-gray-300: #8f8f8f;
@@ -49,40 +49,40 @@ $color-gray-200: #d0d0d0;
49
49
  $color-gray-100: #e7e7e7;
50
50
  $color-gray-50: #f9f9f9;
51
51
 
52
- // Greens / Success
52
+ /* Greens / Success */
53
53
  $color-green-500: #1d562e;
54
54
  $color-green-400: #2e8545;
55
55
  $color-green-300: #3ba35a;
56
56
  $color-green-200: #9dd1ac;
57
57
  $color-green-100: #ebf6ee;
58
58
 
59
- // Teals / Info
59
+ /* Teals / Info */
60
60
  $color-teal-500: #26485f;
61
61
  $color-teal-400: #3e7295;
62
62
  $color-teal-300: #457fa6;
63
63
  $color-teal-200: #a2bfd3;
64
64
  $color-teal-100: #ecf2f6;
65
65
 
66
- // Reds / Error
66
+ /* Reds / Error */
67
67
  $color-red-500: #702121;
68
68
  $color-red-400: #b33837;
69
69
  $color-red-300: #c73e3d;
70
70
  $color-red-200: #e39e9e;
71
71
  $color-red-100: #f9ecec;
72
72
 
73
- // Yellows / Warning (Mustard)
73
+ /* Yellows / Warning (Mustard) */
74
74
  $color-yellow-500: #635f04;
75
75
  $color-yellow-400: #928c30;
76
76
  $color-yellow-300: #d1c844;
77
77
  $color-yellow-200: #e8e3a1;
78
78
  $color-yellow-100: #f2f0e9;
79
79
 
80
- // Purple / Focus
80
+ /* Purple / Focus */
81
81
  $color-purple-focus: #b967c7;
82
82
 
83
- // ---------------------------------------------------
84
- // Semantic Tokens (preferred usage across apps)
85
- // ---------------------------------------------------
83
+ /* ---------------------------------------------------
84
+ Semantic Tokens (preferred usage across apps)
85
+ --------------------------------------------------- */
86
86
 
87
87
  $text-heading: #002e5d;
88
88
  $text-secondary-heading: #737373;
@@ -93,7 +93,7 @@ $text-on-action: $color-white;
93
93
 
94
94
  $focus-ring-color: $color-purple-focus;
95
95
 
96
- // State semantics (useful for alerts, badges, etc.)
96
+ /* State semantics (useful for alerts, badges, etc.) */
97
97
  $text-success: $color-green-500;
98
98
  $text-info: $color-teal-500;
99
99
  $text-error: $color-red-500;
@@ -104,9 +104,9 @@ $surface-info: $color-teal-100;
104
104
  $surface-error: $color-red-100;
105
105
  $surface-warning: $color-yellow-100;
106
106
 
107
- // ---------------------------------------------------
108
- // Expose CSS Custom Properties (so non-Sass apps can consume)
109
- // ---------------------------------------------------
107
+ /* ---------------------------------------------------
108
+ Expose CSS Custom Properties (so non-Sass apps can consume)
109
+ --------------------------------------------------- */
110
110
 
111
111
  :root {
112
112
  /* Brand */
@@ -184,9 +184,9 @@ $surface-warning: $color-yellow-100;
184
184
  --focus-ring-color: #{$focus-ring-color};
185
185
  }
186
186
 
187
- // ---------------------------------------------------
188
- // Fonts
189
- // ---------------------------------------------------
187
+ /* ---------------------------------------------------
188
+ Fonts
189
+ --------------------------------------------------- */
190
190
 
191
191
  $sourceSansProVersion: '1.0.0';
192
192
 
@@ -262,11 +262,11 @@ $sourceSansProVersion: '1.0.0';
262
262
  font-display: swap;
263
263
  }
264
264
 
265
- // ---------------------------------------------------
266
- // Default Styles for Elements
267
- // ---------------------------------------------------
265
+ /* ---------------------------------------------------
266
+ Default Styles for Elements
267
+ --------------------------------------------------- */
268
268
 
269
- // Default font-family
269
+ /* Default font-family */
270
270
  h1,
271
271
  h2,
272
272
  h3,
@@ -279,7 +279,7 @@ p {
279
279
  font-family: 'Source Sans Pro';
280
280
  }
281
281
 
282
- // Headers
282
+ /* Headers */
283
283
  h1 {
284
284
  font-weight: 300;
285
285
  font-style: normal;
@@ -316,7 +316,7 @@ h6 {
316
316
  color: var(--text-secondary-heading);
317
317
  }
318
318
 
319
- // Paragraph classes
319
+ /* Paragraph classes */
320
320
  .hbll-default-body {
321
321
  font-weight: 400;
322
322
  font-style: normal;
@@ -347,22 +347,22 @@ h6 {
347
347
  color: var(--text-body);
348
348
  }
349
349
 
350
- // Default link style
350
+ /* Default link style */
351
351
  a {
352
352
  color: var(--text-link);
353
353
  text-decoration: underline;
354
354
  }
355
355
 
356
- // Span emphasis class
356
+ /* Span emphasis class */
357
357
  .hbll-emphasis {
358
358
  font-weight: 600;
359
359
  }
360
360
 
361
- // ---------------------------------------------------
362
- // Breakpoint size changes (mobile-first)
363
- // ---------------------------------------------------
361
+ /* ---------------------------------------------------
362
+ Breakpoint size changes (mobile-first)
363
+ --------------------------------------------------- */
364
364
 
365
- // Mobile default sizes (applies to all widths unless overridden)
365
+ /* Mobile default sizes (applies to all widths unless overridden) */
366
366
  h1 {
367
367
  font-size: 2rem;
368
368
  line-height: 2.5rem;
@@ -400,7 +400,7 @@ h6 {
400
400
  line-height: 1.5rem;
401
401
  }
402
402
 
403
- // Tablet size styles (>834px)
403
+ /* Tablet size styles (>834px) */
404
404
  @media screen and (min-width: 52.125em) {
405
405
  h1 {
406
406
  font-size: 3rem;
@@ -448,7 +448,7 @@ h6 {
448
448
  }
449
449
  }
450
450
 
451
- // Desktop size styles (>1440px)
451
+ /* Desktop size styles (>1440px) */
452
452
  @media screen and (min-width: 90em) {
453
453
  h1 {
454
454
  font-size: 3.75rem;
@@ -496,9 +496,15 @@ h6 {
496
496
  }
497
497
  }
498
498
 
499
- // ---------------------------------------------------
500
- // Accessibility
501
- // ---------------------------------------------------
499
+ /* ---------------------------------------------------
500
+ Accessibility
501
+ --------------------------------------------------- */
502
+
503
+ /* Default focus style */
504
+ :focus-visible {
505
+ outline: 0.125rem solid var(--focus-ring-color);
506
+ outline-offset: 0.125rem;
507
+ }
502
508
 
503
509
  .sr-only {
504
510
  position: absolute;