@snyk-mktg/brand-ui 2.3.10 → 2.3.12

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

@@ -56,6 +56,11 @@
 			inset: 0;
 		}
 
+		&-center-left {
+			top: 50%;
+			left: 0;
+		}
+
 		// Glow colors
 		&-theme-solid {
 			&-primary {

package/dist/scss/base/variables/_themes.scss

@@ -66,7 +66,7 @@ $brandui-default-themes: (
 			),
 			gradient-tertiary: (
 				start: map.get($brandui-colors, 'purple'),
-				end: map.get($brandui-colors, 'bubble-gum'),
+				end: map.get($brandui-colors, 'bubblegum'),
 			),
 		),
 	),
@@ -92,8 +92,8 @@ $brandui-default-themes: (
 					end: map.get($evoui-colors, 'white'),
 				),
 				gradient-primary: (
-					start: map.get($evoui-colors, 'orange'),
-					end: map.get($evoui-colors, 'pink'),
+					start: map.get($evoui-colors, 'purple'),
+					end: map.get($evoui-colors, 'light-blue'),
 				),
 				gradient-secondary: (
 					start: map.get($evoui-colors, 'blue'),
@@ -110,7 +110,7 @@ $brandui-default-themes: (
 				solid: map.get($evoui-colors, 'white'),
 				solid-primary: map.get($evoui-colors, 'orange'),
 				solid-secondary: map.get($evoui-colors, 'pink'),
-				solid-tertiary: map.get($evoui-colors, 'blue'),
+				solid-tertiary: map.get($evoui-colors, 'light-blue'),
 				contrast: map.get($evoui-colors, 'black'),
 				base: map.get($evoui-colors, 'black'),
 				spotlight: map.get($evoui-colors, 'grey'),
@@ -121,16 +121,16 @@ $brandui-default-themes: (
 					end: map.get($evoui-colors, 'white'),
 				),
 				gradient-primary: (
-					start: map.get($evoui-colors, 'orange'),
+					start: map.get($evoui-colors, 'light-blue'),
 					end: map.get($evoui-colors, 'pink'),
 				),
 				gradient-secondary: (
-					start: map.get($evoui-colors, 'blue'),
-					end: map.get($evoui-colors, 'light-blue'),
+					start: map.get($evoui-colors, 'orange'),
+					end: map.get($evoui-colors, 'pink'),
 				),
 				gradient-tertiary: (
-					start: map.get($evoui-colors, 'purple'),
-					end: map.get($evoui-colors, 'pink'),
+					start: map.get($evoui-colors, 'red'),
+					end: map.get($evoui-colors, 'orange'),
 				),
 			),
 		),

package/dist/scss/evo/_base.scss

@@ -6,7 +6,6 @@
 @use '../../scss/base/spacing' as *;
 @use '../../scss/base/sizing' as *;
 @use '../../scss/base/decorations/decorations' 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 *;
@@ -25,6 +24,7 @@
 
 // @use './base/variables/colors' as *;
 @use './base/baseline' as *;
+@use './base/decorations/glows' as *;
 @use './base/layout' as *;
 @use './base/typography' as *;
 @use './base/decorations/backgrounds' as *;

package/dist/scss/evo/base/_layout.scss

@@ -8,6 +8,10 @@
 .brandui-container {
 	z-index: 1;
 	position: relative;
+
+	&:has(.decoration-bg) {
+		z-index: 0;
+	}
 }
 
 .brandui-section {

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

@@ -0,0 +1,60 @@
+@use '../../../base/decorations/glows' as *;
+@use '../../../base/mixins/page-theme' as theme;
+@use '../../../base/mixins/breakpoints' as break;
+@use '../../../base/functions' as *;
+
+.decoration-glow {
+	&:before {
+		mix-blend-mode: normal; // This blends with color of .decoration-glow background color
+	}
+	&.glow {
+		&-theme-solid {
+			&-primary {
+				@include theme.theme-color-pseudo('&:before', background-color, solid-primary);
+			}
+			&-secondary {
+				@include theme.theme-color-pseudo('&:before', background-color, solid-secondary);
+			}
+			&-tertiary {
+				@include theme.theme-color-pseudo('&:before', background-color, solid-tertiary);
+			}
+		}
+
+		&-theme-blend {
+			&-primary {
+				@include theme.theme-gradient-pseudo('&:before', background, linear, to right, gradient-primary, 0.5, 0.7);
+
+				&-flipped {
+					@include theme.theme-gradient-pseudo('&:before', background, linear, to left, gradient-primary, 0.5, 0.7);
+				}
+			}
+			&-secondary {
+				@include theme.theme-gradient-pseudo('&:before', background, linear, to right, gradient-secondary, 0.6, 0.6);
+			}
+			&-tertiary {
+				@include theme.theme-gradient-pseudo('&:before', background, linear, to bottom, gradient-tertiary, 0.5, 0.5);
+			}
+		}
+	}
+}
+
+.cursor-glow {
+	@include break.min-mobile {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 500px;
+		height: 500px;
+		border-radius: 50%;
+		/* Center the glow on the cursor's actual position */
+		transform: translate(-50%, -50%);
+
+		/* This ensures the glow doesn't block clicks or text selection on elements underneath it */
+		pointer-events: none;
+
+		z-index: 9999;
+		transition: transform 0.2s ease-out; /* Optional: smooths movement slightly */
+
+		background: radial-gradient(circle, RGBA(brandui-rgb-labels(action-secondary), 0.1) 0%, RGBA(brandui-rgb-labels(action-secondary), 0) 80%);
+	}
+}

package/package.json

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