@internetstiftelsen/styleguide 4.1.13 → 5.0.1

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

@@ -1,4 +1,12 @@
 @charset "UTF-8";
+@use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/baseline/plumber' as plumber;
 
 // NOTE: this compnent is dependant on the glider.scss component
 // The Glider components is dependant on JS-classes and is therefore not namespaced
@@ -9,88 +17,88 @@
 	align-items: center;
 	margin: 0;
 
-	@include e(text) {
+	@include bem.e(text) {
 		position: absolute;
-		top: rhythm(2);
-		left: rhythm(2);
-		z-index: z_index(background);
-		padding-right: rhythm(2);
+		top: func.rhythm(2);
+		left: func.rhythm(2);
+		z-index: func.z_index(background);
+		padding-right: func.rhythm(2);
 		max-width: 95%;
 
-		@include bp-up(sm-xs) {
-			top: rhythm(3);
-			left: rhythm(3);
-			padding-right: rhythm(3);
+		@include breakpoint.bp-up(sm-xs) {
+			top: func.rhythm(3);
+			left: func.rhythm(3);
+			padding-right: func.rhythm(3);
 			max-width: 90%;
 		}
 
 
-		@include bp-up(sm) {
-			top: rhythm(4);
-			left: rhythm(4);
-			padding-right: rhythm(4);
+		@include breakpoint.bp-up(sm) {
+			top: func.rhythm(4);
+			left: func.rhythm(4);
+			padding-right: func.rhythm(4);
 			max-width: 80%;
 		}
 
-		@include bp-up(md) {
-			top: rhythm(6);
-			left: rhythm(6);
-			padding-right: rhythm(6);
+		@include breakpoint.bp-up(md) {
+			top: func.rhythm(6);
+			left: func.rhythm(6);
+			padding-right: func.rhythm(6);
 			max-width: 70%;
 		}
 
-		@include bp-up(lg) {
-			top: rhythm(7);
-			left: rhythm(7);
+		@include breakpoint.bp-up(lg) {
+			top: func.rhythm(7);
+			left: func.rhythm(7);
 			padding-right: 0;
 			max-width: 60%;
 		}
 
-		@include bp-up(xl) {
-			top: rhythm(8);
-			left: rhythm(8);
+		@include breakpoint.bp-up(xl) {
+			top: func.rhythm(8);
+			left: func.rhythm(8);
 		}
 
 		> h1 {
-			color: $color-snow;
+			color: colors.$color-snow;
 
 			> span {
 				background-color: rgba(0,0,0,0.6);
 			}
 
-			@include plumber(
-				$font-size: 2,
+			@include plumber.plumber(
+				var.$font-size: 2,
 				$line-height: 3,
 				$leading-bottom: 1
 			);
 
-			@include bp-up(sm) {
-				@include plumber(
-					$font-size: 2.3,
+			@include breakpoint.bp-up(sm) {
+				@include plumber.plumber(
+					var.$font-size: 2.3,
 					$line-height: 3,
 					$leading-bottom: 1
 				);
 			}
 
-			@include bp-up(md) {
-				@include plumber(
-					$font-size: 3,
+			@include breakpoint.bp-up(md) {
+				@include plumber.plumber(
+					var.$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 2
 				);
 			}
 
-			@include bp-up(lg) {
-				@include plumber(
-					$font-size: 4,
+			@include breakpoint.bp-up(lg) {
+				@include plumber.plumber(
+					var.$font-size: 4,
 					$line-height: 5,
 					$leading-bottom: 2
 				);
 			}
 
-			@include bp-up(xl) {
-				@include plumber(
-					$font-size: 5,
+			@include breakpoint.bp-up(xl) {
+				@include plumber.plumber(
+					var.$font-size: 5,
 					$line-height: 6,
 					$leading-bottom: 3
 				);
@@ -98,34 +106,34 @@
 		}
 
 		> p {
-			color: $color-snow;
+			color: colors.$color-snow;
 
 			> span {
 				background-color: rgba(0,0,0,0.6);
 			}
 
-			@include plumber(
-				$font-size: 1.5,
+			@include plumber.plumber(
+				var.$font-size: 1.5,
 				$line-height: 2,
 			);
 
-			@include bp-up(sm) {
-				@include plumber(
-					$font-size: 2,
+			@include breakpoint.bp-up(sm) {
+				@include plumber.plumber(
+					var.$font-size: 2,
 					$line-height: 3,
 				);
 			}
 
-			@include bp-up(lg) {
-				@include plumber(
-					$font-size: 2.5,
+			@include breakpoint.bp-up(lg) {
+				@include plumber.plumber(
+					var.$font-size: 2.5,
 					$line-height: 3,
 				);
 			}
 
-			@include bp-up(xl) {
-				@include plumber(
-					$font-size: 3,
+			@include breakpoint.bp-up(xl) {
+				@include plumber.plumber(
+					var.$font-size: 3,
 					$line-height: 4,
 				);
 			}
@@ -144,7 +152,7 @@
 .glider-slide {
 	width: 100vw;
 
-	@include m(hero) {
+	@include bem.m(hero) {
 		margin: 0;
 		padding: 0;
 		position: relative;
@@ -157,30 +165,30 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%);
+			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
 		}
 
-		@include e(image) {
+		@include bem.e(image) {
 			display: block;
 			object-fit: cover;
 			object-position: 50% 50%;
 			width: 100%;
 			height: 100%;
 
-			@include bp-up(sm) {
-				min-height: rem(500px);
+			@include breakpoint.bp-up(sm) {
+				min-height: func.to_rem(500px);
 				max-height: 75vh;
 			}
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			position: absolute;
 			z-index: 1;
-			bottom: rhythm(2);
-			left: rhythm(2);
-			padding-right: rhythm(2);
-			color: $color-snow;
-			font-family: $font-family-bold;
+			bottom: func.rhythm(2);
+			left: func.rhythm(2);
+			padding-right: func.rhythm(2);
+			color: colors.$color-snow;
+			font-family: var.$font-family-bold;
 			max-width: 95%;
 
 			> span {
@@ -192,7 +200,7 @@
 
 					&:hover {
 						text-decoration: none;
-						color: $color-cyberspace !important;
+						color: colors.$color-cyberspace !important;
 						text-shadow: none;
 					}
 
@@ -202,7 +210,7 @@
 						z-index: -1;
 						width: 100%;
 						height: 100%;
-						background-color: $color-snow;
+						background-color: colors.$color-snow;
 						bottom: 0;
 						left: 0;
 						transform-origin: right;
@@ -217,72 +225,72 @@
 				}
 			}
 
-			@include plumber(
-				$font-size: 2.3,
+			@include plumber.plumber(
+				var.$font-size: 2.3,
 				$line-height: 3,
 				$leading-bottom: 0,
-				$baseline: $headings-baseline
+				$baseline: var.$headings-baseline
 			);
 
-			@include bp-up(sm-xs) {
-				bottom: rhythm(3);
-				left: rhythm(3);
-				padding-right: rhythm(3);
+			@include breakpoint.bp-up(sm-xs) {
+				bottom: func.rhythm(3);
+				left: func.rhythm(3);
+				padding-right: func.rhythm(3);
 				max-width: 90%;
 
-				@include plumber(
-					$font-size: 3,
+				@include plumber.plumber(
+					var.$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 0
 				);
 			}
 
 
-			@include bp-up(sm) {
-				bottom: rhythm(4);
-				left: rhythm(4);
-				padding-right: rhythm(4);
+			@include breakpoint.bp-up(sm) {
+				bottom: func.rhythm(4);
+				left: func.rhythm(4);
+				padding-right: func.rhythm(4);
 				max-width: 80%;
 
-				@include plumber(
-					$font-size: 4,
+				@include plumber.plumber(
+					var.$font-size: 4,
 					$line-height: 5,
 					$leading-bottom: 0
 				);
 			}
 
-			@include bp-up(md) {
-				bottom: rhythm(6);
-				left: rhythm(6);
-				padding-right: rhythm(6);
+			@include breakpoint.bp-up(md) {
+				bottom: func.rhythm(6);
+				left: func.rhythm(6);
+				padding-right: func.rhythm(6);
 				max-width: 70%;
 
-				@include plumber(
-					$font-size: 5,
+				@include plumber.plumber(
+					var.$font-size: 5,
 					$line-height: 6,
 					$leading-bottom: 0
 				);
 			}
 
-			@include bp-up(lg) {
-				bottom: rhythm(7);
-				left: rhythm(7);
+			@include breakpoint.bp-up(lg) {
+				bottom: func.rhythm(7);
+				left: func.rhythm(7);
 				padding-right: 0;
 				max-width: 60%;
 
-				@include plumber(
-					$font-size: 6,
+				@include plumber.plumber(
+					var.$font-size: 6,
 					$line-height: 8,
 					$leading-bottom: 0
 				);
 			}
 
-			@include bp-up(xl) {
-				bottom: rhythm(8);
-				left: rhythm(8);
+			@include breakpoint.bp-up(xl) {
+				bottom: func.rhythm(8);
+				left: func.rhythm(8);
 
-				@include plumber(
-					$font-size: 7,
+				@include plumber.plumber(
+					var.$font-size: 7,
 					$line-height: 9,
 					$leading-bottom: 0
 				);
@@ -294,11 +302,11 @@
 .glider-nav {
 	transform: scale(0.7) translateY(-100%);
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		transform: scale(1) translateY(-50%);
 	}
 
-	@include m(hero) {
+	@include bem.m(hero) {
 		&.disabled {
 			display: none;
 		}
@@ -306,24 +314,24 @@
 		&.glider-prev {
 			left: 0;
 
-			@include bp-up(md) {
-				left: rhythm(1);
+			@include breakpoint.bp-up(md) {
+				left: func.rhythm(1);
 			}
 
-			@include bp-up(lg) {
-				left: rhythm(2);
+			@include breakpoint.bp-up(lg) {
+				left: func.rhythm(2);
 			}
 		}
 
 		&.glider-next {
 			right: 0;
 
-			@include bp-up(md) {
-				right: rhythm(1);
+			@include breakpoint.bp-up(md) {
+				right: func.rhythm(1);
 			}
 
-			@include bp-up(lg) {
-				right: rhythm(2);
+			@include breakpoint.bp-up(lg) {
+				right: func.rhythm(2);
 			}
 		}
 	}

package/src/molecules/glider/_glider.scss

@@ -1,5 +1,11 @@
 @charset "UTF-8";
 @use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
 
 // The Glider components is dependant on JS-classes and is therefore not namespaced
 
@@ -7,10 +13,10 @@
 	display: flex;
 	position: relative;
 	align-items: center;
-	margin-top: rhythm(2);
-	margin-bottom: rhythm(2);
-	padding-right: rhythm(8);
-	padding-left: rhythm(8);
+	margin-top: func.rhythm(2);
+	margin-bottom: func.rhythm(2);
+	padding-right: func.rhythm(8);
+	padding-left: func.rhythm(8);
 }
 
 .glider {
@@ -26,7 +32,7 @@
 		cursor: grab;
 		user-select: none;
 
-		@include b(glider-slide) {
+		@include bem.b(glider-slide) {
 			img {
 				pointer-events: none;
 				user-select: none;
@@ -55,31 +61,31 @@
 	width: 100%;
 	min-width: 150px;
 	margin-left: 1px;
-	padding: rhythm(2) 0;
+	padding: func.rhythm(2) 0;
 	overflow: hidden;
 
 	img:not([class]) {
 		display: block;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		width: 100%;
 	}
 
-	@include bp-only(sm) {
-		padding-right: rhythm(2);
-		padding-left: rhythm(2);
+	@include breakpoint.bp-only(sm) {
+		padding-right: func.rhythm(2);
+		padding-left: func.rhythm(2);
 	}
 
-	@include bp-up(lg) {
-		padding-right: rhythm(3);
-		padding-left: rhythm(3);
+	@include breakpoint.bp-up(lg) {
+		padding-right: func.rhythm(3);
+		padding-left: func.rhythm(3);
 	}
 
-	@include m(stretch-items) {
+	@include bem.m(stretch-items) {
 		display: flex;
 		align-items: stretch;
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		&:not(.active) {
 			&::after {
 				content: '';
@@ -88,7 +94,7 @@
 				bottom: 0;
 				left: 0;
 				width: 1px;
-				background-color: $color-concrete;
+				background-color: colors.$color-concrete;
 			}
 		}
 	}
@@ -98,14 +104,14 @@
 	position: absolute;
 	top: 50%;
 	left: 0;
-	z-index: z_index(middleground);
+	z-index: func.z_index(middleground);
 	transform: translateY(-50%);
 	transition: background-color 0.25s ease-out;
 	user-select: none;
 	cursor: pointer;
 
 	&:focus {
-		background-color: $color-snow;
+		background-color: colors.$color-snow;
 	}
 
 	svg {
@@ -114,18 +120,18 @@
 	}
 
 	&.disabled {
-		background-color: $color-ash;
-		box-shadow: 0 2px 5px color.adjust($color-granit, $lightness: 25%);
+		background-color: colors.$color-ash;
+		box-shadow: 0 2px 5px color.adjust(colors.$color-granit, $lightness: 25%);
 		pointer-events: none;
 
 		svg {
 			opacity: 0.2;
-			fill: $color-cyberspace;
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include bp-up(sm) {
-		left: rhythm(1);
+	@include breakpoint.bp-up(sm) {
+		left: func.rhythm(1);
 	}
 }
 
@@ -133,8 +139,8 @@
 	right: 0;
 	left: auto;
 
-	@include bp-up(sm) {
-		right: rhythm(1);
+	@include breakpoint.bp-up(sm) {
+		right: func.rhythm(1);
 	}
 }
 
@@ -168,20 +174,20 @@
 
 .glider-dot {
 	display: block;
-	width: rem(14px);
-	height: rem(14px);
-	margin: rhythm(0.5);
+	width: func.to_rem(14px);
+	height: func.to_rem(14px);
+	margin: func.rhythm(0.5);
 	padding: 0;
 	border: 0;
 	border-radius: 50%;
 	outline: none;
-	background: $color-concrete;
+	background: colors.$color-concrete;
 	cursor: pointer;
 	user-select: none;
 
 	&:hover,
 	&:focus,
 	&.active {
-		background: $color-cyberspace;
+		background: colors.$color-cyberspace;
 	}
 }

package/src/molecules/glider/glider-hero.js

@@ -1,12 +1,10 @@
 import Glider from 'glider-js';
 import nodeAdded from '../../assets/js/nodeAdded';
-
-// eslint-disable-next-line import/prefer-default-export
 export function initHeroGlider(node) {
 	if (node.hasAttribute('data-glider-initialized')) {
 		return;
 	}
-	// eslint-disable-next-line no-underscore-dangle
+
 	const dataLayer = window._mtm || [];
 	const gliderLinks = document.querySelectorAll('.glider-slide a');
 

package/src/molecules/glider/glider.config.js

@@ -26,4 +26,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/molecules/icon-overlay/_icon-overlay.scss

@@ -1,10 +1,19 @@
 @charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/grid/grid' as grid;
 
-@include molecule(icon-overlay) {
+@include mixin.molecule(icon-overlay) {
 	position: relative;
 	width: 100%;
 	overflow: hidden;
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 
 	> img {
 		display: block;
@@ -26,13 +35,13 @@
 		left: 0;
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		position: absolute;
 		z-index: 3;
 		top: 50%;
 		left: 50%;
-		width: rhythm(7);
-		height: rhythm(7);
+		width: func.rhythm(7);
+		height: func.rhythm(7);
 		padding: 0;
 		transform: translateX(-50%) translateY(-50%);
 		border: 0;
@@ -41,30 +50,30 @@
 		&:hover,
 		&:focus {
 			> svg {
-				fill: $color-concrete;
+				fill: colors.$color-concrete;
 			}
 		}
 
-		@include bp-up(sm) {
-			width: rhythm(10);
-			height: rhythm(10);
+		@include breakpoint.bp-up(sm) {
+			width: func.rhythm(10);
+			height: func.rhythm(10);
 		}
 	}
 
-	@include e(icon) {
-		width: rhythm(7);
-		height: rhythm(7);
-		fill: $color-snow;
+	@include bem.e(icon) {
+		width: func.rhythm(7);
+		height: func.rhythm(7);
+		fill: colors.$color-snow;
 		filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
 		cursor: pointer;
 
-		@include bp-up(sm) {
-			width: rhythm(10);
-			height: rhythm(10);
+		@include breakpoint.bp-up(sm) {
+			width: func.rhythm(10);
+			height: func.rhythm(10);
 		}
 	}
 
-	@include e(message) {
+	@include bem.e(message) {
 		display: flex;
 		flex-direction: column;
 		position: absolute;
@@ -76,8 +85,8 @@
 		align-items: center;
 		justify-content: center;
 		text-align: center;
-		background: $color-concrete;
-		padding-left: rhythm(2);
-		padding-right: rhythm(2);
+		background: colors.$color-concrete;
+		padding-left: func.rhythm(2);
+		padding-right: func.rhythm(2);
 	}
 }

package/src/molecules/icon-overlay/icon-overlay.config.js

@@ -8,4 +8,4 @@ module.exports = {
 		overlay_icon: "play",
 		additional_classes: false
 	}
-}
+};