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

package/dist/scss/components/organisms/ctas/_basic-cta.scss

@@ -6,23 +6,18 @@
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/mixins/color-mode' as color;
 @use '../../../base/functions' as *;
+@use '../../../components/molecules/cards/_card.scss' as *;
 
 .basic-cta {
-	max-width: brandui-col-spacing(10);
+	@extend .card;
 	width: 100%;
 	margin: 0 auto;
 	padding: map.get($brandui-padding, medium);
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-width: 1px;
-	border-style: solid;
-	border-radius: map.get($brandui-radius, large);
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
-
-	// @include theme.theme-color(background-color, base);
-	// @include glass.border-glass;
 
 	&-content {
 		max-width: brandui-col-spacing(7);

package/dist/scss/components/organisms/ctas/_body-cta.scss

@@ -7,23 +7,16 @@
 @use '../../../base/mixins/gradient-border' as gradient;
 @use '../../../base/mixins/breakpoints' as break;
 @use '../../../base/functions' as *;
+@use '../../../components/molecules/cards/_card.scss' as *;
 
 .body-cta {
-	max-width: brandui-col-spacing(10);
+	@extend .card-decorated;
 	width: 100%;
 	margin: 0 auto;
-	padding: map.get($brandui-padding, medium);
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-radius: map.get($brandui-radius, small);
-	box-shadow: map.get($brandui-shadow, far);
-	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 gradient.gradient-border;
 
 	&-content {
 		max-width: brandui-col-spacing(8);
@@ -53,13 +46,6 @@
 		}
 	}
 
-	&-decorations {
-		position: absolute;
-		z-index: 1;
-		inset: 2px;
-		overflow: hidden;
-	}
-
 	@include break.max-mobile {
 		flex-direction: column;
 		gap: map.get($brandui-padding, extra-large);

package/dist/scss/components/organisms/ctas/_footer-cta.scss

@@ -12,15 +12,13 @@
 @use '../../../base/links' as *;
 
 .footer-cta {
-	@extend .brandui-section;
 	margin-bottom: string.unquote('-#{map.get($brandui-padding, huge)}');
-	max-width: brandui-col-spacing(12);
-	border-radius: map.get($brandui-radius, 'small');
-	overflow: hidden;
+	margin-left: auto;
+	margin-right: auto;
 
-	box-shadow: map.get($brandui-shadow, far);
-	@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 break.max-tablet {
+		margin: 0 map.get($brandui-padding, large);
+	}
 
 	&-content {
 		max-width: brandui-col-spacing(7);
@@ -30,6 +28,10 @@
 		gap: map.get($brandui-padding, small);
 		justify-content: center;
 
+		.buttons {
+			justify-content: center;
+		}
+
 		@include break.max-tablet {
 			max-width: 100%;
 			text-align: center;
@@ -71,13 +73,4 @@
 			max-width: 100%;
 		}
 	}
-
-	&-decorations {
-		position: absolute;
-		z-index: 1;
-		inset: 2px;
-		overflow: hidden;
-	}
-
-	@include gradient.gradient-border;
 }

package/dist/scss/components/organisms/heroes/_hero-case-study.scss

@@ -87,7 +87,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/organisms/heroes/_hero-title-text.scss

@@ -8,7 +8,7 @@
 	padding-top: calc(map.get($brandui-padding, huge) + map.get($brandui-padding, huge));
 
 	&-content {
-		max-width: brandui-col-spacing(7);
+		max-width: brandui-col-spacing(9);
 		width: 100%;
 		margin: 0 auto;
 		display: flex;

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 *;
@@ -27,7 +26,6 @@
 @use '../components/molecules/agenda' as *;
 @use '../components/molecules/alert' as *;
 @use '../components/molecules/avatar-grid-item' as *;
-@use '../components/molecules/avatar-username' as *;
 @use '../components/molecules/charts/charts' as *;
 @use '../components/molecules/charts/vertical-chart' as *;
 @use '../components/molecules/charts/horizontal-chart' as *;
@@ -55,9 +53,11 @@
 @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 *;
+@use './components/molecules/avatar-username' as *;
 @use './components/molecules/cards/card' as *;
 @use './components/molecules/cards/card-bg-image' as *;
 @use './components/molecules/cards/card-repo' 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/_announcements.scss

@@ -14,6 +14,12 @@
 		z-index: 2;
 		@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 		@include color.color-mode(background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+			@include color.color-mode(background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
+		}
 	}
 
 	&-message {
@@ -36,5 +42,9 @@
 		&:before {
 			position: relative;
 		}
+
+		&:after {
+			display: none;
+		}
 	}
 }

package/dist/scss/labs/components/molecules/_avatar-username.scss

@@ -0,0 +1,11 @@
+@use './../../../components/molecules/avatar-username';
+@use '../../../base/functions' as *;
+@use './../../../base/mixins/color-mode' as color;
+
+.avatar-username {
+	a {
+		&:hover {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
+}

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/dist/scss/utilities/_scrollbar.scss

@@ -13,10 +13,10 @@
 	::-webkit-scrollbar-thumb {
 		border-radius: 20px;
 		border: transparent;
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-4), 0.25), RGBA(brandui-rgb-labels(neutral-1), 0.25));
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-5), 0.25), RGBA(brandui-rgb-labels(neutral-1), 0.25));
 	}
 
 	::-webkit-scrollbar-thumb:hover {
-		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-4), 0.5), RGBA(brandui-rgb-labels(neutral-1), 0.5));
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(neutral-5), 0.5), RGBA(brandui-rgb-labels(neutral-1), 0.5));
 	}
 }

package/package.json

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