@snyk-mktg/brand-ui 2.5.10-canary.0 → 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

@@ -72,7 +72,7 @@ a:not([class]) {
 	&:hover,
 	&:focus,
 	&:visited:hover {
-		@include colors.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		@include colors.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
 	}
 
 	&:visited {
@@ -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/_layout.scss

@@ -71,7 +71,7 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 			text-align: center;
 
 			&.solo-title {
-				margin-bottom: 0;
+				margin-bottom: map.get($brandui-padding, 'large');
 			}
 
 			&-left-aligned {
@@ -100,37 +100,6 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 	margin-right: auto;
 }
 
-.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;
-	}
-}
-
 .brandui-backdrop {
 	background: RGBA(brandui-rgb-labels(neutral-3), 0.9);
 	position: fixed;

package/dist/scss/base/_links.scss

@@ -88,7 +88,7 @@
 
 		&:hover,
 		&:focus {
-			color: brandui-colors(action-secondary);
+			color: brandui-colors(action-tertiary);
 		}
 	}
 
@@ -112,7 +112,7 @@
 				-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
 				text-decoration-thickness: map.get($brandui-padding, hairline);
 				font-weight: 600;
-				@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));
 			}
 		}
 	}
@@ -145,7 +145,7 @@
 	&:hover {
 		text-decoration: underline;
 		text-decoration-style: dotted;
-		@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));
 
 		&::after {
 			display: inline-block;

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

@@ -1,3 +1,4 @@
+@use '../mixins/breakpoints' as break;
 @use '../variables/images' as *;
 @use '../functions' as *;
 
@@ -12,19 +13,42 @@
 		z-index: -1;
 		padding-bottom: 28rem;
 
+		// @include break.max-mobile {
+		// 	opacity: 0.35;
+		// }
+
 		&-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;
@@ -32,16 +56,35 @@
 		&-bottom-right {
 			bottom: -10rem;
 			right: -40rem;
-			transform: rotate(180deg);
 		}
 		&-top-left {
-			top: -60rem;
+			top: -20rem;
 			left: -50rem;
+			transform: rotate(180deg);
+
+			@include break.max-mobile {
+				top: -30rem;
+			}
+
+			&-high {
+				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/decorations/_decorations.scss

@@ -1,3 +1,16 @@
+@use '../mixins/breakpoints' as break;
+
 .decorations-wrapper {
 	isolation: isolate;
+
+	&.card-decorations {
+		position: absolute;
+		z-index: 1;
+		inset: 2px;
+		overflow: hidden;
+
+		@include break.max-mobile {
+			opacity: 0.35;
+		}
+	}
 }

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

@@ -7,7 +7,10 @@
 @use '../../base/functions' as *;
 
 @mixin gradient-border {
-	:first-child {
+	// Sets all chilren over the gradient.
+	// Don't love the wildcard implementation, should find a better one
+	> * {
+		position: relative;
 		z-index: 2;
 	}
 	@include color.gradient-mode-pseudo(

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

@@ -75,10 +75,10 @@ $brandui-colors: map.merge($brandui-colors, $custom-theme);
 
 // 2.0 Standardized color labels for theming
 $brandui-color-labels: (
-	'default': map.get($brandui-colors, 'snow'),
+	'default': map.get($brandui-colors, 'white'),
 	'default-dark': map.get($brandui-colors, 'black'),
 	'ui-headline': map.get($brandui-colors, 'black'),
-	'ui-headline-dark': map.get($brandui-colors, 'snow'),
+	'ui-headline-dark': map.get($brandui-colors, 'white'),
 	'ui-body': map.get($brandui-colors, 'black'),
 	'ui-body-dark': map.get($brandui-colors, 'steel'),
 	'ui-fill': map.get($brandui-colors, 'steel'),
@@ -86,42 +86,42 @@ $brandui-color-labels: (
 	'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'),
+	'ui-text-dark': map.get($brandui-colors, 'white'),
 	'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-dark': map.get($brandui-colors, 'white'),
+	'action-outline': map.get($brandui-colors, 'white'),
+	'action-contrast': map.get($brandui-colors, 'white'),
 	'action-contrast-dark': map.get($brandui-colors, 'black'),
-	'action-secondary': map.get($brandui-colors, 'snow'),
+	'action-secondary': map.get($brandui-colors, 'white'),
 	'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-secondary-contrast-dark': map.get($brandui-colors, 'white'),
 	'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, 'snow'),
+	'info-contrast': map.get($brandui-colors, 'white'),
 	'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, 'snow'),
+	'success-contrast': map.get($brandui-colors, 'white'),
 	'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, 'snow'),
+	'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-contrast': map.get($brandui-colors, 'snow'),
+	'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'),
 	'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'),
+	'neutral-6': map.get($brandui-colors, 'white'),
 ) !default;
 
 $brandui-tag-colors: (

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 *;
 
@@ -41,15 +42,14 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	position: relative;
 	text-align: center;
 	text-decoration: none;
-	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);
 	-webkit-user-select: none;
 	user-select: none;
 	@include color.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
 
 	&:hover {
 		cursor: pointer;
-		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
-		@include color.color-mode(background-color, $action-secondary-base, $action-secondary-base-dark);
 	}
 
 	&:focus {
@@ -91,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 {
@@ -198,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/atoms/_icons.scss

@@ -104,6 +104,7 @@
 	/* Better Font Rendering =========== */
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
 
 	@each $icon-key, $icon-val in $brandui-general-icons {
 		&.icon-#{$icon-key} {

package/dist/scss/components/atoms/_tabs.scss

@@ -10,7 +10,7 @@
 .tabs {
 	max-width: max-content;
 	width: 100%;
-	margin: brandui-padding(extra-large) auto;
+	margin: 0 auto brandui-padding(extra-large) auto;
 	padding: map.get($brandui-padding, extra-small);
 	display: flex;
 	gap: map.get($brandui-padding, medium);

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/_avatar-username.scss

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

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/molecules/cards/_card.scss

@@ -1,9 +1,12 @@
 @use 'sass:map';
 @use '../../../base/mixins/glass' as glass;
+@use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/variables/effects' as *;
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/functions' as *;
+@use '../../../base//decorations/backgrounds' as *;
 
 .card {
 	display: flex;
@@ -16,9 +19,8 @@
 	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);
+	@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-fill), 0.8), RGBA(brandui-rgb-labels(ui-fill-dark), 0.8));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.3));
 
 	&-wrapper {
 		position: relative;
@@ -45,3 +47,20 @@
 		box-shadow: none;
 	}
 }
+
+.card-decorated {
+	position: relative;
+	padding: map.get($brandui-padding, huge);
+	max-width: brandui-col-spacing(12);
+	border-radius: map.get($brandui-radius, 'small');
+	overflow: hidden;
+
+	box-shadow: map.get($brandui-shadow, far);
+	@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-fill), 0.8), RGBA(brandui-rgb-labels(ui-fill-dark), 0.8));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.3));
+	@include gradient.gradient-border;
+
+	@include break.max-mobile {
+		padding: map.get($brandui-padding, large);
+	}
+}

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/_navigation.scss

@@ -323,11 +323,7 @@
 							padding-top: map.get($brandui-padding, 'small');
 							border-top-width: 1px;
 							border-top-style: solid;
-							@include color.color-mode(
-								border-top-color,
-								RGBA(brandui-rgb-labels(neutral-5), 0.3),
-								RGBA(brandui-rgb-labels(neutral-5), 0.7)
-							);
+							@include color.color-mode(border-top-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 
 							&:has(.submenu-column-label) {
 								@include break.max-tablet {
@@ -420,6 +416,7 @@
 
 						.general-icon {
 							font-size: map.get($brandui-general-icon-size, 'medium');
+							@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 						}
 
 						.product-logo {
@@ -607,7 +604,7 @@
 					padding-top: map.get($brandui-padding, 'small');
 					border-top-width: 1px;
 					border-top-style: solid;
-					@include color.color-mode(border-top-color, RGBA(brandui-rgb-labels(neutral-5), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.7));
+					@include color.color-mode(border-top-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 				}
 
 				&-content {
@@ -654,6 +651,7 @@
 							@extend .icon-border;
 							padding: map.get($brandui-padding, 'extra-small');
 							@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+							@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
 						}
 
 						.general-icon {

package/dist/scss/components/organisms/_split-content.scss

@@ -8,7 +8,6 @@
 	&-wrapper {
 		display: flex;
 		gap: brandui-padding(huge);
-		padding: brandui-padding(large);
 
 		@include break.max-tablet {
 			flex-direction: column;