@asd20/ui-next 2.22.3 → 2.22.4

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/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +44 -17
  4. package/src/design/_tokens.scss +8 -0
  5. package/src/design/tokens.base.json +10 -0
  6. package/src/design/tokens.json +10 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.22.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.3...ui-next-v2.22.4) (2026-08-31)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * add css tokens to fill video home page header component ([0d58ae6](https://github.com/academydistrict20/asd20-ui-next/commit/0d58ae6432b33c86b9a5c629b6dc2065fbec6b2f))
9
+
3
10
  ## [2.22.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.2...ui-next-v2.22.3) (2026-08-31)
4
11
 
5
12
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.22.3",
3
+ "version": "2.22.4",
4
4
  "private": false,
5
5
  "description": "ASD20 UI component library for Vue 3.",
6
6
  "license": "MIT",
package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue CHANGED
@@ -226,8 +226,14 @@ export default {
226
226
  left: 0;
227
227
  right: 2rem;
228
228
  z-index: -1;
229
- background: var(--website-homepage-header__background-style);
230
- background-color: var(--website-homepage-header__background-color);
229
+ background: var(
230
+ --website-video-homepage-header__background-style,
231
+ var(--website-header__background-style)
232
+ );
233
+ background-color: var(
234
+ --website-video-homepage-header__background-color,
235
+ var(--website-header__background-color)
236
+ );
231
237
  border-top-left-radius: 0;
232
238
  border-top-right-radius: 3rem;
233
239
  border-bottom-left-radius: 0;
@@ -288,7 +294,10 @@ export default {
288
294
 
289
295
  h1 {
290
296
  position: relative;
291
- color: var(--website-homepage-header__title-color);
297
+ color: var(
298
+ --website-video-homepage-header__title-color,
299
+ var(--website-header__title-color)
300
+ );
292
301
  @include asd20-font(
293
302
  2,
294
303
  var(--website-typography__font-family-headlines),
@@ -302,7 +311,10 @@ export default {
302
311
  &__lead {
303
312
  position: relative;
304
313
  z-index: 1;
305
- color: var(--website-homepage-header__foreground-color);
314
+ color: var(
315
+ --website-video-homepage-header__foreground-color,
316
+ var(--website-header__foreground-color)
317
+ );
306
318
  @include asd20-font(1, var(--website-typography__font-family-body));
307
319
  margin: space(-0.5) space(2) space(1) space(1);
308
320
  a {
@@ -322,12 +334,15 @@ export default {
322
334
  margin-bottom: space(0.5);
323
335
  font-size: 1rem !important;
324
336
  background-color: var(
325
- --website-homepage-header__button-background-color,
326
- var(--color__accent)
337
+ --website-video-homepage-header__button-background-color,
338
+ var(--website-header__button-background-color, var(--color__accent))
327
339
  );
328
340
  color: var(
329
- --website-homepage-header__button-foreground-color,
330
- var(--color__accent-t100)
341
+ --website-video-homepage-header__button-foreground-color,
342
+ var(
343
+ --website-header__button-foreground-color,
344
+ var(--color__accent-t100)
345
+ )
331
346
  );
332
347
  position: relative;
333
348
  padding: space(0.5) space(1.5);
@@ -341,7 +356,7 @@ export default {
341
356
  left: 0;
342
357
  width: 10px;
343
358
  height: 100%;
344
- background-color: var(--website-homepage-header__accent);
359
+ background-color: var(--color__accent-t40);
345
360
  transition: width 0.3s ease, background-color 0.3s ease;
346
361
  z-index: 0;
347
362
  }
@@ -349,17 +364,23 @@ export default {
349
364
  &:hover,
350
365
  &:focus {
351
366
  background-color: var(
352
- --website-homepage-header__button-hover-background-color,
353
- var(--color__accent-t60)
367
+ --website-video-homepage-header__button-hover-background-color,
368
+ var(
369
+ --website-header__button-hover-background-color,
370
+ var(--color__accent-t60)
371
+ )
354
372
  );
355
373
  color: var(
356
- --website-homepage-header__button-hover-foreground-color,
357
- var(--color__accent-t100)
374
+ --website-video-homepage-header__button-hover-foreground-color,
375
+ var(
376
+ --website-header__button-hover-foreground-color,
377
+ var(--color__accent-t100)
378
+ )
358
379
  );
359
380
 
360
381
  &::before {
361
382
  width: 20px;
362
- background-color: var(--website-homepage-header__accent);
383
+ background-color: var(--color__accent-t60);
363
384
  }
364
385
  }
365
386
 
@@ -567,7 +588,7 @@ $max: 4rem;
567
588
  rgba(0, 0, 0, 0) 100%
568
589
  );
569
590
  padding: space(1);
570
- border-left: space(1.5) solid var(--website-homepage-header__accent);
591
+ border-left: space(1.5) solid var(--color__accent-t20);
571
592
  animation: slide_left 1s ease-in-out 0.5s both;
572
593
  border-top-left-radius: 2rem;
573
594
  border-bottom-left-radius: 2rem;
@@ -581,14 +602,20 @@ $max: 4rem;
581
602
  h1 {
582
603
  margin: 0 0 space(1);
583
604
  font-size: 40px !important;
584
- color: var(--website-homepage-header__title-color);
605
+ color: var(
606
+ --website-video-homepage-header__title-color,
607
+ var(--website-header__title-color)
608
+ );
585
609
  border-bottom: none;
586
610
  }
587
611
 
588
612
  &__lead {
589
613
  margin: space(-0.5) 0 0;
590
614
  font-size: 20px !important;
591
- color: var(--website-homepage-header__foreground-color);
615
+ color: var(
616
+ --website-video-homepage-header__foreground-color,
617
+ var(--website-header__foreground-color)
618
+ );
592
619
  }
593
620
 
594
621
  &__call-to-action {
package/src/design/_tokens.scss CHANGED
@@ -151,6 +151,14 @@ $texture-image-base-path: '~@asd20/ui-next/design/images';
151
151
  --website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent);
152
152
  --website-homepage-header__secondary-foreground-color: var(--color__secondary-t90);
153
153
  --website-homepage-header__secondary-title-color: #fff;
154
+ --website-video-homepage-header__background-color: var(--website-header__background-color);
155
+ --website-video-homepage-header__background-style: var(--website-header__background-style);
156
+ --website-video-homepage-header__button-background-color: var(--website-header__button-background-color);
157
+ --website-video-homepage-header__button-foreground-color: var(--website-header__button-foreground-color);
158
+ --website-video-homepage-header__button-hover-background-color: var(--website-header__button-hover-background-color);
159
+ --website-video-homepage-header__button-hover-foreground-color: var(--website-header__button-hover-foreground-color);
160
+ --website-video-homepage-header__foreground-color: var(--website-header__foreground-color);
161
+ --website-video-homepage-header__title-color: var(--website-header__title-color);
154
162
  --website-icon__fill-color: var(--color__accent);
155
163
  --website-icon__fill-color-reverse: var(--color__accent);
156
164
  --website-icon__hover-fill-color: var(--color__accent);
package/src/design/tokens.base.json CHANGED
@@ -80,6 +80,16 @@
80
80
  "secondaryForegroundColor": "var(--color__secondary-t90)",
81
81
  "secondaryTitleColor": "#fff"
82
82
  },
83
+ "websiteVideoHomepageHeader": {
84
+ "backgroundColor": "var(--website-header__background-color)",
85
+ "backgroundStyle": "var(--website-header__background-style)",
86
+ "buttonBackgroundColor": "var(--website-header__button-background-color)",
87
+ "buttonForegroundColor": "var(--website-header__button-foreground-color)",
88
+ "buttonHoverBackgroundColor": "var(--website-header__button-hover-background-color)",
89
+ "buttonHoverForegroundColor": "var(--website-header__button-hover-foreground-color)",
90
+ "foregroundColor": "var(--website-header__foreground-color)",
91
+ "titleColor": "var(--website-header__title-color)"
92
+ },
83
93
  "websiteIcon": {
84
94
  "fillColor": "var(--color__accent)",
85
95
  "fillColorReverse": "var(--color__accent)",
package/src/design/tokens.json CHANGED
@@ -80,6 +80,16 @@
80
80
  "secondaryForegroundColor": "var(--color__secondary-t90)",
81
81
  "secondaryTitleColor": "#fff"
82
82
  },
83
+ "websiteVideoHomepageHeader": {
84
+ "backgroundColor": "var(--website-header__background-color)",
85
+ "backgroundStyle": "var(--website-header__background-style)",
86
+ "buttonBackgroundColor": "var(--website-header__button-background-color)",
87
+ "buttonForegroundColor": "var(--website-header__button-foreground-color)",
88
+ "buttonHoverBackgroundColor": "var(--website-header__button-hover-background-color)",
89
+ "buttonHoverForegroundColor": "var(--website-header__button-hover-foreground-color)",
90
+ "foregroundColor": "var(--website-header__foreground-color)",
91
+ "titleColor": "var(--website-header__title-color)"
92
+ },
83
93
  "websiteIcon": {
84
94
  "fillColor": "var(--color__accent)",
85
95
  "fillColorReverse": "var(--color__accent)",