@internetstiftelsen/styleguide 5.0.4 → 5.0.6-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "5.0.4",
+	"version": "5.0.6-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/button/_button.scss

@@ -354,8 +354,7 @@
 		}
 
 		@include bem.e(text) {
-			color: colors.$color-snow;
-			text-shadow: 0 0 func.rhythm(2) colors.$color-jade-dark;
+			color: colors.$color-cyberspace;
 		}
 
 		@include bem.e(icon) {
@@ -451,7 +450,7 @@
 
 		@include bem.e(text) {
 			color: colors.$color-snow;
-			text-shadow: 0 0 func.rhythm(2) colors.$color-peacock-dark;
+			text-shadow: 0 0 func.rhythm(1) colors.$color-peacock-dark;
 		}
 
 		@include bem.e(icon) {

package/src/atoms/main-menu/_main-menu.scss

@@ -73,7 +73,6 @@
 			background-color: transparent;
 			color: var(--cyberspace-color);
 			font-family: var.$font-family-medium;
-			font-size: func.to_rem(var.$size-small);
 			text-decoration: none;
 			-webkit-appearance: none;
 			line-height: 1;

package/src/atoms/meta/_meta.scss

@@ -20,7 +20,7 @@
 	white-space: nowrap;
 
 	@include plumber.plumber(
-		var.$font-size: 1.7,
+		$font-size: 1.7,
 		$baseline: var.$mono-baseline,
 		$leading-bottom: 0
 	);
@@ -63,14 +63,14 @@
 
 	@include bem.m(responsive) {
 		@include plumber.plumber(
-			var.$font-size: 1.4,
+			$font-size: 1.4,
 			$baseline: var.$mono-baseline,
 			$leading-bottom: 0
 		);
 
 		@include breakpoint.bp-up(md) {
 			@include plumber.plumber(
-				var.$font-size: 1.6,
+				$font-size: 1.6,
 				$baseline: var.$mono-baseline,
 				$leading-bottom: 0
 			);
@@ -78,7 +78,7 @@
 
 		@include breakpoint.bp-up(lg) {
 			@include plumber.plumber(
-				var.$font-size: 1.7,
+				$font-size: 1.7,
 				$baseline:var.$mono-baseline,
 				$leading-bottom: 0
 			);

package/src/atoms/textarea/_textarea.scss

@@ -47,7 +47,7 @@
 			ul,
 			ol {
 				@include plumber.plumber(
-					var.$font-size: 1.75,
+					$font-size: 1.75,
 					$leading-bottom: 2
 				);
 			}

package/src/configurations/_wordpress.scss

@@ -58,7 +58,7 @@ div.aligncenter {
 
 	figcaption {
 		@include plumber.plumber(
-			var.$font-size: 1.7,
+			$font-size: 1.7,
 			$line-height: 2,
 			$leading-bottom: 0
 		);
@@ -161,7 +161,7 @@ div.aligncenter {
 .wp-block-embed {
 	figcaption {
 		@include plumber.plumber(
-			var.$font-size: 1.5,
+			$font-size: 1.5,
 			$line-height: 2,
 			$leading-bottom: 0
 		);

package/src/configurations/typography/_typography.scss

@@ -12,7 +12,7 @@ h1,
 .alpha,
 %alpha {
 	@include plumber.plumber(
-		var.$font-size: 3,
+		$font-size: 3,
 		$line-height: 4,
 		$leading-bottom: 2,
 		$baseline: var.$headings-baseline
@@ -22,7 +22,7 @@ h1,
 
 	@include breakpoint.bp-up(sm) {
 		@include plumber.plumber(
-			var.$font-size: 4,
+			$font-size: 4,
 			$line-height: 5,
 			$leading-bottom: 1,
 			$baseline: var.$headings-baseline
@@ -34,7 +34,7 @@ h2,
 .beta,
 %beta {
 	@include plumber.plumber(
-		var.$font-size: 2.44444,
+		$font-size: 2.44444,
 		$line-height: 3,
 		$leading-bottom: 1,
 		$baseline: var.$headings-baseline
@@ -44,7 +44,7 @@ h2,
 
 	@include breakpoint.bp-up(sm) {
 		@include plumber.plumber(
-			var.$font-size: 2.666666,
+			$font-size: 2.666666,
 			$leading-bottom: 1
 		);
 
@@ -56,7 +56,7 @@ h3,
 .gamma,
 %gamma {
 	@include plumber.plumber(
-		var.$font-size: 2.22222,
+		$font-size: 2.22222,
 		$line-height: 3,
 		$leading-top: 0,
 		$leading-bottom: 1
@@ -69,7 +69,7 @@ h4,
 .delta,
 %delta {
 	@include plumber.plumber(
-		var.$font-size: 1.888888,
+		$font-size: 1.888888,
 		$line-height: 3,
 		$leading-top: 0,
 		$leading-bottom: 1
@@ -149,7 +149,7 @@ dl {
 .small,
 small {
 	@include plumber.plumber(
-		var.$font-size: 1.5,
+		$font-size: 1.5,
 		$line-height: 2,
 		$leading-bottom: 0
 	);
@@ -158,7 +158,7 @@ small {
 .supersize,
 %supersize {
 	@include plumber.plumber(
-		var.$font-size: 3,
+		$font-size: 3,
 		$line-height: 4,
 		$leading-bottom: 1,
 		$baseline: var.$headings-baseline
@@ -168,7 +168,7 @@ small {
 
 	@include breakpoint.bp-up(sm) {
 		@include plumber.plumber(
-			var.$font-size: 4.5,
+			$font-size: 4.5,
 			$line-height: 5,
 			$leading-bottom: 1
 		);
@@ -176,7 +176,7 @@ small {
 
 	@include breakpoint.bp-up(md) {
 		@include plumber.plumber(
-			var.$font-size: 7,
+			$font-size: 7,
 			$line-height: 8,
 			$leading-bottom: 2
 		);
@@ -188,7 +188,7 @@ small {
 		overflow-wrap: break-word;
 
 		@include plumber.plumber(
-			var.$font-size: 4.5,
+			$font-size: 4.5,
 			$line-height: 5,
 			$leading-bottom: 1
 		);
@@ -198,7 +198,7 @@ small {
 			overflow-wrap: normal;
 
 			@include plumber.plumber(
-				var.$font-size: 7,
+				$font-size: 7,
 				$line-height: 8,
 				$leading-bottom: 2
 			);
@@ -259,14 +259,14 @@ small {
 %preamble {
 
 	@include plumber.plumber(
-		var.$font-size: 2.55555,
+		$font-size: 2.55555,
 		$line-height: 4,
 		$leading-bottom: 4
 	);
 
 	@include breakpoint.bp-up(sm) {
 		@include plumber.plumber(
-			var.$font-size: 3,
+			$font-size: 3,
 			$line-height: 4,
 			$leading-bottom: 4
 		);
@@ -275,7 +275,7 @@ small {
 
 .meta {
 	@include plumber.plumber(
-		var.$font-size: 1.75,
+		$font-size: 1.75,
 		$baseline: var.$mono-baseline
 	);
 
@@ -321,7 +321,7 @@ blockquote {
 
 	p {
 		@include plumber.plumber(
-			var.$font-size: 2.5,
+			$font-size: 2.5,
 			$line-height: 3,
 			$leading-top: 1,
 			$leading-bottom: 0,
@@ -346,7 +346,7 @@ blockquote {
 
 	.meta {
 		@include plumber.plumber(
-			var.$font-size: 1.75,
+			$font-size: 1.75,
 			$leading-bottom: 0
 		);
 
@@ -367,7 +367,7 @@ blockquote {
 
 		p {
 			@include plumber.plumber(
-				var.$font-size: 2.7,
+				$font-size: 2.7,
 				$line-height: 4,
 				$leading-bottom: 0,
 				$leading-top: 1

package/src/molecules/glider/_glider-hero.scss

@@ -67,14 +67,14 @@
 			}
 
 			@include plumber.plumber(
-				var.$font-size: 2,
+				$font-size: 2,
 				$line-height: 3,
 				$leading-bottom: 1
 			);
 
 			@include breakpoint.bp-up(sm) {
 				@include plumber.plumber(
-					var.$font-size: 2.3,
+					$font-size: 2.3,
 					$line-height: 3,
 					$leading-bottom: 1
 				);
@@ -82,7 +82,7 @@
 
 			@include breakpoint.bp-up(md) {
 				@include plumber.plumber(
-					var.$font-size: 3,
+					$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 2
 				);
@@ -90,7 +90,7 @@
 
 			@include breakpoint.bp-up(lg) {
 				@include plumber.plumber(
-					var.$font-size: 4,
+					$font-size: 4,
 					$line-height: 5,
 					$leading-bottom: 2
 				);
@@ -98,7 +98,7 @@
 
 			@include breakpoint.bp-up(xl) {
 				@include plumber.plumber(
-					var.$font-size: 5,
+					$font-size: 5,
 					$line-height: 6,
 					$leading-bottom: 3
 				);
@@ -113,27 +113,27 @@
 			}
 
 			@include plumber.plumber(
-				var.$font-size: 1.5,
+				$font-size: 1.5,
 				$line-height: 2,
 			);
 
 			@include breakpoint.bp-up(sm) {
 				@include plumber.plumber(
-					var.$font-size: 2,
+					$font-size: 2,
 					$line-height: 3,
 				);
 			}
 
 			@include breakpoint.bp-up(lg) {
 				@include plumber.plumber(
-					var.$font-size: 2.5,
+					$font-size: 2.5,
 					$line-height: 3,
 				);
 			}
 
 			@include breakpoint.bp-up(xl) {
 				@include plumber.plumber(
-					var.$font-size: 3,
+					$font-size: 3,
 					$line-height: 4,
 				);
 			}
@@ -226,7 +226,7 @@
 			}
 
 			@include plumber.plumber(
-				var.$font-size: 2.3,
+				$font-size: 2.3,
 				$line-height: 3,
 				$leading-bottom: 0,
 				$baseline: var.$headings-baseline
@@ -239,7 +239,7 @@
 				max-width: 90%;
 
 				@include plumber.plumber(
-					var.$font-size: 3,
+					$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 0
 				);
@@ -253,7 +253,7 @@
 				max-width: 80%;
 
 				@include plumber.plumber(
-					var.$font-size: 4,
+					$font-size: 4,
 					$line-height: 5,
 					$leading-bottom: 0
 				);
@@ -266,7 +266,7 @@
 				max-width: 70%;
 
 				@include plumber.plumber(
-					var.$font-size: 5,
+					$font-size: 5,
 					$line-height: 6,
 					$leading-bottom: 0
 				);
@@ -279,7 +279,7 @@
 				max-width: 60%;
 
 				@include plumber.plumber(
-					var.$font-size: 6,
+					$font-size: 6,
 					$line-height: 8,
 					$leading-bottom: 0
 				);
@@ -290,7 +290,7 @@
 				left: func.rhythm(8);
 
 				@include plumber.plumber(
-					var.$font-size: 7,
+					$font-size: 7,
 					$line-height: 9,
 					$leading-bottom: 0
 				);

package/src/molecules/system-error/_system-error.scss

@@ -29,7 +29,7 @@
 	@include bem.e(heading) {
 
 		@include plumber.plumber(
-			var.$font-size: 10,
+			$font-size: 10,
 			$line-height: 11,
 			$leading-bottom: 2
 		);
@@ -41,7 +41,7 @@
 		@include breakpoint.bp-up(md) {
 
 			@include plumber.plumber(
-				var.$font-size: 15,
+				$font-size: 15,
 				$line-height: 16,
 				$leading-bottom: 4
 			);

package/src/organisms/event-listing-item/_event-listing-item.scss

@@ -18,10 +18,6 @@
 	background-color: colors.$color-snow;
 	font-size: var.$size-medium-plus;
 
-	@include bem.e(button) {
-
-	}
-
 	@include breakpoint.bp-up(md) {
 		font-size: var.$size-base;
 	}
@@ -40,7 +36,7 @@
 
 	@include bem.e(heading) {
 		@include plumber.plumber(
-			var.$font-size: 2.5,
+			$font-size: 2.5,
 			$leading-bottom: 1
 		);
 

package/src/organisms/footer/_footer.scss

@@ -84,7 +84,7 @@ $footer-font-size: 18px; /* To ensure all footers on all sites have the same fon
 				@extend %normalize-links;
 
 				color: colors.$color-jade;
-				text-decoration: none;
+				text-decoration: underline;
 
 				&:hover,
 				&:focus {
@@ -310,7 +310,7 @@ $footer-font-size: 18px; /* To ensure all footers on all sites have the same fon
 					max-width: 300px;
 
 					@include plumber.plumber(
-						var.$font-size: 1.7,
+						$font-size: 1.7,
 						$line-height: 2
 					);
 				}

package/src/organisms/hero/_hero.scss

@@ -76,7 +76,7 @@
 		color: colors.$color-cyberspace;
 
 		@include plumber.plumber(
-			var.$font-size: 2.5,
+			$font-size: 2.5,
 			$line-height: 3
 		);
 
@@ -168,7 +168,7 @@
 
 		> p {
 			@include plumber.plumber(
-				var.$font-size: 2.5,
+				$font-size: 2.5,
 				$line-height: 3
 			);
 		}
@@ -321,7 +321,7 @@
 			@include breakpoint.bp-only(lg) {
 				.supersize {
 					@include plumber.plumber(
-						var.$font-size: 6,
+						$font-size: 6,
 						$line-height: 7,
 						$leading-bottom: 2
 					);
@@ -464,7 +464,7 @@
 
 				.supersize {
 					@include plumber.plumber(
-						var.$font-size: 4.5,
+						$font-size: 4.5,
 						$line-height: 5,
 						$leading-bottom: 1
 					);
@@ -484,7 +484,7 @@
 
 				.supersize {
 					@include plumber.plumber(
-						var.$font-size: 7,
+						$font-size: 7,
 						$line-height: 8,
 						$leading-bottom: 2
 					);

package/src/organisms/mega-menu/_mega-menu.scss

@@ -13,11 +13,11 @@
 $border-color: color.adjust(colors.$color-jade, $lightness: -5%);
 
 @include mixin.organism(mega-menu) {
-	z-index: func.z_index(middlegroundImportant);
+	z-index: z_index(middlegroundImportant);
 	padding-right: 0;
 	padding-left: 0;
 	transition: transform 0.25s ease-out;
-	background-color: colors.$color-jade-light;
+	background-color: currentColor;
 
 	&[aria-hidden='true'] {
 		display: none;
@@ -43,35 +43,182 @@ $border-color: color.adjust(colors.$color-jade, $lightness: -5%);
 	}
 
 	@include bem.e(wrapper) {
-		padding-top: func.rhythm(3);
-
 		@include breakpoint.bp-down(md) {
 			padding-right: func.rhythm(1);
 			padding-left: func.rhythm(1);
+			border-bottom: 1px solid currentColor;
+		}
+
+		@include breakpoint.bp-up(lg) {
+			padding-top: func.rhythm(3);
+		}
+	}
+
+	@include bem.e(column) {
+		padding-bottom: func.rhythm(2);
+
+		@include breakpoint.bp-down(md) {
+			padding-left: 0;
+			padding-right: 0;
+			padding-bottom: 0;
+		}
+	}
+
+	@include bem.e(buttons-list) {
+		display: flex;
+		align-items: stretch;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		@include bem.e(item) {
+			width: 50%;
+			flex-grow: 1;
+			flex-shrink: 0;
+			margin: 0;
+			padding: 0;
+
+			& + & {
+				border-left: 1px solid currentColor;
+			}
+		}
+
+		@include bem.e(link) {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-top: func.rhythm(2);
+			padding-bottom: func.rhythm(2);
+			text-align: center;
+			color: colors.$color-cyberspace;
+			text-decoration: none;
+			font-family: var.$font-family-headings;
+			border: 0;
+			background-color: transparent;
+			appearance: none;
+			width: 100%;
+			height: 100%;
+
+			&[aria-expanded='true'] {
+				background-color: currentColor;
+			}
+
+			svg {
+				width: var.$icon-size-large * 1.25;
+				height: var.$icon-size-large * 1.25;
+				margin-bottom: func.rhythm(1);
+				pointer-events: none;
+			}
+
+			span {
+				pointer-events: none;
+			}
+		}
+
+		@include breakpoint.bp-up(lg) {
+			display: none;
+		}
+	}
+
+	@include bem.e(search-container) {
+		background-color: currentcolor;
+		padding-top: func.rhythm(2);
+		padding-bottom: func.rhythm(2);
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+	}
+
+	@include bem.e(topic) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-top: 1px solid currentColor;
+
+		@include breakpoint.bp-up(lg) {
+			background-color: transparent;
+			border-top: 0;
+			margin-bottom: func.rhythm(1);
+		}
+	}
+
+	@include bem.e(topic-button) {
+		margin-left: auto;
+		align-self: stretch;
+		padding-left: func.rhythm(1.5);
+		padding-right: func.rhythm(1.5);
+		border-left: 1px solid currentColor;
+
+		@include breakpoint.bp-up(lg) {
+			display: none;
+			pointer-events: none;
+		}
+
+		&[aria-expanded='true'] {
+			background-color: currentColor;
+
+			svg {
+				transform: rotate(-180deg);
+			}
 		}
 	}
 
 	@include bem.e(list) {
-		margin-top: func.rhythm(1);
+		margin-top: 0;
+		background-color: currentColor;
+		margin-bottom: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+
+		@include breakpoint.bp-up(lg) {
+			margin-top: func.rhythm(1);
+			background-color: transparent;
+			border-bottom: 0;
+
+			&[aria-hidden='true'] {
+				display: initial;
+			}
+		}
 
 		@include bem.e(topic) {
-			margin-top: func.rhythm(2);
-			margin-bottom: func.rhythm(0.5);
-			padding: func.rhythm(1) func.rhythm(1);
-			border-bottom: 1px solid $border-color;
+			margin-top: 0;
+			margin-bottom: 0;
+			border-bottom: 1px solid currentColor;
 			font-family: var.$font-family-headings;
 
-			&:first-child {
-				margin-top: 0;
+			> a {
+				padding: func.rhythm(1) func.rhythm(3.5);
+			}
+
+			@include breakpoint.bp-up(lg) {
+				margin-top: func.rhythm(2);
+				margin-bottom: func.rhythm(0.5);
+				padding: func.rhythm(1) func.rhythm(1);
+				border-bottom: 0;
+
+				> a {
+					padding: 0;
+				}
 			}
 		}
 
 		@include bem.e(item) {
-			margin: 0 0 func.rhythm(0.5) 0;
-			padding: func.rhythm(1) func.rhythm(1);
+			margin: 0;
+			border-bottom: 1px solid currentColor;
 
-			& + & {
-				border-top: 1px solid $border-color;
+			&:last-child {
+				border-bottom: 0;
+			}
+
+			@include breakpoint.bp-up(lg) {
+				padding: func.rhythm(1) func.rhythm(1);
+				margin-bottom: func.rhythm(0.5);
+				border-bottom: 0;
 			}
 		}
 
@@ -97,8 +244,14 @@ $border-color: color.adjust(colors.$color-jade, $lightness: -5%);
 	@include bem.e(link) {
 		display: inline-flex;
 		align-items: baseline;
+		width: 100%;
 		color: colors.$color-cyberspace;
 		text-decoration: none;
+		padding: func.rhythm(1) func.rhythm(3.5);
+
+		@include bem.m(sub-level) {
+			padding: func.rhythm(1) func.rhythm(5);
+		}
 
 		&:hover {
 			&:not(span) {
@@ -106,15 +259,20 @@ $border-color: color.adjust(colors.$color-jade, $lightness: -5%);
 			}
 		}
 
+		@include breakpoint.bp-up(lg) {
+			padding: 0;
+		}
+
 		@include bem.m(large) {
 			display: block;
-			padding: 0 func.rhythm(1);
+			width: 100%;
+			padding: func.rhythm(1.5) func.rhythm(2);
 			font-family: var.$font-family-headings;
-			font-size: func.to_rem(23px);
 			white-space: nowrap;
 
 			@include breakpoint.bp-up(lg) {
 				padding: 0;
+				font-size: func.to_rem(23px);
 			}
 		}
 

package/src/organisms/search/_search.scss

@@ -52,7 +52,6 @@
 
 		&:focus {
 			@extend %input-focus;
-
 			background-color: colors.$color-snow;
 		}
 

package/src/organisms/timeline/_timeline.scss

@@ -341,7 +341,7 @@ html {
 
 	@include bem.e(heading) {
 		@include plumber.plumber(
-			var.$font-size: 2,
+			$font-size: 2,
 			$line-height: 3,
 			$leading-top: 0,
 			$leading-bottom: 0,
@@ -350,7 +350,7 @@ html {
 
 		@include breakpoint.bp-up(sm) {
 			@include plumber.plumber(
-				var.$font-size: 2.2,
+				$font-size: 2.2,
 				$line-height: 3,
 				$leading-top: 0,
 				$leading-bottom: 0,

package/src/organisms/video-guide/_video-guide.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-@use "sass:color";
 @use '../../configurations/mixins' as mixin;
 @use '../../configurations/bem' as bem;
 @use '../../configurations/config' as config;
@@ -10,6 +8,7 @@
 @use '../../vendor/grid/breakpoints' as breakpoint;
 @use '../../vendor/grid/grid' as grid;
 @use '../../vendor/baseline/plumber' as plumber;
+@use 'sass:color';
 
 @include mixin.organism(video-guide) {
 	flex-direction: column;
@@ -82,7 +81,6 @@
 			text-align: center;
 			padding-left: func.rhythm(2);
 			padding-right: func.rhythm(2);
-
 			transform: translateY(-75%);
 
 			@include breakpoint.bp-up(md) {
@@ -108,7 +106,7 @@
 					func.to_rem(1px) func.to_rem(1px) func.to_rem(2px) rgba(colors.$color-black, 0.6);
 
 				@include plumber.plumber(
-					var.$font-size: 3,
+					$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 1,
 					$baseline: var.$headings-baseline
@@ -116,7 +114,7 @@
 
 				@include breakpoint.bp-up(sm) {
 					@include plumber.plumber(
-						var.$font-size: 4.5,
+						$font-size: 4.5,
 						$line-height: 5,
 						$leading-bottom: 1
 					);
@@ -124,7 +122,7 @@
 
 				@include breakpoint.bp-up(lg) {
 					@include plumber.plumber(
-						var.$font-size: 7,
+						$font-size: 7,
 						$line-height: 8,
 						$leading-bottom: 2
 					);