@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/molecules/natural-language-form/_natural-language-form.scss

@@ -1,20 +1,30 @@
-@charset 'UTF-8';
-
-@include molecule(natural-language-form) {
+@charset "UTF-8";
+@use "sass:meta";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@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 '../../vendor/grid/grid' as grid;
+
+@include mixin.molecule(natural-language-form) {
 	display: inline-block;
 	position: relative;
 
-	@include m(arrow) {
-		@include e(label) {
-			padding-right: rhythm(4);
+	@include bem.m(arrow) {
+		@include bem.e(label) {
+			padding-right: func.rhythm(4);
 			border-bottom: 2px solid currentColor;
 			background-image: url("data:image/svg+xml;charset=utf-8,%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(95%) 60%;
-			background-size: $icon-size-medium $icon-size-medium;
+			background-size: var.$icon-size-medium var.$icon-size-medium;
 			text-decoration: none;
 
-			@if variable-exists(cyberspace-color) {
+			@if meta.variable-exists(cyberspace-color) {
 				@media (prefers-color-scheme: dark) {
 					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23ffffff' 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");
 				}
@@ -36,29 +46,29 @@
 				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23f99963' 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");
 			}
 
-			@include bp-up(sm) {
+			@include breakpoint.bp-up(sm) {
 				border-bottom: 4px solid currentColor;
 				background-position: calc(100%) 60%;
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				border-bottom: 5px solid currentColor;
 			}
 		}
 	}
 
-	@include e(select) {
+	@include bem.e(select) {
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		padding-right: rhythm(4);
+		padding-right: func.rhythm(4);
 		opacity: 0;
 		cursor: pointer;
 	}
 
-	@include e(label) {
+	@include bem.e(label) {
 		display: inline-block;
 		font-family: inherit;
 		font-size: inherit;
@@ -66,27 +76,27 @@
 		cursor: pointer;
 
 		option:not(:checked) {
-			color: $color-cyberspace;
+			color: colors.$color-cyberspace;
 		}
 
 		&[data-color='ocean'] {
-			color: $color-ocean;
+			color: colors.$color-ocean;
 		}
 
 		&[data-color='peacock'] {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&[data-color='jade'] {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 
 		&[data-color='sandstone'] {
-			color: $color-sandstone;
+			color: colors.$color-sandstone;
 		}
 	}
 
-	@include e(input) {
+	@include bem.e(input) {
 		position: relative;
 		z-index: 1;
 		top: 0;
@@ -101,19 +111,19 @@
 		cursor: pointer;
 
 		&[data-color='ocean'] {
-			color: $color-ocean;
+			color: colors.$color-ocean;
 		}
 
 		&[data-color='peacock'] {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&[data-color='jade'] {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 	}
 
-	@include e(temp-text) {
+	@include bem.e(temp-text) {
 		position: absolute;
 		z-index: -1;
 		top: 0;

package/src/molecules/natural-language-form/natural-language-form.config.js

@@ -13,7 +13,7 @@ module.exports = {
 
 	variants: [
 		{
-		name: 'Select with arrow',
+			name: 'Select with arrow',
 			context: {
 				select: true,
 				textElement: 'h1',
@@ -22,7 +22,7 @@ module.exports = {
 			}
 		},
 		{
-		name: 'Other text element',
+			name: 'Other text element',
 			context: {
 				select: true,
 				textElement: 'h2',
@@ -31,7 +31,7 @@ module.exports = {
 			}
 		},
 		{
-		name: 'Input',
+			name: 'Input',
 			context: {
 				select: false,
 				textElement: 'h1',
@@ -40,4 +40,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/molecules/overview-navigation/_overview-navigation.scss

@@ -1,48 +1,57 @@
 @charset "UTF-8";
-
-@include molecule(overview-navigation) {
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@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 '../../vendor/grid/grid' as grid;
+
+@include mixin.molecule(overview-navigation) {
 	overflow: visible;
 	min-width: 300px;
 	max-width: 453px;
 	display: flex;
 	flex-direction: column;
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 	transition: left 0.25s ease-out, top 0.5s ease-out;
-	box-shadow: 0 0 0 1px $color-ash;
+	box-shadow: 0 0 0 1px colors.$color-ash;
 
-	@include e(list) {
+	@include bem.e(list) {
 		overflow: hidden;
-		border-radius: $border-radius;
-		background-color: $color-snow;
+		border-radius: var.$border-radius;
+		background-color: colors.$color-snow;
 		margin: 0;
 		padding: 0;
 		width: 100%;
-		max-height: calc(100dvh - rem(130px));
+		max-height: calc(100dvh - func.to_rem(130px));
 		overflow-y: auto;
 	}
 
-	@include e(title) {
-		margin-bottom: rhythm(2);
+	@include bem.e(title) {
+		margin-bottom: func.rhythm(2);
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		display: flex;
 		align-items: center;
-		margin-top: rhythm(1);
-		margin-bottom: rhythm(1);
+		margin-top: func.rhythm(1);
+		margin-bottom: func.rhythm(1);
 		margin-left: 0;
 
 		&:last-child {
-			margin-bottom: rhythm(3);
+			margin-bottom: func.rhythm(3);
 		}
 	}
 
-	@include e(item__link) {
-		padding: 0 rhythm(2);
+	@include bem.e(item__link) {
+		padding: 0 func.rhythm(2);
 		border: none;
 		border-radius: 0;
 		background-color: initial;
-		color: $color-cyberspace;
+		color: colors.$color-cyberspace;
 		display: flex;
 		align-items: center;
 		text-decoration: none;
@@ -56,14 +65,14 @@
 		}
 
 		> svg {
-			height: $icon-size-small;
-			width: $icon-size-small;
-			margin-right: rhythm(1);
+			height: var.$icon-size-small;
+			width: var.$icon-size-small;
+			margin-right: func.rhythm(1);
 			flex-shrink: 0;
 		}
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		position: fixed;
 		bottom: auto;
 		right: auto;
@@ -72,15 +81,15 @@
 		pointer-events: none;
 		padding: 0;
 		border: 0;
-		width: rem(60px);
-		height: rem(60px);
+		width: func.to_rem(60px);
+		height: func.to_rem(60px);
 		flex-shrink: 0;
 		flex-grow: 0;
 		align-items: center;
 		justify-content: center;
 		border-radius: 50%;
-		background-color: $color-snow;
-		box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px $color-snow, 0 0 6px rgba($color-cyberspace, 30%);
+		background-color: colors.$color-snow;
+		box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px colors.$color-snow, 0 0 6px rgba(colors.$color-cyberspace, 30%);
 
 		&:hover,
 		&:focus {
@@ -89,8 +98,8 @@
 
 
 		> svg {
-			width: $icon-size-large;
-			height: $icon-size-large;
+			width: var.$icon-size-large;
+			height: var.$icon-size-large;
 			flex-shrink: 0;
 			opacity: 1;
 
@@ -102,28 +111,28 @@
 		&::after {
 			content: attr(data-title);
 			position: absolute;
-			bottom: -#{rhythm(3)};
+			bottom: -#{func.rhythm(3)};
 			text-transform: uppercase;
 			text-align: center;
-			font-size: $size-small;
-			font-family: $font-family-mono;
-			text-shadow: 0 1px 0 $color-snow;
-			color: $color-cyberspace;
-			background-color: $color-snow;
-			border-radius: $border-radius;
-			padding-left: rhythm(0.5);
-			padding-right: rhythm(0.5);
+			font-size: var.$size-small;
+			font-family: var.$font-family-mono;
+			text-shadow: 0 1px 0 colors.$color-snow;
+			color: colors.$color-cyberspace;
+			background-color: colors.$color-snow;
+			border-radius: var.$border-radius;
+			padding-left: func.rhythm(0.5);
+			padding-right: func.rhythm(0.5);
 		}
 
 		&.is-fixed {
-			//top: calc(100vh - rhythm(11)) !important;
+			//top: calc(100vh - func.rhythm(11)) !important;
 			//top: auto !important;
-			bottom: calc(env(safe-area-inset-bottom) + rhythm(5)) !important;
+			bottom: calc(env(safe-area-inset-bottom) + func.rhythm(5)) !important;
 			//left: auto !important;
-			right: rhythm(2) !important;
+			right: func.rhythm(2) !important;
 			pointer-events: auto;
 
-			@include bp-up(xxl) {
+			@include breakpoint.bp-up(xxl) {
 				//left: auto !important;
 				right: calc(50vw - 680px)  !important;
 			}
@@ -160,14 +169,14 @@
 
 	&.is-minimized {
 		position: fixed;
-		right: rhythm(2);
-		bottom: rhythm(13);
-		z-index: z_index(foregroundMinus);
+		right: func.rhythm(2);
+		bottom: func.rhythm(13);
+		z-index: func.z_index(foregroundMinus);
 		margin-top: 0;
 		margin-bottom: 0;
-		margin-left: rhythm(2);
+		margin-left: func.rhythm(2);
 
-		@include bp-up(xxl) {
+		@include breakpoint.bp-up(xxl) {
 			right: calc(50vw - 680px)  !important;
 		}
 	}

package/src/molecules/overview-navigation/overview-navigation.js

@@ -74,7 +74,7 @@ class OverviewNavigation {
 
 		this.button.style.transition = 'none';
 		this.updateButtonPosition();
-		// eslint-disable-next-line no-unused-expressions
+		 
 		this.element.offsetHeight; // force reflow
 		this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
 
@@ -96,7 +96,7 @@ class OverviewNavigation {
 		this.element.setAttribute('aria-hidden', 'false');
 		this.element.classList.remove('is-minimized');
 
-		// eslint-disable-next-line no-unused-expressions
+		 
 		this.element.offsetHeight; // force reflow
 
 		this.updateButtonPosition();

package/src/molecules/readspeaker/_readspeaker.scss

@@ -1 +1 @@
-@import 'https://static.internetstiftelsen.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';
+@use 'https://static.internetstiftelsen.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';

package/src/molecules/share/_share.scss

@@ -1,10 +1,18 @@
-@charset 'UTF-8';
-
-@include molecule(share) {
-	@include e(platforms) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@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 mixin.molecule(share) {
+	@include bem.e(platforms) {
 		visibility: visible;
 		max-height: 80rem;
-		padding: rhythm(1) 0;
+		padding: func.rhythm(1) 0;
 		overflow: hidden;
 		transition:
 			visibility 0s ease-out,
@@ -21,33 +29,33 @@
 		}
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		padding-left: 0;
 	}
 
-	@include e(icon) {
-		margin-right: rhythm(2);
+	@include bem.e(icon) {
+		margin-right: func.rhythm(2);
 		padding: 0;
 
-		@include b(icon) {
-			width: $icon-size * 1.5;
-			height: $icon-size * 1.5;
+		@include bem.b(icon) {
+			width: var.$icon-size * 1.5;
+			height: var.$icon-size * 1.5;
 
 			&.icon-facebook {
-				fill: $color-facebook;
+				fill: colors.$color-facebook;
 			}
 
 			&.icon-twitter {
-				fill: $color-twitter;
+				fill: colors.$color-twitter;
 			}
 
 			&.icon-linkedin {
-				fill: $color-linkedin;
+				fill: colors.$color-linkedin;
 			}
 		}
 	}
 
-	@include m(inline) {
+	@include bem.m(inline) {
 		display: inline-flex;
 		align-items: center;
 	}

package/src/molecules/share/share.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		url: 'https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen/',
 		text: 'Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången'
 	}
-}
+};