@internetstiftelsen/styleguide 4.1.13 → 5.0.0

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/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/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/organisms/accordion/_accordion.scss

@@ -1,5 +1,15 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/extends';
+@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 '../../utilities/hide';
 
 // Extends
 %header {
@@ -7,21 +17,21 @@
 	position: relative;
 	flex-direction: column;
 	width: 100%;
-	padding: rhythm(2) rhythm(5) rhythm(2) rhythm(2);
+	padding: func.rhythm(2) func.rhythm(5) func.rhythm(2) func.rhythm(2);
 	border: 0;
 	background: transparent;
-	box-shadow: inset 0 -1px 1px rgba($color-cyberspace, 0.2);
-	font-family: $font-family-headings;
-	font-size: rem(17px);
+	box-shadow: inset 0 -1px 1px rgba(colors.$color-cyberspace, 0.2);
+	font-family: var.$font-family-headings;
+	font-size: func.to_rem(17px);
 	text-align: left;
 	-webkit-appearance: none;
 
-	@include bp-up(md) {
-		font-size: rem(18px);
+	@include breakpoint.bp-up(md) {
+		font-size: func.to_rem(18px);
 	}
 
-	@include bp-up(xl) {
-		font-size: rem(20px);
+	@include breakpoint.bp-up(xl) {
+		font-size: func.to_rem(20px);
 	}
 
 	&::before,
@@ -30,8 +40,8 @@
 		display: block;
 		position: absolute;
 		top: 50%;
-		right: rem(23px);
-		width: $icon-size-small;
+		right: func.to_rem(23px);
+		width: var.$icon-size-small;
 		height: 3px;
 		transform: translateY(-50%);
 		transform-origin: center center;
@@ -44,7 +54,7 @@
 	}
 
 	&::after {
-		right: rem(13px);
+		right: func.to_rem(13px);
 		transform: rotate(-45deg);
 	}
 
@@ -60,7 +70,7 @@
 		}
 	}
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		flex-direction: row;
 		align-items: center;
 	}
@@ -92,7 +102,7 @@
 
 // Styling before Accordion script kicks in
 .js-accordion {
-	@include e(header) {
+	@include bem.e(header) {
 		@extend %header;
 
 		margin-bottom: 0;
@@ -103,7 +113,7 @@
 		}
 	}
 
-	@include e(panel) {
+	@include bem.e(panel) {
 		@extend %panel;
 	}
 }
@@ -111,7 +121,7 @@
 .js {
 	.js-accordion {
 
-		@include e(header) {
+		@include bem.e(header) {
 			border-bottom: 1px solid var(--snow-color);
 
 			&[aria-expanded='true'] {
@@ -125,17 +135,17 @@
 		}
 	}
 
-	@include organism(accordion) {
-		background-color: color.adjust($color-ash, $lightness: 4%);
+	@include mixin.organism(accordion) {
+		background-color: color.adjust(colors.$color-ash, $lightness: 4%);
 
-		@include e(panel) {
+		@include bem.e(panel) {
 			&[aria-hidden='false'],
 			&:not([aria-hidden='true']) {
 				@extend %is-visible;
 			}
 		}
 
-		@include m(transparent) {
+		@include bem.m(transparent) {
 			background-color: transparent;
 
 			[class*='header'] {
@@ -151,7 +161,7 @@
 	}
 }
 
-@include organism(accordion) {
+@include mixin.organism(accordion) {
 	margin: 0;
 	padding: 0;
 	background-position: top left;
@@ -160,27 +170,27 @@
 	&::before {
 		@extend %u-visuallyhidden;
 
-		content: $namespace;
+		content: var.$namespace;
 	}
 
-	@include e(row) {
+	@include bem.e(row) {
 		pointer-events: none;
 	}
 
-	@include e(header) {
+	@include bem.e(header) {
 		@extend %header;
 
-		@include m(inline) {
+		@include bem.m(inline) {
 			display: inline-flex;
 			width: auto;
 
 			button {
-				padding-right: rhythm(5);
+				padding-right: func.rhythm(5);
 				padding-left: 0;
 			}
 		}
 
-		@include m(no-border) {
+		@include bem.m(no-border) {
 			button[role='tab'] {
 				border-bottom: 0;
 				box-shadow: none;
@@ -191,13 +201,13 @@
 			}
 		}
 
-		@include m(background) {
+		@include bem.m(background) {
 			button {
 				box-shadow: none;
 			}
 		}
 
-		@include m(no-content) {
+		@include bem.m(no-content) {
 			button {
 				cursor: default;
 				pointer-events: none;
@@ -209,42 +219,42 @@
 			}
 		}
 
-		@include e(time) {
+		@include bem.e(time) {
 			margin-top: 0;
-			margin-right: rhythm(2);
+			margin-right: func.rhythm(2);
 			padding-top: 0;
 			padding-bottom: 0;
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				font-size: 90%;
 			}
 		}
 	}
 
-	@include e(panel) {
+	@include bem.e(panel) {
 		@extend %panel;
 
 		// Nested to prevent padding when JS is disabled
-		@include e(content) {
+		@include bem.e(content) {
 			position: relative;
-			padding: rhythm(3);
+			padding: func.rhythm(3);
 
 			> :last-child {
 				margin-bottom: 0;
 			}
 		}
 
-		@include m(transparent) {
+		@include bem.m(transparent) {
 			background-color: transparent;
 		}
 
-		@include m(ash) {
+		@include bem.m(ash) {
 			border-radius: 0;
-			background-color: color.adjust($color-ash, $lightness: 4%);
+			background-color: color.adjust(colors.$color-ash, $lightness: 4%);
 		}
 	}
 
-	@include e(title) {
+	@include bem.e(title) {
 		margin-top: 0;
 		margin-bottom: 0;
 		padding-top: 0;
@@ -257,16 +267,16 @@
 		}
 	}
 
-	@include e(logo) {
-		margin-bottom: rhythm(2);
+	@include bem.e(logo) {
+		margin-bottom: func.rhythm(2);
 
-		@include bp-up(sm) {
-			margin-right: rhythm(2);
+		@include breakpoint.bp-up(sm) {
+			margin-right: func.rhythm(2);
 			margin-bottom: 0;
 		}
 	}
 
-	@include e(list) {
+	@include bem.e(list) {
 		display: inline-block;
 		margin-bottom: 0;
 
@@ -283,23 +293,23 @@
 			}
 		}
 
-		@include e(item) {
+		@include bem.e(item) {
 			display: flex;
 			align-items: center;
 			margin-left: 0;
 			pointer-events: initial;
 		}
 
-		@include e(flag) {
-			margin-right: rhythm(1);
-			font-size: rem(32px);
+		@include bem.e(flag) {
+			margin-right: func.rhythm(1);
+			font-size: func.to_rem(32px);
 			line-height: 1;
 		}
 	}
 }
 
 .no-js {
-	@include organism(accordion) {
+	@include mixin.organism(accordion) {
 		> [class*='panel'] {
 			@extend %is-visible;
 		}