@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/molecules/info-box/_info-box.scss

@@ -1,10 +1,19 @@
-@charset 'UTF-8';
-
-@include molecule(info-box) {
-	margin: rhythm(4) 0;
-	padding: rhythm(4);
-	border-top: rem(4px) solid $color-lemon;
-	border-radius: $border-radius;
+@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;
+
+@include mixin.molecule(info-box) {
+	margin: func.rhythm(4) 0;
+	padding: func.rhythm(4);
+	border-top: func.to_rem(4px) solid colors.$color-lemon;
+	border-radius: var.$border-radius;
 	background-color: var(--snow-color);
 
 	> p,
@@ -15,38 +24,38 @@
 		}
 	}
 
-	@include bp-up(md) {
-		padding-right: rhythm(5.5);
-		padding-left: rhythm(5.5);
+	@include breakpoint.bp-up(md) {
+		padding-right: func.rhythm(5.5);
+		padding-left: func.rhythm(5.5);
 	}
 
-	@include m(big) {
-		border-color: $color-jade;
+	@include bem.m(big) {
+		border-color: colors.$color-jade;
 
 		p {
 			@extend %preamble;
 		}
 	}
 
-	@include m(basic) {
+	@include bem.m(basic) {
 		margin-top: 0;
-		padding: rhythm(2);
+		padding: func.rhythm(2);
 		border-top: 0;
 		border-color: none;
 
-		@include bp-up(md) {
-			padding: rhythm(4);
+		@include breakpoint.bp-up(md) {
+			padding: func.rhythm(4);
 		}
 
-		@include bp-up(lg) {
-			padding-top: rhythm(6);
-			padding-right: rhythm(8);
-			padding-bottom: rhythm(6);
-			padding-left: rhythm(8);
+		@include breakpoint.bp-up(lg) {
+			padding-top: func.rhythm(6);
+			padding-right: func.rhythm(8);
+			padding-bottom: func.rhythm(6);
+			padding-left: func.rhythm(8);
 		}
 	}
 
-	@include m(custom-border) {
+	@include bem.m(custom-border) {
 		border-color: var(--m-info-box-border-color);
 	}
 }

package/src/molecules/input-group/_input-group.scss

@@ -1,24 +1,34 @@
-@charset 'UTF-8';
-
-@include molecule(input-group) {
+@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;
+
+
+@include mixin.molecule(input-group) {
 	display: flex;
 	align-items: stretch;
 
-	@include e(label) {
+	@include bem.e(label) {
 		display: flex;
 		align-items: center;
-		padding: 0 rhythm(1);
-		background: $color-concrete;
-		border: 1px solid $color-granit;
-		font-size: rem(16px);
+		padding: 0 func.rhythm(1);
+		background: colors.$color-concrete;
+		border: 1px solid colors.$color-granit;
+		font-size: func.to_rem(16px);
 
 		&:first-child {
-			border-radius: $border-radius 0 0 $border-radius;
+			border-radius: var.$border-radius 0 0 var.$border-radius;
 			border-right: none;
 		}
 
 		&:last-child {
-			border-radius: 0 $border-radius $border-radius 0;
+			border-radius: 0 var.$border-radius var.$border-radius 0;
 			border-left: none;
 		}
 
@@ -28,13 +38,13 @@
 		}
 	}
 
-	@include atom(input) {
+	@include mixin.atom(input) {
 		&:first-child {
-			border-radius: $border-radius 0 0 $border-radius;
+			border-radius: var.$border-radius 0 0 var.$border-radius;
 		}
 
 		&:last-child {
-			border-radius: 0 $border-radius $border-radius 0;
+			border-radius: 0 var.$border-radius var.$border-radius 0;
 		}
 
 		&:not(:first-child):not(:last-child) {

package/src/molecules/modal/_modal.scss

@@ -1,7 +1,19 @@
-@include molecule(modal) {
+@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;
+@use '../../vendor/grid/grid' as grid;
+
+@include mixin.molecule(modal) {
 	display: flex;
 	position: fixed;
-	z-index: z_index(foreground);
+	z-index: func.z_index(foreground);
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -14,11 +26,11 @@
 	}
 
 	// Adjust close button position
-	@include m(has-overlay) {
+	@include bem.m(has-overlay) {
 		&::after {
 			content: '';
 			position: absolute;
-			z-index: z_index(foregroundMinus);
+			z-index: func.z_index(foregroundMinus);
 			top: 0;
 			right: 0;
 			bottom: 0;
@@ -27,49 +39,49 @@
 		}
 	}
 
-	@include e(container) {
+	@include bem.e(container) {
 		display: flex;
 		position: relative;
-		z-index: z_index(foreground);
+		z-index: func.z_index(foreground);
 		flex-direction: column;
 		width: 100%;
-		max-height: calc(100vh - #{rhythm(2)});
-		margin: rhythm(1);
-		padding: rhythm(4) rhythm(2) rhythm(4) rhythm(2);
+		max-height: calc(100vh - #{func.rhythm(2)});
+		margin: func.rhythm(1);
+		padding: func.rhythm(4) func.rhythm(2) func.rhythm(4) func.rhythm(2);
 		overflow-y: auto;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		background: var(--snow-color);
 
 		> button {
 			position: absolute;
-			z-index: z_index(background);
-			top: rhythm(1);
-			right: rhythm(1);
+			z-index: func.z_index(background);
+			top: func.rhythm(1);
+			right: func.rhythm(1);
 		}
 
-		@include bp-up(sm) {
-			padding: rhythm(4) rhythm(4) rhythm(6) rhythm(4);
+		@include breakpoint.bp-up(sm) {
+			padding: func.rhythm(4) func.rhythm(4) func.rhythm(6) func.rhythm(4);
 			width: auto;
-			min-width: rem(576px);
+			min-width: func.to_rem(576px);
 		}
 
-		@include bp-up(md) {
-			padding: rhythm(8) rhythm(8) rhythm(6) rhythm(8);
+		@include breakpoint.bp-up(md) {
+			padding: func.rhythm(8) func.rhythm(8) func.rhythm(6) func.rhythm(8);
 		}
 
-		@include bp-up(lg) {
-			max-width: rem(961px);
+		@include breakpoint.bp-up(lg) {
+			max-width: func.to_rem(961px);
 		}
 
-		@include m(no-max-width) {
+		@include bem.m(no-max-width) {
 			max-width: none;
 		}
 
-		@include m(dynamic-width) {
+		@include bem.m(dynamic-width) {
 			width: 100%;
 			max-width: calc(100vw);
 			min-width: 0;
-			max-height: calc(100% - #{rhythm(2)});
+			max-height: calc(100% - #{func.rhythm(2)});
 			padding: 0;
 			overflow: auto;
 
@@ -79,64 +91,64 @@
 		}
 	}
 
-	@include bp-up(md) {
-		@include e(input-wrapper) {
+	@include breakpoint.bp-up(md) {
+		@include bem.e(input-wrapper) {
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: rhythm(2);
+			margin-bottom: func.rhythm(2);
 		}
 	}
 
-	@include e(content) {
+	@include bem.e(content) {
 		position: relative;
-		margin-right: rhythm(2);
+		margin-right: func.rhythm(2);
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			margin-right: 0;
 		}
 
-		@include m(form-name) {
+		@include bem.m(form-name) {
 			flex: 0 0 45%;
 		}
 
-		@include m(form-lname) {
+		@include bem.m(form-lname) {
 			flex: 0 0 45%;
 		}
 
-		@include e(input-wrapper) {
+		@include bem.e(input-wrapper) {
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: rhythm(2);
+			margin-bottom: func.rhythm(2);
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 
-			@include m(form-email) {
-				margin-bottom: rhythm(2);
+			@include bem.m(form-email) {
+				margin-bottom: func.rhythm(2);
 			}
 
-			@include m(form-username) {
-				margin-bottom: rhythm(2);
+			@include bem.m(form-username) {
+				margin-bottom: func.rhythm(2);
 			}
 		}
-		@include m(form-check) {
+		@include bem.m(form-check) {
 			display: flex;
 		}
 
-		@include m(form-text) {
+		@include bem.m(form-text) {
 			display: flex;
 			justify-content: center;
-			margin-top: rhythm(2);
+			margin-top: func.rhythm(2);
 		}
 	}
 
-	@include e(buttons) {
+	@include bem.e(buttons) {
 		display: flex;
 		flex-shrink: 0;
 		justify-content: flex-end;
 	}
 
-	@include e(button-primary) {
+	@include bem.e(button-primary) {
 		color: var(--m-modal-button-primary-color) !important;
 		box-shadow: 0 0 0 1px inset var(--m-modal-button-primary-border-color) !important;
 
@@ -150,7 +162,7 @@
 		}
 	}
 
-	@include e(button-secondary) {
+	@include bem.e(button-secondary) {
 		color: var(--m-modal-button-secondary-color) !important;
 		box-shadow: 0 0 0 1px inset var(--m-modal-button-secondary-border-color) !important;
 
@@ -164,7 +176,7 @@
 		}
 	}
 
-	@include e(graph-button) {
+	@include bem.e(graph-button) {
 		padding: 0;
 		position: relative;
 
@@ -175,49 +187,49 @@
 
 		&::after {
 			content: attr(data-zoom);
-			color: $color-snow;
-			padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
+			color: colors.$color-snow;
+			padding: func.rhythm(1) func.rhythm(2) func.rhythm(1) func.rhythm(4);
 			display: block;
 			position: absolute;
 			top: 0;
 			left: 0;
-			border-top-left-radius: $border-radius;
-			border-bottom-right-radius: $border-radius;
+			border-top-left-radius: var.$border-radius;
+			border-bottom-right-radius: var.$border-radius;
 			width: auto;
 			line-height: 1;
-			height: $icon-size-large * 1.4;
-			background-color: rgba($color-cyberspace, 0.7);
+			height: var.$icon-size-large * 1.4;
+			background-color: rgba(colors.$color-cyberspace, 0.7);
 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
-			background-position: rhythm(1) center;
-			background-size: $icon-size-medium $icon-size-medium;
+			background-position: func.rhythm(1) center;
+			background-size: var.$icon-size-medium var.$icon-size-medium;
 			background-repeat: no-repeat;
 
 		}
 	}
 
-	@include e(button-fixed) {
+	@include bem.e(button-fixed) {
 		position: fixed !important;
-		top: rhythm(2) !important;
-		right: rhythm(3) !important;
-		z-index: z_index(foreground) !important;
+		top: func.rhythm(2) !important;
+		right: func.rhythm(3) !important;
+		z-index: func.z_index(foreground) !important;
 	}
 
-	@include e(overlay-button) {
+	@include bem.e(overlay-button) {
 		position: fixed !important;
-		color: $color-snow;
+		color: colors.$color-snow;
 		display: flex;
 		align-items: center;
 		text-align: center;
 		justify-content: center;
 		padding: 0;
-		z-index: z_index(foregroundMinus) !important;
+		z-index: func.z_index(foregroundMinus) !important;
 		top: 0 !important;
 		right: 0 !important;
 		bottom: 0 !important;
 		left: 0 !important;
 		background: rgba(0, 0, 0, 0.5);
-		text-shadow: 0 0 rhythm(0.5) $color-cyberspace;
-		font-family: $font-family-headings;
+		text-shadow: 0 0 func.rhythm(0.5) colors.$color-cyberspace;
+		font-family: var.$font-family-headings;
 		border: 0;
 		width: 100vw;
 
@@ -225,12 +237,12 @@
 			display: none;
 		}
 
-		@include bp-up(xxl) {
+		@include breakpoint.bp-up(xxl) {
 			display: none;
 		}
 	}
 
-	@include b(field-group) {
-		margin-bottom: rhythm(1);
+	@include bem.b(field-group) {
+		margin-bottom: func.rhythm(1);
 	}
 }

package/src/molecules/multi-select/_multi-select.scss

@@ -1,78 +1,89 @@
 @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;
+@use '../../vendor/grid/grid' as grid;
+@use '../../utilities/hide';
 
-@include molecule(multi-select) {
+@include mixin.molecule(multi-select) {
 	position: relative;
 
 	&::before {
 		@extend %u-visuallyhidden;
 
-		content: $namespace;
+		content: var.$namespace;
 	}
 
-	@include e(search) {
+	@include bem.e(search) {
 		position: relative;
 	}
 
-	@include e(suggestions-box) {
+	@include bem.e(suggestions-box) {
 		position: absolute;
 		border-top: none;
-		z-index: z_index(foreground);
+		z-index: func.z_index(foreground);
 		top: 100%;
 		left: 0;
 		right: 0;
-		background-color: $color-snow;
+		background-color: colors.$color-snow;
 		overflow-y: auto;
-		max-height: rhythm(15);
-		border-bottom-left-radius: $border-radius;
-		border-bottom-right-radius: $border-radius;
+		max-height: func.rhythm(15);
+		border-bottom-left-radius: var.$border-radius;
+		border-bottom-right-radius: var.$border-radius;
 
 		@extend %box-shadow;
 	}
 
-	@include e(suggestion-btn) {
-		padding: rhythm(1);
+	@include bem.e(suggestion-btn) {
+		padding: func.rhythm(1);
 		cursor: pointer;
-		background-color: $color-snow;
+		background-color: colors.$color-snow;
 		border: none;
-		border-bottom: 1px solid $color-concrete;
+		border-bottom: 1px solid colors.$color-concrete;
 		width: 100%;
 		text-align: left;
 
 		&:hover,
 		&.autocomplete-active {
-			background-color: $color-ocean-dark;
-			color: $color-snow;
+			background-color: colors.$color-ocean-dark;
+			color: colors.$color-snow;
 		}
 	}
 
-	@include e(tag){
-		margin-bottom: rhythm(1);
-		background-color: $color-ash;
+	@include bem.e(tag){
+		margin-bottom: func.rhythm(1);
+		background-color: colors.$color-ash;
 		text-transform: none;
-		font-size: $size-medium;
+		font-size: var.$size-medium;
 
 		&:hover,
 		&:focus {
-			background-color: $color-ash;
-			color: $color-cyberspace;
+			background-color: colors.$color-ash;
+			color: colors.$color-cyberspace;
 		}
 	}
 }
 
 /* Selected items container */
-@include molecule(multi-select-selected-items) {
-	margin-top: -#{rhythm(1)};
-	padding: rhythm(2) rhythm(1) 0 rhythm(1);
+@include mixin.molecule(multi-select-selected-items) {
+	margin-top: -#{func.rhythm(1)};
+	padding: func.rhythm(2) func.rhythm(1) 0 func.rhythm(1);
 	border: 1px solid #d4d4d4;
-	background-color: $color-concrete;
-	border-bottom-left-radius: $border-radius;
-	border-bottom-right-radius: $border-radius;
+	background-color: colors.$color-concrete;
+	border-bottom-left-radius: var.$border-radius;
+	border-bottom-right-radius: var.$border-radius;
 
 	&:empty {
 		display: none;
 	}
 
-	@include e(remove-btn) {
+	@include bem.e(remove-btn) {
 		margin-left: 5px;
 		border: none;
 		background-color: #d80000;
@@ -83,10 +94,10 @@
 		align-items: center;
 		justify-content: center;
 		line-height: 1;
-		width: $icon-size-small;
-		height: $icon-size-small;
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
 		position: relative;
-		transform: translateX(rhythm(0.5));
+		transform: translateX(func.rhythm(0.5));
 
 		&::after {
 			content: '';
@@ -101,12 +112,12 @@
 			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI4LDEwIDIsMTYgMCwxNCA2LDggMCwyIDIsMCA4LDYgMTQsMCAxNiwyIDEwLDggMTYsMTQgMTQsMTYgIi8+Cjwvc3ZnPgo=);
 			background-repeat: no-repeat;
 			background-position: center center;
-			background-size: calc($icon-size-small / 2) calc($icon-size-small / 2);
+			background-size: calc(var.$icon-size-small / 2) calc(var.$icon-size-small / 2);
 		}
 
 		&:hover,
 		&:focus {
-			background-color: $color-cyberspace;
+			background-color: colors.$color-cyberspace;
 		}
 	}
 }