@internetstiftelsen/styleguide 4.1.13 → 5.0.0

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',
 			}
 		},
 		{

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/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/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/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/radiobutton/_radiobutton.scss

@@ -1,30 +1,37 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
+@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 '../../configurations/colors/colors-functions' as colorFunc;
 
-@include atom(radio) {
+@include mixin.atom(radio) {
 	&[type='radio'] {
 		+ label {
 			display: inline-flex;
 			position: relative;
 			align-items: flex-start;
-			padding-top: rhythm(0.5);
-			padding-right: rhythm(2);
-			padding-bottom: rhythm(0.5);
-			font-family: $font-family-base;
+			padding-top: func.rhythm(0.5);
+			padding-right: func.rhythm(2);
+			padding-bottom: func.rhythm(0.5);
+			font-family: var.$font-family-base;
 
 			&::before {
 				content: '';
 				display: block;
 				flex-shrink: 0;
-				width: rem(15px);
-				height: rem(15px);
-				margin-top: rem(3px);
-				margin-right: rhythm(1);
-				transform: translateX(rem(1px));
+				width: func.to_rem(15px);
+				height: func.to_rem(15px);
+				margin-top: func.to_rem(3px);
+				margin-right: func.rhythm(1);
+				transform: translateX(func.to_rem(1px));
 				border: 2px solid transparent;
 				border-radius: 50%;
-				background-color: $color-snow;
-				box-shadow: 0 0 0 1px $color-cyberspace;
+				background-color: colors.$color-snow;
+				box-shadow: 0 0 0 1px colors.$color-cyberspace;
 			}
 		}
 
@@ -32,7 +39,7 @@
 		&:hover {
 			+ label {
 				&::before {
-					background-color: color.adjust($color-snow, $lightness: -5%);
+					background-color: color.adjust(colors.$color-snow, $lightness: -5%);
 				}
 			}
 		}
@@ -40,8 +47,8 @@
 		&:checked {
 			+ label {
 				&::before {
-					border: 2px solid $color-ash;
-					background-color: $color-cyberspace;
+					border: 2px solid colors.$color-ash;
+					background-color: colors.$color-cyberspace;
 				}
 			}
 		}
@@ -51,14 +58,14 @@
 				@extend %disabled;
 
 				&::before {
-					background-color: color.adjust($color-concrete, $lightness: -5%);
+					background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
 				}
 			}
 
 			&:checked {
 				+ label {
 					&::before {
-						background-color: $color-cyberspace;
+						background-color: colors.$color-cyberspace;
 					}
 				}
 			}
@@ -67,34 +74,34 @@
 		&:invalid {
 			+ label {
 				&::before {
-					background-color: $color-ruby-light;
-					box-shadow: 0 0 0 1px $color-ruby-dark;
+					background-color: colors.$color-ruby-light;
+					box-shadow: 0 0 0 1px colors.$color-ruby-dark;
 				}
 			}
 		}
 	}
 }
 
-@include b(radio) {
+@include bem.b(radio) {
 	&.is-invalid {
 		[type='radio'] {
 			+ label {
 				&::before {
-					background-color: $color-ruby-light;
-					box-shadow: 0 0 0 1px $color-ruby-dark;
+					background-color: colors.$color-ruby-light;
+					box-shadow: 0 0 0 1px colors.$color-ruby-dark;
 				}
 			}
 		}
 	}
 
-	@include m(inline) {
+	@include bem.m(inline) {
 		padding-top: 0;
 		padding-bottom: 0;
 
 		input[type='radio'] {
 			+ label {
-				margin-top: rhythm(1);
-				margin-bottom: rhythm(1);
+				margin-top: func.rhythm(1);
+				margin-bottom: func.rhythm(1);
 			}
 		}
 	}

package/src/atoms/range/_range.scss

@@ -1,7 +1,14 @@
-@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 '../../configurations/colors/colors-functions' as colorFunc;
 
-@include atom(range) {
+
+@include mixin.atom(range) {
 	-webkit-appearance: none;
 	appearance: none;
 	background: transparent;
@@ -10,38 +17,38 @@
 	position: relative;
 
 	&::-webkit-slider-runnable-track {
-		background-color: $color-concrete;
-		height: rhythm(1);
-		border-radius: $border-radius;
-		border-top: 1px solid color.adjust($color-granit, $lightness: 15%);
+		background-color: colors.$color-concrete;
+		height: func.rhythm(1);
+		border-radius: var.$border-radius;
+		border-top: 1px solid color.adjust(colors.$color-granit, $lightness: 15%);
 	}
 
 	&::-moz-range-track {
-		background-color: $color-concrete;
-		height: rhythm(1);
-		border-radius: $border-radius;
-		border-top: 1px solid $color-granit;
+		background-color: colors.$color-concrete;
+		height: func.rhythm(1);
+		border-radius: var.$border-radius;
+		border-top: 1px solid colors.$color-granit;
 	}
 
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		margin-top: -#{rhythm(1.125)};
-		background-color: $color-ash;
-		height: rhythm(3);
-		width: rhythm(1.5);
-		border: 1px solid $color-granit;
-		border-radius: $border-radius;
+		margin-top: -#{func.rhythm(1.125)};
+		background-color: colors.$color-ash;
+		height: func.rhythm(3);
+		width: func.rhythm(1.5);
+		border: 1px solid colors.$color-granit;
+		border-radius: var.$border-radius;
 	}
 
 	&::-moz-range-thumb {
-		background-color: $color-ash;
-		height: rhythm(3);
-		width: rhythm(1.5);
+		background-color: colors.$color-ash;
+		height: func.rhythm(3);
+		width: func.rhythm(1.5);
 		border-radius: 0;
 		border: 0;
-		border: 1px solid $color-granit;
-		border-radius: $border-radius;
+		border: 1px solid colors.$color-granit;
+		border-radius: var.$border-radius;
 	}
 
 	&:focus {
@@ -49,10 +56,10 @@
 		box-shadow: none !important;
 
 		& + output {
-			background-color: $color-ocean-light;
+			background-color: colors.$color-ocean-light;
 
 			&::after {
-				border-bottom-color: $color-ocean-light;
+				border-bottom-color: colors.$color-ocean-light;
 			}
 		}
 	}
@@ -68,31 +75,31 @@
 	}
 
 	&:focus::-webkit-slider-thumb {
-		background-color: $color-snow;
-		border-color: $color-ocean;
-		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
+		background-color: colors.$color-snow;
+		border-color: colors.$color-ocean;
+		box-shadow: 0 0 0 inset rgba(colors.$color-cyberspace, 0.2), 0 1px 2px rgba(colors.$color-cyberspace, 0.2), 0 0 0 3px colors.$color-ocean-light;
 	}
 
 	&:focus::-moz-range-thumb {
-		background-color: $color-snow;
-		border-color: $color-ocean;
-		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
+		background-color: colors.$color-snow;
+		border-color: colors.$color-ocean;
+		box-shadow: 0 0 0 inset rgba(colors.$color-cyberspace, 0.2), 0 1px 2px rgba(colors.$color-cyberspace, 0.2), 0 0 0 3px colors.$color-ocean-light;
 	}
 
-	@include m(no-preview) {
+	@include bem.m(no-preview) {
 		& + output {
 			display: none;
 		}
 	}
 
-	@include e(value){
-		background-color: $color-concrete;
-		padding: rhythm(0.5) rhythm(1);
+	@include bem.e(value){
+		background-color: colors.$color-concrete;
+		padding: func.rhythm(0.5) func.rhythm(1);
 		position: absolute;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		left: 50%;
 		transform: translateX(-50%) translateY(calc(100% + 8px));
-		font-size: $size-medium;
+		font-size: var.$size-medium;
 
 		&::after {
 			bottom: 100%;
@@ -103,19 +110,19 @@
 			width: 0;
 			position: absolute;
 			pointer-events: none;
-			border-color: rgba($color-concrete, 0);
-			border-bottom-color: $color-concrete;
+			border-color: rgba(colors.$color-concrete, 0);
+			border-bottom-color: colors.$color-concrete;
 			border-width: 4px;
 			margin-left: -4px;
 		}
 	}
 }
 
-@include atom(range-input) {
+@include mixin.atom(range-input) {
 	position: absolute;
 	top: 0;
 	right: 0;
 	z-index: 0;
-	width: rhythm(5);
+	width: func.rhythm(5);
 }
 

package/src/atoms/rating/_rating.scss

@@ -1,12 +1,19 @@
 @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(rating) {
+
+@include mixin.atom(rating) {
 	display: inline-flex;
 	flex-direction: row-reverse;
 
 	> label {
-		width: $icon-size-large * 1.5;
-		height: $icon-size-large * 1.5;
+		width: var.$icon-size-large * 1.5;
+		height: var.$icon-size-large * 1.5;
 		display: inline-flex;
 		background-position: center center;
 		background-repeat: no-repeat;
@@ -14,7 +21,7 @@
 		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300 255' style='enable-background:new 0 0 300 255;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%238E9297;%7D%0A%3C/style%3E%3Cpath class='st0' d='M266.9,36.7V0.4h-99v36.3h-35.8V0.4h-99v36.3h-33v72.8h33.2v36.3h32.9v36.3h33.2v36.6h32.9V255h35.8v-36.3H201 v-36.6h33v-36.3h32.9v-36.3h33.2V36.7H266.9z M257.5,85h-45.7V36.7H235v24.5h22.5V85z'/%3E%3C/svg%3E%0A");
 	}
 
-	@include e(radio) {
+	@include bem.e(radio) {
 		&:hover,
 		&:checked {
 			~ label {