@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/organisms/accordion/_accordion.scss

@@ -1,27 +1,37 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
-
-// Extends
+@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 {
 	display: flex;
 	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;
 	}
@@ -75,7 +85,7 @@
 
 %is-visible {
 	visibility: visible;
-	max-height: 10000em; // Rediculous height
+	max-height: 10000em; /* Rediculous height */
 	overflow: visible;
 	transition: visibility 0s ease, max-height 0.25s ease, opacity 0.25s ease;
 	opacity: 1;
@@ -90,9 +100,9 @@
 	opacity: 0;
 }
 
-// Styling before Accordion script kicks in
+/* 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) {
+		/* Nested to prevent padding when JS is disabled */
+		@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;
 		}

package/src/organisms/accordion/accordion.config.js

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

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/domain-search/domain-search.config.js

@@ -8,4 +8,4 @@ module.exports = {
 		label: 'sök en .se- eller .nu-domän',
 		white_background: true
 	}
-}
+};

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;