@snyk-mktg/brand-ui 2.4.5 → 2.5.1

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

@@ -83,7 +83,8 @@ $brandui-default-themes: (
 				solid-secondary: map.get($evoui-colors, 'pink'),
 				solid-tertiary: map.get($evoui-colors, 'blue'),
 				contrast: map.get($evoui-colors, 'black'),
-				base: map.get($evoui-colors, 'black'),
+				// We want the base to be transparent
+				base: 'none',
 				spotlight: map.get($evoui-colors, 'grey'),
 				highlight: map.get($evoui-colors, 'orange'),
 				text-gradient: (
@@ -112,7 +113,8 @@ $brandui-default-themes: (
 				solid-secondary: map.get($evoui-colors, 'pink'),
 				solid-tertiary: map.get($evoui-colors, 'light-blue'),
 				contrast: map.get($evoui-colors, 'black'),
-				base: map.get($evoui-colors, 'black'),
+				// We want the base to be transparent
+				base: 'none',
 				spotlight: map.get($evoui-colors, 'grey'),
 				highlight: map.get($evoui-colors, 'orange'),
 				text-gradient: (

package/dist/scss/evo/_components.scss

@@ -45,10 +45,8 @@
 @use '../components/molecules/tables' as *;
 @use '../components/molecules/table-of-contents' as *;
 @use '../components/molecules/title-text' as *;
-@use '../components/molecules/text-media' as *;
 @use '../components/molecules/quote' as *;
 @use '../components/organisms/breadcrumbs' as *;
-@use '../components/organisms/ctas/basic-cta' as *;
 @use '../components/organisms/ctas/body-cta' as *;
 @use '../components/organisms/ctas/feature-cta' as *;
 @use '../components/organisms/ctas/footer-cta' as *;
@@ -76,6 +74,8 @@
 @use './components/misc/embed' as *;
 @use './components/molecules/cards/card' as *;
 @use './components/molecules/text-grid-item' as *;
+@use './components/molecules/text-media' as *;
+@use './components/organisms/ctas/basic-cta' as *;
 @use './components/organisms/heroes/hero-title-text' as *;
 @use './components/organisms/footer' as *;
 @use './components/organisms/navigation' as *;

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

@@ -16,14 +16,14 @@ $evo-color-labels: (
 	'ui-stroke-dark': map.get($evoui-colors, 'grey'),
 	'ui-text': map.get($evoui-colors, 'white'),
 	'ui-text-dark': map.get($evoui-colors, 'white'),
-	'action': map.get($evoui-colors, 'orange'),
-	'action-dark': map.get($evoui-colors, 'orange'),
-	'action-outline': map.get($evoui-colors, 'orange'),
+	'action': map.get($evoui-colors, 'pink'),
+	'action-dark': map.get($evoui-colors, 'pink'),
+	'action-outline': map.get($evoui-colors, 'white'),
 	'action-contrast': map.get($evoui-colors, 'black'),
 	'action-contrast-dark': map.get($evoui-colors, 'black'),
-	'action-secondary': map.get($evoui-colors, 'pink'),
-	'action-secondary-dark': map.get($evoui-colors, 'pink'),
-	'action-secondary-contrast': map.get($evoui-colors, 'white'),
+	'action-secondary': map.get($evoui-colors, 'orange'),
+	'action-secondary-dark': map.get($evoui-colors, 'orange'),
+	'action-secondary-contrast': map.get($evoui-colors, 'black'),
 	'action-secondary-contrast-dark': map.get($evoui-colors, 'white'),
 	'info': map.get($evoui-colors, 'blue'),
 	'info-dark': map.get($evoui-colors, 'blue'),

package/dist/scss/evo/base/variables/_typography.scss

@@ -11,6 +11,7 @@ $brandui-font-family: map.merge(font.$brandui-font-family, $evoui-font-family);
 $evoui-font-size: (
 	page-title-large: 4.375rem,
 	page-title: 4.375rem,
+	page-title-small: 3.5rem,
 	hero-title-large: 4.375rem,
 	hero-title-small: 3.75rem,
 	section-title-small: 2.5rem,
@@ -20,6 +21,7 @@ $brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
 $evoui-line-height: (
 	page-title-large: 5rem,
 	page-title: 5rem,
+	page-title-small: 4rem,
 	section-title-small: 3rem,
 );
 $brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);
@@ -206,7 +208,7 @@ $evoui-text-elements-responsive: (
 		'text-transform': none,
 	),
 	'page-title': (
-		'target': 'page-title',
+		'target': 'page-title-small',
 		'weight': 900,
 		'family': map.get($brandui-font-family, geist),
 		'type': sans-serif,

package/dist/scss/evo/components/atoms/_button.scss

@@ -20,6 +20,16 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	border-radius: map.get($brandui-radius, medium);
 
 	&.primary {
+		@include color.gradient-mode-pseudo(
+			'&:before',
+			background,
+			'linear',
+			90deg,
+			brandui-color-labels(action-secondary),
+			brandui-color-labels(action),
+			brandui-color-labels(action-dark),
+			brandui-color-labels(action-secondary-dark)
+		);
 		&:hover,
 		&:focus {
 			@include color.gradient-mode-pseudo(
@@ -29,8 +39,8 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 				90deg,
 				brandui-color-labels(action),
 				brandui-color-labels(action-secondary),
-				brandui-color-labels(action-dark),
-				brandui-color-labels(action-secondary-dark)
+				brandui-color-labels(action-secondary-dark),
+				brandui-color-labels(action-dark)
 			);
 		}
 
@@ -73,10 +83,10 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 			'background-image',
 			'linear',
 			'140deg',
-			brandui-color-labels(action),
 			brandui-color-labels(action-secondary),
-			brandui-color-labels(action-dark),
-			brandui-color-labels(action-secondary-dark)
+			brandui-color-labels(action),
+			brandui-color-labels(action-secondary-dark),
+			brandui-color-labels(action-dark)
 		) {
 			-webkit-background-clip: text;
 			-webkit-text-fill-color: transparent;

package/dist/scss/evo/components/atoms/_feature-checkmark.scss

@@ -23,6 +23,6 @@
 		line-height: 1;
 		-webkit-font-smoothing: antialiased;
 
-		@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), brandui-color-labels(action-dark));
 	}
 }

package/dist/scss/evo/components/atoms/triggers/_menu.scss

@@ -1,23 +1,2 @@
 @use 'sass:map';
 @use '../../../../components/atoms/triggers/menu' as *;
-@use '../../../../base/variables/sizing' as *;
-@use '../../../../base/variables/effects' as *;
-@use '../../../../base/mixins/color-mode' as color;
-@use '../../../../base/functions' as *;
-
-.toggle-menu {
-	@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
-	@include color.color-mode(
-		background-color,
-		RGBA(brandui-rgb-labels(action-secondary), 0.05),
-		RGBA(brandui-rgb-labels(action-secondary-dark), 0.05)
-	);
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(action-secondary), 0.5), RGBA(brandui-rgb-labels(action-secondary-dark), 0.5));
-
-	&:hover,
-	&:focus-within,
-	&.open {
-		@include color.color-mode(color, brandui-color-labels(action-contrast), brandui-color-labels(action-contrast-dark));
-		@include color.color-mode(background-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
-	}
-}

package/dist/scss/evo/components/misc/_embed.scss

@@ -14,10 +14,10 @@
 		'background',
 		'linear',
 		'90deg',
-		brandui-color-labels(action-secondary),
 		brandui-color-labels(action),
-		brandui-color-labels(action-secondary-dark),
-		brandui-color-labels(action-dark)
+		brandui-color-labels(action-secondary),
+		brandui-color-labels(action-dark),
+		brandui-color-labels(action-secondary-dark)
 	) {
 		content: '';
 		position: absolute;

package/dist/scss/evo/components/molecules/_text-media.scss

@@ -0,0 +1,28 @@
+@use '../../../components/molecules/text-media';
+@use '../../../base/mixins/breakpoints' as breakpoints;
+
+.text-media {
+	&-media {
+		width: calc((100% / 12) * 6);
+
+		@include breakpoints.max-tablet {
+			width: calc((100% / 12) * 12);
+		}
+	}
+
+	&-text {
+		width: calc((100% / 12) * 6);
+
+		@include breakpoints.max-tablet {
+			width: calc((100% / 12) * 12);
+		}
+
+		&-content {
+			padding: 0;
+
+			&.reverse {
+				padding: 0;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../../../../components/organisms/ctas/basic-cta' as *;
+@use '../../../../base/variables/effects' as *;
+@use '../../../../base/variables/sizing' as *;
+@use '../../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/glass' as glass;
+// @use '../../../../base/mixins/page-theme' as theme;
+
+.basic-cta {
+	border-width: 1px;
+	background-color: none;
+	background: none;
+	@include glass.bg-glass;
+	@include glass.border-glass;
+}

package/dist/scss/evo/utilities/_rich-text.scss

@@ -2,13 +2,15 @@
 @use '../../utilities/rich-text' as *;
 @use '../../base/mixins/color-mode' as color;
 @use '../../base/functions' as *;
+@use '../../base/variables/typography' as *;
 
 .txt-rich,
 .txt-rich-long {
+	font-family: map.get($brandui-font-family, geist-mono), monospace;
 	a:not([class]) {
 		font-weight: 400;
 		text-decoration: none;
-		@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'), brandui-color-labels('action-dark'));
 
 		&:hover,
 		&:focus {

package/package.json

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