@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/molecules/cookie-disclaimer/cookie-disclaimer.scss

@@ -1,50 +1,59 @@
-@charset 'UTF-8';
-
-@include molecule(cookie-disclaimer) {
+@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 mixin.molecule(cookie-disclaimer) {
 	display: none;
 	position: relative;
-	z-index: z_index(foreground);
+	z-index: func.z_index(foreground);
 
 	&.is-visible {
 		display: block;
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		position: fixed;
 		right: 0;
 		bottom: 0;
 		left: 0;
 	}
 
-	@include e(wrapper) {
+	@include bem.e(wrapper) {
 		width: 100%;
 		margin-bottom: 0 !important;
-		padding: rhythm(2) 0;
+		padding: func.rhythm(2) 0;
 	}
 
-	@include e(inner) {
+	@include bem.e(inner) {
 		display: flex;
 		flex-wrap: wrap;
 		margin-right: auto;
 		margin-left: auto;
 
-		@include make-container-max-widths();
+		@include grid.make-container-max-widths();
 
-		@include bp-down(xl) {
-			padding-right: $grid-gutter-width;
-			padding-left: $grid-gutter-width;
+		@include breakpoint.bp-down(xl) {
+			padding-right: var.$grid-gutter-width;
+			padding-left: var.$grid-gutter-width;
 		}
 	}
 
-	@include e(inner-first) {
+	@include bem.e(inner-first) {
 		display: flex;
 		align-items: center;
 		width: 100%;
 
 		a {
 			padding: 0 0.25rem;
-			border-bottom: 0.11111rem solid $color-peacock;
-			color: $color-black;
+			border-bottom: 0.11111rem solid colors.$color-peacock;
+			color: colors.$color-black;
 			text-decoration: none;
 
 			&:hover,
@@ -53,32 +62,32 @@
 			}
 		}
 
-		@include bp-up(md) {
-			@include make-col(12);
+		@include breakpoint.bp-up(md) {
+			@include grid.make-col(12);
 
-			padding-right: rhythm(3);
+			padding-right: func.rhythm(3);
 		}
 	}
 
-	@include e(inner-second) {
+	@include bem.e(inner-second) {
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 		width: 100%;
-		padding-top: rhythm(2);
+		padding-top: func.rhythm(2);
 
 		button {
 			font-size: 18px;
 		}
 
-		@include bp-up(md) {
-			@include make-col(6);
+		@include breakpoint.bp-up(md) {
+			@include grid.make-col(6);
 
 			padding-top: 0;
 		}
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		margin-bottom: 0;
 	}
 }

package/src/molecules/download/_download.scss

@@ -1,21 +1,29 @@
-@charset 'UTF-8';
+@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;
 
-@include molecule(download) {
+@include mixin.molecule(download) {
 	position: relative;
-	padding: rhythm(2.5);
-	border: 1px solid $color-peacock;
-	border-radius: $border-radius;
+	padding: func.rhythm(2.5);
+	border: 1px solid colors.$color-peacock;
+	border-radius: var.$border-radius;
 	background-color: var(--snow-color);
 
-	@include e(link) {
+	@include bem.e(link) {
 		display: block;
-		margin-bottom: rhythm(1);
+		margin-bottom: func.rhythm(1);
 		color: currentcolor;
 		text-decoration: none;
 
 		&:hover,
 		&:focus {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 			text-decoration: underline;
 		}
 
@@ -23,7 +31,7 @@
 			content: '';
 			display: block;
 			position: absolute;
-			z-index: z_index(background);
+			z-index: func.z_index(background);
 			top: 0;
 			right: 0;
 			bottom: 0;
@@ -31,52 +39,52 @@
 		}
 	}
 
-	@include e(icon-file) {
-		margin-bottom: rhythm(1);
+	@include bem.e(icon-file) {
+		margin-bottom: func.rhythm(1);
 		line-height: 0;
 
-		@include bp-up(sm) {
-			margin-right: rhythm(0.5);
+		@include breakpoint.bp-up(sm) {
+			margin-right: func.rhythm(0.5);
 			margin-bottom: 0;
 		}
 	}
 
-	@include e(icon-download) {
+	@include bem.e(icon-download) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: rhythm(3.5);
-		height: rhythm(3.5);
-		margin-left: rhythm(1);
-		border-radius: $border-radius;
-		background-color: $color-peacock-light;
+		width: func.rhythm(3.5);
+		height: func.rhythm(3.5);
+		margin-left: func.rhythm(1);
+		border-radius: var.$border-radius;
+		background-color: colors.$color-peacock-light;
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		white-space: nowrap;
 	}
 
-	@include b(icon) {
-		width: rem(57px);
-		height: rem(78px);
+	@include bem.b(icon) {
+		width: func.to_rem(57px);
+		height: func.to_rem(78px);
 		color: var(--cyberspace-color);
 		fill: currentColor;
 	}
 
-	@include e(trigger) {
-		margin-top: rhythm(1);
+	@include bem.e(trigger) {
+		margin-top: func.rhythm(1);
 		margin-left: 0;
 
-		@include b(icon) {
-			width: $icon-size-medium;
-			height: $icon-size-medium;
+		@include bem.b(icon) {
+			width: var.$icon-size-medium;
+			height: var.$icon-size-medium;
 			color: var(--dark-color);
 			fill: currentColor;
 		}
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			margin-top: 0;
-			margin-left: rhythm(1);
+			margin-left: func.rhythm(1);
 		}
 	}
 }

package/src/molecules/download/download.config.js

@@ -9,4 +9,4 @@ module.exports = {
 		download: 'Ladda ner',
 		icon: 'arrow-forwards'
 	}
-}
+};

package/src/molecules/form/form.config.js

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

package/src/molecules/form-control/_form-control.scss

@@ -1,56 +1,64 @@
-@charset 'UTF-8';
-
-@include molecule(form-control) {
+@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;
+
+@include mixin.molecule(form-control) {
 
 	// Modifier for large form fields
-	@include m(large) {
+	@include bem.m(large) {
 		// Inputs
-		@include atom(input) {
-			padding-top: rhythm(1.85);
-			padding-bottom: rhythm(1.85);
-			padding-left: rhythm(2);
-			font-size: rem(20px);
+		@include mixin.atom(input) {
+			padding-top: func.rhythm(1.85);
+			padding-bottom: func.rhythm(1.85);
+			padding-left: func.rhythm(2);
+			font-size: func.to_rem(20px);
 
 			&.has-icon {
-				padding-right: rhythm(6);
+				padding-right: func.rhythm(6);
 			}
 		}
 
 		// Input icon
-		@include b(input-icon) {
+		@include bem.b(input-icon) {
 			> svg {
-				transform: translateY(-#{rhythm(4.6)}) translateX(-#{rhythm(2)});
+				transform: translateY(-#{func.rhythm(4.6)}) translateX(-#{func.rhythm(2)});
 			}
 		}
 
 		// Buttons
-		@include atom(button) {
-			padding: rhythm(1.6) rhythm(4);
+		@include mixin.atom(button) {
+			padding: func.rhythm(1.6) func.rhythm(4);
 
-			@include b(a-button__text) {
-				font-size: rem(24px);
+			@include bem.b(a-button__text) {
+				font-size: func.to_rem(24px);
 			}
 		}
 
 		// Checkbox
-		@include atom(checkbox) {
+		@include mixin.atom(checkbox) {
 			+ label {
-				font-size: rem(20px);
+				font-size: func.to_rem(20px);
 
 				&::before {
-					width: $icon-size;
-					height: $icon-size;
-					margin-top: rem(3px);
+					width: var.$icon-size;
+					height: var.$icon-size;
+					margin-top: func.to_rem(3px);
 				}
 			}
 
 			&:checked {
 				+ label {
 					&::after {
-						top: rem(10px);
-						left: rem(8px);
-						width: rem(8px);
-						height: rem(15px);
+						top: func.to_rem(10px);
+						left: func.to_rem(8px);
+						width: func.to_rem(8px);
+						height: func.to_rem(15px);
 						border-width: 0 4px 4px 0;
 					}
 				}
@@ -58,14 +66,14 @@
 		}
 
 		// Radiobutton
-		@include atom(radio) {
+		@include mixin.atom(radio) {
 			&[type='radio'] {
 				+ label {
-					font-size: rem(20px);
+					font-size: func.to_rem(20px);
 
 					&::before {
-						width: $icon-size;
-						height: $icon-size;
+						width: var.$icon-size;
+						height: var.$icon-size;
 						border-width: 3px;
 					}
 				}
@@ -73,57 +81,57 @@
 		}
 
 		// Select
-		@include atom(select) {
-			padding-top: rhythm(1.85);
-			padding-bottom: rhythm(1.85);
-			padding-left: rhythm(2);
-			background-position: calc(100% - #{rhythm(2)}) 50%;
-			background-size: $icon-size $icon-size;
-			font-size: rem(20px);
+		@include mixin.atom(select) {
+			padding-top: func.rhythm(1.85);
+			padding-bottom: func.rhythm(1.85);
+			padding-left: func.rhythm(2);
+			background-position: calc(100% - #{func.rhythm(2)}) 50%;
+			background-size: var.$icon-size var.$icon-size;
+			font-size: func.to_rem(20px);
 		}
 
 		// Textarea
-		@include atom(textarea) {
-			height: rhythm(15);
-			font-size: rem(20px);
+		@include mixin.atom(textarea) {
+			height: func.rhythm(15);
+			font-size: func.to_rem(20px);
 		}
 	}
 
 	// Modifier for small form fields
-	@include m(small) {
+	@include bem.m(small) {
 		// Inputs
-		@include b(a-input) {
-			padding-top: rhythm(0.5);
-			padding-bottom: rhythm(0.8);
-			font-size: rem(16px);
+		@include bem.b(a-input) {
+			padding-top: func.rhythm(0.5);
+			padding-bottom: func.rhythm(0.8);
+			font-size: func.to_rem(16px);
 		}
 
 		// Input icon
-		@include b(input-icon) {
+		@include bem.b(input-icon) {
 			> svg {
-				width: $icon-size-medium;
-				height: $icon-size-medium;
-				transform: translateY(-#{rhythm(3.1)}) translateX(-#{rhythm(1)});
+				width: var.$icon-size-medium;
+				height: var.$icon-size-medium;
+				transform: translateY(-#{func.rhythm(3.1)}) translateX(-#{func.rhythm(1)});
 			}
 		}
 
 		// Buttons
-		@include atom(button) {
-			padding: rhythm(0.6) rhythm(1.5);
+		@include mixin.atom(button) {
+			padding: func.rhythm(0.6) func.rhythm(1.5);
 		}
 
 		// Select
-		@include atom(select) {
-			padding-top: rhythm(0.5);
-			padding-bottom: rhythm(0.8);
-			background-size: $icon-size-small $icon-size-small;
-			font-size: rem(16px);
+		@include mixin.atom(select) {
+			padding-top: func.rhythm(0.5);
+			padding-bottom: func.rhythm(0.8);
+			background-size: var.$icon-size-small var.$icon-size-small;
+			font-size: func.to_rem(16px);
 		}
 
 		// Textarea
-		@include atom(textarea) {
-			height: rhythm(12);
-			font-size: rem(16px);
+		@include mixin.atom(textarea) {
+			height: func.rhythm(12);
+			font-size: func.to_rem(16px);
 		}
 	}
 }

package/src/molecules/form-control/form-control.config.js

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

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

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+@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;
 
 // NOTE: this compnent is dependant on the glider.scss component
 // The Glider components is dependant on JS-classes and is therefore not namespaced
@@ -8,13 +14,13 @@
 	position: relative;
 	align-items: center;
 	margin-top: 0;
-	margin-bottom: rhythm(2);
+	margin-bottom: func.rhythm(2);
 	padding-left: 0;
 	padding-right: 0;
 }
 
 .glider-slide {
-	@include m(course) {
+	@include bem.m(course) {
 		margin-left: 0;
 		padding-left: 0;
 		padding-right: 0;
@@ -23,21 +29,21 @@
 			display: none;
 		}
 
-		@include e(navigation) {
+		@include bem.e(navigation) {
 			display: flex;
 			justify-content: space-between;
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				justify-content: flex-start;
 			}
 		}
 
-		@include e(media) {
+		@include bem.e(media) {
 
 			&.zoom {
 				pointer-events: none;
 
-				@include bp-up(lg) {
+				@include breakpoint.bp-up(lg) {
 					pointer-events: auto;
 					cursor: zoom-in;
 					transition: all 0.15s ease-out;
@@ -45,21 +51,21 @@
 
 					&::after {
 						content: 'Förstora bilden';
-						color: $color-snow;
-						padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
+						color: colors.$color-snow;
+						padding: func.rhythm(1) func.rhythm(2) func.rhythm(1) func.rhythm(4);
 						display: block;
 						position: absolute;
 						top: 0;
 						left: 0;
-						border-top-left-radius: $border-radius;
-						border-bottom-right-radius: $border-radius;
+						border-top-left-radius: var.$border-radius;
+						border-bottom-right-radius: var.$border-radius;
 						width: auto;
 						line-height: 1;
-						height: $icon-size-large * 1.4;
-						background-color: rgba($color-cyberspace, 0.8);
+						height: var.$icon-size-large * 1.4;
+						background-color: rgba(colors.$color-cyberspace, 0.8);
 						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
-						background-position: rhythm(1) center;
-						background-size: $icon-size-medium $icon-size-medium;
+						background-position: func.rhythm(1) center;
+						background-size: var.$icon-size-medium var.$icon-size-medium;
 						background-repeat: no-repeat;
 
 					}
@@ -76,11 +82,11 @@
 						right: 0;
 						top: 0;
 						bottom: 0;
-						z-index: z_index(foreground);
+						z-index: func.z_index(foreground);
 						display: flex;
 						align-items: center;
 						justify-content: center;
-						background-color: rgba($color-cyberspace, 0.8);
+						background-color: rgba(colors.$color-cyberspace, 0.8);
 						flex-direction: column;
 
 						&::after {
@@ -91,16 +97,16 @@
 							cursor: zoom-out;
 							max-width: 100%;
 							max-height: 100vh;
-							padding: rhythm(1);
+							padding: func.rhythm(1);
 							height: auto;
 						}
 
 						figcaption {
-							max-width: rem(612px);
+							max-width: func.to_rem(612px);
 							text-align: center;
-							color: $color-snow;
-							padding-left: rhythm(2);
-							padding-right: rhythm(2);
+							color: colors.$color-snow;
+							padding-left: func.rhythm(2);
+							padding-right: func.rhythm(2);
 							margin-bottom: 0 !important;
 							padding-bottom: 0 !important;
 						}
@@ -109,9 +115,9 @@
 			}
 
 			figcaption {
-				margin-top: rhythm(1);
+				margin-top: func.rhythm(1);
 			}
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				display: flex;
 				flex-direction: column-reverse;
 				margin-top: 0;