@snyk-mktg/brand-ui 2.2.1 → 2.3.1

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;
+			}
+		}
 	}
 }