@snyk-mktg/brand-ui 2.5.10-canary.4 → 2.5.10-canary.6

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

@@ -21,12 +21,9 @@
 			background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
 			&.dot-wave-center-right {
 				top: 20rem;
-				right: -30rem;
-				scale: 1.5;
-
-				@include break.max-mobile {
-					scale: 1;
-				}
+				right: -50rem;
+				scale: 1;
+				transform: rotateY(180deg);
 			}
 		}
 
@@ -58,24 +55,24 @@
 			top: -20rem;
 			left: -50rem;
 			transform: rotate(180deg);
-			scale: 1.75;
+
+			@include break.max-mobile {
+				top: -30rem;
+			}
 
 			&-high {
-				top: -80rem;
+				top: -75rem;
 				left: -60rem;
 				transform: rotate(180deg);
-				scale: 1.75;
 
 				@include break.max-tablet {
 					top: -60rem;
 					left: -13rem;
-					scale: 1.75;
 				}
 
 				@include break.max-mobile {
 					top: -40rem;
 					left: -10rem;
-					scale: 1;
 				}
 			}
 		}

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.4",
+	"version": "2.5.10-canary.6",
 	"description": "The official style library for Snyk’s BrandUI Design System",
 	"scripts": {
 		"dev:css": "gulp devCss",