@internetstiftelsen/styleguide 4.1.13 → 5.0.1

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/checkbox/checkbox.config.js

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

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/file/file.config.js

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

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/grid-toggle/grid-toggle.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		title: 'Grid toggle',
 		description: 'Slå av eller på en synlig grid för att se baslinjeraster.'
 	}
-}
+};

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/height-limiter/height-limiter.config.js

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

package/src/atoms/hr/hr.config.js

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

package/src/atoms/icon/icon.config.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 let sprite = fs.readFileSync(__dirname + '/../../_icon-sprite.hbs');
-sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+sprite = sprite.toString().replace(/ /g, '').replace(/\n/g, '').split('id="');
 const icons = [];
 
 for (let i = 0; i < sprite.length; i++) {
@@ -23,7 +23,7 @@ module.exports = {
 		if (item.isDefault) {
 			return ''; // Don't render default empty icon
 		}
-		return `<div class="icon-wrapper">${markup}</div>`
+		return `<div class="icon-wrapper">${markup}</div>`;
 	},
 
 	context: {

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/input/input.config.js

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

package/src/atoms/label/label.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		for: 'name',
 		labelClasses: 'is-required'
 	}
-}
+};

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/logotype/logotype.config.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 let sprite = fs.readFileSync(__dirname + '/../../_logotype-sprite.hbs');
-sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+sprite = sprite.toString().replace(/ /g, '').replace(/\n/g, '').split('id="');
 const logotypes = [];
 
 for (let i = 0; i < sprite.length; i++) {
@@ -19,8 +19,8 @@ module.exports = {
 
 	preview: '@layout-logotypes',
 
-	collator: function(markup, item) {
-		return `<div class="logotype-wrapper">${markup}</div>`
+	collator: function(markup) {
+		return `<div class="logotype-wrapper">${markup}</div>`;
 	},
 
 	context: {