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

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

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/atoms/triggers/_filter.scss

@@ -36,6 +36,6 @@
 	&:hover,
 	&:focus-within,
 	&.open {
-		@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/_announcements.scss

@@ -10,8 +10,8 @@
 
 .announcement {
 	&-bar {
-		border: 4px solid;
-		border-radius: map.get($brandui-radius, pill);
+		border: 1px solid;
+		border-radius: map.get($brandui-radius, small);
 		cursor: pointer;
 		display: inline-block;
 		align-items: center;
@@ -19,14 +19,20 @@
 		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 glass.bg-glass;
-		@include glass.border-glass;
+		@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

@@ -30,19 +30,19 @@
 			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, pill);
+			border-radius: map.get($brandui-radius, small);
 			text-decoration: none;
 			transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, 'fast'),
 				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));
-				@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));
+				@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));
 			}
 		}
 

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

@@ -41,19 +41,9 @@
 		}
 	}
 
-	&-actions {
+	&-submit {
 		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,7 +38,8 @@
 				RGBA(brandui-rgb-labels(action-secondary), 0.1),
 				RGBA(brandui-rgb-labels(action-secondary-dark), 0.1)
 			);
-			@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(ui-fill), brandui-color-labels(ui-fill-dark));
+			@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-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/_tables.scss

@@ -10,6 +10,64 @@
 @use '../../base/functions' as *;
 
 .table {
+	&-basic {
+		border-collapse: collapse;
+		min-width: brandui-col-spacing(6);
+
+		&-wrapper {
+			border-radius: map.get($brandui-padding, extra-small);
+			border-width: 1px;
+			border-style: solid;
+			overflow-y: hidden;
+			@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+		}
+
+		tr:nth-child(even) {
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+		}
+
+		&-caption {
+			width: brandui-col-spacing(6);
+
+			&-content {
+				max-width: brandui-col-spacing(3);
+
+				@include break.max-mobile {
+					max-width: 100%;
+				}
+			}
+
+			@include break.max-mobile {
+				width: brandui-col-spacing(12);
+				text-align: center;
+			}
+		}
+
+		&-col-header {
+			min-width: 200px;
+			padding: map.get($brandui-padding, small);
+
+			@include font.get-typography(subhead-small);
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+			&-wrapper {
+				vertical-align: top;
+			}
+		}
+
+		&-row-header {
+			vertical-align: middle;
+			@include color.color-mode(background-color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));
+			&-content {
+				padding: map.get($brandui-padding, small);
+			}
+		}
+
+		&-row-data {
+			&-content {
+				padding: map.get($brandui-padding, small);
+			}
+		}
+	}
 	&-comparison {
 		&-caption {
 			width: brandui-col-spacing(6);
@@ -48,8 +106,7 @@
 					padding: map.get($brandui-padding, small);
 					text-align: left;
 					@include font.get-typography(body-bold);
-					@include theme.theme-color(background-color, base);
-					@include theme.theme-color(color, ui-body);
+					@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 				}
 			}
 		}

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

@@ -1,19 +1,24 @@
 @use 'sass:map';
+@use '../../../base/mixins/glass' as glass;
+@use '../../../base/mixins/color-mode' as color;
 @use '../../../base/variables/effects' as *;
 @use '../../../base/variables/sizing' as *;
-@use '../../../base/mixins/glass' as glass;
+@use '../../../base/functions' as *;
 
 .card {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 	border-width: 0.1875rem;
 	border-style: solid;
-	border-radius: map.get($brandui-radius, 'large');
-	box-shadow: map.get($brandui-shadow, 'outline');
+	border-width: map.get($brandui-padding, 'hairline');
+	border-radius: map.get($brandui-radius, 'small');
 	transition: map.get($brandui-transition, 'fast');
 	overflow: hidden;
-	@include glass.bg-glass;
-	@include glass.border-glass;
+
+	@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;
@@ -21,7 +26,7 @@
 
 	&-banner {
 		overflow: hidden;
-		border-radius: map.get($brandui-radius, 'medium') map.get($brandui-radius, 'medium') 0 0;
+		border-radius: map.get($brandui-radius, 'extra-small') map.get($brandui-radius, 'extra-small') 0 0;
 	}
 
 	&-headshot {

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/_glossary.scss

@@ -8,6 +8,13 @@
 @use '../../base/functions' as *;
 
 .glossary {
+	&-highlight {
+		@include color.color-mode(
+			background-color,
+			RGBA(brandui-rgb-labels(action-tertiary), 0.3),
+			RGBA(brandui-rgb-labels(action-tertiary-dark), 0.3)
+		);
+	}
 	&-nav {
 		padding: map.get($brandui-padding, small);
 		border-width: 0.1875rem;

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/_split-content.scss

@@ -9,10 +9,6 @@
 		display: flex;
 		gap: brandui-padding(huge);
 		padding: brandui-padding(large);
-		border-radius: brandui-radius(large);
-		box-shadow: brandui-shadow(outline);
-		@include glass.bg-glass;
-		@include glass.border-glass;
 
 		@include break.max-tablet {
 			flex-direction: column;

package/dist/scss/components/organisms/_sub-navigation.scss

@@ -69,7 +69,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));
 				@include color.color-mode(
 					background-color,
 					RGBA(brandui-rgb-labels(action-secondary), 0.1),

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

@@ -4,6 +4,7 @@
 @use '../../../base/mixins/page-theme' as theme;
 @use '../../../base/mixins/glass' as glass;
 @use '../../../base/mixins/breakpoints' as break;
+@use '../../../base/mixins/color-mode' as color;
 @use '../../../base/functions' as *;
 
 .basic-cta {
@@ -15,12 +16,13 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-width: 0.1875rem;
+	border-width: 1px;
 	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;
+	@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

@@ -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/components/organisms/heroes/_hero-case-study.scss

@@ -52,15 +52,11 @@
 		max-width: brandui-col-spacing(4);
 		width: 100%;
 		padding: map.get($brandui-padding, medium);
-		border-width: 0.1875rem;
-		border-style: solid;
-		border-radius: map.get($brandui-radius, large);
-		box-shadow: map.get($brandui-shadow, outline);
 		display: flex;
 		flex-direction: column;
 		gap: map.get($brandui-padding, medium);
-		@include glass.bg-glass;
-		@include glass.border-glass;
+
+		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 
 		.company-info {
 			display: flex;
@@ -74,7 +70,8 @@
 				gap: map.get($brandui-padding, small);
 				border-bottom-width: 0.0625rem;
 				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(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
 			}
 		}
 

package/dist/scss/evo/_components.scss

@@ -40,7 +40,6 @@
 @use '../components/molecules/modal' as *;
 @use '../components/molecules/notification' as *;
 @use '../components/molecules/pagination' as *;
-@use '../components/molecules/share-this' as *;
 @use '../components/molecules/tables' as *;
 @use '../components/molecules/table-of-contents' as *;
 @use '../components/molecules/title-text' as *;
@@ -74,6 +73,7 @@
 @use './components/molecules/cards/card' as *;
 @use './components/molecules/text-grid-item' as *;
 @use './components/molecules/text-media' as *;
+@use './components/molecules/share-this' as *;
 @use './components/organisms/ctas/basic-cta' as *;
 @use './components/organisms/heroes/hero-title-text' as *;
 @use './components/organisms/footer' as *;

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

@@ -14,6 +14,7 @@ $evoui-font-size: (
 	page-title-small: 3.5rem,
 	hero-title-large: 4.375rem,
 	hero-title-small: 3.75rem,
+	section-title: 3rem,
 	section-title-small: 2.5rem,
 );
 $brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
@@ -22,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);