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

package/dist/scss/base/_baseline.scss

@@ -27,11 +27,11 @@ body {
 body {
 	font-size: 1rem;
 	font-family: map.get($brandui-font-family, roboto), sans-serif;
-	color: brandui-color-labels(ui-body);
+	color: brandui-color-labels(ui-text);
 
 	&.dark-mode,
 	& .dark-mode {
-		color: brandui-color-labels(ui-body-dark);
+		color: brandui-color-labels(ui-text-dark);
 	}
 	-webkit-font-smoothing: antialiased;
 }
@@ -118,6 +118,11 @@ b {
 	font-weight: 700;
 }
 
+strong:not(a strong),
+b:not(a b) {
+	@include colors.color-mode(color, brandui-color-labels(ui-body), brandui-color-labels(ui-body-dark));
+}
+
 code:not([class]) {
 	border-width: 0.0625rem;
 	border-style: solid;
@@ -128,8 +133,8 @@ code:not([class]) {
 	padding: 0 0.1875rem;
 	position: relative;
 	word-break: break-word;
-	@include colors.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
-	@include colors.color-mode(border-color, RGBA(brandi-rgb-labels(neutral-4), 0.1), RGBA(brandui-rgb-labels(neutral-2), 0.9));
+	@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));
 }
 

package/dist/scss/base/_color.scss

@@ -10,7 +10,7 @@ $color-elements: (
 	'background-color': 'bg',
 	'border-color': 'border',
 );
-$action-colors: ('action', 'action-secondary');
+$action-colors: ('action', 'action-secondary', 'action-tertiary');
 $state-colors: ('success', 'info', 'alert', 'warning', 'fail');
 $label-colors: (
 	'default',
@@ -45,18 +45,7 @@ $label-colors: (
 
 .txt-ui-hero {
 	max-width: max-content;
-	@include colors.gradient-mode(
-		background-image,
-		'linear',
-		140deg,
-		RGBA(brandui-rgb-labels(ui-headline), 1),
-		RGBA(brandui-rgb-labels(ui-headline), 0.5),
-		RGBA(brandui-rgb-labels(ui-headline-dark), 1),
-		RGBA(brandui-rgb-labels(ui-headline-dark), 0.7)
-	) {
-		background-clip: text;
-		color: transparent;
-	}
+	@include colors.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
 }
 
 .txt-theme-solid {
@@ -132,10 +121,6 @@ $label-colors: (
 	@include theme.theme-gradient(background, linear, 140deg, gradient-secondary);
 }
 
-.spotlight {
-	@include theme.theme-color(background-color, spotlight);
-}
-
 .bg-gradient-midnight-overlay {
 	height: 130%;
 	background: linear-gradient(

package/dist/scss/base/_layout.scss

@@ -4,8 +4,11 @@
 @use '../base/variables/sizing' as *;
 @use '../base/variables/effects' as *;
 @use '../base/mixins/breakpoints' as breaks;
+@use '../base/mixins/color-mode' as color;
 @use '../base/mixins/glass' as glass;
+@use '../base/mixins/gradient-border' as gradient;
 @use '../base/functions' as *;
+@use './decorations/backgrounds' as *;
 
 $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large, extra-large, huge);
 
@@ -67,6 +70,10 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 			align-items: center;
 			text-align: center;
 
+			&.solo-title {
+				margin-bottom: 0;
+			}
+
 			&-left-aligned {
 				@extend .section-intro;
 				align-items: start;
@@ -93,16 +100,34 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 	margin-right: auto;
 }
 
-.brandui-container,
-.content-block {
-	&.bg-boxed {
-		padding: map.get($brandui-padding, extra-large);
-		border-width: 0.1875rem;
-		border-style: solid;
-		border-radius: map.get($brandui-radius, large);
-		box-shadow: map.get($brandui-shadow, outline);
-		@include glass.bg-glass;
-		@include glass.border-glass;
+.bg-boxed {
+	padding: map.get($brandui-padding, extra-large);
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border-width: 0.1875rem;
+	border-style: solid;
+	border-width: map.get($brandui-padding, 'hairline');
+	border-radius: map.get($brandui-radius, 'small');
+	transition: map.get($brandui-transition, 'fast');
+	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 glass.border-glass(ui-stroke);
+
+	&-decorated {
+		border: 0;
+		border-radius: map.get($brandui-radius, 'small');
+		@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;
+	}
+	&-decorations {
+		position: absolute;
+		z-index: 1;
+		inset: 2px;
+		overflow: hidden;
 	}
 }
 

package/dist/scss/base/_links.scss

@@ -38,7 +38,7 @@
 	}
 
 	&: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));
 	}
 }
 
@@ -59,6 +59,8 @@
 
 	&:hover,
 	&:focus {
+		@include color.color-mode('color', brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
+		@include color.color-mode-pseudo('&::after', 'color', brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 		&::after {
 			transform: translateX(-0.25rem);
 		}

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

@@ -4,81 +4,49 @@
 .decoration-bg {
 	pointer-events: none;
 
-	&.circuit-tracks {
+	&.dot-wave {
 		position: absolute;
-		width: brandui-col-spacing(16);
-		background: transparent url('#{$brandui-images}decorations/decoration-bg-circuit-track.svg') center no-repeat;
+		inset: 0;
 		background-size: contain;
 		mix-blend-mode: screen;
 		z-index: -1;
 		padding-bottom: 28rem;
 
+		&-1 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
+		}
+
+		&-2 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center no-repeat;
+		}
+
+		&-3 {
+			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center no-repeat;
+		}
+
 		// Tracks positon
 		&-top-right {
 			top: 0;
 			right: -40rem;
 		}
 		&-bottom-right {
-			bottom: -5rem;
+			bottom: -10rem;
 			right: -40rem;
+			transform: rotate(180deg);
 		}
 		&-top-left {
-			top: 0;
-			left: -40rem;
-			transform: rotate(180deg);
+			top: -60rem;
+			left: -50rem;
 		}
 		&-bottom-left {
 			bottom: -5rem;
 			left: -40rem;
 			transform: rotate(180deg);
 		}
-	}
-
-	&.code-lines {
-		position: absolute;
-		width: brandui-col-spacing(6);
-		padding-bottom: 24rem;
-		background-size: contain;
-		z-index: -2;
-
-		// Lines positon
-		&-top-right {
-			top: 0;
-			right: -8rem;
-			transform: rotate(180deg);
-		}
-		&-bottom-right {
-			bottom: 0;
-			right: -8rem;
-			transform: rotate(180deg);
-		}
-		&-top-left {
-			top: 0;
-			left: -8rem;
-		}
-		&-bottom-left {
-			bottom: 0;
-			left: -8rem;
-		}
 
-		// Lines colors
-		&-primary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-primary.svg') center no-repeat;
-		}
-		&-secondary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-secondary.svg') center no-repeat;
+		&-center-right {
+			top: 30rem;
+			right: -26rem;
 		}
-		&-tertiary {
-			background: transparent url('#{$brandui-images}decorations/decoration-bg-code-lines-tertiary.svg') center no-repeat;
-		}
-	}
-
-	&.hex-pattern {
-		position: absolute;
-		inset: 0;
-		background: transparent url('#{$brandui-images}decorations/decoration-bg-hex-pattern.svg') center no-repeat;
-		background-size: contain;
-		transform: scale(1.5);
-		z-index: -2;
 	}
 }

package/dist/scss/base/decorations/_markers.scss

@@ -3,6 +3,8 @@
 @use '../../base/mixins/color-mode' as colors;
 @use '../../base/functions' as *;
 
+// TODO, remove once we have confirmed that new brand is real
+
 /**
 * Note >> The markers are all PNGs that use the Cloudinary transformations
 * to add the proper color-mode color and then convert to SVG. This is the
@@ -10,30 +12,30 @@
 * See the Transformation Center in Cloudinary for the custom marker
 * transformations.
 */
-@each $marker-key, $marker-url in $brandui-marker-highlight-styles {
-	.marker-highlight-#{$marker-key} {
-		color: inherit;
-		background-color: transparent;
-		position: relative;
-		display: inline;
-		// Adds a little space around the text relative to the font size
-		padding: 0.1em 0.3em;
-		background-position: 100%;
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
-		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
-	}
-}
+// @each $marker-key, $marker-url in $brandui-marker-highlight-styles {
+// 	.marker-highlight-#{$marker-key} {
+// 		color: inherit;
+// 		background-color: transparent;
+// 		position: relative;
+// 		display: inline;
+// 		// Adds a little space around the text relative to the font size
+// 		padding: 0.1em 0.3em;
+// 		background-position: 100%;
+// 		background-size: 100% 100%;
+// 		background-repeat: no-repeat;
+// 		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
+// 	}
+// }
 
-@each $marker-key, $marker-url in $brandui-marker-line-styles {
-	.marker-line-#{$marker-key} {
-		max-width: brandui-col-spacing(2);
-		width: 100%;
-		height: 3rem;
-		position: relative;
-		display: block;
-		background-size: 100%;
-		background-repeat: no-repeat;
-		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
-	}
-}
+// @each $marker-key, $marker-url in $brandui-marker-line-styles {
+// 	.marker-line-#{$marker-key} {
+// 		max-width: brandui-col-spacing(2);
+// 		width: 100%;
+// 		height: 3rem;
+// 		position: relative;
+// 		display: block;
+// 		background-size: 100%;
+// 		background-repeat: no-repeat;
+// 		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
+// 	}
+// }

package/dist/scss/base/mixins/_accessibility.scss

@@ -3,3 +3,9 @@
 		@content;
 	}
 }
+
+@mixin prefers-dark {
+	@media (prefers-color-scheme: dark) {
+		@content;
+	}
+}

package/dist/scss/base/mixins/_color-mode.scss

@@ -1,3 +1,5 @@
+@use './../functions' as *;
+@use './accessibility' as a11y;
 /* Mixins for light/dark modes */
 @mixin color-mode($property, $light-value, $dark-value) {
 	// Default light mode
@@ -11,6 +13,12 @@
 		#{$property}: $dark-value;
 		@content;
 	}
+
+	// Uncomment this when we are ready to offer dark mode toggle support
+	// @include a11y.prefers-dark {
+	// 	#{$property}: $dark-value;
+	// 	@content;
+	// }
 }
 
 // Because mixins can sometime be invalid when chaining to pseudo-classes, we need to manually do this
@@ -79,3 +87,7 @@
 		@content;
 	}
 }
+
+@mixin transparent-border($property: border-color, $light-value: 'ui-body', $dark-value: 'ui-body-dark', $opacity: 0.3) {
+	@include color-mode($property, RGBA(brandui-rgb-labels($light-value), 0.3), RGBA(brandui-rgb-labels($dark-value), $opacity));
+}

package/dist/scss/base/mixins/_glass.scss

@@ -1,36 +1,60 @@
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/functions' as *;
 
-@mixin bg-glass($dense: false) {
+@mixin bg-glass($dense: false, $color-label: default) {
 	@if $dense {
-		backdrop-filter: blur(1.5rem);
-		-webkit-backdrop-filter: blur(1.5rem);
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.8), RGBA(brandui-rgb-labels(default-dark), 0.8));
+		& {
+			backdrop-filter: blur(1.5rem);
+			-webkit-backdrop-filter: blur(1.5rem);
+		}
+		@include color.color-mode(
+			background-color,
+			RGBA(brandui-rgb-labels(#{$color-label}), 0.8),
+			RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.8)
+		);
 	} @else {
-		backdrop-filter: blur(1rem);
-		-webkit-backdrop-filter: blur(1rem);
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.5), RGBA(brandui-rgb-labels(default-dark), 0.5));
+		& {
+			backdrop-filter: blur(1rem);
+			-webkit-backdrop-filter: blur(1rem);
+		}
+		@include color.color-mode(
+			background-color,
+			RGBA(brandui-rgb-labels(#{$color-label}), 0.5),
+			RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.5)
+		);
 	}
 
 	&.group {
 		&:hover,
 		&:focus {
 			@if $dense {
-				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.5), RGBA(brandui-rgb-labels(default-dark), 0.5));
+				@include color.color-mode(
+					background-color,
+					RGBA(brandui-rgb-labels(#{$color-label}), 0.5),
+					RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.5)
+				);
 			} @else {
-				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(default), 0.3), RGBA(brandui-rgb-labels(default-dark), 0.3));
+				@include color.color-mode(
+					background-color,
+					RGBA(brandui-rgb-labels(#{$color-label}), 0.3),
+					RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3)
+				);
 			}
 		}
 	}
 }
 
-@mixin border-glass {
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(default), 0.7), RGBA(brandui-rgb-labels(default-dark), 0.7));
+@mixin border-glass($color-label: default) {
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(#{$color-label}), 0.3), RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3));
 
 	&.group {
 		&:hover,
 		&:focus {
-			@include color.color-mode(border-color, RGBA(brandui-rgb-labels(default), 0.3), RGBA(brandui-rgb-labels(default-dark), 0.3));
+			@include color.color-mode(
+				border-color,
+				RGBA(brandui-rgb-labels(#{$color-label}), 0.3),
+				RGBA(brandui-rgb-labels(#{$color-label}-dark), 0.3)
+			);
 		}
 	}
 }

package/dist/scss/base/mixins/_gradient-border.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@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/color-mode' as color;
+@use '../../base/functions' as *;
+
+@mixin gradient-border {
+	:first-child {
+		z-index: 2;
+	}
+	@include color.gradient-mode-pseudo(
+		'&:before',
+		'background',
+		'linear',
+		'90deg',
+		brandui-color-labels(neutral-2),
+		brandui-color-labels(neutral-3),
+		brandui-color-labels(neutral-3),
+		brandui-color-labels(neutral-2)
+	) {
+		content: '';
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		right: 1px;
+		bottom: 1px;
+		z-index: 0;
+		border-radius: map.get($brandui-radius, 'small');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
+	}
+
+	&:after {
+		content: '';
+		z-index: 0;
+		position: absolute;
+		inset: 2px;
+		border-radius: map.get($brandui-radius, 'small');
+
+		@include break.max-mobile {
+			margin: 0;
+		}
+	}
+	@include color.color-mode-pseudo('&:after', background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+}

package/dist/scss/base/mixins/index.scss

@@ -4,3 +4,4 @@
 @use '../../base/mixins/glass' as *;
 @use '../../base/mixins/breakpoints' as *;
 @use '../../base/mixins/typography' as *;
+@use '../../base/mixins/gradient-border' as *;

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

@@ -31,16 +31,18 @@ $evoui-colors: (
 /* Color variables */
 $brandui-colors: (
 	'dark-purple': #441c99,
-	'purple': #9043c6,
+	'purple': #8d1ff4,
 	'lavender': #c481f3,
+	'lavender-light': #d6a7f7,
 	'black': #000,
 	'space': #01011e,
 	'midnight': #030328,
 	'ocean': #181846,
+	'dark-grey': #181818,
 	'dawn': #383f76,
-	'steel': #555463,
+	'steel': #c0c0c0,
 	'smoke': #6d6d9c,
-	'snow': #f6f7fb,
+	'snow': #e9e9e9,
 	'white': #fff,
 	'rose': #c82d53,
 	'salmon': #f97a99,
@@ -73,49 +75,53 @@ $brandui-colors: map.merge($brandui-colors, $custom-theme);
 
 // 2.0 Standardized color labels for theming
 $brandui-color-labels: (
-	'default': map.get($brandui-colors, 'white'),
-	'default-dark': map.get($brandui-colors, 'midnight'),
-	'ui-headline': map.get($brandui-colors, 'midnight'),
-	'ui-headline-dark': map.get($brandui-colors, 'white'),
-	'ui-body': map.get($brandui-colors, 'dawn'),
-	'ui-body-dark': map.get($brandui-colors, 'snow'),
-	'ui-fill': map.get($brandui-colors, 'white'),
-	'ui-fill-dark': map.get($brandui-colors, 'midnight'),
-	'ui-stroke': map.get($brandui-colors, 'smoke'),
-	'ui-stroke-dark': map.get($brandui-colors, 'dawn'),
-	'ui-text': map.get($brandui-colors, 'dawn'),
+	'default': map.get($brandui-colors, 'snow'),
+	'default-dark': map.get($brandui-colors, 'black'),
+	'ui-headline': map.get($brandui-colors, 'black'),
+	'ui-headline-dark': map.get($brandui-colors, 'snow'),
+	'ui-body': map.get($brandui-colors, 'black'),
+	'ui-body-dark': map.get($brandui-colors, 'steel'),
+	'ui-fill': map.get($brandui-colors, 'steel'),
+	'ui-fill-dark': map.get($brandui-colors, 'dark-grey'),
+	'ui-stroke': map.get($brandui-colors, 'dark-grey'),
+	'ui-stroke-dark': map.get($brandui-colors, 'steel'),
+	'ui-text': map.get($brandui-colors, 'black'),
 	'ui-text-dark': map.get($brandui-colors, 'snow'),
-	'action': map.get($brandui-colors, 'electric-blue'),
-	'action-dark': map.get($brandui-colors, 'periwinkle'),
-	'action-outline': map.get($brandui-colors, 'sky'),
-	'action-contrast': map.get($brandui-colors, 'white'),
-	'action-contrast-dark': map.get($brandui-colors, 'midnight'),
-	'action-secondary': map.get($brandui-colors, 'deep-sea'),
-	'action-secondary-dark': map.get($brandui-colors, 'electric-blue-dark'),
-	'action-secondary-contrast': map.get($brandui-colors, 'white'),
-	'action-secondary-contrast-dark': map.get($brandui-colors, 'midnight'),
+	'action': map.get($brandui-colors, 'black'),
+	'action-dark': map.get($brandui-colors, 'snow'),
+	'action-outline': map.get($brandui-colors, 'snow'),
+	'action-contrast': map.get($brandui-colors, 'snow'),
+	'action-contrast-dark': map.get($brandui-colors, 'black'),
+	'action-secondary': map.get($brandui-colors, 'snow'),
+	'action-secondary-dark': map.get($brandui-colors, 'black'),
+	'action-secondary-contrast': map.get($brandui-colors, 'black'),
+	'action-secondary-contrast-dark': map.get($brandui-colors, 'snow'),
+	'action-tertiary': map.get($brandui-colors, 'dark-purple'),
+	'action-tertiary-dark': map.get($brandui-colors, 'lavender'),
+	'action-tertiary-contrast': map.get($brandui-colors, 'black'),
+	'action-tertiary-contrast-dark': map.get($brandui-colors, 'black'),
 	'info': map.get($brandui-colors, 'dark-purple'),
 	'info-dark': map.get($brandui-colors, 'lavender'),
-	'info-contrast': map.get($brandui-colors, 'white'),
+	'info-contrast': map.get($brandui-colors, 'snow'),
 	'info-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'success': map.get($brandui-colors, 'dark-teal'),
 	'success-dark': map.get($brandui-colors, 'vibe'),
-	'success-contrast': map.get($brandui-colors, 'white'),
+	'success-contrast': map.get($brandui-colors, 'snow'),
 	'success-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'warning': map.get($brandui-colors, 'autumn'),
 	'warning-dark': map.get($brandui-colors, 'tiger'),
-	'warning-contrast': map.get($brandui-colors, 'white'),
+	'warning-contrast': map.get($brandui-colors, 'snow'),
 	'warning-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'fail': map.get($brandui-colors, 'rose'),
 	'fail-dark': map.get($brandui-colors, 'salmon'),
-	'fail-contrast': map.get($brandui-colors, 'white'),
+	'fail-contrast': map.get($brandui-colors, 'snow'),
 	'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
-	'neutral-1': map.get($brandui-colors, 'midnight'),
-	'neutral-2': map.get($brandui-colors, 'ocean'),
-	'neutral-3': map.get($brandui-colors, 'dawn'),
-	'neutral-4': map.get($brandui-colors, 'smoke'),
-	'neutral-5': map.get($brandui-colors, 'snow'),
-	'neutral-6': map.get($brandui-colors, 'white'),
+	'neutral-1': map.get($brandui-colors, 'black'),
+	'neutral-2': map.get($brandui-colors, 'dark-purple'),
+	'neutral-3': map.get($brandui-colors, 'bubblegum'),
+	'neutral-4': map.get($brandui-colors, 'lavender-light'),
+	'neutral-5': map.get($brandui-colors, 'steel'),
+	'neutral-6': map.get($brandui-colors, 'snow'),
 ) !default;
 
 $brandui-tag-colors: (

package/dist/scss/base/variables/_effects.scss

@@ -1,10 +1,10 @@
 /* Effects */
 $brandui-shadow: (
-	far: 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3),
-	mid: 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25),
-	near: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15),
-	faint: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05),
-	outline: 0 1px 3px 1px RGBA(109, 109, 156, 0.3),
+	far: 0 0 3.75rem RGBA(68, 28, 153, 0.4),
+	mid: 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25),
+	near: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15),
+	faint: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05),
+	outline: 0 1px 3px 1px RGBA(68, 28, 153, 0.3),
 ) !default;
 
 $brandui-radius: (