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

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

@@ -14,38 +14,38 @@
 $brandui-default-themes: (
 	default: (
 		light: (
-			text-solid: map.get($brandui-colors, 'dark-purple'),
+			text-solid: map.get($brandui-colors, 'black'),
 			// deprecate
 			solid: map.get($brandui-colors, 'dark-purple'),
 			solid-primary: map.get($brandui-colors, 'purple'),
 			solid-secondary: map.get($brandui-colors, 'dark-purple'),
 			solid-tertiary: map.get($brandui-colors, 'dark-purple'),
-			contrast: map.get($brandui-colors, 'white'),
+			contrast: map.get($brandui-colors, 'snow'),
 			base: map.get($brandui-base-colors, 'dark-purple'),
 			spotlight: map.get($brandui-base-colors, 'dark-purple'),
 			highlight: map.get($brandui-colors, 'bubblegum'),
 			text-gradient: (
-				start: map.get($brandui-colors, 'electric-blue'),
-				end: map.get($brandui-colors, 'midnight'),
+				start: map.get($brandui-colors, 'black'),
+				end: map.get($brandui-colors, 'black'),
 			),
 			gradient-primary: (
 				start: map.get($brandui-colors, 'hot-pink'),
 				end: map.get($brandui-colors, 'hot-pink'),
 			),
 			gradient-secondary: (
-				start: map.get($brandui-colors, 'electric-blue'),
-				end: map.get($brandui-colors, 'electric-blue'),
+				start: map.get($brandui-colors, 'black'),
+				end: map.get($brandui-colors, 'black'),
 			),
 			gradient-tertiary: (
-				start: map.get($brandui-colors, 'electric-blue'),
-				end: map.get($brandui-colors, 'electric-blue'),
+				start: map.get($brandui-colors, 'black'),
+				end: map.get($brandui-colors, 'black'),
 			),
 		),
 		dark: (
-			text-solid: map.get($brandui-colors, 'periwinkle'),
+			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,20 +53,20 @@ $brandui-default-themes: (
 			spotlight: map.get($brandui-colors, 'dark-purple'),
 			highlight: map.get($brandui-colors, 'hot-pink'),
 			text-gradient: (
-				start: map.get($brandui-colors, 'periwinkle'),
-				end: map.get($brandui-colors, 'white'),
+				start: map.get($brandui-colors, 'steel'),
+				end: map.get($brandui-colors, 'steel'),
 			),
 			gradient-primary: (
-				start: map.get($brandui-colors, 'hot-pink'),
-				end: map.get($brandui-colors, 'dark-purple'),
+				start: map.get($brandui-colors, 'snow'),
+				end: map.get($brandui-colors, 'snow'),
 			),
 			gradient-secondary: (
-				start: map.get($brandui-colors, 'electric-blue'),
-				end: map.get($brandui-colors, 'periwinkle'),
+				start: map.get($brandui-colors, 'snow'),
+				end: map.get($brandui-colors, 'snow'),
 			),
 			gradient-tertiary: (
-				start: map.get($brandui-colors, 'purple'),
-				end: map.get($brandui-colors, 'bubblegum'),
+				start: map.get($brandui-colors, 'snow'),
+				end: map.get($brandui-colors, 'snow'),
 			),
 		),
 	),

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

@@ -7,11 +7,11 @@
 
 /* Typography variables */
 $brandui-font-size: (
-	hero-title-large: 5.625rem,
-	hero-title-small: 3.125rem,
-	page-title-large: 4.375rem,
-	page-title: 3rem,
-	section-title: 3rem,
+	hero-title-large: 3.625rem,
+	hero-title-small: 2.125rem,
+	page-title-large: 2.375rem,
+	page-title: 2.375rem,
+	section-title: 2.375rem,
 	headline-large: 2.5rem,
 	headline-small: 2rem,
 	subhead: 1.5rem,
@@ -29,11 +29,11 @@ $brandui-font-size: (
 ) !default;
 
 $brandui-line-height: (
-	hero-title-large: 6.25rem,
-	hero-title-small: 3.75rem,
-	page-title-large: 5rem,
-	page-title: 4rem,
-	section-title: 4rem,
+	hero-title-large: 4rem,
+	hero-title-small: 2.125rem,
+	page-title-large: 2.75rem,
+	page-title: 2.5rem,
+	section-title: 2.75rem,
 	headline-large: 3rem,
 	headline-small: 2.5rem,
 	subhead: 2.25rem,
@@ -56,54 +56,51 @@ $brandui-font-family: (
 	space-grotesk: 'Space Grotesk',
 	roboto: 'Roboto',
 	roboto-mono: 'Roboto Mono',
+	geist: 'Geist',
+	geist-mono: 'Geist Mono',
 ) !default;
 
 $text-elements: (
 	'hero-title-large': (
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'hero-title-small': (
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'page-title-large': (
-		'weight': 900,
+		'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,
-		'text-transform': uppercase,
 	),
 	'page-title': (
-		'weight': 900,
+		'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,
-		'text-transform': uppercase,
 	),
 	'section-title': (
-		'weight': 900,
+		'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,
-		'text-transform': uppercase,
 	),
 	'headline-large': (
 		'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.01em,
 		'text-transform': none,
@@ -111,7 +108,7 @@ $text-elements: (
 	'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.01em,
 		'text-transform': none,
@@ -120,7 +117,7 @@ $text-elements: (
 		// 'weight': 600,
 		'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.01em,
 		'text-transform': none,
@@ -129,7 +126,7 @@ $text-elements: (
 		// 'weight': 600,
 		'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.01em,
 		'text-transform': none,
@@ -138,7 +135,7 @@ $text-elements: (
 		// 'weight': 600,
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, space-grotesk),
+		'family': map.get($brandui-font-family, geist-mono),
 		'type': sans-serif,
 		'letter-spacing': 0.12em,
 		'text-transform': uppercase,
@@ -147,7 +144,7 @@ $text-elements: (
 		// 'weight': 600,
 		'weight': 700,
 		// 'family': map.get($brandui-font-family, poppins),
-		'family': map.get($brandui-font-family, space-grotesk),
+		'family': map.get($brandui-font-family, geist-mono),
 		'type': sans-serif,
 		'letter-spacing': 0.12em,
 		'text-transform': uppercase,
@@ -155,7 +152,7 @@ $text-elements: (
 	'body-lead': (
 		'weight': 500,
 		// '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.01em,
 		'text-transform': none,
@@ -163,49 +160,49 @@ $text-elements: (
 	'body-lead-bold': (
 		'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.01em,
 		'text-transform': none,
 	),
 	'body': (
 		'weight': 400,
-		'family': map.get($brandui-font-family, roboto),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,
 	),
 	'body-bold': (
 		'weight': 600,
-		'family': map.get($brandui-font-family, roboto),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0.005em,
 		'text-transform': none,
 	),
 	'body-long': (
 		'weight': 400,
-		'family': map.get($brandui-font-family, roboto),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0.01em,
 		'text-transform': none,
 	),
 	'body-small': (
 		'weight': 400,
-		'family': map.get($brandui-font-family, roboto),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,
 	),
 	'body-small-medium': (
 		'weight': 500,
-		'family': map.get($brandui-font-family, roboto),
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': 0,
 		'text-transform': none,
 	),
 	'code': (
 		'weight': 400,
-		'family': map.get($brandui-font-family, roboto-mono),
+		'family': map.get($brandui-font-family, geist-mono),
 		'type': monospace,
 		'letter-spacing': 0,
 		'text-transform': none,
@@ -215,51 +212,46 @@ $text-elements: (
 $text-elements-responsive: (
 	'hero-title-large': (
 		'target': 'hero-title-small',
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'hero-title-small': (
 		'target': 'hero-title-small',
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'page-title-large': (
 		'target': 'hero-title-small',
-		'weight': 900,
+		'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,
-		'text-transform': uppercase,
 	),
 	'page-title': (
 		'target': 'hero-title-small',
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'section-title': (
 		'target': 'hero-title-small',
-		'weight': 900,
-		'family': map.get($brandui-font-family, big-shoulders),
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
 		'letter-spacing': -0.01em,
-		'text-transform': uppercase,
 	),
 	'headline-large': (
 		'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,
@@ -268,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,
@@ -277,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

@@ -11,8 +11,10 @@
 @use '../scss/base/spacing' as *;
 @use '../scss/base/sizing' as *;
 @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/glows' as *;
+// @use '../scss/base/decorations/glows' as *;
 @use '../scss/base/decorations/flourishes' as *;
 @use '../scss/base/decorations/markers' as *;
 @use '../scss/base/decorations/separators' as *;

package/dist/scss/components/atoms/_badge.scss

@@ -2,7 +2,7 @@
 @use '../../base/mixins/page-theme' as theme;
 
 .badge {
-	@extend .marker-highlight-short-2;
+	// @extend .marker-highlight-short-2;
 	width: max-content;
 	height: max-content;
 	padding: 0.125rem 0.25rem 0.125rem 0.4rem;

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

@@ -24,25 +24,13 @@ $secondary-conic-light-values: RGBA(brandui-rgb-labels(action), 1), RGBA(brandui
 $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
 	RGBA(brandui-rgb-labels(action-dark), 0.3), RGBA(brandui-rgb-labels(action-dark), 1);
 
-@property --glimmer-angle {
-	syntax: '<angle>';
-	inherits: false;
-	initial-value: 0deg;
-}
-
-@property --glimmer-duration {
-	syntax: '<time>';
-	inherits: false;
-	initial-value: 6s;
-}
-
 .button {
 	border: 0.0625rem solid transparent;
 	align-content: center;
 	align-items: center;
-	border-radius: map.get($brandui-radius, pill);
+	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;
@@ -95,113 +83,27 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 
 	&.primary {
 		position: relative;
-		border: none;
-		isolation: isolate;
+		border: 1px;
+		border-style: solid;
 		@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));
 
-		// This is the transparent fake border
-		@include color.gradient-mode-pseudo(
-			'&:before',
-			background,
-			'linear',
-			90deg,
-			brandui-color-labels(action),
-			brandui-color-labels(action-secondary),
-			brandui-color-labels(action-secondary-dark),
-			brandui-color-labels(action-dark)
-		);
-		&:before {
-			content: '';
-			position: absolute;
-			inset: 0;
-			border-radius: inherit;
-			z-index: -1;
-		}
-		// This is the rotating conic-gradient glimmer effect
-		@include color.conic-gradient-mode-pseudo(
-			'&:after',
-			background,
-			var(--glimmer-angle),
-			$primary-conic-light-values,
-			$primary-conic-dark-values
-		);
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			inset: -1px;
-			animation: glimmer var(--glimmer-duration) linear infinite;
-			border-radius: inherit;
-			z-index: -2;
-		}
-
-		&:hover,
-		&:focus {
-			@include color.gradient-mode-pseudo(
-				'&:before',
-				background,
-				'linear',
-				90deg,
-				brandui-color-labels(action-secondary),
-				brandui-color-labels(neutral-2),
-				brandui-color-labels(action-secondary-dark),
-				brandui-color-labels(neutral-5)
-			);
-
-			&:after {
-				--glimmer-duration: 2s;
-			}
-		}
+		@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 {
 		position: relative;
-		border: none;
+		border: 1px;
+		border-style: solid;
 		transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast);
-		isolation: isolate;
-		@include color.color-mode(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));
 
-		// This is the transparent fake border
-		@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
-		&:before {
-			content: '';
-			position: absolute;
-			inset: 0;
-			border-radius: inherit;
-			backdrop-filter: blur(4px);
-			z-index: -1;
-		}
-		// This is the rotating conic-gradient glimmer effect
-		@include color.conic-gradient-mode-pseudo(
-			'&:after',
-			background,
-			var(--glimmer-angle),
-			$secondary-conic-light-values,
-			$secondary-conic-dark-values
-		);
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			inset: -1px;
-			animation: glimmer var(--glimmer-duration) linear infinite;
-			border-radius: inherit;
-			z-index: -2;
-		}
-
-		&:hover,
-		&:focus {
-			transition: color map.get($brandui-transition, fast);
-			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
-
-			@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-1));
-			&:before {
-				transition: background-color map.get($brandui-transition, fast);
-			}
-
-			&:after {
-				--glimmer-duration: 2s;
-			}
+		&: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));
 		}
 	}
 
@@ -232,7 +134,7 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 		vertical-align: middle;
 		line-height: 1.2;
 		gap: map.get($brandui-padding, extra-small);
-		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 
 		&:after {
 			content: '';
@@ -247,7 +149,7 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 		&:hover,
 		&:focus {
 			background: transparent;
-			@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), brandui-color-labels(action-dark));
 
 			&:after {
 				transform: translateX(0.25rem);

package/dist/scss/components/atoms/_checkbox.scss

@@ -67,8 +67,7 @@ $tinting: RGBA(brandui-rgb-labels(action), 0.05);
 		}
 	}
 
-	&:hover,
-	&:focus {
+	&:hover {
 		input[type='checkbox'] + .checkmark {
 			border-width: 0.0625rem;
 			border-style: solid;
@@ -77,6 +76,17 @@ $tinting: RGBA(brandui-rgb-labels(action), 0.05);
 		}
 	}
 
+	&:focus,
+	&:focus-visible,
+	&:focus-within {
+		input[type='checkbox'] + .checkmark {
+			outline-width: 3px;
+			outline-style: solid;
+			box-shadow: 0 0 0.625rem $shading;
+			@include color.color-mode(outline-color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
+		}
+	}
+
 	i {
 		display: inline-block;
 		margin-bottom: -0.1875rem;

package/dist/scss/components/atoms/_dropdown.scss

@@ -124,7 +124,7 @@ $tinting-dark: RGBA(brandui-rgb-labels(action-dark), 0.1);
 			border-color map.get($brandui-transition, fast);
 		@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
 		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.5), RGBA(brandui-rgb-labels(ui-stroke), 0.5));
+		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke), 0.3));
 
 		&:after {
 			content: '';
@@ -168,8 +168,8 @@ $tinting-dark: RGBA(brandui-rgb-labels(action-dark), 0.1);
 				display: block;
 			}
 
-			@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.5), RGBA(brandui-rgb-labels(ui-stroke), 0.5));
-			@include color.color-mode(background-color, map.get($brandui-colors, 'white'), map.get($brandui-colors, 'midnight'));
+			@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke), 0.3));
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 		}
 
 		&-option {

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 {
@@ -10,7 +12,6 @@
 	display: block;
 
 	&:after {
-		@extend .marker-highlight-short-1;
 		content: '\e910'; // icon-check
 		display: flex;
 		justify-content: center;
@@ -26,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 {
@@ -46,7 +46,8 @@
 	}
 
 	&.icon-theme-solid {
-		@include theme.theme-color(color, 'solid-primary');
+		// TODO: Evaluate if this is needed once the designs are more locked in.
+		// @include theme.theme-color(color, 'solid-primary');
 	}
 
 	&.icon-solid {
@@ -70,10 +71,12 @@
 					mask-position: center;
 					mask-repeat: no-repeat;
 					mask-size: contain;
-					background-color: currentColor;
 					mask-image: url($icon-val);
 					mask-position: center;
 					mask-repeat: no-repeat;
+
+					background-color: currentColor;
+					@include color.color-mode(background-color, brandui-color-labels(default), brandui-color-labels(default-dark));
 				}
 			}
 		}