@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

package/src/organisms/domain-search/_domain-search.scss

@@ -1,13 +1,22 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
-
-@include organism(domain-search) {
-	padding: rhythm(2) 0 rhythm(1) 0;
+@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.organism(domain-search) {
+	padding: func.rhythm(2) 0 func.rhythm(1) 0;
 
 	&:not([class*='is-in-mega-menu']) {
 		display: none;
 		position: absolute;
-		z-index: z_index(middlegroundImportant);
+		z-index: func.z_index(middlegroundImportant);
 		bottom: 0;
 		transform: translateY(0);
 		transition: transform 0.25s ease-out;
@@ -25,7 +34,7 @@
 			}
 		}
 
-		@include bp-up(xl) {
+		@include breakpoint.bp-up(xl) {
 			display: flex;
 		}
 
@@ -40,110 +49,110 @@
 	}
 
 	a {
-		color: $color-cyberspace;
+		color: colors.$color-cyberspace;
 		text-decoration: underline;
 
 		&:hover,
 		&:focus {
-			border-bottom: rem(2px) solid $color-jade;
+			border-bottom: func.to_rem(2px) solid colors.$color-jade;
 			border-radius: 0;
 			background-color: transparent;
 			text-decoration: none;
 		}
 
 		[class*='icon'] {
-			transform: translateY(rem(2px));
+			transform: translateY(func.to_rem(2px));
 		}
 	}
 
-	@include bp-up(md) {
-		padding: rhythm(3) rhythm(1);
+	@include breakpoint.bp-up(md) {
+		padding: func.rhythm(3) func.rhythm(1);
 	}
 
-	@include e(list-container) {
-		padding: 0 rhythm(1) 0 rhythm(1);
+	@include bem.e(list-container) {
+		padding: 0 func.rhythm(1) 0 func.rhythm(1);
 	}
 
-	@include e(input) {
+	@include bem.e(input) {
 		display: block;
-		width: calc(100% - #{rhythm(2)});
-		margin-right: rhythm(2);
-		padding: rhythm(1) rhythm(2);
+		width: calc(100% - #{func.rhythm(2)});
+		margin-right: func.rhythm(2);
+		padding: func.rhythm(1) func.rhythm(2);
 		transition: padding 0.25s ease-out;
 		border: 0;
-		border-radius: $border-radius;
-		background-color: color.adjust($color-ash, $lightness: 4%);
+		border-radius: var.$border-radius;
+		background-color: color.adjust(colors.$color-ash, $lightness: 4%);
 		letter-spacing: -0.1px;
 		-webkit-appearance: none;
 
-		@include bp-up(md) {
-			font-size: rem(32px);
+		@include breakpoint.bp-up(md) {
+			font-size: func.to_rem(32px);
 		}
 
-		@include m(force-focus-look) {
-			background-color:  color.adjust($color-ash, $lightness: 4%);
+		@include bem.m(force-focus-look) {
+			background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
 
 			&:focus {
-				background-color:  color.adjust($color-ash, $lightness: 4%);
+				background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
 			}
 		}
 	}
 
-	@include e(list) {
+	@include bem.e(list) {
 		display: flex;
 		flex-wrap: wrap;
-		padding: rhythm(1) 0 0 0;
+		padding: func.rhythm(1) 0 0 0;
 
 		li {
-			padding: rhythm(1) 0;
+			padding: func.rhythm(1) 0;
 			white-space: nowrap;
 
 			+ li {
-				border-top: 1px solid $color-concrete;
+				border-top: 1px solid colors.$color-concrete;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					padding-bottom: 0;
 					border-top: 0;
 				}
 			}
 
 			a {
-				padding: 0 rhythm(1);
+				padding: 0 func.rhythm(1);
 				border-bottom: 0;
-				font-size: rem($size-medium-plus);
+				font-size: func.to_rem(var.$size-medium-plus);
 				text-decoration: underline;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					padding: 0;
 				}
 			}
 		}
 	}
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 
-		@include e(pretext) {
-			font-size: rem(32px);
+		@include bem.e(pretext) {
+			font-size: func.to_rem(32px);
 		}
 	}
 
-	@include e(submit) {
+	@include bem.e(submit) {
 		flex-shrink: 0;
-		padding-right: rhythm(4);
-		padding-left: rhythm(4);
-		font-size: rem(24px);
+		padding-right: func.rhythm(4);
+		padding-left: func.rhythm(4);
+		font-size: func.to_rem(24px);
 
-		@include bp-down(md) {
-			font-size: rem($size-base);
+		@include breakpoint.bp-down(md) {
+			font-size: func.to_rem(var.$size-base);
 		}
 
-		@include bp-down(sm) {
-			padding: rhythm(0.6) rhythm(1);
-			font-size: rem($size-small);
+		@include breakpoint.bp-down(sm) {
+			padding: func.rhythm(0.6) func.rhythm(1);
+			font-size: func.to_rem(var.$size-small);
 		}
 	}
 
-	@include bp-up(xl) {
+	@include breakpoint.bp-up(xl) {
 		display: none;
 	}
 }

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

@@ -1,64 +1,74 @@
 @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;
+@use '../../vendor/baseline/plumber' as plumber;
 
-@include organism(event-listing-item) {
+@include mixin.organism(event-listing-item) {
 	position: relative;
-	padding: rhythm(2);
+	padding: func.rhythm(2);
 	border-left: 4px solid;
-	border-radius: $border-radius;
-	background-color: $color-snow;
-	font-size: $size-medium-plus;
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
+	font-size: var.$size-medium-plus;
 
-	@include e(button) {
+	@include bem.e(button) {
 
 	}
 
-	@include bp-up(md) {
-		font-size: $size-base;
+	@include breakpoint.bp-up(md) {
+		font-size: var.$size-base;
 	}
 
-	@include e(upper) {
+	@include bem.e(upper) {
 		position: static;
 		flex-direction: column;
-		margin-bottom: rhythm(1);
+		margin-bottom: func.rhythm(1);
 	}
 
-	@include e(lower) {
+	@include bem.e(lower) {
 		align-items: center;
 		justify-content: space-between;
-		margin-top: rhythm(1);
+		margin-top: func.rhythm(1);
 	}
 
-	@include e(heading) {
-		@include plumber(
-			$font-size: 2.5,
+	@include bem.e(heading) {
+		@include plumber.plumber(
+			var.$font-size: 2.5,
 			$leading-bottom: 1
 		);
 
-		font-family: $font-family-headings;
+		font-family: var.$font-family-headings;
 		line-height: 1.75rem;
 	}
 
-	@include e(footer) {
-		margin-bottom: rhythm(2);
-		margin-top: rhythm(2);
+	@include bem.e(footer) {
+		margin-bottom: func.rhythm(2);
+		margin-top: func.rhythm(2);
 
-		@include bp-up(sm-xs) {
+		@include breakpoint.bp-up(sm-xs) {
 			margin-bottom: 0;
 			margin-top: 0;
 		}
 	}
 
-	@include e(button) {
-		margin-right: rhythm(1);
-		margin-left: rhythm(1);
+	@include bem.e(button) {
+		margin-right: func.rhythm(1);
+		margin-left: func.rhythm(1);
 	}
 
-	@include e(icon-wrapper) {
+	@include bem.e(icon-wrapper) {
 		display: flex;
 		align-items: center;
 	}
 
-	@include e(icon) {
-		margin-right: rhythm(1);
+	@include bem.e(icon) {
+		margin-right: func.rhythm(1);
 	}
 }

package/src/organisms/features-box/_features-box.scss

@@ -1,48 +1,59 @@
 @charset "UTF-8";
-
-@include organism(features-box) {
-	padding: rhythm(2) rhythm(3) rhythm(3) rhythm(3);
-	border-radius: $border-radius;
-
-	@include bp-up(lg) {
-		padding: rhythm(3) rhythm(4) rhythm(4) rhythm(4);
+@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;
+@use '../../vendor/grid/grid' as grid;
+@use '../../vendor/baseline/plumber' as plumber;
+
+@include mixin.organism(features-box) {
+	padding: func.rhythm(2) func.rhythm(3) func.rhythm(3) func.rhythm(3);
+	border-radius: var.$border-radius;
+
+	@include breakpoint.bp-up(lg) {
+		padding: func.rhythm(3) func.rhythm(4) func.rhythm(4) func.rhythm(4);
 	}
 
-	@include m(large-text) {
-		@include bp-up(lg) {
-			padding: rhythm(4) rhythm(6) rhythm(6) rhythm(6);
+	@include bem.m(large-text) {
+		@include breakpoint.bp-up(lg) {
+			padding: func.rhythm(4) func.rhythm(6) func.rhythm(6) func.rhythm(6);
 		}
 	}
 
-	@include e(list) {
+	@include bem.e(list) {
 		margin: 0;
 		padding: 0;
 		list-style: none;
 
-		@include e(item) {
+		@include bem.e(item) {
 			display: flex;
-			margin-bottom: rhythm(2);
+			margin-bottom: func.rhythm(2);
 
 			a {
 				@extend %link-styles;
 			}
 		}
 
-		@include e(icon) {
+		@include bem.e(icon) {
 			display: flex;
-			margin-right: rhythm(2);
+			margin-right: func.rhythm(2);
 
 			> svg {
-				margin-top: rhythm(0.5);
+				margin-top: func.rhythm(0.5);
 			}
 
-			@include bp-up(lg) {
-				margin-right: rhythm(4);
+			@include breakpoint.bp-up(lg) {
+				margin-right: func.rhythm(4);
 			}
 		}
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		display: flex;
 		flex-grow: 1;
 		justify-content: center;

package/src/organisms/filter/_filter.scss

@@ -1,21 +1,26 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@use '../../configurations/functions' as func;
+@use '../../vendor/grid/breakpoints' as breakpoint;
 
-@include organism(filter) {
-	@include e(title) {
-		padding: 0 0 0 rhythm(3);
+@include mixin.organism(filter) {
+	@include bem.e(title) {
+		padding: 0 0 0 func.rhythm(3);
 	}
 
-	@include e(column) {
-		margin-bottom: rhythm(4);
+	@include bem.e(column) {
+		margin-bottom: func.rhythm(4);
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 			margin-bottom: 0;
 		}
 	}
 
-	@include e(clear) {
+	@include bem.e(clear) {
 		position: absolute;
-		top: -#{rem(50px)};
-		right: rhythm(3);
+		top: -#{func.to_rem(50px)};
+		right: func.rhythm(3);
 	}
 }