@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/atoms/checkbox/_checkbox.scss

@@ -1,28 +1,35 @@
-@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(checkbox) {
+@include mixin.atom(checkbox) {
 	&[type='checkbox'] {
 		+ 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: $icon-size-small;
-				height: $icon-size-small;
-				margin-top: rem(3px);
-				margin-right: rhythm(1);
-				border: 1px solid $color-cyberspace;
-				border-radius: $border-radius;
-				background-color: $color-snow;
+				width: var.$icon-size-small;
+				height: var.$icon-size-small;
+				margin-top: func.to_rem(3px);
+				margin-right: func.rhythm(1);
+				border: 1px solid colors.$color-cyberspace;
+				border-radius: var.$border-radius;
+				background-color: colors.$color-snow;
 			}
 		}
 
@@ -31,7 +38,7 @@
 			&:hover {
 				+ label {
 					&::before {
-						background-color: color.adjust($color-ash, $lightness: -5%);
+						background-color: color.adjust(colors.$color-ash, $lightness: -5%);
 					}
 				}
 			}
@@ -43,12 +50,12 @@
 					content: '';
 					display: block;
 					position: absolute;
-					top: rem(10.5px);
-					left: rem(6px);
-					width: rem(5px);
-					height: rem(9px);
+					top: func.to_rem(10.5px);
+					left: func.to_rem(6px);
+					width: func.to_rem(5px);
+					height: func.to_rem(9px);
 					transform: rotate(45deg);
-					border: solid $color-cyberspace;
+					border: solid colors.$color-cyberspace;
 					border-width: 0 2px 2px 0;
 				}
 			}
@@ -59,32 +66,32 @@
 				@extend %disabled;
 
 				&::before {
-					background-color: color.adjust($color-concrete, $lightness: -5%);
+					background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
 				}
 			}
 		}
 	}
 }
 
-@include b(checkbox) {
+@include bem.b(checkbox) {
 	&.is-invalid {
 		[type='checkbox'] {
 			+ label {
 				&::before {
-					border-color: $color-ruby-dark;
-					background-color: $color-ruby-light;
+					border-color: colors.$color-ruby-dark;
+					background-color: colors.$color-ruby-light;
 				}
 			}
 		}
 	}
-	@include m(inline) {
+	@include bem.m(inline) {
 		padding-top: 0;
 		padding-bottom: 0;
 
 		input[type='checkbox'] {
 			+ label {
-				margin-top: rhythm(1);
-				margin-bottom: rhythm(1);
+				margin-top: func.rhythm(1);
+				margin-bottom: func.rhythm(1);
 			}
 		}
 	}

package/src/atoms/file/_file.scss

@@ -1,7 +1,17 @@
-@charset 'UTF-8';
+@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 '../../configurations/colors/colors-functions' as colorFunc;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../utilities/hide';
+
 
 .js {
-	@include atom(file) {
+	@include mixin.atom(file) {
 		@extend %u-visuallyhidden;
 
 		&:focus {
@@ -9,19 +19,19 @@
 		}
 
 		&.has-icon {
-			padding-right: rhythm(5);
+			padding-right: func.rhythm(5);
 		}
 
 		&[disabled] {
 			@extend %disabled;
 		}
 
-		@include m(discreet) {
+		@include bem.m(discreet) {
 			@extend %discreet;
 		}
 	}
 
-	@include atom(file-text) {
+	@include mixin.atom(file-text) {
 		width: auto;
 		max-width: 250px;
 		overflow: hidden;
@@ -29,14 +39,14 @@
 		white-space: nowrap;
 	}
 
-	@include atom(file-preview) {
+	@include mixin.atom(file-preview) {
 		position: relative;
 		width: 100%;
-		height: rem(169px);
-		margin-bottom: rhythm(1);
+		height: func.to_rem(169px);
+		margin-bottom: func.rhythm(1);
 		overflow: hidden;
-		border-radius: $border-radius;
-		background-color: $color-concrete;
+		border-radius: var.$border-radius;
+		background-color: colors.$color-concrete;
 
 		&::after {
 			content: attr(data-label);
@@ -44,7 +54,7 @@
 			top: 50%;
 			left: 50%;
 			transform: translateX(-50%) translateY(-50%);
-			font-size: $size-medium;
+			font-size: var.$size-medium;
 		}
 
 		> img {
@@ -61,8 +71,8 @@
 			}
 		}
 
-		@include bp-up(sm) {
-			max-width: rem(300px);
+		@include breakpoint.bp-up(sm) {
+			max-width: func.to_rem(300px);
 		}
 	}
 }

package/src/atoms/grid-toggle/_grid-toggle.scss

@@ -1,11 +1,16 @@
-@charset 'UTF-8';
-
+@charset "UTF-8";
 @use "sass:math";
+@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;
 
 $guide: #4bffff !default;
 $rgba: rgba !default;
 
-@include b(grid-toggle) {
+@include bem.b(grid-toggle) {
 	position: fixed;
 	right: 40px;
 	bottom: 40px;
@@ -13,12 +18,12 @@ $rgba: rgba !default;
 	height: 60px;
 	border: 0;
 	border-radius: 50%;
-	background: $color-ruby;
-	color: $color-snow;
+	background: colors.$color-ruby;
+	color: colors.$color-snow;
 	font-size: 0.7rem;
 }
 
-@include b(baseline-grid) {
+@include bem.b(baseline-grid) {
 	height: 1000%;
 	background-image: linear-gradient(to top, $guide 0, $guide 1px, transparent 1px);
 	background-size: 100% math.div(1rem, 2);

package/src/atoms/height-limiter/_height-limiter.scss

@@ -1,8 +1,15 @@
-@charset 'UTF-8';
+@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(height-limit) {
 
-	@include e(inner) {
+@include mixin.atom(height-limit) {
+
+	@include bem.e(inner) {
 		position: relative;
 
 		&.is-limited {
@@ -15,32 +22,32 @@
 				bottom: 0;
 				left: 0;
 				height: 50%;
-				background-image: linear-gradient(to bottom, rgba($color-ash, 0) 0%, rgba($color-ash, 1) 100%);
+				background-image: linear-gradient(to bottom, rgba(colors.$color-ash, 0) 0%, rgba(colors.$color-ash, 1) 100%);
 			}
 		}
 	}
 
-	@include m(white) {
-		@include e(inner) {
+	@include bem.m(white) {
+		@include bem.e(inner) {
 			&.is-limited {
 				&::after {
-					background-image: linear-gradient(to bottom, rgba($color-snow, 0) 0%, rgba($color-snow, 1) 100%);
+					background-image: linear-gradient(to bottom, rgba(colors.$color-snow, 0) 0%, rgba(colors.$color-snow, 1) 100%);
 				}
 			}
 		}
 	}
 
-	@include m(snow) {
-		@include e(inner) {
+	@include bem.m(snow) {
+		@include bem.e(inner) {
 			&.is-limited {
 				&::after {
-					background-image: linear-gradient(to bottom, rgba($color-snow, 0) 0%, rgba($color-snow, 1) 100%);
+					background-image: linear-gradient(to bottom, rgba(colors.$color-snow, 0) 0%, rgba(colors.$color-snow, 1) 100%);
 				}
 			}
 		}
 	}
 
-	@include e(btn) {
+	@include bem.e(btn) {
 		display: flex;
 		position: relative;
 		z-index: 2;
@@ -50,8 +57,8 @@
 		background-color: transparent;
 
 		> svg {
-			width: $icon-size;
-			height: $icon-size;
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 
 		&.is-clicked {
@@ -62,7 +69,7 @@
 			}
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			display: block;
 		}
 	}

package/src/atoms/input/_input.scss

@@ -1,6 +1,13 @@
-@charset 'UTF-8';
-
-@include atom(input) {
+@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 '../../configurations/colors/colors-functions' as colorFunc;
+
+@include mixin.atom(input) {
 	@extend %input;
 
 	&:focus {
@@ -8,28 +15,28 @@
 	}
 
 	&.has-icon {
-		padding-right: rhythm(5);
+		padding-right: func.rhythm(5);
 	}
 
 	&[disabled] {
 		@extend %disabled;
 	}
 
-	@include m(discreet) {
+	@include bem.m(discreet) {
 		@extend %discreet;
 	}
-	@include m(small) {
-		font-size: $size-medium;
-		padding: rhythm(0.5);
+	@include bem.m(small) {
+		font-size: var.$size-medium;
+		padding: func.rhythm(0.5);
 	}
 
-	@include m(large) {
-		font-size: rem(32px);
-		padding: rhythm(1) rhythm(2);
+	@include bem.m(large) {
+		font-size: func.to_rem(32px);
+		padding: func.rhythm(1) func.rhythm(2);
 	}
 }
 
-@include b(input-icon) {
+@include bem.b(input-icon) {
 	display: flex;
 	justify-content: flex-end;
 	width: 100%;
@@ -37,9 +44,9 @@
 
 	> svg {
 		position: relative;
-		z-index: z_index(middleground);
-		width: $icon-size;
-		height: $icon-size;
-		transform: translateY(-#{rhythm(3.7)}) translateX(-#{rhythm(1)});
+		z-index: func.z_index(middleground);
+		width: var.$icon-size;
+		height: var.$icon-size;
+		transform: translateY(-#{func.rhythm(3.7)}) translateX(-#{func.rhythm(1)});
 	}
 }

package/src/atoms/label/label.scss

@@ -1,17 +1,23 @@
-@charset 'UTF-8';
+@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;
 
 label,
 .label-legend {
 	display: inline-block;
-	margin-bottom: rhythm(0.5);
-	font-family: $font-family-headings;
-	font-size: rem(16px);
+	margin-bottom: func.rhythm(0.5);
+	font-family: var.$font-family-headings;
+	font-size: func.to_rem(16px);
 	cursor: pointer;
 
 	&.is-required {
 		&::after {
 			content: '*';
-			color: $color-ruby;
+			color: colors.$color-ruby;
 		}
 	}
 }

package/src/atoms/logotype/_logotype.scss

@@ -1,6 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
 
-@include atom(logotype) {
+@include mixin.atom(logotype) {
 	display: flex;
 	width: 100%;
 }

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;
 		}
 	}