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

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

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

package/dist/scss/base.scss

@@ -11,10 +11,8 @@
 @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/backgrounds' 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,11 +24,23 @@ $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, small);
+	border-radius: map.get($brandui-radius, pill);
 	display: inline-flex;
 	font-family: map.get($brandui-font-family, space-grotesk), sans-serif;
 	font-size: map.get($brandui-font-size, body);
@@ -83,21 +95,114 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 
 	&.primary {
 		position: relative;
-		border: 1px;
-		border-style: solid;
-		border-color: white;
+		border: none;
+		isolation: isolate;
 		@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;
+			}
+		}
 	}
 
 	&.secondary {
 		position: relative;
-		border: 1px;
-		border-style: solid;
+		border: none;
 		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(border-color, brandui-color-labels(action), brandui-color-labels(action-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;
+			}
+		}
 	}
 
 	&.destroy {
@@ -127,7 +232,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-tertiary), brandui-color-labels(action-tertiary-dark));
+		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
 
 		&:after {
 			content: '';
@@ -142,7 +247,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), brandui-color-labels(action-dark));
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 
 			&:after {
 				transform: translateX(0.25rem);

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

@@ -67,7 +67,8 @@ $tinting: RGBA(brandui-rgb-labels(action), 0.05);
 		}
 	}
 
-	&:hover {
+	&:hover,
+	&:focus {
 		input[type='checkbox'] + .checkmark {
 			border-width: 0.0625rem;
 			border-style: solid;
@@ -76,17 +77,6 @@ $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.3), RGBA(brandui-rgb-labels(ui-stroke), 0.3));
+		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.5), RGBA(brandui-rgb-labels(ui-stroke), 0.5));
 
 		&: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.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));
+			@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'));
 		}
 
 		&-option {

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

@@ -10,6 +10,7 @@
 	display: block;
 
 	&:after {
+		@extend .marker-highlight-short-1;
 		content: '\e910'; // icon-check
 		display: flex;
 		justify-content: center;

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

@@ -46,8 +46,7 @@
 	}
 
 	&.icon-theme-solid {
-		// TODO: Evaluate if this is needed once the designs are more locked in.
-		// @include theme.theme-color(color, 'solid-primary');
+		@include theme.theme-color(color, 'solid-primary');
 	}
 
 	&.icon-solid {
@@ -71,12 +70,10 @@
 					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));
 				}
 			}
 		}

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

@@ -14,13 +14,13 @@
 	padding: map.get($brandui-padding, extra-small);
 	display: flex;
 	gap: map.get($brandui-padding, medium);
-	border-radius: map.get($brandui-radius, small);
-	border-width: 1px;
+	border-radius: map.get($brandui-radius, pill);
+	border-width: 0.0625rem;
 	border-style: solid;
 	cursor: default;
 	overflow-x: auto;
 	scroll-snap-type: x mandatory;
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-3), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.3));
+	@include color.color-mode(border-color, brandui-color-labels(neutral-4), brandui-color-labels(neutral-3));
 
 	&-body {
 		display: flex;
@@ -29,7 +29,7 @@
 
 	.tab {
 		border: 0.0625rem solid transparent;
-		border-radius: map.get($brandui-radius, extra-small);
+		border-radius: map.get($brandui-radius, pill);
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;

package/dist/scss/components/atoms/triggers/_filter.scss

@@ -36,6 +36,6 @@
 	&:hover,
 	&:focus-within,
 	&.open {
-		@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
+		@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 	}
 }

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

@@ -10,7 +10,7 @@
 
 .announcement {
 	&-bar {
-		border: 1px solid;
+		border: 4px solid;
 		border-radius: map.get($brandui-radius, pill);
 		cursor: pointer;
 		display: inline-block;
@@ -19,10 +19,10 @@
 		max-width: max-content;
 		padding: 0.5rem 1.5rem;
 		position: relative;
+		box-shadow: map.get($brandui-shadow, outline);
 		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(border-color, RGBA(brandui-rgb-labels(neutral-3), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.3));
+		@include glass.bg-glass;
+		@include glass.border-glass;
 
 		.badge {
 			margin-right: map.get($brandui-padding, 'extra-small');

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

@@ -30,7 +30,7 @@
 			padding: map.get($brandui-padding, extra-small) map.get($brandui-padding, small);
 			border-width: 0.0625rem;
 			border-style: solid;
-			border-radius: map.get($brandui-radius, small);
+			border-radius: map.get($brandui-radius, pill);
 			text-decoration: none;
 			transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, 'fast'),
 				border-color map.get($brandui-transition, fast);
@@ -41,8 +41,8 @@
 
 			&:hover {
 				@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
-				@include color.color-mode(background-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(background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-1));
+				@include color.color-mode(border-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 			}
 		}
 

package/dist/scss/components/molecules/_search.scss

@@ -41,9 +41,19 @@
 		}
 	}
 
-	&-submit {
+	&-actions {
 		position: absolute;
 		right: 0;
+		display: flex;
+		flex-direction: row-reverse;
+		align-items: center;
+
+		hr {
+			width: 1px;
+			height: 20px;
+			margin: 0 10px;
+			background-color: map.get($brandui-colors, 'midnight');
+		}
 	}
 }
 

package/dist/scss/components/molecules/_share-this.scss

@@ -38,8 +38,7 @@
 				RGBA(brandui-rgb-labels(action-secondary), 0.1),
 				RGBA(brandui-rgb-labels(action-secondary-dark), 0.1)
 			);
-			@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(action-tertiary), brandui-color-labels(action-tertiary-dark));
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 		}
 	}
 }