@internetstiftelsen/styleguide 4.1.13 → 5.0.1

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

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

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

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

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 {

package/src/atoms/rating/rating.config.js

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

package/src/atoms/ribbon/_ribbon.scss

@@ -1,17 +1,24 @@
 @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(ribbon) {
+@include mixin.atom(ribbon) {
 	position: fixed;
-	z-index: 100000; // Must be higher than WP's admin toolbar
+	z-index: 100000; /* Must be higher than WP's admin toolbar */
 	bottom: 0;
 	left: 0;
-	padding: rhythm(1) 0;
+	padding: func.rhythm(1) 0;
 	transform: translateX(-33.33%) rotate(45deg);
 	transform-origin: bottom right;
-	background-color: #e0bff5;
-	font-family: $font-family-headings;
+	background-color: colors.$color-peacock-light;
+	font-family: var.$font-family-headings;
 	font-family: sans-serif;
-	font-size: $size-small;
+	font-size: var.$size-small;
 	text-align: center;
 	text-transform: uppercase;
 
@@ -34,11 +41,11 @@
 		left: 100%;
 	}
 
-	@include bp-up(sm) {
-		font-size: $size-medium;
+	@include breakpoint.bp-up(sm) {
+		font-size: var.$size-medium;
 	}
 
-	@include bp-up(xxl) {
-		font-size: $size-base;
+	@include breakpoint.bp-up(xxl) {
+		font-size: var.$size-base;
 	}
 }

package/src/atoms/ribbon/ribbon.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		text: 'stage',
 		background: 'peacock-light'
 	}
-}
+};

package/src/atoms/select/_select.scss

@@ -1,14 +1,22 @@
-@charset 'UTF-8';
-
-@include atom(select) {
+@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 mixin.atom(select) {
 	@extend %input;
 
 	width: auto;
-	padding-right: rhythm(5);
+	padding-right: func.rhythm(5);
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 	background-repeat: no-repeat;
-	background-position: calc(100% - #{rhythm(1)}) 50%;
-	background-size: $icon-size-medium $icon-size-medium;
+	background-position: calc(100% - #{func.rhythm(1)}) 50%;
+	background-size: var.$icon-size-medium var.$icon-size-medium;
 
 	&:focus {
 		@extend %input-focus;
@@ -22,7 +30,7 @@
 		width: auto;
 	}
 
-	@include m(full-width) {
+	@include bem.m(full-width) {
 		width: 100%;
 
 		+ .input-help {
@@ -30,13 +38,13 @@
 		}
 	}
 
-	@include m(discreet) {
+	@include bem.m(discreet) {
 		@extend %discreet;
 	}
 }
 
-@include b(select) {
-	@include m(transparent) {
+@include bem.b(select) {
+	@include bem.m(transparent) {
 		border-color: transparent;
 		background-color: transparent;
 		box-shadow: none;

package/src/atoms/select/select.config.js

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

package/src/atoms/skip/_skip.scss

@@ -1,6 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/bem' as bem;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/functions' as func;
 
-@include b(skip) {
+@include bem.b(skip) {
 	position: relative;
 	z-index: 1001;
 	height: 0;
@@ -27,10 +30,10 @@
 		&:focus {
 			width: 100%;
 			height: auto;
-			padding-top: rhythm(1);
-			padding-bottom: rhythm(1.5);
-			background-color: $color-cyberspace;
-			color: $color-snow;
+			padding-top: func.rhythm(1);
+			padding-bottom: func.rhythm(1.5);
+			background-color: colors.$color-cyberspace;
+			color: colors.$color-snow;
 			text-align: center;
 			text-indent: 0;
 		}

package/src/atoms/skip/skip.config.js

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

package/src/atoms/spinner/_spinner.scss

@@ -1,4 +1,5 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/colors/colors' as colors;
 
 // IE Specific animation
 _:-ms-lang(x),
@@ -17,11 +18,11 @@ _:-ms-lang(x),
 	}
 
 	circle {
-		stroke: $color-ocean;
+		stroke: colors.$color-ocean;
 
 		+ circle {
 			stroke-dasharray: 100;
-			stroke: $color-ocean-light;
+			stroke: colors.$color-ocean-light;
 		}
 	}
 }

package/src/atoms/spinner/spinner.config.js

@@ -2,4 +2,4 @@ module.exports = {
 	status: 'ready',
 
 	context: {}
-}
+};

package/src/atoms/tag/_tag.scss

@@ -1,7 +1,14 @@
-@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;
 
 /// @group Tags
-@include atom(tag) {
+@include mixin.atom(tag) {
 	@extend %normalize-links;
 
 	@extend %tag;
@@ -9,56 +16,56 @@
 	display: inline-flex;
 	align-items: center;
 	position: relative;
-	z-index: z_index(middleground);
-	margin-right: rhythm(1);
-	margin-bottom: rhythm(1);
-	padding: rhythm(1) rhythm(2);
-	font-size: $small-text;
+	z-index: func.z_index(middleground);
+	margin-right: func.rhythm(1);
+	margin-bottom: func.rhythm(1);
+	padding: func.rhythm(1) func.rhythm(2);
+	font-size: var.$small-text;
 	line-height: 1;
 	text-decoration: none;
 	text-transform: uppercase;
 
 	&--background {
-		@include color_values($colors, 'background-color', $separator: '-');
-		@include color_values($colors, 'border-color', $separator: '-');
+		@include colorFunc.color_values(colorFunc.$colors, 'background-color', $separator: '-');
+		@include colorFunc.color_values(colorFunc.$colors, 'border-color', $separator: '-');
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		color: var(--cyberspace-color);
 		letter-spacing: 0.025rem;
 	}
 
-	@include m(light) {
+	@include bem.m(light) {
 		@extend %tag-light;
 
-		@include e(text) {
-			color: $color-snow;
+		@include bem.e(text) {
+			color: colors.$color-snow;
 		}
 	}
 
 	> svg {
-		width: $icon-size-small;
-		height: $icon-size-small;
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
 	}
 
-	@include m(hover-light) {
+	@include bem.m(hover-light) {
 		&:hover,
 		&:focus {
 			background-color: currentColor !important;
 
 			[class*=text] {
-				color: $color-snow;
+				color: colors.$color-snow;
 			}
 		}
 	}
 
-	@include m(hover-dark) {
+	@include bem.m(hover-dark) {
 		&:hover,
 		&:focus {
 			background-color: currentColor !important;
 
 			[class*=text] {
-				color: $color-cyberspace;
+				color: colors.$color-cyberspace;
 			}
 		}
 	}

package/src/atoms/tag/tag.config.js

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