@snyk-mktg/brand-ui 2.5.10-canary.0 → 2.5.10-canary.2

package/dist/scss/base/_baseline.scss

@@ -72,7 +72,7 @@ a:not([class]) {
 	&:hover,
 	&:focus,
 	&:visited:hover {
-		@include colors.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		@include colors.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 	}
 
 	&:visited {

package/dist/scss/base/_layout.scss

@@ -71,7 +71,7 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 			text-align: center;
 
 			&.solo-title {
-				margin-bottom: 0;
+				margin-bottom: map.get($brandui-padding, 'large');
 			}
 
 			&-left-aligned {
@@ -100,37 +100,6 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 	margin-right: auto;
 }
 
-.bg-boxed {
-	padding: map.get($brandui-padding, extra-large);
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	border-width: 0.1875rem;
-	border-style: solid;
-	border-width: map.get($brandui-padding, 'hairline');
-	border-radius: map.get($brandui-radius, 'small');
-	transition: map.get($brandui-transition, 'fast');
-	overflow: hidden;
-
-	@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-	@include glass.bg-glass(true, ui-fill);
-	@include glass.border-glass(ui-stroke);
-
-	&-decorated {
-		border: 0;
-		border-radius: map.get($brandui-radius, 'small');
-		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-		@include glass.bg-glass(true, ui-fill);
-		@include gradient.gradient-border;
-	}
-	&-decorations {
-		position: absolute;
-		z-index: 1;
-		inset: 2px;
-		overflow: hidden;
-	}
-}
-
 .brandui-backdrop {
 	background: RGBA(brandui-rgb-labels(neutral-3), 0.9);
 	position: fixed;

package/dist/scss/base/_links.scss

@@ -88,7 +88,7 @@
 
 		&:hover,
 		&:focus {
-			color: brandui-colors(action-secondary);
+			color: brandui-colors(action-tertiary);
 		}
 	}
 
@@ -112,7 +112,7 @@
 				-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
 				text-decoration-thickness: map.get($brandui-padding, hairline);
 				font-weight: 600;
-				@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+				@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 			}
 		}
 	}
@@ -145,7 +145,7 @@
 	&:hover {
 		text-decoration: underline;
 		text-decoration-style: dotted;
-		@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 
 		&::after {
 			display: inline-block;

package/dist/scss/base/decorations/_backgrounds.scss

@@ -1,3 +1,4 @@
+@use '../mixins/breakpoints' as break;
 @use '../variables/images' as *;
 @use '../functions' as *;
 
@@ -12,6 +13,10 @@
 		z-index: -1;
 		padding-bottom: 28rem;
 
+		// @include break.max-mobile {
+		// 	opacity: 0.35;
+		// }
+
 		&-1 {
 			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
 		}
@@ -35,8 +40,13 @@
 			transform: rotate(180deg);
 		}
 		&-top-left {
-			top: -60rem;
+			top: -10rem;
 			left: -50rem;
+
+			&-high {
+				top: -60rem;
+				left: -50rem;
+			}
 		}
 		&-bottom-left {
 			bottom: -5rem;

package/dist/scss/base/decorations/_decorations.scss

@@ -1,3 +1,16 @@
+@use '../mixins/breakpoints' as break;
+
 .decorations-wrapper {
 	isolation: isolate;
+
+	&.card-decorations {
+		position: absolute;
+		z-index: 1;
+		inset: 2px;
+		overflow: hidden;
+
+		@include break.max-mobile {
+			opacity: 0.35;
+		}
+	}
 }

package/dist/scss/base/mixins/_gradient-border.scss

@@ -7,7 +7,10 @@
 @use '../../base/functions' as *;
 
 @mixin gradient-border {
-	:first-child {
+	// Sets all chilren over the gradient.
+	// Don't love the wildcard implementation, should find a better one
+	> * {
+		position: relative;
 		z-index: 2;
 	}
 	@include color.gradient-mode-pseudo(

package/dist/scss/base/variables/_colors.scss

@@ -75,10 +75,10 @@ $brandui-colors: map.merge($brandui-colors, $custom-theme);
 
 // 2.0 Standardized color labels for theming
 $brandui-color-labels: (
-	'default': map.get($brandui-colors, 'snow'),
+	'default': map.get($brandui-colors, 'white'),
 	'default-dark': map.get($brandui-colors, 'black'),
 	'ui-headline': map.get($brandui-colors, 'black'),
-	'ui-headline-dark': map.get($brandui-colors, 'snow'),
+	'ui-headline-dark': map.get($brandui-colors, 'white'),
 	'ui-body': map.get($brandui-colors, 'black'),
 	'ui-body-dark': map.get($brandui-colors, 'steel'),
 	'ui-fill': map.get($brandui-colors, 'steel'),
@@ -86,42 +86,42 @@ $brandui-color-labels: (
 	'ui-stroke': map.get($brandui-colors, 'dark-grey'),
 	'ui-stroke-dark': map.get($brandui-colors, 'steel'),
 	'ui-text': map.get($brandui-colors, 'black'),
-	'ui-text-dark': map.get($brandui-colors, 'snow'),
+	'ui-text-dark': map.get($brandui-colors, 'white'),
 	'action': map.get($brandui-colors, 'black'),
-	'action-dark': map.get($brandui-colors, 'snow'),
-	'action-outline': map.get($brandui-colors, 'snow'),
-	'action-contrast': map.get($brandui-colors, 'snow'),
+	'action-dark': map.get($brandui-colors, 'white'),
+	'action-outline': map.get($brandui-colors, 'white'),
+	'action-contrast': map.get($brandui-colors, 'white'),
 	'action-contrast-dark': map.get($brandui-colors, 'black'),
-	'action-secondary': map.get($brandui-colors, 'snow'),
+	'action-secondary': map.get($brandui-colors, 'white'),
 	'action-secondary-dark': map.get($brandui-colors, 'black'),
 	'action-secondary-contrast': map.get($brandui-colors, 'black'),
-	'action-secondary-contrast-dark': map.get($brandui-colors, 'snow'),
+	'action-secondary-contrast-dark': map.get($brandui-colors, 'white'),
 	'action-tertiary': map.get($brandui-colors, 'dark-purple'),
 	'action-tertiary-dark': map.get($brandui-colors, 'lavender'),
 	'action-tertiary-contrast': map.get($brandui-colors, 'black'),
 	'action-tertiary-contrast-dark': map.get($brandui-colors, 'black'),
 	'info': map.get($brandui-colors, 'dark-purple'),
 	'info-dark': map.get($brandui-colors, 'lavender'),
-	'info-contrast': map.get($brandui-colors, 'snow'),
+	'info-contrast': map.get($brandui-colors, 'white'),
 	'info-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'success': map.get($brandui-colors, 'dark-teal'),
 	'success-dark': map.get($brandui-colors, 'vibe'),
-	'success-contrast': map.get($brandui-colors, 'snow'),
+	'success-contrast': map.get($brandui-colors, 'white'),
 	'success-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'warning': map.get($brandui-colors, 'autumn'),
 	'warning-dark': map.get($brandui-colors, 'tiger'),
-	'warning-contrast': map.get($brandui-colors, 'snow'),
+	'warning-contrast': map.get($brandui-colors, 'white'),
 	'warning-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'fail': map.get($brandui-colors, 'rose'),
-	'fail-dark': map.get($brandui-colors, 'salmon'),
-	'fail-contrast': map.get($brandui-colors, 'snow'),
+	'fail-dark': map.get($brandui-colors, 'rose'),
+	'fail-contrast': map.get($brandui-colors, 'white'),
 	'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'neutral-1': map.get($brandui-colors, 'black'),
 	'neutral-2': map.get($brandui-colors, 'dark-purple'),
 	'neutral-3': map.get($brandui-colors, 'bubblegum'),
 	'neutral-4': map.get($brandui-colors, 'lavender-light'),
 	'neutral-5': map.get($brandui-colors, 'steel'),
-	'neutral-6': map.get($brandui-colors, 'snow'),
+	'neutral-6': map.get($brandui-colors, 'white'),
 ) !default;
 
 $brandui-tag-colors: (

package/dist/scss/components/atoms/_button.scss

@@ -2,6 +2,7 @@
 @use '../../base/variables/effects' as *;
 @use '../../base/variables/typography' as *;
 @use '../../base/variables/sizing' as *;
+@use '../../base/mixins/breakpoints' as break;
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/functions' as *;
 
@@ -41,15 +42,14 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	position: relative;
 	text-align: center;
 	text-decoration: none;
-	transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast);
+	transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast),
+		border-color map.get($brandui-transition, fast);
 	-webkit-user-select: none;
 	user-select: none;
 	@include color.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
 
 	&:hover {
 		cursor: pointer;
-		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
-		@include color.color-mode(background-color, $action-secondary-base, $action-secondary-base-dark);
 	}
 
 	&:focus {
@@ -91,6 +91,10 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 
 		@include color.color-mode-pseudo('&:hover, &:focus', border-color, brandui-color-labels(neutral-2), brandui-color-labels(neutral-4));
 		@include color.color-mode-pseudo('&:hover, &:focus', background-color, brandui-color-labels(neutral-2), brandui-color-labels(neutral-4));
+
+		.general-icon {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
 	}
 
 	&.secondary {
@@ -198,6 +202,13 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	display: flex;
 	flex-wrap: wrap;
 	gap: map.get($brandui-padding, medium);
+
+	@include break.max-tablet {
+		flex-direction: column;
+		gap: map.get($brandui-padding, small);
+		justify-content: center;
+		align-items: center;
+	}
 }
 
 // This is the rotating conic-gradient glimmer effect

package/dist/scss/components/atoms/_icons.scss

@@ -104,6 +104,7 @@
 	/* Better Font Rendering =========== */
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
 
 	@each $icon-key, $icon-val in $brandui-general-icons {
 		&.icon-#{$icon-key} {

package/dist/scss/components/atoms/_tabs.scss

@@ -10,7 +10,7 @@
 .tabs {
 	max-width: max-content;
 	width: 100%;
-	margin: brandui-padding(extra-large) auto;
+	margin: 0 auto brandui-padding(extra-large) auto;
 	padding: map.get($brandui-padding, extra-small);
 	display: flex;
 	gap: map.get($brandui-padding, medium);

package/dist/scss/components/molecules/_alert.scss

@@ -5,15 +5,13 @@
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/mixins/breakpoints' as break;
 @use '../../base/functions' as *;
+@use '../molecules/cards/card.scss' as *;
+@use '../molecules/cards/card.scss' as *;
 
 .alert {
+	@extend .card;
 	padding: map.get($brandui-padding, medium);
 	position: relative;
-	border-width: 0.0625rem;
-	border-top-width: map.get($brandui-padding, extra-small);
-	border-style: solid;
-	border-radius: map.get($brandui-radius, large);
-	@include color.color-mode(background-color, map.get($brandui-base-colors, dark-purple), brandui-color-labels(neutral-2));
 	@include color.color-mode(border-color, brandui-color-labels(info), brandui-color-labels(info-dark));
 
 	&-body {
@@ -35,18 +33,34 @@
 	// Alternate state colors
 	&.alert {
 		&-success {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, dark-teal), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(success), brandui-color-labels(success-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(success), brandui-color-labels(success-dark));
+			}
 		}
 
 		&-warning {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, autumn), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
+			}
 		}
 
 		&-fail {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, rose), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
+			}
+		}
+
+		.button {
+			&:hover,
+			&:focus {
+				@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+			}
 		}
 	}
 }

package/dist/scss/components/molecules/_avatar-username.scss

@@ -14,7 +14,7 @@
 		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
 
 		&:hover {
-			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+			@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 		}
 	}
 }

package/dist/scss/components/molecules/cards/_card.scss

@@ -1,9 +1,12 @@
 @use 'sass:map';
 @use '../../../base/mixins/glass' as glass;
+@use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/variables/effects' as *;
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/functions' as *;
+@use '../../../base//decorations/backgrounds' as *;
 
 .card {
 	display: flex;
@@ -16,9 +19,8 @@
 	transition: map.get($brandui-transition, 'fast');
 	overflow: hidden;
 
-	@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-	@include glass.bg-glass(true, ui-fill);
-	@include glass.border-glass(ui-stroke);
+	@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-fill), 0.8), RGBA(brandui-rgb-labels(ui-fill-dark), 0.8));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.3));
 
 	&-wrapper {
 		position: relative;
@@ -45,3 +47,20 @@
 		box-shadow: none;
 	}
 }
+
+.card-decorated {
+	position: relative;
+	padding: map.get($brandui-padding, huge);
+	max-width: brandui-col-spacing(12);
+	border-radius: map.get($brandui-radius, 'small');
+	overflow: hidden;
+
+	box-shadow: map.get($brandui-shadow, far);
+	@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-fill), 0.8), RGBA(brandui-rgb-labels(ui-fill-dark), 0.8));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.3));
+	@include gradient.gradient-border;
+
+	@include break.max-mobile {
+		padding: map.get($brandui-padding, large);
+	}
+}

package/dist/scss/components/organisms/_navigation.scss

@@ -323,11 +323,7 @@
 							padding-top: map.get($brandui-padding, 'small');
 							border-top-width: 1px;
 							border-top-style: solid;
-							@include color.color-mode(
-								border-top-color,
-								RGBA(brandui-rgb-labels(neutral-5), 0.3),
-								RGBA(brandui-rgb-labels(neutral-5), 0.7)
-							);
+							@include color.color-mode(border-top-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 
 							&:has(.submenu-column-label) {
 								@include break.max-tablet {
@@ -420,6 +416,7 @@
 
 						.general-icon {
 							font-size: map.get($brandui-general-icon-size, 'medium');
+							@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 						}
 
 						.product-logo {
@@ -607,7 +604,7 @@
 					padding-top: map.get($brandui-padding, 'small');
 					border-top-width: 1px;
 					border-top-style: solid;
-					@include color.color-mode(border-top-color, RGBA(brandui-rgb-labels(neutral-5), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.7));
+					@include color.color-mode(border-top-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 				}
 
 				&-content {
@@ -654,6 +651,7 @@
 							@extend .icon-border;
 							padding: map.get($brandui-padding, 'extra-small');
 							@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+							@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 						}
 
 						.general-icon {

package/dist/scss/components/organisms/_split-content.scss

@@ -8,7 +8,6 @@
 	&-wrapper {
 		display: flex;
 		gap: brandui-padding(huge);
-		padding: brandui-padding(large);
 
 		@include break.max-tablet {
 			flex-direction: column;

package/dist/scss/components/organisms/ctas/_basic-cta.scss

@@ -6,23 +6,18 @@
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/color-mode' as color;
 @use '../../../base/functions' as *;
+@use '../../../components/molecules/cards/_card.scss' as *;
 
 .basic-cta {
-	max-width: brandui-col-spacing(10);
+	@extend .card;
 	width: 100%;
 	margin: 0 auto;
 	padding: map.get($brandui-padding, medium);
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-width: 1px;
-	border-style: solid;
-	border-radius: map.get($brandui-radius, large);
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
-
-	// @include theme.theme-color(background-color, base);
-	// @include glass.border-glass;
 
 	&-content {
 		max-width: brandui-col-spacing(7);

package/dist/scss/components/organisms/ctas/_body-cta.scss

@@ -7,23 +7,16 @@
 @use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/functions' as *;
+@use '../../../components/molecules/cards/_card.scss' as *;
 
 .body-cta {
-	max-width: brandui-col-spacing(10);
+	@extend .card-decorated;
 	width: 100%;
 	margin: 0 auto;
-	padding: map.get($brandui-padding, medium);
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-radius: map.get($brandui-radius, small);
-	box-shadow: map.get($brandui-shadow, far);
-	overflow: hidden;
-
-	@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-	@include glass.bg-glass(true, ui-fill);
-	@include gradient.gradient-border;
 
 	&-content {
 		max-width: brandui-col-spacing(8);
@@ -53,13 +46,6 @@
 		}
 	}
 
-	&-decorations {
-		position: absolute;
-		z-index: 1;
-		inset: 2px;
-		overflow: hidden;
-	}
-
 	@include break.max-mobile {
 		flex-direction: column;
 		gap: map.get($brandui-padding, extra-large);

package/dist/scss/components/organisms/ctas/_footer-cta.scss

@@ -12,15 +12,13 @@
 @use '../../../base/links' as *;
 
 .footer-cta {
-	@extend .brandui-section;
 	margin-bottom: string.unquote('-#{map.get($brandui-padding, huge)}');
-	max-width: brandui-col-spacing(12);
-	border-radius: map.get($brandui-radius, 'small');
-	overflow: hidden;
+	margin-left: auto;
+	margin-right: auto;
 
-	box-shadow: map.get($brandui-shadow, far);
-	@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-	@include glass.bg-glass(true, ui-fill);
+	@include break.max-tablet {
+		margin: 0 map.get($brandui-padding, large);
+	}
 
 	&-content {
 		max-width: brandui-col-spacing(7);
@@ -30,6 +28,10 @@
 		gap: map.get($brandui-padding, small);
 		justify-content: center;
 
+		.buttons {
+			justify-content: center;
+		}
+
 		@include break.max-tablet {
 			max-width: 100%;
 			text-align: center;
@@ -71,13 +73,4 @@
 			max-width: 100%;
 		}
 	}
-
-	&-decorations {
-		position: absolute;
-		z-index: 1;
-		inset: 2px;
-		overflow: hidden;
-	}
-
-	@include gradient.gradient-border;
 }

package/dist/scss/components/organisms/heroes/_hero-case-study.scss

@@ -87,7 +87,7 @@
 				@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
 
 				&:hover {
-					@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+					@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 				}
 			}
 		}

package/dist/scss/labs/_components.scss

@@ -27,7 +27,6 @@
 @use '../components/molecules/agenda' as *;
 @use '../components/molecules/alert' as *;
 @use '../components/molecules/avatar-grid-item' as *;
-@use '../components/molecules/avatar-username' as *;
 @use '../components/molecules/charts/charts' as *;
 @use '../components/molecules/charts/vertical-chart' as *;
 @use '../components/molecules/charts/horizontal-chart' as *;
@@ -58,6 +57,7 @@
 @use './components/atoms/triggers/play' as *;
 @use './components/atoms/tooltip' as *;
 @use './components/molecules/announcements' as *;
+@use './components/molecules/avatar-username' as *;
 @use './components/molecules/cards/card' as *;
 @use './components/molecules/cards/card-bg-image' as *;
 @use './components/molecules/cards/card-repo' as *;

package/dist/scss/labs/components/molecules/_announcements.scss

@@ -14,6 +14,12 @@
 		z-index: 2;
 		@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 		@include color.color-mode(background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+			@include color.color-mode(background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		}
 	}
 
 	&-message {
@@ -36,5 +42,9 @@
 		&:before {
 			position: relative;
 		}
+
+		&:after {
+			display: none;
+		}
 	}
 }

package/dist/scss/labs/components/molecules/_avatar-username.scss

@@ -0,0 +1,11 @@
+@use './../../../components/molecules/avatar-username';
+@use '../../../base/functions' as *;
+@use './../../../base/mixins/color-mode' as color;
+
+.avatar-username {
+	a {
+		&:hover {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
+}

package/dist/scss/utilities/_scrollbar.scss

@@ -13,10 +13,10 @@
 	::-webkit-scrollbar-thumb {
 		border-radius: 20px;
 		border: transparent;
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-4), 0.25), RGBA(brandui-rgb-labels(neutral-1), 0.25));
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-5), 0.25), RGBA(brandui-rgb-labels(neutral-1), 0.25));
 	}
 
 	::-webkit-scrollbar-thumb:hover {
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-4), 0.5), RGBA(brandui-rgb-labels(neutral-1), 0.5));
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-5), 0.5), RGBA(brandui-rgb-labels(neutral-1), 0.5));
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@snyk-mktg/brand-ui",
-	"version": "2.5.10-canary.0",
+	"version": "2.5.10-canary.2",
 	"description": "The official style library for Snyk’s BrandUI Design System",
 	"scripts": {
 		"dev:css": "gulp devCss",