@internetstiftelsen/styleguide 4.1.13 → 5.0.0

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
 	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/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/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/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/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/textarea/_textarea.scss

@@ -1,11 +1,20 @@
-@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;
+@use '../../vendor/baseline/plumber' as plumber;
 
-@include atom(textarea) {
+@include mixin.atom(textarea) {
 	@extend %input;
 
 	min-width: 100%;
 	max-width: 100%;
-	min-height: rhythm(12);
+	min-height: func.rhythm(12);
 
 	&:focus {
 		@extend %input-focus;
@@ -15,12 +24,12 @@
 		@extend %disabled;
 	}
 
-	@include m(discreet) {
+	@include bem.m(discreet) {
 		@extend %discreet;
 	}
 
-	@include m(hidden) {
-		@include visuallyhidden;
+	@include bem.m(hidden) {
+		@include mixin.visuallyhidden;
 
 		min-height: 0;
 		min-width: 0;
@@ -28,17 +37,17 @@
 		padding: 0;
 	}
 
-	@include m(rich-text) {
+	@include bem.m(rich-text) {
 		min-height: auto;
 
 		> div {
-			min-height: rhythm(12);
+			min-height: func.rhythm(12);
 
 			p,
 			ul,
 			ol {
-				@include plumber(
-					$font-size: 1.75,
+				@include plumber.plumber(
+					var.$font-size: 1.75,
 					$leading-bottom: 2
 				);
 			}
@@ -49,12 +58,12 @@
 		}
 	}
 
-	@include e(toolbar) {
+	@include bem.e(toolbar) {
 		button {
 			@extend %button-toolbar;
 
-			margin-right: rhythm(0.5);
-			margin-bottom: rhythm(1);
+			margin-right: func.rhythm(0.5);
+			margin-bottom: func.rhythm(1);
 		}
 	}
 }

package/src/atoms/tooltip/_tooltip.scss

@@ -1,21 +1,28 @@
-@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(tooltip) {
+@include mixin.atom(tooltip) {
 	position: relative;
-	width: $icon-size;
-	height: $icon-size;
-	margin-right: rhythm(1);
-	margin-left: rhythm(1);
-	padding: rhythm(1);
+	width: var.$icon-size;
+	height: var.$icon-size;
+	margin-right: func.rhythm(1);
+	margin-left: func.rhythm(1);
+	padding: func.rhythm(1);
 	border-radius: 50%;
-	box-shadow: 0 0 0 rem(5px) transparent;
+	box-shadow: 0 0 0 func.to_rem(5px) transparent;
 	overflow: visible;
 
 	&:focus,
 	&:hover {
 		overflow: visible;
 		clip: auto;
-		box-shadow: 0 0 0 rem(5px) $color-ocean-light;
+		box-shadow: 0 0 0 func.to_rem(5px) colors.$color-ocean-light;
 
 		[class*='text'] {
 			overflow: visible;
@@ -36,27 +43,27 @@
 		fill: currentColor;
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		display: block;
 		position: absolute;
-		z-index: z_index(foreground);
+		z-index: func.z_index(foreground);
 		top: auto;
 		bottom: 130%;
 		left: 50%;
-		width: rem(300px);
+		width: func.to_rem(300px);
 		height: auto;
-		margin: 0 0 rem(5px) 0;
-		padding: rhythm(1);
+		margin: 0 0 func.to_rem(5px) 0;
+		padding: func.rhythm(1);
 		transform: rotateX(90deg) scale(0.2) translateX(-100%);
 		transform-origin: bottom center;
 		-webkit-backface-visibility: hidden;
 		transition: transform 0.3s cubic-bezier(0.3, 0, 0, 1);
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		opacity: 0;
-		background-color: $color-cyberspace;
-		color: $color-snow;
-		font-family: $font-family-base;
-		font-size: $size-small;
+		background-color: colors.$color-cyberspace;
+		color: colors.$color-snow;
+		font-family: var.$font-family-base;
+		font-size: var.$size-small;
 		text-align: left;
 		user-select: none;
 
@@ -72,7 +79,7 @@
 			border: solid transparent;
 			border-width: 15px;
 			border-color: rgba(31, 42, 54, 0);
-			border-top-color: $color-cyberspace;
+			border-top-color: colors.$color-cyberspace;
 			border-bottom-color: transparent;
 			pointer-events: none;
 		}
@@ -86,7 +93,7 @@
 				top: auto;
 				bottom: calc(100% - 1px);
 				border-top-color: transparent;
-				border-bottom-color: $color-cyberspace;
+				border-bottom-color: colors.$color-cyberspace;
 			}
 		}
 	}

package/src/base/_grid.scss

@@ -1,10 +1,10 @@
 // Inspired by https://github.com/fractures/fractures
-@include b(grid) {
+@include bem.b(grid) {
 	display: grid;
 
-	&-gap { grid-gap: $grid-gutter-width; }
-	&-gap-y { grid-row-gap: $grid-gutter-width; }
-	&-gap-x { grid-column-gap: $grid-gutter-width; }
+	&-gap { grid-gap: var.$grid-gutter-width; }
+	&-gap-y { grid-row-gap: var.$grid-gutter-width; }
+	&-gap-x { grid-column-gap: var.$grid-gutter-width; }
 
 	&-cols {
 		@for $i from 2 through $grid-columns {

package/src/base/_normalize.scss

@@ -1,17 +1,19 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 @use "sass:math";
-
-@import '../configurations/colors/colors';
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
+@use '../theme/theme' as theme;
 
 html {
 	box-sizing: border-box;
 	height: 100%;
 	min-height: 100%;
-	background-color: theme_palette('background');
+	background-color: theme.theme_palette('background');
 	color: var(--cyberspace-color);
 	font-family: sans-serif;
-	font-size: percentage(math.div($size-base, 16px));
+	font-size: math.percentage(math.div(var.$size-base, 16px));
 	font-variant-ligatures: no-common-ligatures;
 	-ms-overflow-style: scrollbar;
 	-webkit-text-size-adjust: 100%;
@@ -27,7 +29,7 @@ body {
 	padding-right: env(safe-area-inset-right);
 	padding-left: env(safe-area-inset-left);
 	overflow-x: hidden;
-	font-family: $font-family-base;
+	font-family: var.$font-family-base;
 	-ms-overflow-style: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -187,8 +189,8 @@ h6 {
 //
 
 mark {
-	background: $color-lemon-light;
-	color: $color-black;
+	background: colors.$color-lemon-light;
+	color: colors.$color-black;
 }
 
 //
@@ -283,10 +285,10 @@ hr.wp-block-separator {
 	box-sizing: content-box;
 	width: 100%;
 	height: 0;
-	margin-top: rhythm(2);
-	margin-bottom: rhythm(2);
+	margin-top: func.rhythm(2);
+	margin-bottom: func.rhythm(2);
 	border: 0;
-	border-bottom: 1px solid $color-concrete;
+	border-bottom: 1px solid colors.$color-concrete;
 }
 
 //
@@ -296,13 +298,13 @@ hr.wp-block-separator {
 pre {
 	width: 100%;
 	max-height: 80vh;
-	margin-bottom: rhythm(4);
-	padding: rhythm(2);
+	margin-bottom: func.rhythm(4);
+	padding: func.rhythm(2);
 	overflow: auto;
-	border-top: rem(4px) solid $color-sandstone;
-	border-radius: $border-radius;
-	background-color: $color-snow;
-	font-size: $size-medium;
+	border-top: func.to_rem(4px) solid colors.$color-sandstone;
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
+	font-size: var.$size-medium;
 
 	code {
 		padding: 0;
@@ -312,9 +314,9 @@ pre {
 code {
 	display: block;
 	width: 100%;
-	padding: rhythm(2);
-	font-size: $size-medium;
-	color: $color-cyberspace;
+	padding: func.rhythm(2);
+	font-size: var.$size-medium;
+	color: colors.$color-cyberspace;
 }
 
 //
@@ -325,7 +327,7 @@ code,
 kbd,
 pre,
 samp {
-	font-family: $font-family-mono;
+	font-family: var.$font-family-mono;
 }
 
 // Forms
@@ -470,27 +472,27 @@ input[type='search']::-webkit-search-decoration {
 // Style placeholders
 ::-webkit-input-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 ::-moz-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 :-ms-input-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 :-moz-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 ::placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 // Remove spinner from fields in Chrome
@@ -527,7 +529,7 @@ fieldset {
 //
 
 legend {
-	margin-bottom: rhythm(1);
+	margin-bottom: func.rhythm(1);
 	padding: 0; // 2
 	border: 0; // 1
 	font-weight: 700;

package/src/base/fonts/_fonts.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 // Fonts
 @font-face {

package/src/components.js

@@ -11,7 +11,6 @@ import './organisms/mega-menu/mega-menu';
 import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
-import './atoms/toggle-high-contrast/toggle-high-contrast';
 import './atoms/height-limiter/height-limiter';
 import './atoms/file/file';
 import './atoms/file/filePreview';
@@ -23,7 +22,6 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
-import './molecules/modal/modal-graph';
 import './molecules/continue-video-guide/continue-video-guide';
 import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';

package/src/configurations/_bem.scss

@@ -1,4 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:meta";
+@use "sass:string";
+@use '../configurations/variables' as var;
 
 /// Element class separator
 /// @group BEM
@@ -15,8 +18,8 @@ $state-prefix: 'is';
 /// Converts selector to string
 /// @group BEM
 @function selector_to_string($selector) {
-	$selector: inspect($selector); //cast to string
-	$selector: str-slice($selector, 2, -2); //remove brackets
+	$selector: meta.inspect($selector); //cast to string
+	$selector: string.slice($selector, 2, -2); //remove brackets
 	@return $selector;
 }
 
@@ -24,7 +27,7 @@ $state-prefix: 'is';
 /// @group BEM
 @function contains_modifier($selector) {
 	$selector: selector_to_string($selector);
-	@if str-index($selector, $modifier-separator) {
+	@if string.index($selector, $modifier-separator) {
 		@return true;
 	} @else {
 		@return false;
@@ -35,14 +38,14 @@ $state-prefix: 'is';
 /// @group BEM
 @function get_block($selector) {
 	$selector: selector_to_string($selector);
-	$modifier-start: str-index($selector, $modifier-separator) - 1;
-	@return str-slice($selector, 0, $modifier-start);
+	$modifier-start: string.index($selector, $modifier-separator) - 1;
+	@return string.slice($selector, 0, $modifier-start);
 }
 
 /// Encapsulates a standalone entity that is meaningful on its own.
 /// @group BEM
 @mixin b($name) {
-	.#{$namespace}#{$name} {
+	.#{var.$namespace}#{$name} {
 		@content;
 	}
 }

package/src/configurations/_config.scss

@@ -1,7 +1,8 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
-@import '../configurations/colors/colors';
-@import '../configurations/colors/colors-functions';
+@use '../configurations/functions' as func;
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/colors/colors-functions' as colorFunc;
 
 /// Namespace
 /// Prepended to all outputted classes
@@ -26,24 +27,24 @@ $breakpoints: (
 /// Default margin and padding
 ///
 /// @group Config
-$default-margin: rhythm(2) !default;
-$default-padding: rhythm(2) !default;
+$default-margin: func.rhythm(2) !default;
+$default-padding: func.rhythm(2) !default;
 
 /// Theme colors
 ///
 /// @group Config
 $theme-colors: (
-	primary: $color-ruby,
-	secondary: $color-jade,
-	subtle: $color-granit
+	primary: colors.$color-ruby,
+	secondary: colors.$color-jade,
+	subtle: colors.$color-granit
 );
 
 /// Text colors
 ///
 /// @group Config
 .color {
-	@include color_values($theme-colors, 'color', $separator: '-');
+	@include colorFunc.color_values($theme-colors, 'color', $separator: '-');
 }
 
 // Default text-shadow
-$text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5);
+$text-shadow: 0 0 func.rhythm(2) rgba(colors.$color-black, 0.5);