@snyk-mktg/brand-ui 2.3.19 → 2.4.0

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

@@ -1,5 +1,5 @@
 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' | '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 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' | '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' | '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 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' | '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';
 export type BranduiGeneralIconSizes = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';

package/dist/js/utilities/icons.js

@@ -155,6 +155,7 @@ export const generalIcons = [
     'git-issue',
     'github',
     'glassdoor',
+    'glossary',
     'google',
     'government',
     'grading',

package/dist/scss/base/_fonts.scss

@@ -5,10 +5,10 @@
 // ********************
 @font-face {
 	font-family: 'brandui-icons';
-	src: url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.eot');
-	src: url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.eot#iefix') format('embedded-opentype'),
-		url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.ttf') format('truetype'),
-		url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.woff') format('woff');
+	src: url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot');
+	src: url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot#iefix') format('embedded-opentype'),
+		url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.ttf') format('truetype'),
+		url('https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.woff') format('woff');
 	font-weight: normal;
 	font-style: normal;
 	font-display: block;

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

@@ -176,6 +176,7 @@ $brandui-general-icons: (
 	'git-issue': '\e976',
 	'github': '\e91f',
 	'glassdoor': '\e920',
+	'glossary': '\e97e',
 	'google': '\e921',
 	'government': '\e950',
 	'grading': '\e940',

package/dist/scss/evo/base/decorations/_glows.scss

@@ -1,4 +1,8 @@
+@use 'sass:map';
 @use '../../../base/decorations/glows' as *;
+@use '../../../base/variables/effects' as *;
+@use '../../../base/variables/sizing' as *;
+@use '../../../base/variables/colors' as *;
 @use '../../../base/mixins/page-theme' as theme;
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/accessibility' as a11y;
@@ -39,26 +43,49 @@
 	}
 }
 
-.cursor-glow {
+.cursor-glow-wrapper {
+	&:hover {
+		@include break.min-mobile {
+			.glow-container {
+				.glow-item {
+					opacity: 1;
+				}
+			}
+		}
+	}
 	@include break.min-mobile {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 400px;
-		height: 400px;
-		border-radius: 50%;
-		/* Center the glow on the cursor's actual position */
-		transform: translate(-50%, -50%);
+		.glow-container {
+			position: relative;
+			overflow: hidden;
+			height: max-content;
 
-		/* This ensures the glow doesn't block clicks or text selection on elements underneath it */
-		pointer-events: none;
+			.glow-item {
+				@include a11y.reduced-motion {
+					display: none;
+				}
+				position: absolute;
+				border-radius: map.get($brandui-radius, 'large');
+
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 0;
 
-		z-index: 9999;
-		transition: transform 0.2s ease-out; /* Optional: smooths movement slightly */
+				background: radial-gradient(
+					circle at 50% 50%,
+					map.get($evoui-colors, 'blue'),
+					map.get($evoui-colors, 'blue'),
+					map.get($evoui-colors, 'pink'),
+					map.get($evoui-colors, 'red')
+				);
 
-		background: radial-gradient(circle, RGBA(brandui-rgb-labels(action-secondary), 0.1) 0%, RGBA(brandui-rgb-labels(action-secondary), 0) 50%);
-		@include a11y.reduced-motion {
-			display: none;
+				mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
+				-webkit-mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
+
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
 		}
 	}
 }

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

@@ -9,6 +9,8 @@ $evoui-font-family: (
 $brandui-font-family: map.merge(font.$brandui-font-family, $evoui-font-family);
 
 $evoui-font-size: (
+	page-title-large: 4.375rem,
+	page-title: 4.375rem,
 	hero-title-large: 4.375rem,
 	hero-title-small: 3.75rem,
 	section-title-small: 2.5rem,
@@ -16,6 +18,8 @@ $evoui-font-size: (
 $brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
 
 $evoui-line-height: (
+	page-title-large: 5rem,
+	page-title: 5rem,
 	section-title-small: 3rem,
 );
 $brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);
@@ -192,7 +196,7 @@ $evoui-text-elements-responsive: (
 		'text-transform': none,
 	),
 	'page-title-large': (
-		'target': 'hero-title-small',
+		'target': 'page-title',
 		'weight': 900,
 		// 'family': map.get($brandui-font-family, poppins),
 		'family': map.get($brandui-font-family, geist),
@@ -202,7 +206,7 @@ $evoui-text-elements-responsive: (
 		'text-transform': none,
 	),
 	'page-title': (
-		'target': 'hero-title-small',
+		'target': 'page-title',
 		'weight': 900,
 		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,
@@ -265,7 +269,5 @@ $text-elements-responsive: font.$text-elements-responsive;
 	}
 }
 
-@debug $text-elements-responsive;
-
 $brandui-font-size: $brandui-font-size;
 $brandui-line-height: $brandui-line-height;

package/dist/scss/evo/components/misc/_embed.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../base/functions' as *;
+@use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/color-mode' as color;
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/variables/effects' as *;
@@ -28,6 +29,10 @@
 		margin: 0 map.get($brandui-padding, 'huge');
 		z-index: 0;
 		border-radius: map.get($brandui-radius, 'large');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
 	}
 
 	&:after {
@@ -42,5 +47,9 @@
 		margin: 0 map.get($brandui-padding, 'huge');
 		background-color: brandui-color-labels(neutral-1);
 		border-radius: map.get($brandui-radius, 'large');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
 	}
 }

package/dist/scss/evo/components/molecules/cards/_card.scss

@@ -5,6 +5,7 @@
 @use '../../../base/mixins/glass' as glass;
 
 .card {
+	position: relative;
 	border-width: map.get($brandui-padding, 'hairline');
 	// box-shadow: map.get($brandui-shadow, 'outline');
 	//TODO: Extend Drop shadow theme later

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

@@ -27,7 +27,8 @@
 		// these colors are "backwards" on purpose
 		@include color.color-mode(color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));
 
-		&:hover {
+		&:hover,
+		&:focus {
 			//unofficial underline styles
 			text-decoration: underline;
 			@include color.color-mode(color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));

package/package.json

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