@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/atoms/main-menu/_main-menu.scss

@@ -1,8 +1,15 @@
-@charset 'UTF-8';
-
-@include atom(main-menu) {
-
-	@include e(list) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+
+@include mixin.atom(main-menu) {
+
+	@include bem.e(list) {
 		$root: &;
 
 		display: flex;
@@ -18,55 +25,55 @@
 			position: relative;
 
 			&:last-child {
-				#{$root}#{$element-separator}link {
+				#{$root}#{bem.$element-separator}link {
 					padding-right: 0;
 				}
 			}
 		}
 
-		@include e(button) {
-			padding: rhythm(2) 0 rhythm(2) rhythm(1);
+		@include bem.e(button) {
+			padding: func.rhythm(2) 0 func.rhythm(2) func.rhythm(1);
 
-			@include atom(button) {
-				padding: rhythm(0.4) rhythm(1.5);
-				font-family: $font-family-medium;
-				font-size: $size-small;
+			@include mixin.atom(button) {
+				padding: func.rhythm(0.4) func.rhythm(1.5);
+				font-family: var.$font-family-medium;
+				font-size: var.$size-small;
 
-				@include e(text) {
+				@include bem.e(text) {
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
 				}
 
-				@include m(icon-left) {
-					padding-left: rhythm(5);
+				@include bem.m(icon-left) {
+					padding-left: func.rhythm(5);
 				}
 
-				@include m(icon-right) {
-					padding-right: rhythm(5);
+				@include bem.m(icon-right) {
+					padding-right: func.rhythm(5);
 				}
 			}
 
-			@include bp-up(sm) {
-				@include atom(button) {
-					padding-top: rhythm(0.6);
-					padding-bottom: rhythm(0.6);
-					font-size: $size-base;
+			@include breakpoint.bp-up(sm) {
+				@include mixin.atom(button) {
+					padding-top: func.rhythm(0.6);
+					padding-bottom: func.rhythm(0.6);
+					font-size: var.$size-base;
 				}
 			}
 		}
 
-		@include e(link) {
+		@include bem.e(link) {
 			@extend %normalize-links;
 
 			display: flex;
 			align-items: center;
-			padding: rhythm(2) rhythm(1);
+			padding: func.rhythm(2) func.rhythm(1);
 			border: 0;
 			background-color: transparent;
 			color: var(--cyberspace-color);
-			font-family: $font-family-medium;
-			font-size: rem($size-small);
+			font-family: var.$font-family-medium;
+			font-size: func.to_rem(var.$size-small);
 			text-decoration: none;
 			-webkit-appearance: none;
 			line-height: 1;
@@ -77,13 +84,13 @@
 			}
 
 			&.is-current {
-				color: $color-ruby;
-				font-family: $font-family-medium;
+				color: colors.$color-ruby;
+				font-family: var.$font-family-medium;
 			}
 
 			&[aria-expanded='true'] {
 
-				@include b(icon-hamburger) {
+				@include bem.b(icon-hamburger) {
 					transform: rotate(-90deg);
 					background-color: transparent;
 
@@ -98,7 +105,7 @@
 					}
 				}
 
-				@include b(icon-arrow-down) {
+				@include bem.b(icon-arrow-down) {
 					&::before {
 						left: 0;
 						width: 100%;
@@ -113,14 +120,14 @@
 				}
 			}
 
-			@include b(icon-hamburger) {
+			@include bem.b(icon-hamburger) {
 				display: flex;
 				position: relative;
 				z-index: -1;
 				flex-direction: column;
-				width: $icon-size-medium;
+				width: var.$icon-size-medium;
 				height: 2px;
-				margin-left: rhythm(1);
+				margin-left: func.rhythm(1);
 				transform-origin: 50% 50%;
 				transition: all 0.3s ease-out, background-color 0.15s ease-out;
 				border: 0;
@@ -140,23 +147,23 @@
 				}
 
 				&::before {
-					top: -#{rem(6px)};
+					top: -#{func.to_rem(6px)};
 				}
 
 				&::after {
-					bottom: -#{rem(6px)};
+					bottom: -#{func.to_rem(6px)};
 				}
 			}
 
-			@include b(icon-arrow-down) {
+			@include bem.b(icon-arrow-down) {
 				display: flex;
 				position: relative;
 				z-index: -1;
 				flex-direction: column;
-				width: $icon-size-medium;
-				height: $icon-size-medium;
-				margin-left: rhythm(1);
-				margin-top: -#{rem(3px)};
+				width: var.$icon-size-medium;
+				height: var.$icon-size-medium;
+				margin-left: func.rhythm(1);
+				margin-top: -#{func.to_rem(3px)};
 				transform-origin: 50% 50%;
 				transition: all 0.3s ease-out;
 				border: 0;
@@ -176,42 +183,42 @@
 				}
 
 				&::before {
-					left: -#{rem(2px)};
+					left: -#{func.to_rem(2px)};
 					transform: rotate(45deg);
 				}
 
 				&::after {
-					right: -#{rem(2px)};
+					right: -#{func.to_rem(2px)};
 					transform: rotate(-45deg);
 				}
 			}
 
-			@include bp-up(sm) {
-				font-size: $size-base;
+			@include breakpoint.bp-up(sm) {
+				font-size: var.$size-base;
 			}
 		}
 
-		@include e(text) {
-			margin-top: -#{rem(3px)}; // Adjust for the font's bad placement in viewbox
+		@include bem.e(text) {
+			margin-top: -#{func.to_rem(3px)}; /* Adjust for the font's bad placement in viewbox */
 			pointer-events: none;
 		}
 	}
 
-	@include e(subnav) {
+	@include bem.e(subnav) {
 		position: absolute;
 		left: 0;
-		top: calc(100% - #{rhythm(1)});
+		top: calc(100% - #{func.rhythm(1)});
 		margin: 0;
 		padding: 0;
-		background-color: $color-snow;
-		border: 1px solid $color-ash;
+		background-color: colors.$color-snow;
+		border: 1px solid colors.$color-ash;
 
-		@include card-shadow($color-cyberspace, 0.2);
+		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 
 		&::after,
 		&:before {
 			bottom: 100%;
-			left: rhythm(4);
+			left: func.rhythm(4);
 			border: solid transparent;
 			content: '';
 			height: 0;
@@ -222,13 +229,13 @@
 
 		&::after {
 			border-color: rgba(255, 255, 255, 0);
-			border-bottom-color: $color-snow;
+			border-bottom-color: colors.$color-snow;
 			border-width: 15px;
 			margin-left: -15px;
 		}
 		&::before {
 			border-color: rgba(238, 238, 238, 0);
-			border-bottom-color: $color-ash;
+			border-bottom-color: colors.$color-ash;
 			border-width: 16px;
 			margin-left: -16px;
 		}
@@ -238,18 +245,18 @@
 			display: none;
 		}
 
-		@include e(item) {
+		@include bem.e(item) {
 			width: 100%;
 
 			& + & {
-				border-top: 1px solid $color-ash;
+				border-top: 1px solid colors.$color-ash;
 			}
 
 			a {
-				color: $color-cyberspace;
+				color: colors.$color-cyberspace;
 				display: block;
 				width: 100%;
-				padding: rhythm(0.5) rhythm(2);
+				padding: func.rhythm(0.5) func.rhythm(2);
 				text-decoration: none;
 				white-space: nowrap;
 
@@ -262,8 +269,8 @@
 }
 
 .no-js {
-	@include atom(main-menu) {
-		@include e(subnav) {
+	@include mixin.atom(main-menu) {
+		@include bem.e(subnav) {
 			display: block;
 		}
 	}

package/src/atoms/main-menu/main-menu.config.js

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

package/src/atoms/meta/_meta.scss

@@ -1,74 +1,85 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/functions' as f;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+@use '../../vendor/baseline/plumber' as plumber;
+@use '../../vendor/grid/breakpoints' as breakpoint;
 
-@include atom(meta) {
+@include mixin.atom(meta) {
 	display: flex;
 	position: relative;
 	align-items: center;
 	color: var(--cyberspace-color);
-	font-family: $font-family-mono;
-	text-decoration: none;
+	font-family: var.$font-family-mono;
+	text-decoratiosn: none;
 	text-transform: uppercase;
 	white-space: nowrap;
 
-	@include plumber(
-		$font-size: 1.7,
-		$baseline: $mono-baseline,
+	@include plumber.plumber(
+		var.$font-size: 1.7,
+		$baseline: var.$mono-baseline,
 		$leading-bottom: 0
 	);
 
-	@include color_values($colors, 'fill', $prefix: '--', $separator: '-');
+	@include colorFunc.color_values(colorFunc.$colors, 'fill', $prefix: '--', $separator: '-');
 
 	span {
-		margin-left: rem(3px);
+		margin-left: func.to_rem(3px);
 	}
 
-	@include b(icon) {
+	@include bem.b(icon) {
 		display: flex;
 		flex-shrink: 0;
 		align-items: center;
-		width: $icon-size;
-		height: $icon-size;
-		margin-right: rhythm(1);
-		fill: inherit;
+		width: var.$icon-size;
+		height: var.$icon-size;
+		margin-right: func.rhythm(1);
 		color: var(--color-cyberspace);
-		fill: currentColor;
+
+		svg {
+			fill: inherit;
+		}
 	}
 
-	@include m(light) {
-		color: $color-snow;
+	@include bem.m(light) {
+		color: colors.$color-snow;
 
-		@include b(icon) {
-			fill: $color-snow;
+		@include bem.b(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(lowercase) {
+	@include bem.m(lowercase) {
 		text-transform: initial;
 	}
 
-	@include m(wrap) {
+	@include bem.m(wrap) {
 		white-space: normal;
 	}
 
-	@include m(responsive) {
-		@include plumber(
-			$font-size: 1.4,
-			$baseline: $mono-baseline,
+	@include bem.m(responsive) {
+		@include plumber.plumber(
+			var.$font-size: 1.4,
+			$baseline: var.$mono-baseline,
 			$leading-bottom: 0
 		);
 
-		@include bp-up(md) {
-			@include plumber(
-				$font-size: 1.6,
-				$baseline: $mono-baseline,
+		@include breakpoint.bp-up(md) {
+			@include plumber.plumber(
+				var.$font-size: 1.6,
+				$baseline: var.$mono-baseline,
 				$leading-bottom: 0
 			);
 		}
 
-		@include bp-up(lg) {
-			@include plumber(
-				$font-size: 1.7,
-				$baseline: $mono-baseline,
+		@include breakpoint.bp-up(lg) {
+			@include plumber.plumber(
+				var.$font-size: 1.7,
+				$baseline:var.$mono-baseline,
 				$leading-bottom: 0
 			);
 		}

package/src/atoms/meta/meta.config.js

@@ -27,7 +27,7 @@ module.exports = {
 			context: {
 				text: 'artikel',
 				icon: 'article',
-				color: 'ruby',
+				color: '#ff4069',
 			}
 		},
 		{
@@ -39,4 +39,4 @@ module.exports = {
 			}
 		},
 	]
-}
+};

package/src/atoms/paging/_paging.scss

@@ -1,57 +1,63 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
 
 // Forwards / backwards
 /// @group Paging
-@include atom(paging-wrapper) {
+@include mixin.atom(paging-wrapper) {
 	display: flex;
 	position: relative;
 	width: 100%;
 	align-items: center;
 
-	@include e(text) {
+	@include bem.e(text) {
 		flex: 1;
-		font-family: $font-family-mono;
-		font-size: rem($size-medium-plus);
+		font-family: var.$font-family-mono;
+		font-size: func.to_rem(var.$size-medium-plus);
 		text-align: center;
 		text-transform: uppercase;
 	}
 }
 
-@include atom(paging) {
+@include mixin.atom(paging) {
 	display: inline-flex;
 	position: relative;
 	flex-grow: 0;
 	flex-shrink: 0;
 	align-items: center;
 	justify-content: center;
-	width: rhythm(4);
-	height: rhythm(4);
-	border: 1px solid $color-ash;
+	width: func.rhythm(4);
+	height: func.rhythm(4);
+	border: 1px solid colors.$color-ash;
 	border-radius: 50%;
-	background-color: $color-snow;
-	box-shadow: 0 3px 5px color.adjust($color-granit, $lightness: 15%);
+	background-color: colors.$color-snow;
+	box-shadow: 0 3px 5px color.adjust(colors.$color-granit, $lightness: 15%);
 
-	@include bp-up(sm) {
-		width: rhythm(6);
-		height: rhythm(6);
+	@include breakpoint.bp-up(sm) {
+		width: func.rhythm(6);
+		height: func.rhythm(6);
 	}
 
 	&:focus,
 	&:hover {
-		background-color: $color-ash;
+		background-color: colors.$color-ash;
 	}
 
-	@include e(icon) {
+	@include bem.e(icon) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: $icon-size-small;
-		height: $icon-size-small;
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
 
-		@include bp-up(sm) {
-			width: $icon-size-medium;
-			height: $icon-size-medium;
+		@include breakpoint.bp-up(sm) {
+			width: var.$icon-size-medium;
+			height: var.$icon-size-medium;
 		}
 	}
 }

package/src/atoms/paging/paging.config.js

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

package/src/atoms/password-toggle/_password-toggle.scss

@@ -1,8 +1,11 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
 
 input[type='password'],
 input[type='text'] {
-	+ button.#{$namespace}input-icon {
+	+ button.#{var.$namespace}input-icon {
 		border: 0;
 		border-radius: 0;
 		background: transparent;
@@ -16,17 +19,17 @@ input[type='text'] {
 }
 
 input[type='password'] {
-	+ button.#{$namespace}input-icon {
+	+ button.#{var.$namespace}input-icon {
 		svg {
-			fill: $color-granit;
+			fill: colors.$color-granit;
 		}
 	}
 }
 
 input[type='text'] {
-	+ button.#{$namespace}input-icon {
+	+ button.#{var.$namespace}input-icon {
 		svg {
-			fill: $color-cyberspace;
+			fill: colors.$color-cyberspace;
 		}
 	}
 }

package/src/atoms/password-toggle/password-toggle.config.js

@@ -11,4 +11,4 @@ module.exports = {
 		required: false,
 		disabled: false
 	}
-}
+};

package/src/atoms/progress/_progress.scss

@@ -1,34 +1,42 @@
 @charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@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 atom(progress) {
+
+@include mixin.atom(progress) {
 	&[value] {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
 		display: block;
-		color: $color-ocean;
-		background: $color-concrete;
+		color: colors.$color-ocean;
+		background: colors.$color-concrete;
 		border: none;
 		width: 100%;
 		border-radius: 0;
-		height: rhythm(1);
+		height: func.rhythm(1);
 
-		@include bp-up(md) {
-			height: rhythm(2);
+		@include breakpoint.bp-up(md) {
+			height: func.rhythm(2);
 		}
 	}
 	&[value]::-webkit-progress-bar {
 		border-radius: 0;
-		background: $color-concrete;
+		background: colors.$color-concrete;
 	}
 	&[value]::-webkit-progress-value {
 		border-radius: 0;
-		background: $color-ocean;
+		background: colors.$color-ocean;
 		transition: width 5s ease;
 	}
 	&[value]::-moz-progress-bar {
 		border-radius: 0;
-		background: $color-ocean;
+		background: colors.$color-ocean;
 		transition: padding-bottom 5s ease;
 		padding-left: 60px;
 		padding-bottom: var(--value);
@@ -38,11 +46,11 @@
 	}
 }
 
-@include atom(progress-label) {
+@include mixin.atom(progress-label) {
 	display: flex;
 	align-items: center;
 
 	> progress {
-		margin-left: rhythm(1);
+		margin-left: func.rhythm(1);
 	}
 }

package/src/atoms/progress/progress.config.js

@@ -8,4 +8,4 @@ module.exports = {
 		max_width: false,
 		additional_classes: false,
 	}
-}
+};

package/src/atoms/quote/_quote.scss

@@ -1,25 +1,32 @@
 @charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
 
-@include atom(quote) {
+
+@include mixin.atom(quote) {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	max-width: rem(500px);
+	max-width: func.to_rem(500px);
 	margin: 0;
 	padding: 0;
 
-	@include e(footer) {
+	@include bem.e(footer) {
 		display: flex;
 		align-items: center;
-		padding-top: rhythm(1);
-		font-family: $font-family-headings;
+		padding-top: func.rhythm(1);
+		font-family: var.$font-family-headings;
 	}
 
-	@include e(avatar) {
-		width: rhythm(4);
-		height: rhythm(4);
-		margin-right: rhythm(2);
+	@include bem.e(avatar) {
+		width: func.rhythm(4);
+		height: func.rhythm(4);
+		margin-right: func.rhythm(2);
 		border-radius: 50%;
-		background-color: $color-snow;
+		background-color: colors.$color-snow;
 	}
 }

package/src/atoms/quote/quote.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		quote: '"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human."',
 		quotee: 'Paloma Picasso'
 	}
-}
+};