@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/organisms/schedule/_schedule.scss

@@ -1,15 +1,25 @@
 @charset "UTF-8";
-
-@include organism(schedule-filter)  {
-	margin-bottom: rhythm(2);
-	background-color: $color-ash;
-	z-index: z_index(foregroundMinus);
+@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 mixin.organism(schedule-filter)  {
+	margin-bottom: func.rhythm(2);
+	background-color: colors.$color-ash;
+	z-index: func.z_index(foregroundMinus);
 	transition: box-shadow 0.25s ease, border-width 0.25s ease, background-color 0.25s ease;
 
-	@include e(button) {
-		font-size: $size-base;
+	@include bem.e(button) {
+		font-size: var.$size-base;
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			pointer-events: none;
 
 			&:hover,
@@ -30,8 +40,8 @@
 			}
 		}
 	}
-	@include e(list) {
-		padding: 0 0 rhythm(1) 0;
+	@include bem.e(list) {
+		padding: 0 0 func.rhythm(1) 0;
 		margin: 0;
 		display: flex;
 		flex-wrap: wrap;
@@ -39,7 +49,7 @@
 		&[aria-hidden='true'] {
 			display: none;
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				display: flex;
 			}
 		}
@@ -47,7 +57,7 @@
 		dt {
 			width: 100%;
 			flex-basis: 100%;
-			font-family: $font-family-headings;
+			font-family: var.$font-family-headings;
 		}
 
 		dt,
@@ -58,21 +68,21 @@
 	}
 }
 
-@include organism(schedule) {
-	@include e(item) {
-		background-color: $color-snow;
-		border-right: $border-radius;
-		padding: rhythm(1) rhythm(3) rhythm(1) rhythm(2);
+@include mixin.organism(schedule) {
+	@include bem.e(item) {
+		background-color: colors.$color-snow;
+		border-right: var.$border-radius;
+		padding: func.rhythm(1) func.rhythm(3) func.rhythm(1) func.rhythm(2);
 		border-left-width: 4px;
 		border-left-style: solid;
-		border-radius: $border-radius;
-		margin-bottom: rhythm(2);
+		border-radius: var.$border-radius;
+		margin-bottom: func.rhythm(2);
 
 		a {
 			&:hover,
 			&:focus {
 				span {
-					color: $color-ruby;
+					color: colors.$color-ruby;
 				}
 			}
 		}
@@ -97,86 +107,86 @@
 			margin-bottom: 0;
 		}
 
-		@include m(keynote) {
-			background-color: $color-cyberspace;
-			color: $color-snow;
-			border-color: $color-cyberspace;
-			padding: rhythm(2) rhythm(3) rhythm(2) rhythm(2);
+		@include bem.m(keynote) {
+			background-color: colors.$color-cyberspace;
+			color: colors.$color-snow;
+			border-color: colors.$color-cyberspace;
+			padding: func.rhythm(2) func.rhythm(3) func.rhythm(2) func.rhythm(2);
 
 			svg  {
-				fill: $color-snow !important;
+				fill: colors.$color-snow !important;
 			}
 
 			span {
-				color: $color-snow;
+				color: colors.$color-snow;
 			}
 		}
 
-		@include m(granit) {
-			border-color: $color-granit;
+		@include bem.m(granit) {
+			border-color: colors.$color-granit;
 		}
 
-		@include m(lemon) {
-			border-color: $color-lemon;
+		@include bem.m(lemon) {
+			border-color: colors.$color-lemon;
 		}
 
-		@include m(jade) {
-			border-color: $color-jade;
+		@include bem.m(jade) {
+			border-color: colors.$color-jade;
 		}
 
-		@include m(ruby) {
-			border-color: $color-ruby;
+		@include bem.m(ruby) {
+			border-color: colors.$color-ruby;
 		}
 
-		@include m(peacock) {
-			border-color: $color-peacock;
+		@include bem.m(peacock) {
+			border-color: colors.$color-peacock;
 		}
 
-		@include m(ocean) {
-			border-color: $color-ocean;
+		@include bem.m(ocean) {
+			border-color: colors.$color-ocean;
 		}
 
-		@include m(sandstone) {
-			border-color: $color-sandstone;
+		@include bem.m(sandstone) {
+			border-color: colors.$color-sandstone;
 		}
 
-		@include m(transparent) {
+		@include bem.m(transparent) {
 			background-color: transparent;
 			border-color: transparent;
 		}
 
-		@include e(image-wrapper) {
-			width: rem(50px);
-			height: rem(50px);
-			margin-right: rhythm(2);
+		@include bem.e(image-wrapper) {
+			width: func.to_rem(50px);
+			height: func.to_rem(50px);
+			margin-right: func.rhythm(2);
 			position: relative;
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				margin-right: 0;
 			}
 
-			@include m(medium) {
-				width: rem(75px);
-				height: rem(75px);
+			@include bem.m(medium) {
+				width: func.to_rem(75px);
+				height: func.to_rem(75px);
 
 			}
 
-			@include m(large) {
-				width: rem(125px);
-				height: rem(125px);
-				margin-bottom: rhythm(2);
+			@include bem.m(large) {
+				width: func.to_rem(125px);
+				height: func.to_rem(125px);
+				margin-bottom: func.rhythm(2);
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					margin-bottom: 0;
 				}
 			}
 
-			@include m(multiple) {
-				margin-right: rhythm(3);
+			@include bem.m(multiple) {
+				margin-right: func.rhythm(3);
 				flex-grow: 0;
 				flex-shrink: 0;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					margin-right: 0;
 				}
 
@@ -188,73 +198,73 @@
 					width: 100%;
 					height: 100%;
 					top: 0;
-					left: rhythm(1.25);
-					background-color: $color-ash;
+					left: func.rhythm(1.25);
+					background-color: colors.$color-ash;
 					position: absolute;
 					z-index: 2;
 					transform: scale(0.95);
-					box-shadow: 0 0 0 3px $color-snow;
+					box-shadow: 0 0 0 3px colors.$color-snow;
 				}
 
 				&::after {
-					left: rhythm(2.5);
+					left: func.rhythm(2.5);
 					z-index: 1;
 					transform: scale(0.9);
 				}
 			}
 		}
 
-		@include e(image) {
+		@include bem.e(image) {
 			border-radius: 50%;
-			width: rem(50px);
-			height: rem(50px);
+			width: func.to_rem(50px);
+			height: func.to_rem(50px);
 			position: relative;
 			z-index: 3;
-			box-shadow: 0 0 0 3px $color-snow;
+			box-shadow: 0 0 0 3px colors.$color-snow;
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				margin-right: 0;
 			}
 
-			@include m(medium) {
-				width: rem(75px);
-				height: rem(75px);
+			@include bem.m(medium) {
+				width: func.to_rem(75px);
+				height: func.to_rem(75px);
 
 			}
 
-			@include m(large) {
-				width: rem(125px);
-				height: rem(125px);
-				margin-bottom: rhythm(2);
+			@include bem.m(large) {
+				width: func.to_rem(125px);
+				height: func.to_rem(125px);
+				margin-bottom: func.rhythm(2);
 				box-shadow: none;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					margin-bottom: 0;
 				}
 			}
 		}
 
-		@include e(close-btn) {
+		@include bem.e(close-btn) {
 			position: absolute;
 			top: 0;
 			right: 0;
-			z-index: z_index(middleGround);
+			z-index: func.z_index(middleGround);
 		}
 
-		@include e(owner) {
+		@include bem.e(owner) {
 			display: flex;
-			margin-bottom: rhythm(1);
+			margin-bottom: func.rhythm(1);
 			align-items: center;
 
 			> span {
 				line-height: 1.2;
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				margin-bottom: 0;
 			}
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				flex-wrap: wrap;
 				flex-direction: column;
 				align-items: center;
@@ -262,7 +272,7 @@
 
 				> span {
 					text-align: center;
-					margin-top: rhythm(0.5);
+					margin-top: func.rhythm(0.5);
 				}
 			}
 		}

package/src/organisms/search/_search.scss

@@ -1,112 +1,122 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
-
-@include organism(search) {
-	border-radius: $border-radius;
-	background-color: $color-snow;
-
-	@include e(padded) {
-		padding: rhythm(2);
+@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;
+
+@include mixin.organism(search) {
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
+
+	@include bem.e(padded) {
+		padding: func.rhythm(2);
 	}
 
-	@include e(border) {
-		border-top: 1px solid $color-concrete;
+	@include bem.e(border) {
+		border-top: 1px solid colors.$color-concrete;
 	}
 
-	@include e(icon) {
+	@include bem.e(icon) {
 		display: flex;
 		flex-grow: 0;
-		width: $icon-size;
-		height: $icon-size;
-		margin-right: rhythm(2);
+		width: var.$icon-size;
+		height: var.$icon-size;
+		margin-right: func.rhythm(2);
 	}
 
-	@include e(status) {
-		background-color: $color-jade-light;
-		font-family: $font-family-mono;
-		font-size: rem($size-medium-plus);
+	@include bem.e(status) {
+		background-color: colors.$color-jade-light;
+		font-family: var.$font-family-mono;
+		font-size: func.to_rem(var.$size-medium-plus);
 		text-transform: uppercase;
 	}
 
-	@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;
 
 		&:focus {
 			@extend %input-focus;
 
-			background-color: $color-snow;
+			background-color: colors.$color-snow;
 		}
 
 		+ [aria-live] {
-			width: calc(100% - #{rhythm(2)});
+			width: calc(100% - #{func.rhythm(2)});
 		}
 
-		@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(submit) {
+	@include bem.e(submit) {
 		flex-shrink: 0;
-		padding-right: rhythm(4);
-		padding-left: rhythm(4);
+		padding-right: func.rhythm(4);
+		padding-left: func.rhythm(4);
 	}
 
-	@include bp-down(sm) {
-		@include e(submit) {
-			padding: rhythm(0.6) rhythm(1);
-			font-size: rem($size-small);
+	@include breakpoint.bp-down(sm) {
+		@include bem.e(submit) {
+			padding: func.rhythm(0.6) func.rhythm(1);
+			font-size: func.to_rem(var.$size-small);
 		}
 	}
 
-	@include bp-up(md) {
-		@include e(padded) {
-			padding: rhythm(3);
+	@include breakpoint.bp-up(md) {
+		@include bem.e(padded) {
+			padding: func.rhythm(3);
 		}
 
-		@include e(icon) {
-			width: $icon-size * 1.5;
-			height: $icon-size * 1.5;
+		@include bem.e(icon) {
+			width: var.$icon-size * 1.5;
+			height: var.$icon-size * 1.5;
 		}
 
-		@include e(input) {
-			font-size: rem(32px);
+		@include bem.e(input) {
+			font-size: func.to_rem(32px);
 		}
 	}
 
-	@include m(tight) {
-		@include e(submit) {
-			padding: rhythm(0.6) rhythm(1);
-			font-size: rem($size-small);
+	@include bem.m(tight) {
+		@include bem.e(submit) {
+			padding: func.rhythm(0.6) func.rhythm(1);
+			font-size: func.to_rem(var.$size-small);
 
-			@include bp-up(sm) {
-				padding-right: rhythm(3);
-				padding-left: rhythm(3);
-				font-size: $size-base;
+			@include breakpoint.bp-up(sm) {
+				padding-right: func.rhythm(3);
+				padding-left: func.rhythm(3);
+				font-size: var.$size-base;
 			}
 		}
 
-		@include e(icon) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(icon) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 
-		@include e(input) {
-			padding: rhythm(1) rhythm(2);
-			font-size: $size-base;
+		@include bem.e(input) {
+			padding: func.rhythm(1) func.rhythm(2);
+			font-size: var.$size-base;
 		}
 	}
 }

package/src/organisms/search-result/_search-result.scss

@@ -1,25 +1,35 @@
-@charset 'UTF-8';
-
-@include organism(search-result) {
-	@include e(list) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/typography/typography';
+@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.organism(search-result) {
+	@include bem.e(list) {
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		position: relative;
-		padding: rhythm(3) rhythm(2);
+		padding: func.rhythm(3) func.rhythm(2);
 
 		&:not(:first-child) {
-			border-top: 1px solid $color-concrete;
+			border-top: 1px solid colors.$color-concrete;
 		}
 
 		div > a:not([class*=tag]) {
 			@extend %reset-link-style;
 		}
 
-		@include m(article) {
+		@include bem.m(article) {
 			article {
 				display: flex;
 				align-items: flex-start;
@@ -29,57 +39,57 @@
 				display: flex;
 				align-items: flex-start;
 				justify-content: space-between;
-				margin-bottom: rhythm(1);
+				margin-bottom: func.rhythm(1);
 			}
 
 			p {
 				margin-bottom: 0;
 			}
 
-			@include bp-up(xl) {
+			@include breakpoint.bp-up(xl) {
 				> h2,
 				p {
-					@include make-col(14);
+					@include grid.make-col(14);
 				}
 			}
 
-			@include e(content) {
-				@include bp-up(sm) {
-					margin-right: rhythm(2);
+			@include bem.e(content) {
+				@include breakpoint.bp-up(sm) {
+					margin-right: func.rhythm(2);
 				}
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					margin-right: 0;
 				}
 			}
 		}
 
-		@include m(page) {
-			padding-right: rhythm(2);
-			padding-left: rhythm(2);
+		@include bem.m(page) {
+			padding-right: func.rhythm(2);
+			padding-left: func.rhythm(2);
 		}
 
-		@include m(file) {
-			@include e(content) {
-				margin: 0 rhythm(3);
+		@include bem.m(file) {
+			@include bem.e(content) {
+				margin: 0 func.rhythm(3);
 
-				@include bp-up(xl) {
+				@include breakpoint.bp-up(xl) {
 					> h2,
 					p {
-						@include make-col(12);
+						@include grid.make-col(12);
 					}
 				}
 			}
 		}
 
-		@include e(content) {
+		@include bem.e(content) {
 			flex: 0 1 100%;
 		}
 
-		@include e(link) {
+		@include bem.e(link) {
 			@extend %reset-link-style;
 
-			color: $color-cyberspace;
+			color: colors.$color-cyberspace;
 			text-decoration: none;
 
 			&:hover,
@@ -89,34 +99,34 @@
 		}
 	}
 
-	@include e(image) {
+	@include bem.e(image) {
 		display: block;
 		width: 100%;
 		height: auto;
-		margin-bottom: rhythm(2);
-		border-radius: $border-radius;
+		margin-bottom: func.rhythm(2);
+		border-radius: var.$border-radius;
 
-		@include bp-up(sm) {
-			margin-right: rhythm(2);
+		@include breakpoint.bp-up(sm) {
+			margin-right: func.rhythm(2);
 		}
 
-		@include bp-up(md) {
-			margin-right: rhythm(2);
+		@include breakpoint.bp-up(md) {
+			margin-right: func.rhythm(2);
 			margin-bottom: 0;
 		}
 
-		@include bp-up(lg) {
-			margin-right: rhythm(3);
+		@include breakpoint.bp-up(lg) {
+			margin-right: func.rhythm(3);
 		}
 
-		@include bp-up(xl) {
-			margin-right: rhythm(4);
+		@include breakpoint.bp-up(xl) {
+			margin-right: func.rhythm(4);
 		}
 	}
 
-	@include bp-up(md) {
-		@include e(item) {
-			padding: rhythm(3);
+	@include breakpoint.bp-up(md) {
+		@include bem.e(item) {
+			padding: func.rhythm(3);
 		}
 	}
 }

package/src/organisms/search-result/search-result.config.js

@@ -9,4 +9,4 @@ module.exports = {
 		url: 'http://www.google.se',
 		exerpt: 'Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.'
 	}
-}
+};