@snyk-mktg/brand-ui 2.4.4 → 2.5.0

package/dist/js/types/icons.d.ts

@@ -1,5 +1,5 @@
 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 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' | '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 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';
 export type BranduiGeneralIconSizes = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';

package/dist/js/types/logos.d.ts

@@ -1,3 +1,3 @@
 export type BranduiSnykLogos = 'default' | 'default-solid' | 'icon' | 'icon-solid' | 'vertical' | 'vertical-solid' | 'wordmark' | 'security-labs-solid' | 'icon-security-labs-solid' | 'labs-solid' | 'labs-mono' | 'labs-mono-reverse';
-export type BranduiProductLogos = 'snyk-apprisk' | 'snyk-cloud' | 'snyk-code' | 'snyk-container' | 'snyk-deepcodeai' | 'snyk-iac' | 'snyk-learn' | 'snyk-oss';
+export type BranduiProductLogos = 'snyk-apprisk' | 'snyk-cloud' | 'snyk-code' | 'snyk-container' | 'snyk-deepcodeai' | 'snyk-iac' | 'snyk-learn' | 'snyk-oss' | 'snyk-studio';
 export type AllLogos = BranduiSnykLogos | BranduiProductLogos;

package/dist/js/utilities/icons.js

@@ -198,6 +198,7 @@ export const generalIcons = [
     'reddit',
     'remove',
     'risk',
+    'risk-based-prioritization',
     'search',
     'send-mail',
     'services',

package/dist/js/utilities/logos.js

@@ -21,6 +21,7 @@ export const productLogos = [
     'snyk-iac',
     'snyk-learn',
     'snyk-oss',
+    'snyk-studio',
 ];
 const allLogos = [...productLogos, ...snykLogos];
 export default allLogos;

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