@snyk-mktg/brand-ui 2.5.9-canary.1 → 2.5.9-canary.2

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

@@ -6,6 +6,16 @@
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/mixins/color-mode' as color;
 
+$action-base: RGBA(brandui-rgb-labels(action), 0.1);
+$action-base-dark: RGBA(brandui-rgb-labels(action-dark), 0.1);
+$action-secondary-base: RGBA(brandui-rgb-labels(action-secondary), 0.1);
+$action-secondary-base-dark: RGBA(brandui-rgb-labels(action-secondary-dark), 0.1);
+$fail-base: RGBA(brandui-rgb-labels(fail), 0.1);
+$fail-base-dark: RGBA(brandui-rgb-labels(fail-dark), 0.1);
+$fail-hover: brandui-color-labels(fail);
+$fail-hover-dark: brandui-color-labels(fail-dark);
+$neutral: brandui-color-labels(neutral-3);
+$neutral-hover: brandui-color-labels(neutral-6);
 $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),
@@ -15,8 +25,22 @@ $secondary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(br
 $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);
 
+@property --glimmer-angle {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 0deg;
+}
+
+@property --glimmer-duration {
+	syntax: '<time>';
+	inherits: false;
+	initial-value: 6s;
+}
+
 .button {
 	font-family: map.get($brandui-font-family, geist-mono), monospace;
+	isolation: isolate;
+	border: none;
 	border-radius: map.get($brandui-radius, medium);
 
 	&.primary {
@@ -30,6 +54,31 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 			brandui-color-labels(action-dark),
 			brandui-color-labels(action-secondary-dark)
 		);
+		&:before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			z-index: -1;
+		}
+
+		@include color.conic-gradient-mode-pseudo(
+			'&:after',
+			background,
+			var(--glimmer-angle),
+			$primary-conic-light-values,
+			$primary-conic-dark-values
+		);
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			inset: -1px;
+			animation: glimmer var(--glimmer-duration) linear infinite;
+			border-radius: inherit;
+			z-index: -2;
+		}
+
 		&:hover,
 		&:focus {
 			@include color.gradient-mode-pseudo(
@@ -42,6 +91,9 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 				brandui-color-labels(action-secondary-dark),
 				brandui-color-labels(action-dark)
 			);
+			&:after {
+				--glimmer-duration: 2s;
+			}
 		}
 
 		// This is the rotating conic-gradient glimmer effect
@@ -55,13 +107,49 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	}
 
 	&.secondary {
+		border: none;
+		isolation: isolate;
+
 		@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));
 
+		&:before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			backdrop-filter: blur(4px);
+			z-index: -1;
+		}
+		// 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
+		);
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			inset: -1px;
+			animation: glimmer var(--glimmer-duration) linear infinite;
+			border-radius: inherit;
+			z-index: -2;
+		}
+
 		&: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));
+			&:before {
+				transition: background-color map.get($brandui-transition, fast);
+			}
+
+			&:after {
+				--glimmer-duration: 2s;
+			}
 		}
 
 		// This is the rotating conic-gradient glimmer effect

package/dist/scss/evo/components/molecules/_share-this.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../../../base/functions' as *;
+@use '../../../base/variables/effects' as *;
+@use '../../../base/variables/sizing' as *;
+@use '../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/typography' as font;
+
+// Not importing the other share this component because they are so different
+.share-this {
+	display: flex;
+	gap: map.get($brandui-padding, extra-small);
+
+	&-label {
+		max-width: max-content;
+		@include font.get-typography(body-bold);
+	}
+
+	&-icon {
+		text-decoration: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: map.get($brandui-padding, medium);
+		height: map.get($brandui-padding, medium);
+		border-style: solid;
+		border-width: 1px;
+		border-radius: map.get($brandui-radius, small);
+		transition: map.get($brandui-transition, 'fast');
+		padding: map.get($brandui-padding, extra-small);
+		@include color.color-mode(color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-5));
+		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.1));
+
+		&-list {
+			display: flex;
+			gap: map.get($brandui-padding, extra-small);
+		}
+
+		&:hover {
+			cursor: pointer;
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
+}

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

@@ -6,7 +6,10 @@
 
 .card {
 	position: relative;
+	border-width: 0.1875rem;
+	border-style: solid;
 	border-width: map.get($brandui-padding, 'hairline');
+	border-radius: map.get($brandui-radius, 'large');
 	// box-shadow: map.get($brandui-shadow, 'outline');
 	//TODO: Extend Drop shadow theme later
 	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);

package/dist/scss/evo/components/organisms/_footer.scss

@@ -22,7 +22,21 @@
 			}
 		}
 		&-social-links {
+			@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+
+			li {
+				list-style: none;
+			}
+
+			.icon-border {
+				@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-6), 0.3), RGBA(brandui-rgb-labels(neutral-1), 0.7));
+			}
+
 			a {
+				font-weight: 400;
+				text-decoration: none;
+				@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+
 				&:hover {
 					@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 				}

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

@@ -10,6 +10,7 @@
 	border-width: 1px;
 	background-color: none;
 	background: none;
+	box-shadow: map.get($brandui-shadow, outline);
 	@include glass.bg-glass;
 	@include glass.border-glass;
 }

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

@@ -8,10 +8,18 @@ $labsui-color-labels: (
 	'ui-headline-dark': map.get($brandui-colors, 'white'),
 	'ui-body': map.get($brandui-colors, 'space'),
 	'ui-body-dark': map.get($brandui-colors, 'white'),
+	'ui-stroke': map.get($brandui-colors, 'space'),
+	'ui-stroke-dark': map.get($brandui-colors, 'dawn'),
 	'action': map.get($brandui-colors, 'deep-blue'),
 	'action-dark': map.get($brandui-colors, 'cyan'),
 	'action-secondary': map.get($brandui-colors, 'midnight'),
 	'action-secondary-dark': map.get($brandui-colors, 'snow'),
+	'neutral-1': map.get($brandui-colors, 'midnight'),
+	'neutral-2': map.get($brandui-colors, 'ocean'),
+	'neutral-3': map.get($brandui-colors, 'dawn'),
+	'neutral-4': map.get($brandui-colors, 'smoke'),
+	'neutral-5': map.get($brandui-colors, 'snow'),
+	'neutral-6': map.get($brandui-colors, 'white'),
 );
 
 $brandui-color-labels: map.merge($brandui-color-labels, $labsui-color-labels);

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

@@ -5,6 +5,50 @@ $labsui-font-family: (
 	space-mono: 'Space Mono',
 );
 
+$brandui-font-size: (
+	hero-title-large: 5.625rem,
+	hero-title-small: 3.125rem,
+	page-title-large: 4.375rem,
+	page-title: 3rem,
+	section-title: 3rem,
+	headline-large: 2.5rem,
+	headline-small: 2rem,
+	subhead: 1.5rem,
+	subhead-small: 1.125rem,
+	mini-header: 1rem,
+	mini-header-small: 0.875rem,
+	body-lead: 1rem,
+	body-lead-bold: 1rem,
+	body: 1rem,
+	body-bold: 1rem,
+	body-long: 1.125rem,
+	body-small: 0.875rem,
+	body-small-medium: 0.875rem,
+	code: 1rem,
+) !default;
+
+$brandui-line-height: (
+	hero-title-large: 6.25rem,
+	hero-title-small: 3.75rem,
+	page-title-large: 5rem,
+	page-title: 4rem,
+	section-title: 4rem,
+	headline-large: 3rem,
+	headline-small: 2.5rem,
+	subhead: 2.25rem,
+	subhead-small: 1.75rem,
+	mini-header: 1.5rem,
+	mini-header-small: 1.5rem,
+	body-lead: 1.5rem,
+	body-lead-bold: 1.5rem,
+	body: 1.5rem,
+	body-bold: 1.5rem,
+	body-long: 2rem,
+	body-small: 1.5rem,
+	body-small-medium: 1.5rem,
+	code: 1.625rem,
+) !default;
+
 // Why does this work? Do I need the font 'as'?
 $brandui-font-family: map.merge(font.$brandui-font-family, $labsui-font-family);
 

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

@@ -11,6 +11,7 @@
 
 .button {
 	font-family: map.get($brandui-font-family, space-mono), monospace;
+	border-radius: map.get($brandui-radius, pill);
 
 	&.primary {
 		border-width: 0.0625rem;
@@ -50,4 +51,15 @@
 			@include color.color-mode(border-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 		}
 	}
+	&.tertiary,
+	&.glyph,
+	&.arrow,
+	&.external {
+		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
 }

package/dist/scss/labs/components/atoms/triggers/_play.scss

@@ -16,6 +16,6 @@
 	}
 	&:after {
 		border-radius: map.get($brandui-radius, 'pill');
-		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill));
 	}
+	@include color.color-mode-pseudo('&:after', background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 }

package/dist/scss/labs/components/molecules/_pagination.scss

@@ -17,6 +17,11 @@
 			@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-3));
 			@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(neutral-3));
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(neutral-6));
+			&:hover {
+				@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+				@include color.color-mode(background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-1));
+				@include color.color-mode(border-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+			}
 		}
 		&-tile {
 			&.active {

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

@@ -1,12 +1,18 @@
+@use 'sass:map';
 @use '../../../../components/molecules/cards/card' as *;
 @use '../../../../base/mixins/breakpoints' as break;
 @use '../../../../base/functions' as *;
+@use '../../../../base/variables/effects' as *;
+@use '../../../../base/variables/sizing' as *;
 @use '../../../../base/mixins/color-mode' as color;
+@use '../../../../base/mixins/glass' as glass;
 
 .card {
 	backdrop-filter: none;
 	-webkit-backdrop-filter: none;
 	border: none;
+	border-radius: map.get($brandui-radius, 'large');
+
 	@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
 
 	&-wrapper {
@@ -53,6 +59,10 @@
 			}
 		}
 	}
+
+	&-banner {
+		border-radius: map.get($brandui-radius, 'medium') map.get($brandui-radius, 'medium') 0 0;
+	}
 }
 
 /* Unfinished example of using clip-path (link: https://www.sitepoint.com/css-path-function-squeaky-portraits/) */

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

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../../base/variables/sizing' as *;
+@use '../../../../base/variables/effects' as *;
 @use '../../../../base/mixins/page-theme' as theme;
 @use '../../../../base/mixins/breakpoints' as break;
 @use '../../../../components/organisms/ctas/basic-cta' as *;
@@ -8,6 +9,7 @@
 .basic-cta {
 	max-width: unset;
 	gap: map.get($brandui-padding, extra-large);
+	box-shadow: map.get($brandui-shadow, outline);
 	@include theme.theme-color(background-color, spotlight);
 	@include theme.theme-color(border-color, spotlight);
 }

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

@@ -2,6 +2,7 @@
 @use '../../utilities/rich-text' as *;
 @use '../base/mixins/typography' as font;
 @use '../../base/functions' as *;
+@use '../../base/mixins/color-mode' as color;
 @use '../base/variables/typography' as *;
 
 .txt-rich,
@@ -38,4 +39,16 @@
 	blockquote:not([class]) {
 		@include font.get-typography(body-lead);
 	}
+
+	a:not([class]) {
+		overflow-wrap: break-word;
+		text-decoration: underline;
+		font-weight: 700;
+		@include color.color-mode(color, brandui-color-labels('action'), brandui-color-labels('action-dark'));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels('action-secondary'), brandui-color-labels('action-secondary-dark'));
+		}
+	}
 }

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

@@ -60,7 +60,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 
 		&:hover,
 		&:focus {
-			@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/package.json

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