@snyk-mktg/brand-ui 2.5.10-canary.1 → 2.5.10-canary.10

package/dist/js/types/icons.d.ts

@@ -1,4 +1,4 @@
-export type BranduiBrandIcons = 'actionable-results' | 'admin' | 'advisor-1' | 'advisor' | 'ai-generated-code' | 'ai-solutions' | 'ai-vulnerable-code' | 'ai' | 'alert-high' | 'alert-info' | 'alert-low' | 'alert-med' | 'api' | 'application-security' | 'assessments' | 'assignments' | 'attention' | 'automate' | 'care-deeply' | 'certificates' | 'ci-cd' | 'cli' | 'climate' | 'cloud-and-back' | 'cloud-launch' | 'cloud-security' | 'code-to-cloud' | 'code' | 'coding' | 'community' | 'compliance-automation' | 'customer-centricity' | 'design-applications' | 'dev-ai' | 'dev-friendly' | 'developer-security' | 'docs-published' | 'documentation' | 'donate' | 'efficiency' | 'enablement-and-education' | 'expert' | 'false-positive-rate' | 'family' | 'fast-and-accurate' | 'feedback' | 'fix-faster' | 'flexible' | 'forward-thinking' | 'get-started' | 'git-security' | 'ide' | 'integrations' | 'learn-always' | 'learn-snyk-1' | 'learn-snyk' | 'learning-paths' | 'live-environment' | 'live-video' | 'machine-learning' | 'meetup' | 'office-hours' | 'onboarding' | 'one-team' | 'ongoing' | 'platform' | 'pull-request' | 'query-cloud' | 'real-time-scan' | 'remediate-faster' | 'roadmap' | 'scaleable' | 'scanning' | 'secure-dependencies' | 'secure-projects' | 'security-automation' | 'security-awareness' | 'security-outnumbered' | 'security-team' | 'self-serve' | 'ship-it' | 'snyk-code-knowledgebase' | 'snyk-studio' | 'supply-chain-security' | 'support' | 'swag' | 'tech' | 'think-bigger' | 'tsd' | 'unified-policy-engine' | 'user-admin' | 'visibility-and-intelligence' | 'vuln-database' | 'write-policies' | 'zero-day';
+export type BranduiBrandIcons = 'actionable-results' | 'admin' | 'advisor-1' | 'advisor' | 'ai-generated-code' | 'ai-solutions' | 'ai-vulnerable-code' | 'ai' | 'alert-high' | 'alert-info' | 'alert-low' | 'alert-med' | 'api' | 'application-security' | 'assessments' | 'assignments' | 'attention' | 'automate' | 'care-deeply' | 'certificates' | 'ci-cd' | 'cli' | 'climate' | 'cloud-and-back' | 'cloud-launch' | 'cloud-security' | 'code-to-cloud' | 'code' | 'coding' | 'community' | 'compliance-automation' | 'customer-centricity' | 'design-applications' | 'dev-ai' | 'dev-friendly' | 'developer-security' | 'docs-published' | 'documentation' | 'donate' | 'efficiency' | 'enablement-and-education' | 'expert' | 'false-positive-rate' | 'family' | 'fast-and-accurate' | 'feedback' | 'fix-faster' | 'flexible' | 'forward-thinking' | 'get-started' | 'git-security' | 'ide' | 'integrations' | 'learn-always' | 'learn-snyk-1' | 'learn-snyk' | 'learning-paths' | 'live-environment' | 'live-video' | 'machine-learning' | 'meetup' | 'office-hours' | 'onboarding' | 'one-team' | 'ongoing' | 'platform' | 'pull-request' | 'query-cloud' | 'real-time-scan' | 'remediate-faster' | 'roadmap' | 'scaleable' | 'scanning' | 'secure-dependencies' | 'secure-projects' | 'security-automation' | 'security-awareness' | 'security-outnumbered' | 'security-team' | 'self-serve' | 'ship-it' | 'snyk-code-knowledgebase' | 'snyk-studio' | 'supply-chain-security' | 'support' | 'swag' | 'tech' | 'think-bigger' | 'tsd' | 'unified-policy-engine' | 'user-admin' | 'visibility-and-intelligence' | 'vuln-database' | 'video-word' | 'write-policies' | 'zero-day';
 export type BranduiGeneralIcons = 'account' | 'add' | 'ai-sparkles' | 'ambassadors' | 'apple-podcasts' | 'arrow-back' | 'arrow-down' | 'arrow-forward' | 'arrow-left' | 'arrow-right' | 'arrow-top-right' | 'arrow-up' | 'article' | 'api-web' | 'attachment' | 'ballot' | 'bio' | 'bitbucket' | 'blocks' | 'blog' | 'booklet' | 'brain' | 'briefcase' | 'bug' | 'build-code' | 'byline' | 'calendar-today' | 'case-study' | 'check' | 'check-circle' | 'check-shield' | 'checkbox-hover' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'close' | 'collapse' | 'compliance' | 'contact' | 'copy-link' | 'copy-to-clipboard' | 'customers' | 'developer' | 'discord' | 'discord-bubble' | 'east' | 'ebook' | 'eclipse' | 'events' | 'expand' | 'facebook' | 'facebook-circle' | 'filter' | 'fix' | 'git-fork' | 'git-issue' | 'github' | 'glassdoor' | 'glossary' | 'google' | 'government' | 'grading' | 'hand-wave' | 'handbook' | 'headphones' | 'info-scan' | 'info-warning' | 'infographic' | 'insert-chart' | 'insert-drive-file' | 'instagram' | 'keyboard-arrow-down' | 'labs' | 'language' | 'library' | 'light-bulb' | 'linkedin' | 'livestream' | 'location' | 'lock-heart' | 'mail-inbox' | 'mail-outline' | 'menu' | 'mic' | 'monetization' | 'moon' | 'more-horizontal' | 'newsroom' | 'npm' | 'open-in-new' | 'partners' | 'pie-chart' | 'play-circle' | 'play' | 'podcast' | 'press-release' | 'quote' | 'reddit' | 'remove' | 'risk' | 'risk-based-prioritization' | 'search' | 'send-mail' | 'services' | 'shield-ai' | 'shield-chevron-up' | 'shield-star' | 'shield' | 'snyk-apprisk' | 'snyk-code' | 'snyk-container' | 'snyk-docs' | 'snyk-iac' | 'snyk-learn' | 'snyk-oss' | 'snyk-support' | 'spotify' | 'star-outline' | 'sun' | 'supply-chain' | 'time' | 'twitch' | 'twitter' | 'updates' | 'videocam' | 'vuln-db' | 'vulnvortex' | 'workflows' | 'x' | 'youtube';
 export type AllIcons = BranduiBrandIcons | BranduiGeneralIcons;
 export type BranduiIconSizes = 'sm' | 'rg' | 'md' | 'lg';

package/dist/js/utilities/icons.js

@@ -93,6 +93,7 @@ export const brandIcons = [
     'user-admin',
     'visibility-and-intelligence',
     'vuln-database',
+    'video-word',
     'write-policies',
     'zero-day',
 ];

package/dist/scss/base/_baseline.scss

@@ -135,7 +135,7 @@ code:not([class]) {
 	word-break: break-word;
 	@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));
+	@include colors.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 }
 
 // Does not override any 3rd party code snippets

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

@@ -19,17 +19,36 @@
 
 		&-1 {
 			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
+			&.dot-wave-center-right {
+				top: 20rem;
+				right: -50rem;
+				scale: 1;
+				transform: rotateY(180deg);
+			}
+			&.dot-wave-center-middle {
+				top: 33rem;
+				right: -2rem;
+				scale: 1.25;
+				transform: rotateY(180deg);
+			}
 		}
 
+		// not used yet
 		&-2 {
 			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center no-repeat;
 		}
 
+		// Card Decoration
 		&-3 {
 			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center no-repeat;
+			&.dot-wave-bottom-right {
+				bottom: -10rem;
+				right: -40rem;
+				transform: rotate(180deg);
+			}
 		}
 
-		// Tracks positon
+		// Tracks positon - default
 		&-top-right {
 			top: 0;
 			right: -40rem;
@@ -37,21 +56,35 @@
 		&-bottom-right {
 			bottom: -10rem;
 			right: -40rem;
-			transform: rotate(180deg);
 		}
 		&-top-left {
-			top: -10rem;
+			top: -20rem;
 			left: -50rem;
+			transform: rotate(180deg);
+
+			@include break.max-mobile {
+				top: -30rem;
+			}
 
 			&-high {
-				top: -60rem;
-				left: -50rem;
+				top: -75rem;
+				left: -60rem;
+				transform: rotate(180deg);
+
+				@include break.max-tablet {
+					top: -60rem;
+					left: -13rem;
+				}
+
+				@include break.max-mobile {
+					top: -40rem;
+					left: -10rem;
+				}
 			}
 		}
 		&-bottom-left {
 			bottom: -5rem;
 			left: -40rem;
-			transform: rotate(180deg);
 		}
 
 		&-center-right {

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

@@ -113,7 +113,7 @@ $brandui-color-labels: (
 	'warning-contrast': map.get($brandui-colors, 'white'),
 	'warning-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'fail': map.get($brandui-colors, 'rose'),
-	'fail-dark': map.get($brandui-colors, 'salmon'),
+	'fail-dark': map.get($brandui-colors, 'rose'),
 	'fail-contrast': map.get($brandui-colors, 'white'),
 	'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'neutral-1': map.get($brandui-colors, 'black'),

package/dist/scss/base/variables/_icons.scss

@@ -112,6 +112,7 @@ $snyk-icons: (
 	'user-admin': '#{$brandui-images}brand-icons/user-admin.svg',
 	'visibility-and-intelligence': '#{$brandui-images}brand-icons/visibility-and-intelligence.svg',
 	'vuln-database': '#{$brandui-images}brand-icons/vuln-database.svg',
+	'video-word': '#{$brandui-images}brand-icons/video-word.svg',
 	'write-policies': '#{$brandui-images}brand-icons/write-policies.svg',
 	'zero-day': '#{$brandui-images}brand-icons/zero-day.svg',
 );

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

@@ -7,9 +7,9 @@
 
 /* Typography variables */
 $brandui-font-size: (
-	hero-title-large: 3.625rem,
-	hero-title-small: 2.125rem,
-	page-title-large: 2.375rem,
+	hero-title-large: 4rem,
+	hero-title-small: 2.5rem,
+	page-title-large: 3rem,
 	page-title: 2.375rem,
 	section-title: 2.375rem,
 	headline-large: 2.5rem,
@@ -29,9 +29,9 @@ $brandui-font-size: (
 ) !default;
 
 $brandui-line-height: (
-	hero-title-large: 4rem,
-	hero-title-small: 2.125rem,
-	page-title-large: 2.75rem,
+	hero-title-large: 4.5rem,
+	hero-title-small: 2.75rem,
+	page-title-large: 3.5rem,
 	page-title: 2.5rem,
 	section-title: 2.75rem,
 	headline-large: 3rem,
@@ -274,4 +274,12 @@ $text-elements-responsive: (
 		'letter-spacing': 0,
 		'text-transform': none,
 	),
+	'mini-header': (
+		'target': 'mini-header-small',
+		'weight': 700,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': sans-serif,
+		'letter-spacing': 0.12em,
+		'text-transform': uppercase,
+	),
 );

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

@@ -2,6 +2,7 @@
 @use '../../base/variables/effects' as *;
 @use '../../base/variables/typography' as *;
 @use '../../base/variables/sizing' as *;
+@use '../../base/mixins/breakpoints' as break;
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/functions' as *;
 
@@ -90,6 +91,10 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 
 		@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));
+
+		.general-icon {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
 	}
 
 	&.secondary {
@@ -197,6 +202,13 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	display: flex;
 	flex-wrap: wrap;
 	gap: map.get($brandui-padding, medium);
+
+	@include break.max-tablet {
+		flex-direction: column;
+		gap: map.get($brandui-padding, small);
+		justify-content: center;
+		align-items: center;
+	}
 }
 
 // This is the rotating conic-gradient glimmer effect

package/dist/scss/components/molecules/_alert.scss

@@ -5,15 +5,13 @@
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/mixins/breakpoints' as break;
 @use '../../base/functions' as *;
+@use '../molecules/cards/card.scss' as *;
+@use '../molecules/cards/card.scss' as *;
 
 .alert {
+	@extend .card;
 	padding: map.get($brandui-padding, medium);
 	position: relative;
-	border-width: 0.0625rem;
-	border-top-width: map.get($brandui-padding, extra-small);
-	border-style: solid;
-	border-radius: map.get($brandui-radius, large);
-	@include color.color-mode(background-color, map.get($brandui-base-colors, dark-purple), brandui-color-labels(neutral-2));
 	@include color.color-mode(border-color, brandui-color-labels(info), brandui-color-labels(info-dark));
 
 	&-body {
@@ -35,18 +33,34 @@
 	// Alternate state colors
 	&.alert {
 		&-success {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, dark-teal), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(success), brandui-color-labels(success-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(success), brandui-color-labels(success-dark));
+			}
 		}
 
 		&-warning {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, autumn), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
+			}
 		}
 
 		&-fail {
-			@include color.color-mode(background-color, map.get($brandui-base-colors, rose), brandui-color-labels(neutral-2));
 			@include color.color-mode(border-color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
+
+			.button.tertiary {
+				@include color.color-mode(color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
+			}
+		}
+
+		.button {
+			&:hover,
+			&:focus {
+				@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+			}
 		}
 	}
 }

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

@@ -13,23 +13,20 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
-		padding: 2px;
-		border-width: 0.0625rem;
-		border-radius: map.get($brandui-radius, 'pill');
-		border-style: solid;
-		@include color.color-mode(border-color, brandui-color-labels(neutral-3), brandui-color-labels(neutral-6));
+		border: 2px solid transparent;
+		border-radius: map.get($brandui-radius, 'small');
 	}
 
 	&-input {
-		border: none;
-		border-radius: map.get($brandui-radius, 'pill');
+		border: 2px solid transparent;
+		border-radius: map.get($brandui-radius, 'small');
 		outline: none;
 		padding: map.get($brandui-padding, extra-small) map.get($brandui-padding, medium);
 		width: 100%;
 		font-family: map.get($brandui-font-family, roboto), sans-serif;
 		min-width: 300px;
 		font-size: map.get($brandui-font-size, body);
-		@include color.color-mode(color, brandui-color-labels(neutral-3), brandui-color-labels(neutral-6));
+		@include color.color-mode(color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-1));
 
 		&::placeholder {
 			font-size: map.get($brandui-font-size, body);
@@ -41,9 +38,23 @@
 		}
 	}
 
-	&-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');
+		}
+
+		.general-icon {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
 	}
 }
 

package/dist/scss/components/organisms/_featured-media.scss

@@ -14,13 +14,22 @@
 			width: 100%;
 		}
 	}
+	&-item {
+		width: brandui-col-spacing(5);
+		@include break.max-mobile {
+			width: 100%;
+		}
+	}
 
 	&-content {
 		&-wrapper {
 			display: flex;
+			justify-content: space-around;
 			@include break.max-mobile {
 				flex-direction: column;
 				align-items: center;
+				justify-content: baseline;
+				gap: brandui-padding(large);
 			}
 		}
 	}

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

@@ -16,6 +16,10 @@
 	margin-left: auto;
 	margin-right: auto;
 
+	@include break.max-tablet {
+		margin: 0 map.get($brandui-padding, large);
+	}
+
 	&-content {
 		max-width: brandui-col-spacing(7);
 		width: 100%;
@@ -24,6 +28,10 @@
 		gap: map.get($brandui-padding, small);
 		justify-content: center;
 
+		.buttons {
+			justify-content: center;
+		}
+
 		@include break.max-tablet {
 			max-width: 100%;
 			text-align: center;

package/dist/scss/components/organisms/heroes/_hero-title-text.scss

@@ -8,7 +8,7 @@
 	padding-top: calc(map.get($brandui-padding, huge) + map.get($brandui-padding, huge));
 
 	&-content {
-		max-width: brandui-col-spacing(7);
+		max-width: brandui-col-spacing(9);
 		width: 100%;
 		margin: 0 auto;
 		display: flex;

package/dist/scss/labs/_base.scss

@@ -6,7 +6,6 @@
 @use '../../scss/base/mixins' as *;
 @use '../../scss/base/typography' as *;
 @use '../../scss/base/links' as *;
-@use '../../scss/base/layout' as *;
 @use '../../scss/base/spacing' as *;
 @use '../../scss/base/sizing' as *;
 @use '../../scss/base/decorations/backgrounds' as *;
@@ -20,3 +19,4 @@
 @use './base/color' as *;
 @use './base/typography' as *;
 @use './base/decorations/backgrounds';
+@use './layout' as *;

package/dist/scss/labs/_components.scss

@@ -6,7 +6,6 @@
 @use '../components/atoms/chip' as *;
 @use '../components/atoms/dropdown' as *;
 @use '../components/atoms/feature-checkmark' as *;
-@use '../components/atoms/icons' as *;
 @use '../components/atoms/input' as *;
 @use '../components/atoms/locale-selector' as *;
 @use '../components/atoms/logo-container' as *;
@@ -54,6 +53,7 @@
 @use './components/atoms/tag' as *;
 @use './components/atoms/button' as *;
 @use './components/atoms/hairline' as *;
+@use './components/atoms/icons' as *;
 @use './components/atoms/triggers/play' as *;
 @use './components/atoms/tooltip' as *;
 @use './components/molecules/announcements' as *;

package/dist/scss/labs/_layout.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../base/variables/sizing' as *;
+@use '../base/layout' as *;
+
+.brandui-section {
+	.section {
+		&-intro {
+			&.solo-title {
+				margin-bottom: map.get($brandui-padding, 'huge');
+			}
+		}
+	}
+}

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

@@ -6,7 +6,7 @@ $labsui-font-family: (
 );
 
 $brandui-font-size: (
-	hero-title-large: 5.625rem,
+	hero-title-large: 3.125rem,
 	hero-title-small: 3.125rem,
 	page-title-large: 4.375rem,
 	page-title: 3rem,
@@ -28,7 +28,7 @@ $brandui-font-size: (
 ) !default;
 
 $brandui-line-height: (
-	hero-title-large: 6.25rem,
+	hero-title-large: 3.125rem,
 	hero-title-small: 3.75rem,
 	page-title-large: 5rem,
 	page-title: 4rem,
@@ -50,7 +50,7 @@ $brandui-line-height: (
 ) !default;
 
 // Why does this work? Do I need the font 'as'?
-$brandui-font-family: map.merge(font.$brandui-font-family, $labsui-font-family);
+$brandui-font-family: $labsui-font-family;
 
 $labsui-text-elements: (
 	'hero-title-large': (
@@ -161,54 +161,62 @@ $labsui-text-elements: (
 
 $labsui-text-elements-responsive: (
 	'hero-title-large': (
+		'target': 'hero-title-small',
 		'weight': 700,
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'hero-title-small': (
+		'target': 'hero-title-small',
 		'weight': 700,
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'page-title-large': (
+		'target': 'page-title',
 		'weight': 700,
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'page-title': (
+		'target': 'page-title',
 		'weight': 700,
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'section-title': (
+		'target': 'headline-small',
 		'weight': 700,
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'headline-large': (
+		'target': 'headline-small',
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'headline-small': (
+		'target': 'subhead',
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 	'subhead': (
+		'target': 'subhead-small',
 		'family': map.get($brandui-font-family, space-mono),
 		'type': monospace,
 		'text-transform': none,
 	),
 );
 
-$text-elements: font.$text-elements;
-$text-elements-responsive: font.$text-elements-responsive;
+$text-elements: $labsui-text-elements;
+$text-elements-responsive: $labsui-text-elements-responsive;
 
 @each $key, $value in $labsui-text-elements {
 	@if map.has-key($text-elements, $key) {
@@ -226,5 +234,5 @@ $text-elements-responsive: font.$text-elements-responsive;
 	}
 }
 
-$brandui-font-size: font.$brandui-font-size;
-$brandui-line-height: font.$brandui-line-height;
+$brandui-font-size: $brandui-font-size;
+$brandui-line-height: $brandui-line-height;

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

@@ -28,12 +28,18 @@
 		&:focus {
 			@include color.color-mode(background-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 		}
+
+		.general-icon {
+			@include color.color-mode(color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-1));
+		}
 	}
 
 	&.secondary {
 		border-width: 0.0625rem;
 		border-style: solid;
-		transition: color map.get($brandui-transition, fast), background-color map.get($brandui-transition, fast),
+		transition:
+			color map.get($brandui-transition, fast),
+			background-color map.get($brandui-transition, fast),
 			border-color map.get($brandui-transition, fast);
 		@include color.color-mode(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));

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

@@ -0,0 +1,3 @@
+@use '../../../components/atoms/icons' as *;
+@use '../../../base/mixins/color-mode' as color;
+@use '../../../base/functions' as *;

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

@@ -24,4 +24,10 @@
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
 		}
 	}
+
+	.general-icon {
+		&:hover {
+			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		}
+	}
 }

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

@@ -9,7 +9,9 @@
 .basic-cta {
 	max-width: unset;
 	gap: map.get($brandui-padding, extra-large);
+	border-radius: map.get($brandui-radius, large);
 	box-shadow: map.get($brandui-shadow, outline);
+	flex-direction: column;
 	@include theme.theme-color(background-color, spotlight);
 	@include theme.theme-color(border-color, spotlight);
 }

package/package.json

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