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

package/dist/scss/base/_baseline.scss

@@ -27,11 +27,11 @@ body {
 body {
 	font-size: 1rem;
 	font-family: map.get($brandui-font-family, roboto), sans-serif;
-	color: brandui-color-labels(ui-body);
+	color: brandui-color-labels(ui-text);
 
 	&.dark-mode,
 	& .dark-mode {
-		color: brandui-color-labels(ui-body-dark);
+		color: brandui-color-labels(ui-text-dark);
 	}
 	-webkit-font-smoothing: antialiased;
 }
@@ -118,6 +118,11 @@ b {
 	font-weight: 700;
 }
 
+strong:not(a strong),
+b:not(a b) {
+	@include colors.color-mode(color, brandui-color-labels(ui-body), brandui-color-labels(ui-body-dark));
+}
+
 code:not([class]) {
 	border-width: 0.0625rem;
 	border-style: solid;
@@ -128,8 +133,8 @@ code:not([class]) {
 	padding: 0 0.1875rem;
 	position: relative;
 	word-break: break-word;
-	@include colors.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
-	@include colors.color-mode(border-color, RGBA(brandi-rgb-labels(neutral-4), 0.1), RGBA(brandui-rgb-labels(neutral-2), 0.9));
+	@include colors.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+	@include colors.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.1), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.1));
 	@include colors.color-mode(color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
 }
 

package/dist/scss/base/_color.scss

@@ -10,7 +10,7 @@ $color-elements: (
 	'background-color': 'bg',
 	'border-color': 'border',
 );
-$action-colors: ('action', 'action-secondary');
+$action-colors: ('action', 'action-secondary', 'action-tertiary');
 $state-colors: ('success', 'info', 'alert', 'warning', 'fail');
 $label-colors: (
 	'default',

package/dist/scss/base/_layout.scss

@@ -4,9 +4,11 @@
 @use '../base/variables/sizing' as *;
 @use '../base/variables/effects' as *;
 @use '../base/mixins/breakpoints' as breaks;
-@use '../base/mixins/glass' as glass;
 @use '../base/mixins/color-mode' as color;
+@use '../base/mixins/glass' as glass;
+@use '../base/mixins/gradient-border' as gradient;
 @use '../base/functions' as *;
+@use './decorations/backgrounds' as *;
 
 $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large, extra-large, huge);
 
@@ -68,6 +70,10 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 			align-items: center;
 			text-align: center;
 
+			&.solo-title {
+				margin-bottom: 0;
+			}
+
 			&-left-aligned {
 				@extend .section-intro;
 				align-items: start;
@@ -96,10 +102,33 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 
 .bg-boxed {
 	padding: map.get($brandui-padding, extra-large);
-	border-width: 1px;
-	border-radius: map.get($brandui-radius, small);
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border-width: 0.1875rem;
 	border-style: solid;
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
+	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 {

package/dist/scss/base/_links.scss

@@ -38,7 +38,7 @@
 	}
 
 	&: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));
 	}
 }
 
@@ -59,6 +59,8 @@
 
 	&:hover,
 	&:focus {
+		@include color.color-mode('color', brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
+		@include color.color-mode-pseudo('&::after', 'color', brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 		&::after {
 			transform: translateX(-0.25rem);
 		}

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

@@ -4,81 +4,49 @@
 .decoration-bg {
 	pointer-events: none;
 
-	&.circuit-tracks {
+	&.dot-wave {
 		position: absolute;
-		width: brandui-col-spacing(16);
-		background: transparent url('#{$brandui-images}decorations/decoration-bg-circuit-track.svg') center no-repeat;
+		inset: 0;
 		background-size: contain;
 		mix-blend-mode: screen;
 		z-index: -1;
 		padding-bottom: 28rem;
 
+		&-1 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
+		}
+
+		&-2 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center no-repeat;
+		}
+
+		&-3 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center no-repeat;
+		}
+
 		// Tracks positon
 		&-top-right {
 			top: 0;
 			right: -40rem;
 		}
 		&-bottom-right {
-			bottom: -5rem;
+			bottom: -10rem;
 			right: -40rem;
+			transform: rotate(180deg);
 		}
 		&-top-left {
-			top: 0;
-			left: -40rem;
-			transform: rotate(180deg);
+			top: -60rem;
+			left: -50rem;
 		}
 		&-bottom-left {
 			bottom: -5rem;
 			left: -40rem;
 			transform: rotate(180deg);
 		}
-	}
-
-	&.code-lines {
-		position: absolute;
-		width: brandui-col-spacing(6);
-		padding-bottom: 24rem;
-		background-size: contain;
-		z-index: -2;
-
-		// Lines positon
-		&-top-right {
-			top: 0;
-			right: -8rem;
-			transform: rotate(180deg);
-		}
-		&-bottom-right {
-			bottom: 0;
-			right: -8rem;
-			transform: rotate(180deg);
-		}
-		&-top-left {
-			top: 0;
-			left: -8rem;
-		}
-		&-bottom-left {
-			bottom: 0;
-			left: -8rem;
-		}
 
-		// Lines colors
-		&-primary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-primary.svg') center no-repeat;
-		}
-		&-secondary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-secondary.svg') center no-repeat;
+		&-center-right {
+			top: 30rem;
+			right: -26rem;
 		}
-		&-tertiary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-tertiary.svg') center no-repeat;
-		}
-	}
-
-	&.hex-pattern {
-		position: absolute;
-		inset: 0;
-		background: transparent url('#{$brandui-images}decorations/decoration-bg-hex-pattern.svg') center no-repeat;
-		background-size: contain;
-		transform: scale(1.5);
-		z-index: -2;
 	}
 }

package/dist/scss/base/mixins/_color-mode.scss

@@ -1,3 +1,4 @@
+@use './../functions' as *;
 @use './accessibility' as a11y;
 /* Mixins for light/dark modes */
 @mixin color-mode($property, $light-value, $dark-value) {
@@ -86,3 +87,7 @@
 		@content;
 	}
 }
+
+@mixin transparent-border($property: border-color, $light-value: 'ui-body', $dark-value: 'ui-body-dark', $opacity: 0.3) {
+	@include color-mode($property, RGBA(brandui-rgb-labels($light-value), 0.3), RGBA(brandui-rgb-labels($dark-value), $opacity));
+}

package/dist/scss/base/mixins/_glass.scss

@@ -1,36 +1,60 @@
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/functions' as *;
 
-@mixin bg-glass($dense: false) {
+@mixin bg-glass($dense: false, $color-label: default) {
 	@if $dense {
-		backdrop-filter: blur(1.5rem);
-		-webkit-backdrop-filter: blur(1.5rem);
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.8), RGBA(brandui-rgb-labels(default-dark), 0.8));
+		& {
+			backdrop-filter: blur(1.5rem);
+			-webkit-backdrop-filter: blur(1.5rem);
+		}
+		@include color.color-mode(
+			background-color,
+			RGBA(brandui-rgb-labels(#{$color-label}), 0.8),
+			RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.8)
+		);
 	} @else {
-		backdrop-filter: blur(1rem);
-		-webkit-backdrop-filter: blur(1rem);
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.5), RGBA(brandui-rgb-labels(default-dark), 0.5));
+		& {
+			backdrop-filter: blur(1rem);
+			-webkit-backdrop-filter: blur(1rem);
+		}
+		@include color.color-mode(
+			background-color,
+			RGBA(brandui-rgb-labels(#{$color-label}), 0.5),
+			RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.5)
+		);
 	}
 
 	&.group {
 		&:hover,
 		&:focus {
 			@if $dense {
-				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.5), RGBA(brandui-rgb-labels(default-dark), 0.5));
+				@include color.color-mode(
+					background-color,
+					RGBA(brandui-rgb-labels(#{$color-label}), 0.5),
+					RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.5)
+				);
 			} @else {
-				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.3), RGBA(brandui-rgb-labels(default-dark), 0.3));
+				@include color.color-mode(
+					background-color,
+					RGBA(brandui-rgb-labels(#{$color-label}), 0.3),
+					RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3)
+				);
 			}
 		}
 	}
 }
 
-@mixin border-glass {
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(default), 0.7), RGBA(brandui-rgb-labels(default-dark), 0.7));
+@mixin border-glass($color-label: default) {
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(#{$color-label}), 0.3), RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3));
 
 	&.group {
 		&:hover,
 		&:focus {
-			@include color.color-mode(border-color, RGBA(brandui-rgb-labels(default), 0.3), RGBA(brandui-rgb-labels(default-dark), 0.3));
+			@include color.color-mode(
+				border-color,
+				RGBA(brandui-rgb-labels(#{$color-label}), 0.3),
+				RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3)
+			);
 		}
 	}
 }

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

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../../base/variables/sizing' as *;
+@use '../../base/variables/effects' as *;
+@use '../../base/mixins/page-theme' as theme;
+@use '../../base/mixins/breakpoints' as break;
+@use '../../base/mixins/color-mode' as color;
+@use '../../base/functions' as *;
+
+@mixin gradient-border {
+	:first-child {
+		z-index: 2;
+	}
+	@include color.gradient-mode-pseudo(
+		'&:before',
+		'background',
+		'linear',
+		'90deg',
+		brandui-color-labels(neutral-2),
+		brandui-color-labels(neutral-3),
+		brandui-color-labels(neutral-3),
+		brandui-color-labels(neutral-2)
+	) {
+		content: '';
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		right: 1px;
+		bottom: 1px;
+		z-index: 0;
+		border-radius: map.get($brandui-radius, 'small');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
+	}
+
+	&:after {
+		content: '';
+		z-index: 0;
+		position: absolute;
+		inset: 2px;
+		border-radius: map.get($brandui-radius, 'small');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
+	}
+	@include color.color-mode-pseudo('&:after', background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+}

package/dist/scss/base/mixins/index.scss

@@ -4,3 +4,4 @@
 @use '../../base/mixins/glass' as *;
 @use '../../base/mixins/breakpoints' as *;
 @use '../../base/mixins/typography' as *;
+@use '../../base/mixins/gradient-border' as *;

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

@@ -33,15 +33,16 @@ $brandui-colors: (
 	'dark-purple': #441c99,
 	'purple': #8d1ff4,
 	'lavender': #c481f3,
+	'lavender-light': #d6a7f7,
 	'black': #000,
 	'space': #01011e,
 	'midnight': #030328,
 	'ocean': #181846,
-	'dark-grey': #202020,
+	'dark-grey': #181818,
 	'dawn': #383f76,
-	'steel': #c0bce5,
+	'steel': #c0c0c0,
 	'smoke': #6d6d9c,
-	'snow': #f6f7fb,
+	'snow': #e9e9e9,
 	'white': #fff,
 	'rose': #c82d53,
 	'salmon': #f97a99,
@@ -79,11 +80,11 @@ $brandui-color-labels: (
 	'ui-headline': map.get($brandui-colors, 'black'),
 	'ui-headline-dark': map.get($brandui-colors, 'snow'),
 	'ui-body': map.get($brandui-colors, 'black'),
-	'ui-body-dark': map.get($brandui-colors, 'snow'),
+	'ui-body-dark': map.get($brandui-colors, 'steel'),
 	'ui-fill': map.get($brandui-colors, 'steel'),
 	'ui-fill-dark': map.get($brandui-colors, 'dark-grey'),
-	'ui-stroke': map.get($brandui-colors, 'snow'),
-	'ui-stroke-dark': map.get($brandui-colors, 'black'),
+	'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'),
 	'action': map.get($brandui-colors, 'black'),
@@ -95,7 +96,7 @@ $brandui-color-labels: (
 	'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-tertiary': map.get($brandui-colors, 'purple'),
+	'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'),
@@ -116,10 +117,10 @@ $brandui-color-labels: (
 	'fail-contrast': map.get($brandui-colors, 'snow'),
 	'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'neutral-1': map.get($brandui-colors, 'black'),
-	'neutral-2': map.get($brandui-colors, 'black'),
-	'neutral-3': map.get($brandui-colors, 'black'),
-	'neutral-4': map.get($brandui-colors, 'smoke'),
-	'neutral-5': map.get($brandui-colors, 'snow'),
+	'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'),
 ) !default;
 

package/dist/scss/base/variables/_effects.scss

@@ -1,10 +1,10 @@
 /* Effects */
 $brandui-shadow: (
-	far: 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3),
-	mid: 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25),
-	near: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15),
-	faint: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05),
-	outline: 0 1px 3px 1px RGBA(109, 109, 156, 0.3),
+	far: 0 0 3.75rem RGBA(68, 28, 153, 0.4),
+	mid: 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25),
+	near: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15),
+	faint: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05),
+	outline: 0 1px 3px 1px RGBA(68, 28, 153, 0.3),
 ) !default;
 
 $brandui-radius: (

package/dist/scss/base/variables/_themes.scss

@@ -42,10 +42,10 @@ $brandui-default-themes: (
 			),
 		),
 		dark: (
-			text-solid: map.get($brandui-colors, 'snow'),
+			text-solid: map.get($brandui-colors, 'steel'),
 			// deprecate
 			solid: map.get($brandui-colors, 'sky'),
-			solid-primary: map.get($brandui-colors, 'bubblegum'),
+			solid-primary: map.get($brandui-colors, 'snow'),
 			solid-secondary: map.get($brandui-colors, 'deep-sea'),
 			solid-tertiary: map.get($brandui-colors, 'lavender'),
 			contrast: map.get($brandui-colors, 'midnight'),
@@ -53,8 +53,8 @@ $brandui-default-themes: (
 			spotlight: map.get($brandui-colors, 'dark-purple'),
 			highlight: map.get($brandui-colors, 'hot-pink'),
 			text-gradient: (
-				start: map.get($brandui-colors, 'snow'),
-				end: map.get($brandui-colors, 'snow'),
+				start: map.get($brandui-colors, 'steel'),
+				end: map.get($brandui-colors, 'steel'),
 			),
 			gradient-primary: (
 				start: map.get($brandui-colors, 'snow'),

package/dist/scss/base/variables/_typography.scss

@@ -10,8 +10,8 @@ $brandui-font-size: (
 	hero-title-large: 3.625rem,
 	hero-title-small: 2.125rem,
 	page-title-large: 2.375rem,
-	page-title: 2rem,
-	section-title: 2rem,
+	page-title: 2.375rem,
+	section-title: 2.375rem,
 	headline-large: 2.5rem,
 	headline-small: 2rem,
 	subhead: 1.5rem,
@@ -33,7 +33,7 @@ $brandui-line-height: (
 	hero-title-small: 2.125rem,
 	page-title-large: 2.75rem,
 	page-title: 2.5rem,
-	section-title: 2.5rem,
+	section-title: 2.75rem,
 	headline-large: 3rem,
 	headline-small: 2.5rem,
 	subhead: 2.25rem,
@@ -213,14 +213,14 @@ $text-elements-responsive: (
 	'hero-title-large': (
 		'target': 'hero-title-small',
 		'weight': 700,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
 	),
 	'hero-title-small': (
 		'target': 'hero-title-small',
 		'weight': 700,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
 	),
@@ -228,7 +228,7 @@ $text-elements-responsive: (
 		'target': 'hero-title-small',
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, big-shoulders),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
 		// 'text-transform': none,
@@ -236,14 +236,14 @@ $text-elements-responsive: (
 	'page-title': (
 		'target': 'hero-title-small',
 		'weight': 700,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
 	),
 	'section-title': (
 		'target': 'hero-title-small',
 		'weight': 700,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
 	),
@@ -251,7 +251,7 @@ $text-elements-responsive: (
 		'target': 'headline-small',
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, space-grotesk),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,
@@ -260,7 +260,7 @@ $text-elements-responsive: (
 		'target': 'subhead',
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, space-grotesk),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,
@@ -269,7 +269,7 @@ $text-elements-responsive: (
 		'target': 'subhead-small',
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, space-grotesk),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,

package/dist/scss/base.scss

@@ -13,7 +13,7 @@
 @use '../scss/base/decorations/decorations' as *;
 
 // Note, we want to keep these files around as they are in use for Evo and labs. However, we are probably done with them on the main theme
-// @use '../scss/base/decorations/backgrounds' as *;
+@use '../scss/base/decorations/backgrounds' as *;
 // @use '../scss/base/decorations/glows' as *;
 @use '../scss/base/decorations/flourishes' as *;
 @use '../scss/base/decorations/markers' as *;

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

@@ -30,7 +30,7 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	align-items: center;
 	border-radius: map.get($brandui-radius, small);
 	display: inline-flex;
-	font-family: map.get($brandui-font-family, space-grotesk), sans-serif;
+	font-family: map.get($brandui-font-family, geist), sans-serif;
 	font-size: map.get($brandui-font-size, body);
 	font-weight: 700;
 	letter-spacing: 0.005em;
@@ -85,10 +85,12 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 		position: relative;
 		border: 1px;
 		border-style: solid;
-		border-color: white;
 		@include color.color-mode(color, brandui-color-labels(action-contrast), brandui-color-labels(action-contrast-dark));
 		@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));
+
+		@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));
 	}
 
 	&.secondary {
@@ -96,8 +98,13 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 		border: 1px;
 		border-style: solid;
 		transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast);
-		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
-		@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		@include color.color-mode(color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+		@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+
+		&:hover {
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+			@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+		}
 	}
 
 	&.destroy {

package/dist/scss/components/atoms/_feature-checkmark.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
+@use './../../base/functions' as *;
 @use '../../base/variables/sizing' as *;
 @use '../../base/mixins/page-theme' as theme;
+@use '../../base/mixins/color-mode' as color;
 @use '../../base/decorations/markers' as *;
 
 .feature-checkmark {
@@ -25,4 +27,5 @@
 		line-height: 1;
 		-webkit-font-smoothing: antialiased;
 	}
+	@include color.color-mode-pseudo('&:after', color, brandui-color-labels(action), brandui-color-labels(action-dark));
 }

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

@@ -34,7 +34,7 @@
 		border-style: solid;
 		border-radius: map.get($brandui-radius, 'medium');
 		padding: map.get($brandui-padding, 'slim');
-		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-3), 0.3), RGBA(brandui-rgb-labels(neutral-3), 0.7));
+		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-5), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.7));
 	}
 
 	@each $icon-key, $icon-val in $snyk-icons {
@@ -76,7 +76,7 @@
 					mask-repeat: no-repeat;
 
 					background-color: currentColor;
-					// @include color.color-mode(background-color, brandui-color-labels(default), brandui-color-labels(default-dark));
+					@include color.color-mode(background-color, brandui-color-labels(default), brandui-color-labels(default-dark));
 				}
 			}
 		}

package/dist/scss/components/atoms/_tag.scss

@@ -24,12 +24,13 @@
 
 a.tag {
 	text-decoration: none;
-	transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast);
+	transition: color map.get($brandui-transition, fast), border-color map.get($brandui-transition, fast);
 	outline-color: transparent;
 	@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));
+		@include color.color-mode(border-color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 		@include color.color-mode(
 			background-color,
 			RGBA(brandui-rgb-labels(action-secondary), 0.1),

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

@@ -11,7 +11,7 @@
 .announcement {
 	&-bar {
 		border: 1px solid;
-		border-radius: map.get($brandui-radius, pill);
+		border-radius: map.get($brandui-radius, small);
 		cursor: pointer;
 		display: inline-block;
 		align-items: center;
@@ -20,13 +20,19 @@
 		padding: 0.5rem 1.5rem;
 		position: relative;
 		transition: map.get($brandui-transition, fast);
-		@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		@include color.color-mode(background-color, brandui-color-labels(default), brandui-color-labels(default-dark));
+		@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 
 		// @include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-3), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.3));
 
 		.badge {
 			margin-right: map.get($brandui-padding, 'extra-small');
 		}
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+		}
 	}
 
 	&-message {
@@ -37,13 +43,15 @@
 	&-link {
 		@extend .link-stretched;
 		@include font.get-typography(body-bold);
-		@include color.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
+		@include color.color-mode(color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+		@include color.color-mode-pseudo('&:after', color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
 
 		&:hover,
 		&:focus {
 			text-decoration: none;
 			transition: map.get($brandui-transition, fast);
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+			@include color.color-mode-pseudo('&:after', color, brandui-color-labels(action), brandui-color-labels(action-dark));
 		}
 	}
 
@@ -58,7 +66,7 @@
 		border-radius: map.get($brandui-radius, 'large');
 		box-shadow: map.get($brandui-shadow, outline);
 		@include glass.bg-glass($dense: true);
-		@include glass.border-glass;
+		@include glass.border-glass(ui-stroke);
 
 		@include break.max-mobile {
 			padding: map.get($brandui-padding, small);

package/dist/scss/components/molecules/_pagination.scss

@@ -36,8 +36,8 @@
 				border-color map.get($brandui-transition, fast);
 			@include font.get-typography(body-lead);
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
-			@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-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(neutral-5), brandui-color-labels(neutral-1));
+			@include color.transparent-border;
 
 			&:hover {
 				@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));

package/dist/scss/components/molecules/_table-of-contents.scss

@@ -8,11 +8,11 @@
 @use '../../base/mixins/typography' as font;
 
 .toc {
-	border-radius: map.get($brandui-radius, extra-large);
+	border-radius: map.get($brandui-radius, small);
 	border-width: 1px;
 	border-style: solid;
 	padding-bottom: brandui-padding(medium);
-	@include color.color-mode(border-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+	@include color.transparent-border;
 	@include break.max-mobile {
 		display: none;
 	}
@@ -22,8 +22,8 @@
 		padding-bottom: brandui-padding(small);
 		border-bottom-width: 1px;
 		border-bottom-style: solid;
-		@include color.color-mode(border-bottom-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
 		@include color.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
+		@include color.transparent-border(border-bottom-color);
 	}
 
 	&-item {
@@ -72,7 +72,7 @@
 			border-radius: 0 map.get($brandui-radius, small) map.get($brandui-radius, small) 0;
 
 			@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
-			@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
+			@include color.color-mode(background-color, RBGA(brandui-rgb-labels(action), 0.1), RGBA(brandui-rgb-labels(action-dark), 0.1));
 			@include color.color-mode-pseudo('&:after', border-left-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 
 			&:after {

package/dist/scss/components/molecules/cards/_card-bg-image.scss

@@ -6,7 +6,7 @@
 .card-bg-image {
 	position: relative;
 	overflow: clip;
-	border-radius: map.get($brandui-radius, large);
+	border-radius: map.get($brandui-radius, small);
 	isolation: isolate;
 	display: flex;
 	flex-direction: column;

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

@@ -8,11 +8,17 @@
 .card {
 	display: flex;
 	flex-direction: column;
-	border-radius: map.get($brandui-radius, 'extra-small');
+	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);
 
 	&-wrapper {
 		position: relative;

package/dist/scss/components/organisms/_footer.scss

@@ -50,7 +50,7 @@
 
 			&-title {
 				margin-bottom: map.get($brandui-padding, 'small');
-				@include theme.theme-color(color, 'text-solid');
+				@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
 			}
 		}
 

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

@@ -152,7 +152,7 @@
 				align-items: center;
 				border-radius: map.get($brandui-radius, 'small');
 				border: 1px solid transparent;
-				font-family: map.get($brandui-font-family, space-grotesk), sans-serif;
+				font-family: map.get($brandui-font-family, geist), sans-serif;
 				font-size: map.get($brandui-font-size, body);
 				font-weight: 700;
 				letter-spacing: 0.005em;
@@ -325,8 +325,8 @@
 							border-top-style: solid;
 							@include color.color-mode(
 								border-top-color,
-								RGBA(brandui-rgb-labels(neutral-3), 0.3),
-								RGBA(brandui-rgb-labels(neutral-3), 0.7)
+								RGBA(brandui-rgb-labels(neutral-5), 0.3),
+								RGBA(brandui-rgb-labels(neutral-5), 0.7)
 							);
 
 							&:has(.submenu-column-label) {
@@ -499,7 +499,7 @@
 				transition: map.get($brandui-transition, 'fast');
 				display: flex;
 				gap: map.get($brandui-padding, 'extra-small');
-				font-family: map.get($brandui-font-family, space-grotesk), sans-serif;
+				font-family: map.get($brandui-font-family, geist), sans-serif;
 				font-size: map.get($brandui-font-size, body);
 				font-weight: 700;
 				letter-spacing: 0.005em;
@@ -607,7 +607,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-3), 0.3), RGBA(brandui-rgb-labels(neutral-3), 0.7));
+					@include color.color-mode(border-top-color, RGBA(brandui-rgb-labels(neutral-5), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.7));
 				}
 
 				&-content {

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

@@ -2,7 +2,9 @@
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/variables/effects' as *;
 @use '../../../base/mixins/page-theme' as theme;
+@use '../../../base/mixins/color-mode' as color;
 @use '../../../base/mixins/glass' as glass;
+@use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/functions' as *;
 
@@ -15,12 +17,13 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-width: 0.1875rem;
-	border-style: solid;
-	border-radius: map.get($brandui-radius, large);
-	box-shadow: map.get($brandui-shadow, outline);
-	@include theme.theme-color(background-color, base);
-	@include glass.border-glass;
+	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);
@@ -50,6 +53,13 @@
 		}
 	}
 
+	&-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

@@ -1,8 +1,12 @@
 @use 'sass:map';
 @use 'sass:string';
 @use '../../../base/variables/sizing' as *;
+@use '../../../base/variables/effects' as *;
 @use '../../../base/mixins/page-theme' as theme;
 @use '../../../base/mixins/breakpoints' as break;
+@use '../../../base/mixins/glass' as glass;
+@use '../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/functions' as *;
 @use '../../../base/layout' as *;
 @use '../../../base/links' as *;
@@ -10,7 +14,13 @@
 .footer-cta {
 	@extend .brandui-section;
 	margin-bottom: string.unquote('-#{map.get($brandui-padding, huge)}');
-	padding-top: 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, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+	@include glass.bg-glass(true, ui-fill);
 
 	&-content {
 		max-width: brandui-col-spacing(7);
@@ -61,4 +71,13 @@
 			max-width: 100%;
 		}
 	}
+
+	&-decorations {
+		position: absolute;
+		z-index: 1;
+		inset: 2px;
+		overflow: hidden;
+	}
+
+	@include gradient.gradient-border;
 }

package/dist/scss/evo/base/variables/_typography.scss

@@ -23,6 +23,7 @@ $evoui-line-height: (
 	page-title-large: 5rem,
 	page-title: 5rem,
 	page-title-small: 4rem,
+	section-title: 4rem,
 	section-title-small: 3rem,
 );
 $brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);

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

@@ -16,10 +16,10 @@ $fail-hover: brandui-color-labels(fail);
 $fail-hover-dark: brandui-color-labels(fail-dark);
 $neutral: brandui-color-labels(neutral-3);
 $neutral-hover: brandui-color-labels(neutral-6);
-$primary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
-	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
-$primary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
-	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$primary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.7),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.7), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$primary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.7),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.7), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
 $secondary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
 	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
 $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),

package/dist/scss/labs/_components.scss

@@ -28,7 +28,6 @@
 @use '../components/molecules/alert' as *;
 @use '../components/molecules/avatar-grid-item' as *;
 @use '../components/molecules/avatar-username' as *;
-@use '../components/molecules/cards/card-bg-image' as *;
 @use '../components/molecules/charts/charts' as *;
 @use '../components/molecules/charts/vertical-chart' as *;
 @use '../components/molecules/charts/horizontal-chart' as *;
@@ -60,6 +59,7 @@
 @use './components/atoms/tooltip' as *;
 @use './components/molecules/announcements' as *;
 @use './components/molecules/cards/card' as *;
+@use './components/molecules/cards/card-bg-image' as *;
 @use './components/molecules/cards/card-repo' as *;
 @use './components/molecules/pagination' as *;
 @use './components/molecules/share-this' as *;

package/dist/scss/labs/base/_baseline.scss

@@ -20,6 +20,8 @@ h6 {
 
 code:not([class]) {
 	font-family: map.get($brandui-font-family, space-mono), monospace;
+	@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-4), 0.1), RGBA(brandui-rgb-labels(neutral-2), 0.1));
 }
 
 hr {

package/dist/scss/labs/components/molecules/_table-of-contents.scss

@@ -1,11 +1,24 @@
+@use 'sass:map';
 @use '../../../components/molecules/table-of-contents';
-
+@use '../../../base/variables/effects' as *;
+@use '../../../base/mixins/color-mode' as color;
 @use '../../base/mixins/typography' as font;
 
 .toc {
+	border-radius: map.get($brandui-radius, extra-large);
+	@include color.color-mode(border-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+
+	&-title {
+		@include color.color-mode(border-bottom-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+	}
+
 	&-item {
 		&-link {
 			@include font.get-typography(body-small);
 		}
 	}
+
+	&.active {
+		@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
+	}
 }

package/dist/scss/labs/components/molecules/cards/_card-bg-image.scss

@@ -0,0 +1,7 @@
+@use 'sass:map';
+@use '../../../../components/molecules/cards/card-bg-image' as *;
+@use '../../../../base/variables/effects' as *;
+
+.card-bg-image {
+	border-radius: map.get($brandui-radius, large);
+}

package/package.json

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