@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

package/src/molecules/natural-language-form/_natural-language-form.scss

@@ -1,20 +1,30 @@
-@charset 'UTF-8';
-
-@include molecule(natural-language-form) {
+@charset "UTF-8";
+@use "sass:meta";
+@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(natural-language-form) {
 	display: inline-block;
 	position: relative;
 
-	@include m(arrow) {
-		@include e(label) {
-			padding-right: rhythm(4);
+	@include bem.m(arrow) {
+		@include bem.e(label) {
+			padding-right: func.rhythm(4);
 			border-bottom: 2px solid currentColor;
 			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 			background-repeat: no-repeat;
 			background-position: calc(95%) 60%;
-			background-size: $icon-size-medium $icon-size-medium;
+			background-size: var.$icon-size-medium var.$icon-size-medium;
 			text-decoration: none;
 
-			@if variable-exists(cyberspace-color) {
+			@if meta.variable-exists(cyberspace-color) {
 				@media (prefers-color-scheme: dark) {
 					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23ffffff' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 				}
@@ -36,29 +46,29 @@
 				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23f99963' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 			}
 
-			@include bp-up(sm) {
+			@include breakpoint.bp-up(sm) {
 				border-bottom: 4px solid currentColor;
 				background-position: calc(100%) 60%;
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				border-bottom: 5px solid currentColor;
 			}
 		}
 	}
 
-	@include e(select) {
+	@include bem.e(select) {
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		padding-right: rhythm(4);
+		padding-right: func.rhythm(4);
 		opacity: 0;
 		cursor: pointer;
 	}
 
-	@include e(label) {
+	@include bem.e(label) {
 		display: inline-block;
 		font-family: inherit;
 		font-size: inherit;
@@ -66,27 +76,27 @@
 		cursor: pointer;
 
 		option:not(:checked) {
-			color: $color-cyberspace;
+			color: colors.$color-cyberspace;
 		}
 
 		&[data-color='ocean'] {
-			color: $color-ocean;
+			color: colors.$color-ocean;
 		}
 
 		&[data-color='peacock'] {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&[data-color='jade'] {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 
 		&[data-color='sandstone'] {
-			color: $color-sandstone;
+			color: colors.$color-sandstone;
 		}
 	}
 
-	@include e(input) {
+	@include bem.e(input) {
 		position: relative;
 		z-index: 1;
 		top: 0;
@@ -101,19 +111,19 @@
 		cursor: pointer;
 
 		&[data-color='ocean'] {
-			color: $color-ocean;
+			color: colors.$color-ocean;
 		}
 
 		&[data-color='peacock'] {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&[data-color='jade'] {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 	}
 
-	@include e(temp-text) {
+	@include bem.e(temp-text) {
 		position: absolute;
 		z-index: -1;
 		top: 0;

package/src/molecules/overview-navigation/_overview-navigation.scss

@@ -1,48 +1,57 @@
 @charset "UTF-8";
-
-@include molecule(overview-navigation) {
+@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(overview-navigation) {
 	overflow: visible;
 	min-width: 300px;
 	max-width: 453px;
 	display: flex;
 	flex-direction: column;
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 	transition: left 0.25s ease-out, top 0.5s ease-out;
-	box-shadow: 0 0 0 1px $color-ash;
+	box-shadow: 0 0 0 1px colors.$color-ash;
 
-	@include e(list) {
+	@include bem.e(list) {
 		overflow: hidden;
-		border-radius: $border-radius;
-		background-color: $color-snow;
+		border-radius: var.$border-radius;
+		background-color: colors.$color-snow;
 		margin: 0;
 		padding: 0;
 		width: 100%;
-		max-height: calc(100dvh - rem(130px));
+		max-height: calc(100dvh - func.to_rem(130px));
 		overflow-y: auto;
 	}
 
-	@include e(title) {
-		margin-bottom: rhythm(2);
+	@include bem.e(title) {
+		margin-bottom: func.rhythm(2);
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		display: flex;
 		align-items: center;
-		margin-top: rhythm(1);
-		margin-bottom: rhythm(1);
+		margin-top: func.rhythm(1);
+		margin-bottom: func.rhythm(1);
 		margin-left: 0;
 
 		&:last-child {
-			margin-bottom: rhythm(3);
+			margin-bottom: func.rhythm(3);
 		}
 	}
 
-	@include e(item__link) {
-		padding: 0 rhythm(2);
+	@include bem.e(item__link) {
+		padding: 0 func.rhythm(2);
 		border: none;
 		border-radius: 0;
 		background-color: initial;
-		color: $color-cyberspace;
+		color: colors.$color-cyberspace;
 		display: flex;
 		align-items: center;
 		text-decoration: none;
@@ -56,14 +65,14 @@
 		}
 
 		> svg {
-			height: $icon-size-small;
-			width: $icon-size-small;
-			margin-right: rhythm(1);
+			height: var.$icon-size-small;
+			width: var.$icon-size-small;
+			margin-right: func.rhythm(1);
 			flex-shrink: 0;
 		}
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		position: fixed;
 		bottom: auto;
 		right: auto;
@@ -72,15 +81,15 @@
 		pointer-events: none;
 		padding: 0;
 		border: 0;
-		width: rem(60px);
-		height: rem(60px);
+		width: func.to_rem(60px);
+		height: func.to_rem(60px);
 		flex-shrink: 0;
 		flex-grow: 0;
 		align-items: center;
 		justify-content: center;
 		border-radius: 50%;
-		background-color: $color-snow;
-		box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px $color-snow, 0 0 6px rgba($color-cyberspace, 30%);
+		background-color: colors.$color-snow;
+		box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px colors.$color-snow, 0 0 6px rgba(colors.$color-cyberspace, 30%);
 
 		&:hover,
 		&:focus {
@@ -89,8 +98,8 @@
 
 
 		> svg {
-			width: $icon-size-large;
-			height: $icon-size-large;
+			width: var.$icon-size-large;
+			height: var.$icon-size-large;
 			flex-shrink: 0;
 			opacity: 1;
 
@@ -102,28 +111,28 @@
 		&::after {
 			content: attr(data-title);
 			position: absolute;
-			bottom: -#{rhythm(3)};
+			bottom: -#{func.rhythm(3)};
 			text-transform: uppercase;
 			text-align: center;
-			font-size: $size-small;
-			font-family: $font-family-mono;
-			text-shadow: 0 1px 0 $color-snow;
-			color: $color-cyberspace;
-			background-color: $color-snow;
-			border-radius: $border-radius;
-			padding-left: rhythm(0.5);
-			padding-right: rhythm(0.5);
+			font-size: var.$size-small;
+			font-family: var.$font-family-mono;
+			text-shadow: 0 1px 0 colors.$color-snow;
+			color: colors.$color-cyberspace;
+			background-color: colors.$color-snow;
+			border-radius: var.$border-radius;
+			padding-left: func.rhythm(0.5);
+			padding-right: func.rhythm(0.5);
 		}
 
 		&.is-fixed {
-			//top: calc(100vh - rhythm(11)) !important;
+			//top: calc(100vh - func.rhythm(11)) !important;
 			//top: auto !important;
-			bottom: calc(env(safe-area-inset-bottom) + rhythm(5)) !important;
+			bottom: calc(env(safe-area-inset-bottom) + func.rhythm(5)) !important;
 			//left: auto !important;
-			right: rhythm(2) !important;
+			right: func.rhythm(2) !important;
 			pointer-events: auto;
 
-			@include bp-up(xxl) {
+			@include breakpoint.bp-up(xxl) {
 				//left: auto !important;
 				right: calc(50vw - 680px)  !important;
 			}
@@ -160,14 +169,14 @@
 
 	&.is-minimized {
 		position: fixed;
-		right: rhythm(2);
-		bottom: rhythm(13);
-		z-index: z_index(foregroundMinus);
+		right: func.rhythm(2);
+		bottom: func.rhythm(13);
+		z-index: func.z_index(foregroundMinus);
 		margin-top: 0;
 		margin-bottom: 0;
-		margin-left: rhythm(2);
+		margin-left: func.rhythm(2);
 
-		@include bp-up(xxl) {
+		@include breakpoint.bp-up(xxl) {
 			right: calc(50vw - 680px)  !important;
 		}
 	}

package/src/molecules/readspeaker/_readspeaker.scss

@@ -1 +1 @@
-@import 'https://static.internetstiftelsen.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';
+@use 'https://static.internetstiftelsen.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';

package/src/molecules/share/_share.scss

@@ -1,10 +1,18 @@
-@charset 'UTF-8';
-
-@include molecule(share) {
-	@include e(platforms) {
+@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;
+
+@include mixin.molecule(share) {
+	@include bem.e(platforms) {
 		visibility: visible;
 		max-height: 80rem;
-		padding: rhythm(1) 0;
+		padding: func.rhythm(1) 0;
 		overflow: hidden;
 		transition:
 			visibility 0s ease-out,
@@ -21,33 +29,33 @@
 		}
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		padding-left: 0;
 	}
 
-	@include e(icon) {
-		margin-right: rhythm(2);
+	@include bem.e(icon) {
+		margin-right: func.rhythm(2);
 		padding: 0;
 
-		@include b(icon) {
-			width: $icon-size * 1.5;
-			height: $icon-size * 1.5;
+		@include bem.b(icon) {
+			width: var.$icon-size * 1.5;
+			height: var.$icon-size * 1.5;
 
 			&.icon-facebook {
-				fill: $color-facebook;
+				fill: colors.$color-facebook;
 			}
 
 			&.icon-twitter {
-				fill: $color-twitter;
+				fill: colors.$color-twitter;
 			}
 
 			&.icon-linkedin {
-				fill: $color-linkedin;
+				fill: colors.$color-linkedin;
 			}
 		}
 	}
 
-	@include m(inline) {
+	@include bem.m(inline) {
 		display: inline-flex;
 		align-items: center;
 	}

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% {