@snyk-mktg/brand-ui 2.2.1 → 2.3.0

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

@@ -5,6 +5,27 @@
    not read the '@use' directive.
  */
 
+/**
+ * Typically, we would want this color map lower (in the evo theme) but these themes were not
+ * built in a scale friendly way. So it needs to be up here. Everything will remain the same
+ * aside and I will import the evo colors into the evo colors file.
+ */
+$evoui-colors: (
+	'pink': #ff0ff3,
+	'orange': #ff7f00,
+	'blue': #003cff,
+	'red': #ff003f,
+	'teal': #00ff7f,
+	'yellow': #ffff00,
+	'purple': #7f00ff,
+	'light-blue': #00ffff,
+	'steel': #3f3f7f,
+	'white': #ffffff,
+	'black': #000000,
+	'grey': #1e1e1e,
+	'silver': #797979,
+);
+
 /* Color variables */
 $brandui-colors: (
 	'dark-purple': #441c99,

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

@@ -70,6 +70,70 @@ $brandui-default-themes: (
 			),
 		),
 	),
+	// Adding the evo theme here rather than in the evo folder
+	// Moving the theme down would involve bringinng a ton of imports down as well.
+	// This is an issue with BUI that we should resolve. But for now, its here.
+	evo:
+		(
+			light: (
+				text-solid: map.get($evoui-colors, 'white'),
+				// deprecate
+				solid: map.get($evoui-colors, 'white'),
+				solid-primary: map.get($evoui-colors, 'orange'),
+				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'),
+				spotlight: map.get($evoui-colors, 'grey'),
+				highlight: map.get($evoui-colors, 'orange'),
+				text-gradient: (
+					// We don't want text gradients for the evo theme
+					start: map.get($evoui-colors, 'white'),
+					end: map.get($evoui-colors, 'white'),
+				),
+				gradient-primary: (
+					start: map.get($evoui-colors, 'orange'),
+					end: map.get($evoui-colors, 'pink'),
+				),
+				gradient-secondary: (
+					start: map.get($evoui-colors, 'blue'),
+					end: map.get($evoui-colors, 'light-blue'),
+				),
+				gradient-tertiary: (
+					start: map.get($evoui-colors, 'purple'),
+					end: map.get($evoui-colors, 'pink'),
+				),
+			),
+			dark: (
+				text-solid: map.get($evoui-colors, 'white'),
+				// deprecate
+				solid: map.get($evoui-colors, 'white'),
+				solid-primary: map.get($evoui-colors, 'orange'),
+				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'),
+				spotlight: map.get($evoui-colors, 'grey'),
+				highlight: map.get($evoui-colors, 'orange'),
+				text-gradient: (
+					// We don't want text gradients for the evo theme
+					start: map.get($evoui-colors, 'white'),
+					end: map.get($evoui-colors, 'white'),
+				),
+				gradient-primary: (
+					start: map.get($evoui-colors, 'orange'),
+					end: map.get($evoui-colors, 'pink'),
+				),
+				gradient-secondary: (
+					start: map.get($evoui-colors, 'blue'),
+					end: map.get($evoui-colors, 'light-blue'),
+				),
+				gradient-tertiary: (
+					start: map.get($evoui-colors, 'purple'),
+					end: map.get($evoui-colors, 'pink'),
+				),
+			),
+		),
 ) !default;
 
 $brandui-extended-themes: () !default; // Leave empty. Used to override or extend at the project-level

package/dist/scss/components/molecules/_text-grid-item.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../base/variables/sizing' as *;
+
+.text-grid-item {
+	display: flex;
+	flex-direction: column;
+	gap: map.get($brandui-padding, 'extra-small');
+
+	&.center {
+		text-align: center;
+	}
+}

package/dist/scss/components.scss

@@ -49,6 +49,7 @@
 @use '../scss/components/molecules/tables' as *;
 @use '../scss/components/molecules/table-of-contents' as *;
 @use '../scss/components/molecules/title-text' as *;
+@use '../scss/components/molecules/text-grid-item' as *;
 @use '../scss/components/molecules/text-media' as *;
 @use '../scss/components/molecules/quote' as *;
 @use '../scss/components/organisms/breadcrumbs' as *;

package/dist/scss/evo/_base.scss

@@ -1,21 +1,32 @@
 // Base modules
 @use '../../scss/base/fonts' as *; // Must be first to load Google fonts asap
-@use '../base/variables/colors' as *;
-@use '../base/variables/themes' as *;
 @use '../../scss/base/functions' as *;
 @use '../../scss/base/mixins' as *;
-@use '../../scss/base/color' as *;
-@use '../base/baseline' 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/decorations' as *;
 @use '../../scss/base/decorations/glows' as *;
 @use '../../scss/base/decorations/flourishes' as *;
 @use '../../scss/base/decorations/markers' as *;
 @use '../../scss/base/decorations/separators' as *;
 @use '../../scss/base/decorations/sparkles' as *;
 
+// Variables - The web version imports this differently. I'm
+// putting it in this file to make thing more concise but if this gets so large it
+// needs to be imported the same way, refer to that project
+
+@use '../base/variables/themes' as *;
+// @use '../base/variables/icons' as *;
+@use './base/variables/colors' as *;
+
+// Mixins, see comment above
+@use './base/mixins/glass' as *;
+
 // @use './base/variables/colors' as *;
+@use './base/baseline' as *;
+@use './base/typography' as *;
 @use './base/decorations/backgrounds' as *;
+@use './base/color' as *;
+@use './base/variables/typography' as *;

package/dist/scss/evo/_components.scss

@@ -4,7 +4,6 @@
 @use '../components/atoms/checkbox' as *;
 @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 *;
@@ -31,7 +30,6 @@
 @use '../components/molecules/announcements' as *;
 @use '../components/molecules/avatar-grid-item' as *;
 @use '../components/molecules/avatar-username' as *;
-@use '../components/molecules/cards/card' as *;
 @use '../components/molecules/cards/card-bg-image' as *;
 @use '../components/molecules/charts/charts' as *;
 @use '../components/molecules/charts/vertical-chart' as *;
@@ -75,4 +73,7 @@
 // evo overwrites
 
 @use './components/atoms/button' as *;
+@use './components/atoms/feature-checkmark' as *;
+@use './components/molecules/cards/card' as *;
+@use './components/molecules/text-grid-item' as *;
 @use './components/organisms/navigation' as *;

package/dist/scss/evo/_utilities.scss

@@ -17,3 +17,5 @@
 @use '../../scss/utilities/transitions.scss' as *;
 @use '../../scss/utilities/visibility.scss' as *;
 @use '../../scss/utilities/keyframes.scss' as *;
+
+@use './utilities/rich-text.scss' as *;

package/dist/scss/evo/base/_baseline.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use '../../base/baseline' as *;
+@use './variables/typography' as *;
+
+* {
+	// outline: none;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html,
+body {
+	height: 100%;
+	font-variant-numeric: proportional-nums;
+	-webkit-font-smoothing: antialiased;
+	/* Disable scroll behavior until can figure out why it
+	   scrolls when clicking interactive HTML tags (select, checkbox) */
+	// scroll-behavior: smooth;
+	// scroll-padding-top: 200px;
+}
+
+body {
+	font-size: 1rem;
+	font-family: map.get($brandui-font-family, roboto), sans-serif;
+	color: brandui-color-labels(ui-body);
+
+	&.dark-mode,
+	& .dark-mode {
+		color: brandui-color-labels(ui-body-dark);
+	}
+	-webkit-font-smoothing: antialiased;
+}
+
+body {
+	font-family: map.get($brandui-font-family, geist-mono), monospace;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: map.get($brandui-font-family, geist), sans-serif;
+}
+
+code:not([class]) {
+	font-family: map.get($brandui-font-family, geist), sans-serif;
+}

package/dist/scss/evo/base/_color.scss

@@ -0,0 +1,8 @@
+@use '../../base/color' as *;
+@use '../../base/mixins/color-mode' as colors;
+@use '../base/variables/colors' as *;
+@use '../../base/functions' as *;
+
+.bg-page {
+	// @include colors.color-mode(background-color, brandui-color-labels(default), brandui-color-labels(default-dark));
+}

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

@@ -0,0 +1,352 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../../base/variables/colors' as *;
+@use '../base/variables/typography' as *;
+@use '../../base/variables/breakpoints' as *;
+@use '../../base/variables/sizing' as *;
+@use '../../base/mixins/page-theme' as theme;
+@use '../../base/mixins/typography' as font;
+@use '../../base/functions' as *;
+
+@each $element-key, $element-val in $text-elements {
+	// Text Styles
+	.txt-#{$element-key} {
+		font-family: map.get($element-val, 'family'), map.get($element-val, 'type');
+		font-size: map.get($brandui-font-size, $element-key);
+		font-weight: map.get($element-val, 'weight');
+		letter-spacing: map.get($element-val, letter-spacing);
+		line-height: map.get($brandui-line-height, $element-key);
+		padding: 0;
+		text-transform: map.get($element-val, text-transform);
+
+		@if ($element-key == 'body' or $element-key == 'body-bold') {
+			strong,
+			b {
+				font-weight: 700;
+
+				strong,
+				b {
+					font-weight: 700;
+				}
+			}
+		}
+
+		@if ($element-key == 'body-small' or $element-key == 'body-small-medium') {
+			strong,
+			b {
+				font-weight: 500;
+
+				strong,
+				b {
+					font-weight: 500;
+				}
+			}
+		}
+
+		// Responsive font values
+		@if (map.get($text-elements-responsive, $element-key)) {
+			$responsive-val: map.get($text-elements-responsive, $element-key);
+			$responsive-key: map.get($responsive-val, 'target');
+
+			@media (max-width: '#{map.get($brandui-device-breakpoints-new, mobile, value)}px') {
+				font-family: map.get($responsive-val, 'family'), map.get($responsive-val, 'type');
+				font-size: map.get($brandui-font-size, $responsive-key);
+				font-weight: map.get($responsive-val, 'weight');
+				letter-spacing: map.get($responsive-val, letter-spacing);
+				line-height: map.get($brandui-line-height, $responsive-key);
+				text-transform: map.get($responsive-val, text-transform);
+			}
+		}
+	}
+}
+
+.code-wrap {
+	background: map.get($brandui-colors, 'snow');
+	border: 0.0625rem solid RGBA(brandui-rgb-labels(neutral-1), 0.1);
+	border-radius: 0.375rem;
+	box-sizing: border-box;
+	color: map.get($brandui-colors, 'rose');
+	display: inline-block;
+	font-family: map.get($brandui-font-family, roboto-mono), monospace;
+	font-size: map.get($brandui-font-size, code);
+	line-height: map.get($brandui-line-height, code);
+	padding: 0.1875rem 0.375rem;
+	position: relative;
+
+	&.code-block {
+		display: block;
+		padding: 0.375rem 0.75rem;
+		width: 100%;
+	}
+
+	&.dark-mode {
+		background: map.get($brandui-colors, 'space');
+		color: map.get($brandui-colors, 'white');
+	}
+}
+
+@each $device-key, $device-map in $brandui-device-breakpoints-new {
+	$device-value: map.get($device-map, 'value');
+	$device-prefix: map.get($device-map, 'prefix');
+
+	@media (max-width: string.unquote('#{$device-value}px')) {
+		// Device Breakpoints Start
+
+		@for $i from 1 through 10 {
+			.#{$device-prefix}txt-line-clamp-#{$i} {
+				-webkit-line-clamp: #{$i};
+			}
+		}
+
+		.#{$device-prefix}txt-left {
+			text-align: left;
+		}
+
+		.#{$device-prefix}hover\:txt-left {
+			&:hover {
+				text-align: left;
+			}
+		}
+
+		.#{$device-prefix}txt-center {
+			text-align: center;
+		}
+
+		.#{$device-prefix}hover\:txt-center {
+			&:hover {
+				text-align: center;
+			}
+		}
+
+		.#{$device-prefix}txt-right {
+			text-align: right;
+		}
+
+		.#{$device-prefix}hover\:txt-right {
+			&:hover {
+				text-align: right;
+			}
+		}
+
+		.#{$device-prefix}white-space-nowrap {
+			white-space: nowrap;
+		}
+
+		.#{$device-prefix}hover\:white-space-nowrap {
+			&:hover {
+				white-space: nowrap;
+			}
+		}
+
+		.#{$device-prefix}white-space-initial {
+			white-space: initial;
+		}
+
+		.#{$device-prefix}hover\:white-space-initial {
+			&:hover {
+				white-space: initial;
+			}
+		}
+
+		.#{$device-prefix}txt-break-all {
+			word-break: break-all;
+		}
+
+		.#{$device-prefix}txt-keep-all {
+			word-break: keep-all;
+		}
+
+		.#{$device-prefix}txt-normal {
+			word-break: normal;
+		}
+
+		.#{$device-prefix}txt-overflow-wrap-normal {
+			overflow-wrap: normal;
+		}
+
+		.#{$device-prefix}txt-overflow-wrap-break-word {
+			overflow-wrap: break-word;
+		}
+
+		.#{$device-prefix}txt-overflow-wrap-anywhere {
+			overflow-wrap: anywhere;
+		}
+
+		.#{$device-prefix}txt-overflow-ellipsis {
+			text-overflow: ellipsis;
+		}
+
+		.#{$device-prefix}hover\:txt-overflow-ellipsis {
+			&:hover {
+				text-overflow: ellipsis;
+			}
+		}
+
+		.#{$device-prefix}txt-uppercase {
+			text-transform: uppercase;
+		}
+
+		.#{$device-prefix}hover\:txt-uppercase {
+			&:hover {
+				text-transform: uppercase;
+			}
+		}
+
+		.#{$device-prefix}txt-lowercase {
+			text-transform: lowercase;
+		}
+
+		.#{$device-prefix}hover\:txt-lowercase {
+			&:hover {
+				text-transform: lowercase;
+			}
+		}
+
+		.#{$device-prefix}txt-capitalize {
+			text-transform: capitalize;
+		}
+
+		.#{$device-prefix}hover\:txt-capitalize {
+			&:hover {
+				text-transform: capitalize;
+			}
+		}
+
+		.#{$device-prefix}txt-transform-none {
+			text-transform: none;
+		}
+
+		.#{$device-prefix}hover\:txt-transform-none {
+			&:hover {
+				text-transform: none;
+			}
+		}
+
+		.#{$device-prefix}txt-transform-initial {
+			text-transform: initial;
+		}
+
+		.#{$device-prefix}hover\:txt-transform-initial {
+			&:hover {
+				text-transform: initial;
+			}
+		}
+
+		// Device Breakpoints End
+	}
+}
+
+.txt-decoration-style-dashed {
+	text-decoration-style: dashed;
+}
+
+.txt-decoration-style-dotted {
+	text-decoration-style: dotted;
+}
+
+.txt-decoration-style-double {
+	text-decoration-style: double;
+}
+
+.txt-decoration-style-wavy {
+	text-decoration-style: wavy;
+}
+
+.txt-decoration-style-solid {
+	text-decoration-style: solid;
+}
+
+.txt-decoration-style-none {
+	text-decoration-style: none;
+}
+
+.txt-decoration-none {
+	text-decoration: none;
+}
+
+.group:hover .group-hover\:txt-decoration-none {
+	text-decoration: none;
+}
+
+.hover\:txt-decoration-none {
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.txt-decoration-underline {
+	text-decoration: underline;
+	-moz-text-underline-offset: map.get($brandui-padding, slim);
+	text-underline-offset: map.get($brandui-padding, slim);
+	-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+	text-decoration-thickness: map.get($brandui-padding, hairline);
+}
+
+.group:hover .group-hover\:txt-decoration-underline {
+	text-decoration: underline;
+	-moz-text-underline-offset: map.get($brandui-padding, slim);
+	text-underline-offset: map.get($brandui-padding, slim);
+	-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+	text-decoration-thickness: map.get($brandui-padding, hairline);
+}
+
+.hover\:txt-decoration-underline {
+	&:hover {
+		text-decoration: underline;
+		-moz-text-underline-offset: map.get($brandui-padding, slim);
+		text-underline-offset: map.get($brandui-padding, slim);
+		-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+		text-decoration-thickness: map.get($brandui-padding, hairline);
+	}
+}
+
+.link-decoration-underline a {
+	text-decoration: underline;
+	-moz-text-underline-offset: map.get($brandui-padding, slim);
+	text-underline-offset: map.get($brandui-padding, slim);
+	-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+	text-decoration-thickness: map.get($brandui-padding, hairline);
+}
+
+.group:hover .group-hover\:link-decoration-underline a {
+	text-decoration: underline;
+	-moz-text-underline-offset: map.get($brandui-padding, slim);
+	text-underline-offset: map.get($brandui-padding, slim);
+	-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+	text-decoration-thickness: map.get($brandui-padding, hairline);
+}
+
+.hover\:link-decoration-underline a {
+	&:hover {
+		text-decoration: underline;
+		-moz-text-underline-offset: map.get($brandui-padding, slim);
+		text-underline-offset: map.get($brandui-padding, slim);
+		-moz-text-decoration-thickness: map.get($brandui-padding, hairline);
+		text-decoration-thickness: map.get($brandui-padding, hairline);
+	}
+}
+
+// Used in the Labs site in place of the section intro
+.scrolling-ticker {
+	width: max-content;
+	margin-bottom: string.unquote('-#{map.get($brandui-padding, extra-large)}');
+	display: flex;
+	gap: map.get($brandui-padding, small);
+	@include font.get-typography(mini-header);
+	@include theme.theme-color(color, 'text-solid');
+
+	p {
+		min-width: fit-content;
+		display: flex;
+		font-family: map.get($brandui-font-family, space-mono), monospace;
+	}
+
+	p + p:before {
+		content: '✷';
+		margin-right: map.get($brandui-padding, small);
+		font-family: 'brandui-icons';
+		font-style: normal;
+		font-size: map.get($brandui-font-size, 'subhead-small');
+		font-weight: 600;
+	}
+}

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

@@ -5,10 +5,15 @@
 @use '../../../base/decorations/backgrounds' as *;
 
 .decoration-bg {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	max-width: 100vw;
+	overflow: visible;
 	&.evo-logo {
 		position: absolute;
 		opacity: 0.05;
-		transform: scale(4);
+		transform: scale(1);
 		width: brandui-col-spacing(16);
 		background: transparent url('#{$brandui-images}decorations/evo-logo-decoration.svg') center no-repeat;
 		background-size: contain;
@@ -34,5 +39,57 @@
 			left: -40rem;
 			transform: rotate(180deg);
 		}
+
+		&-center {
+			left: 0;
+			right: 0;
+			top: -90%;
+			bottom: 0;
+		}
+
+		&-png {
+			position: absolute;
+			margin: auto;
+			opacity: 1;
+			transform: scale(1);
+			width: brandui-col-spacing(16);
+			// background: transparent url('#{$brandui-images}decorations/evo-logo-decoration-png.png') center no-repeat;
+			background: transparent url('#{$brandui-images}decorations/evo-decoration-logo-png-alt.png');
+			background-position: center;
+
+			background-repeat: no-repeat;
+
+			background-size: contain;
+
+			background-attachment: fixed;
+			// mix-blend-mode: screen;
+			z-index: -1;
+			padding-bottom: 28rem;
+
+			&-top-right {
+				top: 0;
+				right: -40rem;
+			}
+			&-bottom-right {
+				bottom: -5rem;
+				right: -40rem;
+			}
+			&-top-left {
+				top: 0;
+				left: -40rem;
+				transform: rotate(180deg);
+			}
+			&-bottom-left {
+				bottom: -5rem;
+				left: -40rem;
+				transform: rotate(180deg);
+			}
+			&-center {
+				left: 0;
+				right: 0;
+				top: -75%;
+				bottom: 0;
+			}
+		}
 	}
 }

package/dist/scss/evo/base/mixins/_glass.scss

@@ -0,0 +1,37 @@
+@use '../../../base/mixins/color-mode' as color;
+@use '../../../base/functions' as *;
+
+// default for evo is true when it comes to density
+@mixin bg-glass($dense: true) {
+	@if $dense {
+		backdrop-filter: blur(0.625rem);
+		-webkit-backdrop-filter: blur(0.625rem);
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-stroke), 0.6), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.6));
+	} @else {
+		backdrop-filter: blur(0.625rem);
+		-webkit-backdrop-filter: blur(0.625rem);
+		@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-stroke), 0.5), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.5));
+	}
+
+	&.group {
+		&:hover,
+		&:focus {
+			@if $dense {
+				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-stroke), 0.5), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.5));
+			} @else {
+				@include color.color-mode(background-color, RGBA(brandui-rgb-labels(ui-stroke), 0.3), RGBA(brandui-rgb-labels(ui-stroke-dark), 0.3));
+			}
+		}
+	}
+}
+
+@mixin border-glass {
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-5), 0.2), RGBA(brandui-rgb-labels(neutral-5), 0.2));
+
+	&.group {
+		&:hover,
+		&:focus {
+			@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-5), 0.1), RGBA(brandui-rgb-labels(neutral-5), 0.1));
+		}
+	}
+}

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

@@ -1,6 +1,53 @@
 @use 'sass:map';
 @use '../../../base/variables/colors' as *;
 
-$evo-color-labels: ();
+// EvoUI color palette in the base colors file
+
+$evo-color-labels: (
+	'default': map.get($evoui-colors, 'black'),
+	'default-dark': map.get($evoui-colors, 'black'),
+	'ui-headline': map.get($evoui-colors, 'white'),
+	'ui-headline-dark': map.get($evoui-colors, 'white'),
+	'ui-body': map.get($evoui-colors, 'white'),
+	'ui-body-dark': map.get($evoui-colors, 'white'),
+	'ui-fill': map.get($evoui-colors, 'black'),
+	'ui-fill-dark': map.get($evoui-colors, 'black'),
+	'ui-stroke': map.get($evoui-colors, 'grey'),
+	'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-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-contrast-dark': map.get($evoui-colors, 'white'),
+	'info': map.get($evoui-colors, 'blue'),
+	'info-dark': map.get($evoui-colors, 'blue'),
+	'info-contrast': map.get($evoui-colors, 'white'),
+	'info-contrast-dark': map.get($evoui-colors, 'white'),
+	'success': map.get($evoui-colors, 'teal'),
+	'success-dark': map.get($evoui-colors, 'teal'),
+	'success-contrast': map.get($evoui-colors, 'white'),
+	'success-contrast-dark': map.get($evoui-colors, 'white'),
+	'warning': map.get($evoui-colors, 'yellow'),
+	'warning-dark': map.get($evoui-colors, 'yellow'),
+	'warning-contrast': map.get($evoui-colors, 'white'),
+	'warning-contrast-dark': map.get($evoui-colors, 'white'),
+	'fail': map.get($evoui-colors, 'red'),
+	'fail-dark': map.get($evoui-colors, 'red'),
+	'fail-contrast': map.get($evoui-colors, 'white'),
+	'fail-contrast-dark': map.get($evoui-colors, 'white'),
+	'neutral-1': map.get($evoui-colors, 'black'),
+	'neutral-2': map.get($evoui-colors, 'steel'),
+	'neutral-3': map.get($evoui-colors, 'grey'),
+	'neutral-4': map.get($evoui-colors, 'silver'),
+	'neutral-5': map.get($evoui-colors, 'white'),
+	'neutral-6': map.get($evoui-colors, 'orange'),
+);
 
 $brandui-color-labels: map.merge($brandui-color-labels, $evo-color-labels);
+$brandui-colors: map.merge($brandui-colors, $evoui-colors);

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

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../../base/variables/colors' as *;
-@use '../../../base/variables/themes' as *;
 
 /**
  * Note: For the generateJson.js file, we need to use the 'map.get()'
@@ -13,5 +12,3 @@
  */
 
 $evo-default-themes: () !default;
-
-$brandui-themes: map.merge($brandui-default-themes, $evo-default-themes);

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

@@ -1,19 +1,252 @@
 @use 'sass:map';
 @use '../../../base/variables/typography' as font;
 
-$evo-font-family: ();
-
+$evoui-font-family: (
+	geist: 'Geist',
+	geist-mono: 'Geist Mono',
+);
 // Why does this work? Do I need the font 'as'?
-$brandui-font-family: map.merge(font.$brandui-font-family, $evo-font-family);
+$brandui-font-family: map.merge(font.$brandui-font-family, $evoui-font-family);
+
+$evoui-font-size: (
+	hero-title-large: 4.375rem,
+	hero-title-small: 3.75rem,
+);
+$brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
+
+$evoui-line-height: ();
+$brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);
 
-$evo-text-elements: ();
+$evoui-text-elements: (
+	'hero-title-large': (
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'hero-title-small': (
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'page-title-large': (
+		'weight': 900,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		// 'text-transform': none,
+		'text-transform': none,
+	),
+	'page-title': (
+		'weight': 900,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		// 'text-transform': none,
+		'text-transform': none,
+	),
+	'section-title': (
+		'weight': 900,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		// 'text-transform': none,
+		'text-transform': none,
+	),
+	'headline-large': (
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'headline-small': (
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'subhead': (
+		// 'weight': 600,
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'subhead-small': (
+		// 'weight': 600,
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'mini-header': (
+		// 'weight': 600,
+		'weight': 400,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.12em,
+		'text-transform': uppercase,
+	),
+	'mini-header-small': (
+		// 'weight': 600,
+		'weight': 400,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.12em,
+		'text-transform': uppercase,
+	),
+	'body-lead': (
+		'weight': 500,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.01em,
+		'text-transform': none,
+	),
+	'body-lead-bold': (
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.01em,
+		'text-transform': none,
+	),
+	'body': (
+		'weight': 400,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+	'body-bold': (
+		'weight': 600,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.005em,
+		'text-transform': none,
+	),
+	'body-long': (
+		'weight': 400,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0.01em,
+		'text-transform': none,
+	),
+	'body-small': (
+		'weight': 400,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+	'body-small-medium': (
+		'weight': 500,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+	'code': (
+		'weight': 400,
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+);
 
-$evo-text-elements-responsive: ();
+$evoui-text-elements-responsive: (
+	'hero-title-large': (
+		'target': 'hero-title-small',
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'hero-title-small': (
+		'target': 'hero-title-small',
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'page-title-large': (
+		'target': 'hero-title-small',
+		'weight': 900,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		// 'text-transform': none,
+		'text-transform': none,
+	),
+	'page-title': (
+		'target': 'hero-title-small',
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'section-title': (
+		'target': 'hero-title-small',
+		'weight': 900,
+		'family': map.get($brandui-font-family, geist),
+		'type': sans-serif,
+		'letter-spacing': -0.01em,
+		'text-transform': none,
+	),
+	'headline-large': (
+		'target': 'headline-small',
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+	'headline-small': (
+		'target': 'subhead',
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+	'subhead': (
+		'target': 'subhead-small',
+		'weight': 700,
+		// 'family': map.get($brandui-font-family, poppins),
+		'family': map.get($brandui-font-family, geist-mono),
+		'type': monospace,
+		'letter-spacing': 0,
+		'text-transform': none,
+	),
+);
 
 $text-elements: font.$text-elements;
 $text-elements-responsive: font.$text-elements-responsive;
 
-@each $key, $value in $evo-text-elements {
+@each $key, $value in $evoui-text-elements {
 	@if map.has-key($text-elements, $key) {
 		$text-elements: map.set($text-elements, $key, map.merge(map.get($text-elements, $key), $value));
 	} @else {
@@ -21,7 +254,7 @@ $text-elements-responsive: font.$text-elements-responsive;
 	}
 }
 
-@each $key, $value in $evo-text-elements-responsive {
+@each $key, $value in $evoui-text-elements-responsive {
 	@if map.has-key($text-elements-responsive, $key) {
 		$text-elements-responsive: map.set($text-elements-responsive, $key, map.merge(map.get($text-elements-responsive, $key), $value));
 	} @else {
@@ -29,5 +262,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/evo/components/atoms/_button.scss

@@ -1,7 +1,121 @@
+@use 'sass:map';
+@use '../../../components/atoms/button' as *;
+@use '../../base/variables/typography' as *;
+@use '../../../base/functions' as *;
+@use '../../../base/variables/effects' as *;
+@use '../../../base/variables/sizing' as *;
+@use '../../../base/mixins/color-mode' as color;
+
+$primary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$primary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$secondary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+
 .button {
+	font-family: map.get($brandui-font-family, geist-mono), monospace;
+	border-radius: map.get($brandui-radius, medium);
+
 	&.primary {
-		&:before,
+		&:hover,
+		&:focus {
+			@include color.gradient-mode-pseudo(
+				'&:before',
+				background,
+				'linear',
+				90deg,
+				brandui-color-labels(action),
+				brandui-color-labels(action-secondary),
+				brandui-color-labels(action-dark),
+				brandui-color-labels(action-secondary-dark)
+			);
+		}
+
+		// This is the rotating conic-gradient glimmer effect
+		@include color.conic-gradient-mode-pseudo(
+			'&:after',
+			background,
+			var(--glimmer-angle),
+			$primary-conic-light-values,
+			$primary-conic-dark-values
+		);
+	}
+
+	&.secondary {
+		@include color.color-mode(color, brandui-color-labels(action-secondary-contrast), brandui-color-labels(action-secondary-contrast-dark));
+		@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-1));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels(action-secondary-contrast), brandui-color-labels(action-secondary-contrast-dark));
+			@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-3));
+		}
+
+		// This is the rotating conic-gradient glimmer effect
+		@include color.conic-gradient-mode-pseudo(
+			'&:after',
+			background,
+			var(--glimmer-angle),
+			$secondary-conic-light-values,
+			$secondary-conic-dark-values
+		);
+	}
+	&.tertiary,
+	&.glyph,
+	&.arrow,
+	&.external {
+		transition: all map.get($brandui-transition, fast);
+		@include color.gradient-mode(
+			'background',
+			'linear',
+			'140deg',
+			brandui-color-labels(action),
+			brandui-color-labels(action-secondary),
+			brandui-color-labels(action-dark),
+			brandui-color-labels(action-secondary-dark)
+		) {
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+		&:after {
+			@include color.gradient-mode(
+				'background',
+				'linear',
+				'140deg',
+				brandui-color-labels(action),
+				brandui-color-labels(action-secondary),
+				brandui-color-labels(action-dark),
+				brandui-color-labels(action-secondary-dark)
+			) {
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+		}
+
+		&:hover,
+		&:focus {
+			-webkit-text-fill-color: initial;
+			@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+			&:after {
+				-webkit-text-fill-color: initial;
+			}
+		}
+	}
+
+	&.tertiary,
+	&.glyph,
+	&.arrow {
+		&:after {
+			content: '\e905'; // icon-arrow-right
+		}
+	}
+
+	&.external {
 		&:after {
+			content: '\e906'; // icon-arrow-top-right
 		}
 	}
 }

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

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../../../components/atoms/feature-checkmark.scss' as *;
+@use '../../../base/mixins/color-mode' as colors;
+@use '../../../base/variables/sizing' as *;
+@use '../../../base/functions' as *;
+
+.feature-checkmark {
+	&:after {
+		// Need to unset here because the handdrawn highlight marker is set regardless of theme
+		all: unset;
+		content: '\e910'; // icon-check
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		inset: 0;
+		font-family: 'brandui-icons';
+		font-size: map.get($brandui-padding, large);
+		font-style: normal;
+		font-weight: normal;
+		font-variant: normal;
+		text-transform: none;
+		line-height: 1;
+		-webkit-font-smoothing: antialiased;
+
+		@include colors.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+	}
+}

package/dist/scss/evo/components/molecules/_text-grid-item.scss

@@ -0,0 +1,7 @@
+@use 'sass:map';
+@use '../../../base/variables/sizing' as *;
+@use '../../../components/molecules/text-grid-item' as *;
+
+.text-grid-item {
+	gap: map.get($brandui-padding, 'medium');
+}

package/dist/scss/evo/components/molecules/cards/_card.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../../../../base/variables/sizing' as *;
+@use '../../../../base/variables/effects' as *;
+@use '../../../../components/molecules/cards/card' as *;
+@use '../../../base/mixins/glass' as glass;
+
+.card {
+	border-width: map.get($brandui-padding, 'hairline');
+	// box-shadow: map.get($brandui-shadow, 'outline');
+	//TODO: Extend Drop shadow theme later
+	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);
+	@include glass.bg-glass;
+	@include glass.border-glass;
+}

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

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../../utilities/rich-text' as *;
+@use '../../base/mixins/color-mode' as color;
+@use '../../base/functions' as *;
+
+.txt-rich,
+.txt-rich-long {
+	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'));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels('ui-text'), brandui-color-labels('ui-text-dark'));
+		}
+	}
+}

package/package.json

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