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

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

@@ -24,23 +24,11 @@ $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-size: map.get($brandui-font-size, body);
@@ -95,114 +83,21 @@ $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;
+		border-color: white;
 		@include color.color-mode(color, brandui-color-labels(action-contrast), brandui-color-labels(action-contrast-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(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));
 	}
 
 	&.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));
-
-		// 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;
-			}
-		}
+		@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 	}
 
 	&.destroy {
@@ -232,7 +127,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 +142,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

@@ -10,7 +10,6 @@
 	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,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));
 				}
 			}
 		}

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/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,7 +10,7 @@
 
 .announcement {
 	&-bar {
-		border: 4px solid;
+		border: 1px 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 glass.bg-glass;
-		@include glass.border-glass;
+		@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));
 
 		.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, 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);
@@ -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(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/_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/_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.scss

@@ -1,19 +1,18 @@
 @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;
-	border-width: 0.1875rem;
-	border-style: solid;
-	border-radius: map.get($brandui-radius, 'large');
-	box-shadow: map.get($brandui-shadow, 'outline');
+	border-radius: map.get($brandui-radius, 'extra-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));
 
 	&-wrapper {
 		position: relative;
@@ -21,7 +20,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/_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/_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/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);