@asd20/ui-next 2.22.2 → 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 +14 -0
  2. package/package.json +1 -1
  3. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +41 -15
  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,19 @@
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
+
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)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * restore school home video template title and foreground variables ([ef899c1](https://github.com/academydistrict20/asd20-ui-next/commit/ef899c142e3f3a1a706ebff8d56d9949f0503571))
16
+
3
17
  ## [2.22.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.1...ui-next-v2.22.2) (2026-08-31)
4
18
 
5
19
  ## [2.22.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.0...ui-next-v2.22.1) (2026-08-28)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.22.2",
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-header__background-style);
230
- background-color: var(--website-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;
@@ -272,7 +278,6 @@ export default {
272
278
  &__content {
273
279
  order: 1;
274
280
  width: 90%;
275
- // background: var(--website-header__background-color);
276
281
  }
277
282
  &__image {
278
283
  display: flex;
@@ -289,7 +294,10 @@ export default {
289
294
 
290
295
  h1 {
291
296
  position: relative;
292
- color: var(--website-header__title-color);
297
+ color: var(
298
+ --website-video-homepage-header__title-color,
299
+ var(--website-header__title-color)
300
+ );
293
301
  @include asd20-font(
294
302
  2,
295
303
  var(--website-typography__font-family-headlines),
@@ -303,7 +311,10 @@ export default {
303
311
  &__lead {
304
312
  position: relative;
305
313
  z-index: 1;
306
- color: var(--website-header__foreground-color);
314
+ color: var(
315
+ --website-video-homepage-header__foreground-color,
316
+ var(--website-header__foreground-color)
317
+ );
307
318
  @include asd20-font(1, var(--website-typography__font-family-body));
308
319
  margin: space(-0.5) space(2) space(1) space(1);
309
320
  a {
@@ -323,12 +334,15 @@ export default {
323
334
  margin-bottom: space(0.5);
324
335
  font-size: 1rem !important;
325
336
  background-color: var(
326
- --website-header__button-background-color,
327
- var(--color__accent)
337
+ --website-video-homepage-header__button-background-color,
338
+ var(--website-header__button-background-color, var(--color__accent))
328
339
  );
329
340
  color: var(
330
- --website-header__button-foreground-color,
331
- 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
+ )
332
346
  );
333
347
  position: relative;
334
348
  padding: space(0.5) space(1.5);
@@ -350,12 +364,18 @@ export default {
350
364
  &:hover,
351
365
  &:focus {
352
366
  background-color: var(
353
- --website-header__button-hover-background-color,
354
- 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
+ )
355
372
  );
356
373
  color: var(
357
- --website-header__button-hover-foreground-color,
358
- 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
+ )
359
379
  );
360
380
 
361
381
  &::before {
@@ -582,14 +602,20 @@ $max: 4rem;
582
602
  h1 {
583
603
  margin: 0 0 space(1);
584
604
  font-size: 40px !important;
585
- color: var(--website-header__title-color);
605
+ color: var(
606
+ --website-video-homepage-header__title-color,
607
+ var(--website-header__title-color)
608
+ );
586
609
  border-bottom: none;
587
610
  }
588
611
 
589
612
  &__lead {
590
613
  margin: space(-0.5) 0 0;
591
614
  font-size: 20px !important;
592
- color: var(--website-header__foreground-color);
615
+ color: var(
616
+ --website-video-homepage-header__foreground-color,
617
+ var(--website-header__foreground-color)
618
+ );
593
619
  }
594
620
 
595
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)",