@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/molecules/submenu/_submenu.scss

@@ -1,26 +1,34 @@
 @charset "UTF-8";
-
 @use "sass:math";
 @use "sass:color";
-
-@include molecule(submenu) {
-	margin: 0 0 rhythm(2) 0;
+@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(submenu) {
+	margin: 0 0 func.rhythm(2) 0;
 	padding: 0;
 	overflow: hidden;
-	border-radius: $border-radius;
-	background-color: $color-snow;
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
 	list-style: none;
 
-	@include e(title) {
+	@include bem.e(title) {
 		background-color: var(--m-submenu-background-color);
 
-		@include e(link) {
+		@include bem.e(link) {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: rhythm(2);
-			color: $color-cyberspace;
-			font-family: $font-family-headings;
+			padding: func.rhythm(2);
+			color: colors.$color-cyberspace;
+			font-family: var.$font-family-headings;
 			text-decoration: none;
 
 			&:hover,
@@ -34,47 +42,47 @@
 
 			> svg {
 				flex-shrink: 0;
-				width: $icon-size-small;
-				height: $icon-size-small;
-				margin-left: rhythm(1);
+				width: var.$icon-size-small;
+				height: var.$icon-size-small;
+				margin-left: func.rhythm(1);
 				transform: rotate(-90deg);
 			}
 
-			@include bp-up(md) {
-				padding: rhythm(2) rhythm(3);
+			@include breakpoint.bp-up(md) {
+				padding: func.rhythm(2) func.rhythm(3);
 
 				> svg {
-					width: $icon-size-medium;
-					height: $icon-size-medium;
+					width: var.$icon-size-medium;
+					height: var.$icon-size-medium;
 				}
 			}
 		}
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		margin: 0;
 		padding: 0;
 
 		& + & {
-			border-top: 1px solid $color-ash;
+			border-top: 1px solid colors.$color-ash;
 		}
 
 		&:last-child {
 			> a {
-				padding-bottom: rhythm(2);
+				padding-bottom: func.rhythm(2);
 
-				@include bp-up(md) {
-					padding-bottom: rhythm(3);
+				@include breakpoint.bp-up(md) {
+					padding-bottom: func.rhythm(3);
 				}
 			}
 		}
 
-		@include e(link) {
+		@include bem.e(link) {
 			display: flex;
 			position: relative;
 			align-items: center;
 			justify-content: space-between;
-			padding: rhythm(1) rhythm(6) rhythm(1) rhythm(2);
+			padding: func.rhythm(1) func.rhythm(6) func.rhythm(1) func.rhythm(2);
 			overflow: hidden;
 			color: var(--m-submenu-icon-fill-color);
 			text-decoration: none;
@@ -92,28 +100,28 @@
 				display: none;
 				position: absolute;
 				top: 50%;
-				right: rhythm(2);
+				right: func.rhythm(2);
 				flex-shrink: 0;
-				width: $icon-size;
-				height: $icon-size;
-				margin-left: rhythm(1);
-				padding: rhythm(0.5);
+				width: var.$icon-size;
+				height: var.$icon-size;
+				margin-left: func.rhythm(1);
+				padding: func.rhythm(0.5);
 				overflow: hidden;
 				transform: translateY(-50%);
 				border-radius: 50%;
 				background-color: var(--m-submenu-icon-background-hover-color);
 				fill: var(--m-submenu-icon-fill-color);
 
-				@include bp-up(md) {
-					right: rhythm(3);
-					width: $icon-size * 1.6;
-					height: $icon-size * 1.6;
-					padding: rhythm(1);
+				@include breakpoint.bp-up(md) {
+					right: func.rhythm(3);
+					width: var.$icon-size * 1.6;
+					height: var.$icon-size * 1.6;
+					padding: func.rhythm(1);
 				}
 			}
 
 			&.is-current {
-				font-family: $font-family-headings;
+				font-family: var.$font-family-headings;
 				pointer-events: none;
 
 				> svg {
@@ -121,30 +129,30 @@
 				}
 			}
 
-			@include bp-up(md) {
-				padding: rhythm(2) rhythm(7) rhythm(2) rhythm(3);
+			@include breakpoint.bp-up(md) {
+				padding: func.rhythm(2) func.rhythm(7) func.rhythm(2) func.rhythm(3);
 			}
 
-			@include m(has-sublevel) {
+			@include bem.m(has-sublevel) {
 				display: flex;
 				flex-grow: 1;
 			}
 		}
 
-		@include e(sublevel) {
+		@include bem.e(sublevel) {
 			display: flex;
 			justify-content: space-between;
 		}
 
-		@include e(toggle-button) {
+		@include bem.e(toggle-button) {
 			display: flex;
 			position: relative;
 			position: relative;
 			align-items: center;
 			margin: 0;
-			padding: rhythm(1) rhythm(3);
+			padding: func.rhythm(1) func.rhythm(3);
 			border: 0;
-			border-left: 1px solid color.adjust($color-ash, $lightness: -5%);
+			border-left: 1px solid color.adjust(colors.$color-ash, $lightness: -5%);
 			background-color: transparent;
 
 			&::before,
@@ -152,13 +160,13 @@
 				content: '';
 				display: block;
 				position: absolute;
-				top: rem(22px);
-				right: rem(25px);
-				width: math.div($icon-size-small, 1.5);
+				top: func.to_rem(22px);
+				right: func.to_rem(25px);
+				width: math.div(var.$icon-size-small, 1.5);
 				height: 2px;
 				transform-origin: center center;
 				transition: transform 0.25s ease-out;
-				background-color: $color-cyberspace;
+				background-color: colors.$color-cyberspace;
 			}
 
 			&::before {
@@ -166,13 +174,13 @@
 			}
 
 			&::after {
-				right: rem(18px);
+				right: func.to_rem(18px);
 				transform: rotate(-45deg);
 			}
 
 			&[aria-expanded='true'] {
 				margin-bottom: -1px;
-				background-color: color.adjust($color-ash, $lightness: 3%);
+				background-color: color.adjust(colors.$color-ash, $lightness: 3%);
 
 				&::after {
 					transform: rotate(-135deg);
@@ -184,32 +192,32 @@
 			}
 
 			&:hover {
-				background-color: color.adjust($color-ash, $lightness: 3%);
+				background-color: color.adjust(colors.$color-ash, $lightness: 3%);
 			}
 
-			@include bp-up(md) {
-				padding: rhythm(2) rhythm(4);
+			@include breakpoint.bp-up(md) {
+				padding: func.rhythm(2) func.rhythm(4);
 
 				&::before,
 				&::after {
-					top: rem(31px);
-					right: rem(33px);
-					width: $icon-size-small;
+					top: func.to_rem(31px);
+					right: func.to_rem(33px);
+					width: var.$icon-size-small;
 					height: 3px;
 				}
 
 				&::after {
-					right: rem(23px);
+					right: func.to_rem(23px);
 				}
 			}
 		}
 	}
 
-	@include e(sublevel) {
+	@include bem.e(sublevel) {
 		margin: 0;
 		padding: 0;
-		border-top: 1px solid color.adjust($color-ash, $lightness: -3%);
-		background-color: color.adjust($color-ash, $lightness: 3%);
+		border-top: 1px solid color.adjust(colors.$color-ash, $lightness: -3%);
+		background-color: color.adjust(colors.$color-ash, $lightness: 3%);
 		list-style: none;
 
 		&[aria-hidden='true'] {
@@ -217,24 +225,24 @@
 			border-top: 1px solid transparent;
 		}
 
-		@include e(item) {
+		@include bem.e(item) {
 			margin: 0;
-			padding: 0 rhythm(1.5);
+			padding: 0 func.rhythm(1.5);
 
 			& + & {
-				border-top: 1px solid color.adjust($color-ash, $lightness: -4%);
+				border-top: 1px solid color.adjust(colors.$color-ash, $lightness: -4%);
 			}
 
 			/* Support for icon on sublevel */
 
-			@include e(link) {
+			@include bem.e(link) {
 				> svg {
 					display: none;
-					padding: rhythm(0.5);
-					background-color: $color-concrete;
+					padding: func.rhythm(0.5);
+					background-color: colors.$color-concrete;
 
-					@include bp-up(md) {
-						padding: rhythm(1);
+					@include breakpoint.bp-up(md) {
+						padding: func.rhythm(1);
 					}
 				}
 
@@ -255,11 +263,11 @@
 	}
 
 	25% {
-		transform: translateY(-#{rhythm(0.5)}) rotate(-90deg);
+		transform: translateY(-#{func.rhythm(0.5)}) rotate(-90deg);
 	}
 
 	75% {
-		transform: translateY(rhythm(0.5)) rotate(-90deg);
+		transform: translateY(func.rhythm(0.5)) rotate(-90deg);
 	}
 
 	100% {

package/src/molecules/submenu/submenu.config.js

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

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

@@ -1,41 +1,50 @@
-@charset 'UTF-8';
-
-@include molecule(system-error) {
+@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/baseline/plumber' as plumber;
+
+@include mixin.molecule(system-error) {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin: rhythm(8) 0;
+	margin: func.rhythm(8) 0;
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		justify-content: center;
 	}
 
-	@include e(content) {
+	@include bem.e(content) {
 		max-width: 600px;
-		padding-right: $grid-gutter-width;
-		padding-left: $grid-gutter-width;
+		padding-right: var.$grid-gutter-width;
+		padding-left: var.$grid-gutter-width;
 		text-align: left;
 	}
 
-	@include e(heading) {
+	@include bem.e(heading) {
 
-		@include plumber(
-			$font-size: 10,
+		@include plumber.plumber(
+			var.$font-size: 10,
 			$line-height: 11,
 			$leading-bottom: 2
 		);
 
 		animation: rumble 4s infinite linear;
-		font-family: $font-family-mono;
-		text-shadow: 0 1px 0 rgba($color-snow, 0.8), 0 30px 100px rgba($color-cyberspace, 0.5);
+		font-family: var.$font-family-mono;
+		text-shadow: 0 1px 0 rgba(colors.$color-snow, 0.8), 0 30px 100px rgba(colors.$color-cyberspace, 0.5);
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 
-			@include plumber(
-				$font-size: 15,
+			@include plumber.plumber(
+				var.$font-size: 15,
 				$line-height: 16,
 				$leading-bottom: 4
 			);
 		}
 	}
-}
+}

package/src/molecules/system-error/system-error.config.js

@@ -7,4 +7,4 @@ module.exports = {
 		suggestion: 'Försök <a href="#" class="js-history">backa i webbläsaren</a> eller gå till <a href="/">startsidan</a>.',
 		errorMessage: 'error - Sidan kan inte hittas'
 	}
-}
+};

package/src/molecules/table/_table.scss

@@ -1,4 +1,12 @@
-@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;
 
 @mixin table() {
 	width: 100%;
@@ -7,14 +15,14 @@
 	counter-reset: table-counter;
 
 	caption {
-		font-family: $font-family-headings;
-		padding-top: rhythm(1);
-		padding-bottom: rhythm(1);
+		font-family: var.$font-family-headings;
+		padding-top: func.rhythm(1);
+		padding-bottom: func.rhythm(1);
 	}
 
 	thead,
 	tfoot {
-		font-family: $font-family-mono;
+		font-family: var.$font-family-mono;
 		font-size: 85%;
 		text-transform: uppercase;
 	}
@@ -22,15 +30,15 @@
 	tfoot {
 		th,
 		td {
-			border-top: 2px solid $color-granit;
-			font-family: $font-family-headings;
+			border-top: 2px solid colors.$color-granit;
+			font-family: var.$font-family-headings;
 			font-size: 90%;
 
 			&::before {
 				display: none;
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				font-size: 100%;
 			}
 		}
@@ -54,11 +62,11 @@
 
 	th,
 	td {
-		padding-top: rhythm(1);
-		padding-right: rhythm(2);
-		padding-bottom: rhythm(1);
-		padding-left: rhythm(2);
-		border-bottom: 2px solid $color-granit;
+		padding-top: func.rhythm(1);
+		padding-right: func.rhythm(2);
+		padding-bottom: func.rhythm(1);
+		padding-left: func.rhythm(2);
+		border-bottom: 2px solid colors.$color-granit;
 		color: var(--cyberspace-color);
 		font-size: 90%;
 		text-align: left;
@@ -80,7 +88,7 @@
 			display: inline;
 		}
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 			font-size: 100%;
 		}
 	}
@@ -90,7 +98,7 @@
 	}
 }
 
-@include b(table-container) {
+@include bem.b(table-container) {
 	position: relative;
 	width: 100%;
 	max-width: 1320px;
@@ -119,16 +127,16 @@
 	}
 }
 
-@include molecule(table) {
+@include mixin.molecule(table) {
 	@include table();
 
-	@include m(columns) {
+	@include bem.m(columns) {
 		th {
-			border-bottom: 2px solid $color-granit;
+			border-bottom: 2px solid colors.$color-granit;
 		}
 
 		td {
-			border-bottom: 1px solid $color-granit;
+			border-bottom: 1px solid colors.$color-granit;
 		}
 
 		th,
@@ -139,7 +147,7 @@
 		}
 	}
 
-	@include m(rows) {
+	@include bem.m(rows) {
 		thead {
 			th {
 				background-color: var(--ash-color);
@@ -163,7 +171,7 @@
 		}
 	}
 
-	@include m(align-text-center) {
+	@include bem.m(align-text-center) {
 		th,
 		td {
 			text-align: center;
@@ -174,7 +182,7 @@
 		}
 	}
 
-	@include m(increment) {
+	@include bem.m(increment) {
 		tbody {
 			tr:nth-child(odd) {
 				th,
@@ -192,8 +200,8 @@
 		}
 
 		th {
-			width: rhythm(4);
-			padding-right: rhythm(3);
+			width: func.rhythm(4);
+			padding-right: func.rhythm(3);
 
 			&::before {
 				content: counter(table-counter);
@@ -202,14 +210,14 @@
 		}
 	}
 
-	@include m(lines) {
+	@include bem.m(lines) {
 		tbody {
 			tr {
 				background-image:
 					linear-gradient(
 							to right,
-							$color-cyberspace,
-							$color-cyberspace 2px,
+							colors.$color-cyberspace,
+							colors.$color-cyberspace 2px,
 							transparent 2px,
 							transparent 6px
 					);
@@ -220,8 +228,8 @@
 
 			td,
 			th {
-				padding-top: rhythm(2);
-				padding-bottom: rhythm(2);
+				padding-top: func.rhythm(2);
+				padding-bottom: func.rhythm(2);
 				border: 0;
 			}
 		}
@@ -239,22 +247,22 @@
 	}
 }
 
-@include b(scroll-indicator) {
+@include bem.b(scroll-indicator) {
 	display: block;
 	position: relative;
 	width: 100%;
-	height: rhythm(3);
+	height: func.rhythm(3);
 
 	&::before {
 		content: 'Scroll';
 		position: absolute;
-		z-index: z_index(background);
+		z-index: func.z_index(background);
 		top: 0;
-		right: rhythm(3);
-		width: rhythm(7);
+		right: func.rhythm(3);
+		width: func.rhythm(7);
 		height: 0;
 		animation: xPulse 2s infinite;
-		font-family: $font-family-mono;
+		font-family: var.$font-family-mono;
 		font-size: 80%;
 		text-transform: uppercase;
 	}
@@ -262,24 +270,24 @@
 	&::after {
 		content: '›';
 		position: absolute;
-		z-index: z_index(background);
-		top: -#{rem(4px)};
+		z-index: func.z_index(background);
+		top: -#{func.to_rem(4px)};
 		right: 0;
 		animation: xPulse 2s infinite;
-		font-family: $font-family-mono;
+		font-family: var.$font-family-mono;
 	}
 }
 
-@include b(table-scroll-wrapper) {
+@include bem.b(table-scroll-wrapper) {
 
-	@include b(table-container) {
+	@include bem.b(table-container) {
 		overflow-x: auto;
 		overflow-y: hidden;
 		-webkit-overflow-scrolling: touch;
 	}
 
-	@include bp-up(sm) {
-		@include b(scroll-indicator) {
+	@include breakpoint.bp-up(sm) {
+		@include bem.b(scroll-indicator) {
 			display: none;
 		}
 	}

package/src/molecules/table/table.config.js

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

package/src/molecules/teaser-news-list/_teaser-news-list.scss

@@ -1,30 +1,39 @@
-@charset 'UTF-8';
-
-@include molecule(teaser-news) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@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(teaser-news) {
 	height: 100%;
-	padding: rhythm(2);
-	border-radius: $border-radius;
+	padding: func.rhythm(2);
+	border-radius: var.$border-radius;
 	background-color: var(--snow-color);
 
-	@include bp-up(md) {
-		padding: rhythm(2) rhythm(4);
+	@include breakpoint.bp-up(md) {
+		padding: func.rhythm(2) func.rhythm(4);
 	}
 
-	@include e(list) {
+	@include bem.e(list) {
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		position: relative;
 
 		&:not(:last-child) {
-			margin-bottom: rhythm(3);
+			margin-bottom: func.rhythm(3);
 		}
 	}
 
-	@include e(link) {
+	@include bem.e(link) {
 		@extend %normalize-links;
 
 		color: currentcolor;
@@ -32,7 +41,7 @@
 
 		&:hover,
 		&:focus {
-			color: $color-ruby;
+			color: colors.$color-ruby;
 			text-decoration: underline;
 		}
 

package/src/molecules/teaser-news-list/teaser-news-list.config.js

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