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

package/dist/scss/components/molecules/_tables.scss

@@ -10,64 +10,6 @@
 @use '../../base/functions' as *;
 
 .table {
-	&-basic {
-		border-collapse: collapse;
-		min-width: brandui-col-spacing(6);
-
-		&-wrapper {
-			border-radius: map.get($brandui-padding, extra-small);
-			border-width: 1px;
-			border-style: solid;
-			overflow-y: hidden;
-			@include color.color-mode(border-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-		}
-
-		tr:nth-child(even) {
-			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-		}
-
-		&-caption {
-			width: brandui-col-spacing(6);
-
-			&-content {
-				max-width: brandui-col-spacing(3);
-
-				@include break.max-mobile {
-					max-width: 100%;
-				}
-			}
-
-			@include break.max-mobile {
-				width: brandui-col-spacing(12);
-				text-align: center;
-			}
-		}
-
-		&-col-header {
-			min-width: 200px;
-			padding: map.get($brandui-padding, small);
-
-			@include font.get-typography(subhead-small);
-			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
-			&-wrapper {
-				vertical-align: top;
-			}
-		}
-
-		&-row-header {
-			vertical-align: middle;
-			@include color.color-mode(background-color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));
-			&-content {
-				padding: map.get($brandui-padding, small);
-			}
-		}
-
-		&-row-data {
-			&-content {
-				padding: map.get($brandui-padding, small);
-			}
-		}
-	}
 	&-comparison {
 		&-caption {
 			width: brandui-col-spacing(6);
@@ -106,7 +48,8 @@
 					padding: map.get($brandui-padding, small);
 					text-align: left;
 					@include font.get-typography(body-bold);
-					@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+					@include theme.theme-color(background-color, base);
+					@include theme.theme-color(color, ui-body);
 				}
 			}
 		}

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

@@ -1,18 +1,19 @@
 @use 'sass:map';
-@use '../../../base/mixins/glass' as glass;
-@use '../../../base/mixins/color-mode' as color;
 @use '../../../base/variables/effects' as *;
 @use '../../../base/variables/sizing' as *;
-@use '../../../base/functions' as *;
+@use '../../../base/mixins/glass' as glass;
 
 .card {
 	display: flex;
 	flex-direction: column;
-	border-radius: map.get($brandui-radius, 'extra-small');
+	border-width: 0.1875rem;
+	border-style: solid;
+	border-radius: map.get($brandui-radius, 'large');
+	box-shadow: map.get($brandui-shadow, 'outline');
 	transition: map.get($brandui-transition, 'fast');
 	overflow: hidden;
-
-	@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+	@include glass.bg-glass;
+	@include glass.border-glass;
 
 	&-wrapper {
 		position: relative;
@@ -20,7 +21,7 @@
 
 	&-banner {
 		overflow: hidden;
-		border-radius: map.get($brandui-radius, 'extra-small') map.get($brandui-radius, 'extra-small') 0 0;
+		border-radius: map.get($brandui-radius, 'medium') map.get($brandui-radius, 'medium') 0 0;
 	}
 
 	&-headshot {

package/dist/scss/components/organisms/_glossary.scss

@@ -8,13 +8,6 @@
 @use '../../base/functions' as *;
 
 .glossary {
-	&-highlight {
-		@include color.color-mode(
-			background-color,
-			RGBA(brandui-rgb-labels(action-tertiary), 0.3),
-			RGBA(brandui-rgb-labels(action-tertiary-dark), 0.3)
-		);
-	}
 	&-nav {
 		padding: map.get($brandui-padding, small);
 		border-width: 0.1875rem;

package/dist/scss/components/organisms/_split-content.scss

@@ -9,6 +9,10 @@
 		display: flex;
 		gap: brandui-padding(huge);
 		padding: brandui-padding(large);
+		border-radius: brandui-radius(large);
+		box-shadow: brandui-shadow(outline);
+		@include glass.bg-glass;
+		@include glass.border-glass;
 
 		@include break.max-tablet {
 			flex-direction: column;

package/dist/scss/components/organisms/_sub-navigation.scss

@@ -69,7 +69,7 @@
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
 
 			&:hover {
-				@include color.color-mode(color, brandui-color-labels(action-tertiary), brandui-color-labels(action-tertiary-dark));
+				@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.1),

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

@@ -4,7 +4,6 @@
 @use '../../../base/mixins/page-theme' as theme;
 @use '../../../base/mixins/glass' as glass;
 @use '../../../base/mixins/breakpoints' as break;
-@use '../../../base/mixins/color-mode' as color;
 @use '../../../base/functions' as *;
 
 .basic-cta {
@@ -16,13 +15,12 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: map.get($brandui-padding, huge);
-	border-width: 1px;
+	border-width: 0.1875rem;
 	border-style: solid;
 	border-radius: map.get($brandui-radius, large);
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
-
-	// @include theme.theme-color(background-color, base);
-	// @include glass.border-glass;
+	box-shadow: map.get($brandui-shadow, outline);
+	@include theme.theme-color(background-color, base);
+	@include glass.border-glass;
 
 	&-content {
 		max-width: brandui-col-spacing(7);

package/dist/scss/components/organisms/heroes/_hero-case-study.scss

@@ -52,11 +52,15 @@
 		max-width: brandui-col-spacing(4);
 		width: 100%;
 		padding: map.get($brandui-padding, medium);
+		border-width: 0.1875rem;
+		border-style: solid;
+		border-radius: map.get($brandui-radius, large);
+		box-shadow: map.get($brandui-shadow, outline);
 		display: flex;
 		flex-direction: column;
 		gap: map.get($brandui-padding, medium);
-
-		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+		@include glass.bg-glass;
+		@include glass.border-glass;
 
 		.company-info {
 			display: flex;
@@ -70,8 +74,7 @@
 				gap: map.get($brandui-padding, small);
 				border-bottom-width: 0.0625rem;
 				border-bottom-style: solid;
-
-				@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
+				@include color.color-mode(border-bottom-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
 			}
 		}
 

package/dist/scss/evo/_components.scss

@@ -40,6 +40,7 @@
 @use '../components/molecules/modal' as *;
 @use '../components/molecules/notification' as *;
 @use '../components/molecules/pagination' as *;
+@use '../components/molecules/share-this' as *;
 @use '../components/molecules/tables' as *;
 @use '../components/molecules/table-of-contents' as *;
 @use '../components/molecules/title-text' as *;
@@ -73,7 +74,6 @@
 @use './components/molecules/cards/card' as *;
 @use './components/molecules/text-grid-item' as *;
 @use './components/molecules/text-media' as *;
-@use './components/molecules/share-this' as *;
 @use './components/organisms/ctas/basic-cta' as *;
 @use './components/organisms/heroes/hero-title-text' as *;
 @use './components/organisms/footer' as *;

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

@@ -14,7 +14,6 @@ $evoui-font-size: (
 	page-title-small: 3.5rem,
 	hero-title-large: 4.375rem,
 	hero-title-small: 3.75rem,
-	section-title: 3rem,
 	section-title-small: 2.5rem,
 );
 $brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);

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

@@ -6,16 +6,6 @@
 @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),
@@ -25,22 +15,8 @@ $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 {
@@ -54,31 +30,6 @@ $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(
@@ -91,9 +42,6 @@ $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
@@ -107,49 +55,13 @@ $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/cards/_card.scss

@@ -6,10 +6,7 @@
 
 .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,21 +22,7 @@
 			}
 		}
 		&-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,7 +10,6 @@
 	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,18 +8,10 @@ $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,50 +5,6 @@ $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,7 +11,6 @@
 
 .button {
 	font-family: map.get($brandui-font-family, space-mono), monospace;
-	border-radius: map.get($brandui-radius, pill);
 
 	&.primary {
 		border-width: 0.0625rem;
@@ -51,15 +50,4 @@
 			@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,11 +17,6 @@
 			@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,18 +1,12 @@
-@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 {
@@ -59,10 +53,6 @@
 			}
 		}
 	}
-
-	&-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,6 +1,5 @@
 @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 *;
@@ -9,7 +8,6 @@
 .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,7 +2,6 @@
 @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,
@@ -39,16 +38,4 @@
 	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-tertiary'), brandui-color-labels('action-tertiary-dark'));
+			@include color.color-mode(color, brandui-color-labels('action-secondary'), brandui-color-labels('action-secondary-dark'));
 		}
 	}
 

package/package.json

@@ -1,14 +1,13 @@
 {
 	"name": "@snyk-mktg/brand-ui",
-	"version": "2.5.9-canary.2",
+	"version": "2.5.9",
 	"description": "The official style library for Snyk’s BrandUI Design System",
 	"scripts": {
 		"dev:css": "gulp devCss",
 		"build": "gulp",
 		"test": "jest",
 		"lint": "sass-lint -v",
-		"lint:fix": "sass-lint-auto-fix",
-		"compile": "rm -rf dist/js && tsc -p tsconfig.build.json && tsc -p tsconfig.build.json --module CommonJs --moduleResolution node --outDir dist/js/cjs"
+		"lint:fix": "sass-lint-auto-fix"
 	},
 	"type": "module",
 	"repository": {

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

@@ -1,44 +0,0 @@
-@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));
-		}
-	}
-}