@internetstiftelsen/styleguide 4.1.9 → 4.1.10-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.1.9",
+	"version": "4.1.10-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -65,7 +65,7 @@
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",
 		"replace": "^1.2.1",
-		"sass": "^1.35.1",
+		"sass": "^1.79.4",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9"
 	},

package/src/atoms/button/_button.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 // Default Button
 /// @group Buttons
@@ -342,7 +343,7 @@
 
 		&:hover,
 		&:focus {
-			color: darken($color-jade, 10%);
+			color: color.adjust($color-jade, $lightness: -10%);
 			text-shadow: none;
 		}
 
@@ -430,7 +431,7 @@
 		color: $color-peacock;
 
 		&:hover {
-			color: darken($color-peacock, 10%);
+			color: color.adjust($color-peacock, $lightness: -10%);
 			text-shadow: none;
 		}
 
@@ -501,7 +502,7 @@
 		&:hover {
 			color: $color-sandstone;
 		}
-		
+
 		&:focus {
 			color: $color-sandstone-light;
 		}

package/src/atoms/checkbox/_checkbox.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include atom(checkbox) {
 	&[type='checkbox'] {
@@ -30,7 +31,7 @@
 			&:hover {
 				+ label {
 					&::before {
-						background-color: darken($color-ash, 5%);
+						background-color: color.adjust($color-ash, $lightness: -5%);
 					}
 				}
 			}
@@ -58,7 +59,7 @@
 				@extend %disabled;
 
 				&::before {
-					background-color: darken($color-concrete, 5%);
+					background-color: color.adjust($color-concrete, $lightness: -5%);
 				}
 			}
 		}

package/src/atoms/file/_file.scss

@@ -62,7 +62,7 @@
 		}
 
 		@include bp-up(sm) {
-			width: rem(300px);
+			max-width: rem(300px);
 		}
 	}
 }

package/src/atoms/icon/search-domain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" id="icon-search-domain"><path d="m24 21.8 8 8-2.1 2.2-8-8c-5.9 4.6-14.3 3.6-19-2.2S-.7 7.6 5.1 2.9C10.9-1.8 19.3-.7 24 5.1c3.9 4.9 3.9 11.8 0 16.7Zm-10.6 2.1c5.8 0 10.5-4.7 10.5-10.5S19.2 3 13.4 3 3 7.7 3 13.4s4.7 10.5 10.4 10.5Z"/><path d="M6 15.2h1.8V17H6v-1.8ZM9.7 16.7c-.5-.3-.9-.6-1.2-1l1.2-1c.2.3.4.5.7.7.3.2.6.3 1 .3s.6 0 .8-.2c.2-.1.3-.3.3-.5s0-.3-.2-.4c-.1-.1-.3-.2-.4-.3s-.4-.1-.7-.2c-.5-.1-.9-.3-1.2-.4-.3-.1-.6-.4-.8-.6-.2-.3-.3-.6-.3-1.1s.1-.8.3-1.1.5-.5.9-.7c.4-.2.8-.3 1.3-.3s1 .1 1.5.3.8.5 1 .9l-1.1.8-.6-.6c-.3-.1-.5-.2-.8-.2s-.5 0-.6.2c-.2.1-.3.2-.3.4s0 .2.1.3.2.2.4.2.4.1.7.2c.5.1.9.3 1.3.4.3.1.6.3.9.6.3.3.4.7.4 1.2s-.1.8-.3 1.2c-.2.3-.6.6-1 .8-.4.2-.9.3-1.5.3s-1.3-.1-1.8-.4ZM16.2 16.7c-.5-.3-.9-.7-1.1-1.3-.2-.5-.4-1.1-.4-1.7s.1-1.2.3-1.8c.2-.5.6-1 1.1-1.3.5-.3 1.1-.5 1.8-.5s1.3.2 1.7.5c.5.3.8.7 1.1 1.2.2.5.4 1.1.4 1.8v.6h-4.6c0 .4.2.8.5 1 .3.3.7.4 1.2.4s1.2-.2 1.6-.7l1.2 1c-.4.4-.8.7-1.2.9-.5.2-1 .3-1.6.3s-1.4-.2-1.9-.5Zm3.3-3.8c0-.3 0-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2-.5 0-.9.1-1.1.4-.3.3-.4.6-.5 1h3.1Z"/></svg>

package/src/atoms/icon/sprite.svg

@@ -8,6 +8,9 @@
 		<symbol id="icon-search" viewbox="0 0 32 32">
 			<path d="M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z"/>
 		</symbol>
+		<symbol id="icon-search-domain" viewbox="0 0 32 32">
+			<path d="m24 21.8 8 8-2.1 2.2-8-8c-5.9 4.6-14.3 3.6-19-2.2S-.7 7.6 5.1 2.9C10.9-1.8 19.3-.7 24 5.1c3.9 4.9 3.9 11.8 0 16.7Zm-10.6 2.1c5.8 0 10.5-4.7 10.5-10.5S19.2 3 13.4 3 3 7.7 3 13.4s4.7 10.5 10.4 10.5Z"/><path d="M6 15.2h1.8V17H6v-1.8ZM9.7 16.7c-.5-.3-.9-.6-1.2-1l1.2-1c.2.3.4.5.7.7.3.2.6.3 1 .3s.6 0 .8-.2c.2-.1.3-.3.3-.5s0-.3-.2-.4c-.1-.1-.3-.2-.4-.3s-.4-.1-.7-.2c-.5-.1-.9-.3-1.2-.4-.3-.1-.6-.4-.8-.6-.2-.3-.3-.6-.3-1.1s.1-.8.3-1.1.5-.5.9-.7c.4-.2.8-.3 1.3-.3s1 .1 1.5.3.8.5 1 .9l-1.1.8-.6-.6c-.3-.1-.5-.2-.8-.2s-.5 0-.6.2c-.2.1-.3.2-.3.4s0 .2.1.3.2.2.4.2.4.1.7.2c.5.1.9.3 1.3.4.3.1.6.3.9.6.3.3.4.7.4 1.2s-.1.8-.3 1.2c-.2.3-.6.6-1 .8-.4.2-.9.3-1.5.3s-1.3-.1-1.8-.4ZM16.2 16.7c-.5-.3-.9-.7-1.1-1.3-.2-.5-.4-1.1-.4-1.7s.1-1.2.3-1.8c.2-.5.6-1 1.1-1.3.5-.3 1.1-.5 1.8-.5s1.3.2 1.7.5c.5.3.8.7 1.1 1.2.2.5.4 1.1.4 1.8v.6h-4.6c0 .4.2.8.5 1 .3.3.7.4 1.2.4s1.2-.2 1.6-.7l1.2 1c-.4.4-.8.7-1.2.9-.5.2-1 .3-1.6.3s-1.4-.2-1.9-.5Zm3.3-3.8c0-.3 0-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2-.5 0-.9.1-1.1.4-.3.3-.4.6-.5 1h3.1Z"/>
+		</symbol>
 		<symbol id="icon-arrow-forwards" viewbox="0 0 18.9 32">
 			<polygon points="2.8,0 18.9,16 2.8,32 0,29.1 12.5,16 0,2.9 "/>
 		</symbol>

package/src/atoms/main-menu/main-menu.config.js

@@ -68,7 +68,11 @@ module.exports = {
 				extra_class: 'js-toggle-mega-menu',
 				has_expandable: true,
 				controls: 'mega-menu',
-				hide_mobile: false
+				hide_mobile: false,
+				has_id: true,
+				id: 'mega-menu-text',
+				toggle_text: true,
+				data_toggle_text: 'Meny|Stäng'
 			}
 		]
 	}

package/src/atoms/meta/_meta.scss

@@ -1,14 +1,6 @@
 @charset 'UTF-8';
 
 @include atom(meta) {
-	@include plumber(
-		$font-size: 1.7,
-		$baseline: $mono-baseline,
-		$leading-bottom: 0
-	);
-
-	@include color_values($colors, 'fill', $prefix: '--', $separator: '-');
-
 	display: flex;
 	position: relative;
 	align-items: center;
@@ -18,6 +10,14 @@
 	text-transform: uppercase;
 	white-space: nowrap;
 
+	@include plumber(
+		$font-size: 1.7,
+		$baseline: $mono-baseline,
+		$leading-bottom: 0
+	);
+
+	@include color_values($colors, 'fill', $prefix: '--', $separator: '-');
+
 	span {
 		margin-left: rem(3px);
 	}

package/src/atoms/paging/_paging.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 // Forwards / backwards
 /// @group Paging
@@ -29,7 +30,7 @@
 	border: 1px solid $color-ash;
 	border-radius: 50%;
 	background-color: $color-snow;
-	box-shadow: 0 3px 5px lighten($color-granit, 15%);
+	box-shadow: 0 3px 5px color.adjust($color-granit, $lightness: 15%);
 
 	@include bp-up(sm) {
 		width: rhythm(6);

package/src/atoms/radiobutton/_radiobutton.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include atom(radio) {
 	&[type='radio'] {
@@ -31,7 +32,7 @@
 		&:hover {
 			+ label {
 				&::before {
-					background-color: darken($color-snow, 5%);
+					background-color: color.adjust($color-snow, $lightness: -5%);
 				}
 			}
 		}
@@ -50,7 +51,7 @@
 				@extend %disabled;
 
 				&::before {
-					background-color: darken($color-concrete, 5%);
+					background-color: color.adjust($color-concrete, $lightness: -5%);
 				}
 			}
 

package/src/atoms/range/_range.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include atom(range) {
 	-webkit-appearance: none;
@@ -12,7 +13,7 @@
 		background-color: $color-concrete;
 		height: rhythm(1);
 		border-radius: $border-radius;
-		border-top: 1px solid lighten($color-granit, 15%);
+		border-top: 1px solid color.adjust($color-granit, $lightness: 15%);
 	}
 
 	&::-moz-range-track {

package/src/atoms/textarea/_textarea.scss

@@ -19,6 +19,16 @@
 		@extend %discreet;
 	}
 
+	@include m(hidden) {
+		@include visuallyhidden;
+
+		// Usually in a field-group and we want validation messages at the top
+		top: 0;
+		min-height: 0;
+		min-width: 0;
+		padding: 0;
+	}
+
 	@include m(rich-text) {
 		min-height: auto;
 

package/src/atoms/textarea/rich-text.js

@@ -180,7 +180,7 @@ export function setupTextArea(el, onChange = () => {}) {
 	editorEl.className = el.className;
 	editorEl.classList.add(className('a-textarea--rich-text'));
 
-	el.style.display = 'none';
+	el.classList.add(className('a-textarea--hidden'));
 	el.editor = editor;
 
 	el.parentNode.insertBefore(editorEl, el);

package/src/configurations/_extends.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 %normalize-links {
 	padding: 0;
@@ -60,7 +61,7 @@
 	padding: rhythm(1);
 	border: 1px solid $color-granit;
 	border-radius: $border-radius;
-	background-color: lighten($color-ash, 4%);
+	background-color: color.adjust($color-ash, $lightness: 4%);
 	-webkit-appearance: none;
 	font-size: rem(16px);
 }
@@ -72,7 +73,7 @@
 
 %invalid {
 	border-color: $color-ruby;
-	background-color: lighten($color-ruby-light, 16%);
+	background-color: color.adjust($color-ruby-light, $lightness: 16%);
 }
 
 %disabled {
@@ -88,12 +89,12 @@
 
 %discreet {
 	border-style: dashed;
-	border-color: lighten($color-granit, 20%);
+	border-color: color.adjust($color-granit, $lightness: 20%);
 	background-color: transparent;
 
 	&:focus {
 		border-style: solid;
-		background-color: lighten($color-ash, 4%);
+		background-color:  color.adjust($color-ash, $lightness: 4%);
 	}
 }
 

package/src/configurations/colors/_colors-functions.scss

@@ -24,32 +24,38 @@ $colors: (
 	ruby: (
 		base: $color-ruby,
 		light: $color-ruby-light,
-		dark: $color-ruby-dark
+		dark: $color-ruby-dark,
+		medium-dark: $color-ruby-medium-dark
 	),
 	peacock: (
 		base: $color-peacock,
 		light: $color-peacock-light,
-		dark: $color-peacock-dark
+		dark: $color-peacock-dark,
+		medium-dark: $color-peacock-medium-dark
 	),
 	jade: (
 		base: $color-jade,
 		light: $color-jade-light,
-		dark: $color-jade-dark
+		dark: $color-jade-dark,
+		medium-dark: $color-jade-medium-dark
 	),
 	sandstone: (
 		base: $color-sandstone,
 		light: $color-sandstone-light,
-		dark: $color-sandstone-dark
+		dark: $color-sandstone-dark,
+		medium-dark: $color-sandstone-medium-dark
 	),
 	lemon: (
 		base: $color-lemon,
 		light: $color-lemon-light,
-		dark: $color-lemon-dark
+		dark: $color-lemon-dark,
+		medium-dark: $color-lemon-medium-dark
 	),
 	ocean: (
 		base: $color-ocean,
 		light: $color-ocean-light,
-		dark : $color-ocean-dark
+		dark : $color-ocean-dark,
+		medium-dark: $color-ocean-medium-dark
 	)
 );
 

package/src/configurations/colors/_colors.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 /// @group Colors
 $color-black: #000 !default;
@@ -24,11 +25,18 @@ $color-facebook: #0866ff !default;
 $color-twitter: #00aced !default;
 $color-linkedin: #0a66c2 !default;
 
-// Temporary darker colors
+// Dark colors only for accessibility
+$color-ruby-dark: color.adjust($color-ruby, $lightness: -20%);
+$color-peacock-dark: color.adjust($color-peacock, $lightness: -20%);
+$color-jade-dark: color.adjust($color-jade, $lightness: -20%);
+$color-sandstone-dark: color.adjust($color-sandstone, $lightness: -20%);
+$color-lemon-dark: color.adjust($color-lemon, $lightness: -15%);
+$color-ocean-dark:color.adjust($color-ocean, $lightness: -24%);
 
-$color-ruby-dark: darken($color-ruby, 20%);
-$color-peacock-dark: darken($color-peacock, 20%);
-$color-jade-dark: darken($color-jade, 20%);
-$color-sandstone-dark: darken($color-sandstone, 20%);
-$color-lemon-dark: darken($color-lemon, 15%);
-$color-ocean-dark: darken($color-ocean, 24%);
+// Medium dark colors, for decoration purposes like borders
+$color-ruby-medium-dark:  color.adjust($color-ruby, $lightness: -10%);
+$color-peacock-medium-dark:  color.adjust($color-peacock, $lightness: -10%);
+$color-jade-medium-dark: color.adjust($color-jade, $lightness: -10%);
+$color-sandstone-medium-dark: color.adjust($color-sandstone, $lightness: -10%);
+$color-lemon-medium-dark: color.adjust($color-lemon, $lightness: -13%);
+$color-ocean-medium-dark: color.adjust($color-ocean, $lightness: -10%);

package/src/configurations/forms/_fields.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include b(field-group) {
 	position: relative;
@@ -94,7 +95,7 @@ fieldset[disabled] {
 			@extend %disabled;
 
 			&::before {
-				background-color: darken($color-concrete, 5%) !important;
+				background-color: color.adjust($color-concrete, $lightness: -5%) !important;
 			}
 		}
 	}
@@ -104,14 +105,14 @@ fieldset[disabled] {
 			@extend %disabled;
 
 			&::before {
-				background-color: darken($color-concrete, 5%);
+				background-color: color.adjust($color-concrete, $lightness: -5%);
 			}
 
 			&:hover,
 			&:focus {
 				/* stylelint-disable */
 				&::before {
-					background-color: darken($color-concrete, 5%);
+					background-color: color.adjust($color-concrete, $lightness: -5%);
 				}
 				/* stylelint-enable */
 			}

package/src/molecules/cookie-disclaimer/cookie-disclaimer.scss

@@ -23,14 +23,13 @@
 	}
 
 	@include e(inner) {
-
-		@include make-container-max-widths();
-
 		display: flex;
 		flex-wrap: wrap;
 		margin-right: auto;
 		margin-left: auto;
 
+		@include make-container-max-widths();
+
 		@include bp-down(xl) {
 			padding-right: $grid-gutter-width;
 			padding-left: $grid-gutter-width;

package/src/molecules/glider/_glider.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use "sass:color";
 
 // The Glider components is dependant on JS-classes and is therefore not namespaced
 
@@ -114,7 +115,7 @@
 
 	&.disabled {
 		background-color: $color-ash;
-		box-shadow: 0 2px 5px lighten($color-granit, 25%);
+		box-shadow: 0 2px 5px color.adjust($color-granit, $lightness: 25%);
 		pointer-events: none;
 
 		svg {

package/src/molecules/submenu/_submenu.scss

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 @use "sass:math";
+@use "sass:color";
 
 @include molecule(submenu) {
 	margin: 0 0 rhythm(2) 0;
@@ -143,7 +144,7 @@
 			margin: 0;
 			padding: rhythm(1) rhythm(3);
 			border: 0;
-			border-left: 1px solid darken($color-ash, 5%);
+			border-left: 1px solid color.adjust($color-ash, $lightness: -5%);
 			background-color: transparent;
 
 			&::before,
@@ -171,7 +172,7 @@
 
 			&[aria-expanded='true'] {
 				margin-bottom: -1px;
-				background-color: lighten($color-ash, 3%);
+				background-color: color.adjust($color-ash, $lightness: 3%);
 
 				&::after {
 					transform: rotate(-135deg);
@@ -183,7 +184,7 @@
 			}
 
 			&:hover {
-				background-color: lighten($color-ash, 3%);
+				background-color: color.adjust($color-ash, $lightness: 3%);
 			}
 
 			@include bp-up(md) {
@@ -207,8 +208,8 @@
 	@include e(sublevel) {
 		margin: 0;
 		padding: 0;
-		border-top: 1px solid darken($color-ash, 3);
-		background-color: lighten($color-ash, 3%);
+		border-top: 1px solid color.adjust($color-ash, $lightness: -3%);
+		background-color: color.adjust($color-ash, $lightness: 3%);
 		list-style: none;
 
 		&[aria-hidden='true'] {
@@ -221,7 +222,7 @@
 			padding: 0 rhythm(1.5);
 
 			& + & {
-				border-top: 1px solid darken($color-ash, 4);
+				border-top: 1px solid color.adjust($color-ash, $lightness: -4%);
 			}
 
 			/* Support for icon on sublevel */

package/src/molecules/table/_table.scss

@@ -49,7 +49,7 @@
 	}
 
 	th {
-		font-weight: 700;
+		font-weight: normal;
 	}
 
 	th,

package/src/organisms/accordion/_accordion.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 // Extends
 %header {
@@ -13,6 +14,7 @@
 	font-family: $font-family-headings;
 	font-size: rem(17px);
 	text-align: left;
+	-webkit-appearance: none;
 
 	@include bp-up(md) {
 		font-size: rem(18px);
@@ -22,8 +24,6 @@
 		font-size: rem(20px);
 	}
 
-	-webkit-appearance: none;
-
 	&::before,
 	&::after {
 		content: '';
@@ -126,7 +126,7 @@
 	}
 
 	@include organism(accordion) {
-		background-color: lighten($color-ash, 4%);
+		background-color: color.adjust($color-ash, $lightness: 4%);
 
 		@include e(panel) {
 			&[aria-hidden='false'],
@@ -240,7 +240,7 @@
 
 		@include m(ash) {
 			border-radius: 0;
-			background-color: lighten($color-ash, 4%);
+			background-color: color.adjust($color-ash, $lightness: 4%);
 		}
 	}
 

package/src/organisms/domain-search/_domain-search.scss

@@ -1,8 +1,8 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include organism(domain-search) {
 	padding: rhythm(2) 0 rhythm(1) 0;
-	background-color: $color-snow;
 
 	&:not([class*='is-in-mega-menu']) {
 		display: none;
@@ -72,7 +72,7 @@
 		transition: padding 0.25s ease-out;
 		border: 0;
 		border-radius: $border-radius;
-		background-color: lighten($color-ash, 4%);
+		background-color: color.adjust($color-ash, $lightness: 4%);
 		letter-spacing: -0.1px;
 		-webkit-appearance: none;
 
@@ -81,10 +81,10 @@
 		}
 
 		@include m(force-focus-look) {
-			background-color: lighten($color-ash, 4%);
+			background-color: color.adjust($color-ash, $lightness: 4%);
 
 			&:focus {
-				background-color: lighten($color-ash, 4%);
+				background-color: color.adjust($color-ash, $lightness: 4%);
 			}
 		}
 	}

package/src/organisms/domain-search/domain-search.config.js

@@ -5,6 +5,7 @@ module.exports = {
 		hidden: 'false',
 		id: 'domain-search',
 		addidional_classes: 'o-domain-search--narrow',
-		label: 'sök en .se- eller .nu-domän'
+		label: 'sök en .se- eller .nu-domän',
+		white_background: true
 	}
 }

package/src/organisms/event-listing-item/_event-listing-item.scss

@@ -1,11 +1,6 @@
 @charset "UTF-8";
 
 @include organism(event-listing-item) {
-
-	@include e(button) {
-
-	}
-
 	position: relative;
 	padding: rhythm(2);
 	border-left: 4px solid;
@@ -13,6 +8,10 @@
 	background-color: $color-snow;
 	font-size: $size-medium-plus;
 
+	@include e(button) {
+
+	}
+
 	@include bp-up(md) {
 		font-size: $size-base;
 	}

package/src/organisms/mega-menu/_mega-menu.scss

@@ -1,11 +1,9 @@
-$border-color: darken($color-jade, 5%);
-
 @include organism(mega-menu) {
 	z-index: z_index(middlegroundImportant);
 	padding-right: 0;
 	padding-left: 0;
 	transition: transform 0.25s ease-out;
-	background-color: $color-jade-light;
+	background-color: currentColor;
 
 	&[aria-hidden='true'] {
 		display: none;
@@ -31,35 +29,182 @@ $border-color: darken($color-jade, 5%);
 	}
 
 	@include e(wrapper) {
-		padding-top: rhythm(3);
-
 		@include bp-down(md) {
 			padding-right: rhythm(1);
 			padding-left: rhythm(1);
+			border-bottom: 1px solid currentColor;
+		}
+
+		@include bp-up(lg) {
+			padding-top: rhythm(3);
+		}
+	}
+
+	@include e(column) {
+		padding-bottom: rhythm(2);
+
+		@include bp-down(md) {
+			padding-left: 0;
+			padding-right: 0;
+			padding-bottom: 0;
+		}
+	}
+
+	@include e(buttons-list) {
+		display: flex;
+		align-items: stretch;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		@include e(item) {
+			width: 50%;
+			flex-grow: 1;
+			flex-shrink: 0;
+			margin: 0;
+			padding: 0;
+
+			& + & {
+				border-left: 1px solid currentColor;
+			}
+		}
+
+		@include e(link) {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-top: rhythm(2);
+			padding-bottom: rhythm(2);
+			text-align: center;
+			color: $color-cyberspace;
+			text-decoration: none;
+			font-family: $font-family-headings;
+			border: 0;
+			background-color: transparent;
+			appearance: none;
+			width: 100%;
+			height: 100%;
+
+			&[aria-expanded='true'] {
+				background-color: currentColor;
+			}
+
+			svg {
+				width: $icon-size-large * 1.25;
+				height: $icon-size-large * 1.25;
+				margin-bottom: rhythm(1);
+				pointer-events: none;
+			}
+
+			span {
+				pointer-events: none;
+			}
+		}
+
+		@include bp-up(lg) {
+			display: none;
+		}
+	}
+
+	@include e(search-container) {
+		background-color: currentcolor;
+		padding-top: rhythm(2);
+		padding-bottom: rhythm(2);
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+	}
+
+	@include e(topic) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-top: 1px solid currentColor;
+
+		@include bp-up(lg) {
+			background-color: transparent;
+			border-top: 0;
+			margin-bottom: rhythm(1);
+		}
+	}
+
+	@include e(topic-button) {
+		margin-left: auto;
+		align-self: stretch;
+		padding-left: rhythm(1.5);
+		padding-right: rhythm(1.5);
+		border-left: 1px solid currentColor;
+
+		@include bp-up(lg) {
+			display: none;
+			pointer-events: none;
+		}
+
+		&[aria-expanded='true'] {
+			background-color: currentColor;
+
+			svg {
+				transform: rotate(-180deg);
+			}
 		}
 	}
 
 	@include e(list) {
-		margin-top: rhythm(1);
+		margin-top: 0;
+		background-color: currentColor;
+		margin-bottom: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+
+		@include bp-up(lg) {
+			margin-top: rhythm(1);
+			background-color: transparent;
+			border-bottom: 0;
+
+			&[aria-hidden='true'] {
+				display: initial;
+			}
+		}
 
 		@include e(topic) {
-			margin-top: rhythm(2);
-			margin-bottom: rhythm(0.5);
-			padding: rhythm(1) rhythm(1);
-			border-bottom: 1px solid $border-color;
+			margin-top: 0;
+			margin-bottom: 0;
+			border-bottom: 1px solid currentColor;
 			font-family: $font-family-headings;
 
-			&:first-child {
-				margin-top: 0;
+			> a {
+				padding: rhythm(1) rhythm(3.5);
+			}
+
+			@include bp-up(lg) {
+				margin-top: rhythm(2);
+				margin-bottom: rhythm(0.5);
+				padding: rhythm(1) rhythm(1);
+				border-bottom: 0;
+
+				> a {
+					padding: 0;
+				}
 			}
 		}
 
 		@include e(item) {
-			margin: 0 0 rhythm(0.5) 0;
-			padding: rhythm(1) rhythm(1);
+			margin: 0;
+			border-bottom: 1px solid currentColor;
 
-			& + & {
-				border-top: 1px solid $border-color;
+			&:last-child {
+				border-bottom: 0;
+			}
+
+			@include bp-up(lg) {
+				padding: rhythm(1) rhythm(1);
+				margin-bottom: rhythm(0.5);
+				border-bottom: 0;
 			}
 		}
 
@@ -85,8 +230,14 @@ $border-color: darken($color-jade, 5%);
 	@include e(link) {
 		display: inline-flex;
 		align-items: baseline;
+		width: 100%;
 		color: $color-cyberspace;
 		text-decoration: none;
+		padding: rhythm(1) rhythm(3.5);
+
+		@include m(sub-level) {
+			padding: rhythm(1) rhythm(5);
+		}
 
 		&:hover {
 			&:not(span) {
@@ -94,15 +245,20 @@ $border-color: darken($color-jade, 5%);
 			}
 		}
 
+		@include bp-up(lg) {
+			padding: 0;
+		}
+
 		@include m(large) {
 			display: block;
-			padding: 0 rhythm(1);
+			width: 100%;
+			padding: rhythm(1.5) rhythm(2);
 			font-family: $font-family-headings;
-			font-size: rem(23px);
 			white-space: nowrap;
 
 			@include bp-up(lg) {
 				padding: 0;
+				font-size: rem(23px);
 			}
 		}
 

package/src/organisms/mega-menu/mega-menu.config.js

@@ -3,11 +3,12 @@ module.exports = {
 
 	context: {
 		hidden: 'false',
-		id: 'mega-menu',
+		id: 'megaMenu',
 		modifier:'',
 		columns: [
 			 {
 				headline: 'Domäner',
+				list_id: 'domains',
 				topics: [
 					{
 						topic: '',
@@ -61,18 +62,22 @@ module.exports = {
 			 },
 			{
 				headline: 'Kunskap',
+				list_id: 'kunskap',
 				topics: [
 					{
 						topic: 'För skolan',
 						items: [
 							{
-								item: 'Digitala lektioner'
+								item: 'Digitala lektioner',
+								is_sub_level: true,
 							},
 							{
-								item: 'Lärarfortbildning'
+								item: 'Lärarfortbildning',
+								is_sub_level: true,
 							},
 							{
-								item: 'Fördjupning'
+								item: 'Fördjupning',
+								is_sub_level: true,
 							},
 
 						]
@@ -81,13 +86,16 @@ module.exports = {
 						topic: 'För samhället',
 						items: [
 							{
-								item: 'Svenskarna och internet'
+								item: 'Svenskarna och internet',
+								is_sub_level: true,
 							},
 							{
-								item: 'Projekt internetaccess'
+								item: 'Projekt internetaccess',
+								is_sub_level: true,
 							},
 							{
-								item: 'Federationers'
+								item: 'Federationers',
+								is_sub_level: true,
 							},
 
 						]
@@ -96,6 +104,7 @@ module.exports = {
 			},
 			{
 				headline: 'Mötesplatser',
+				list_id: 'motesplatser',
 				topics: [
 					{
 						topic: '',
@@ -117,7 +126,7 @@ module.exports = {
 							},
 							{
 								item: 'Investeringar',
-								external: true
+								external: true,
 							},
 
 						]
@@ -126,22 +135,27 @@ module.exports = {
 			},
 			{
 				headline: 'Om oss',
+				list_id: 'om-oss',
 				topics: [
 					{
 						topic: 'Presentation',
 						items: [
 							{
 								item: 'Jobba hos oss',
+								is_sub_level: true,
 								external: true
 							},
 							{
-								item: 'Press'
+								item: 'Press',
+								is_sub_level: true,
 							},
 							{
-								item: 'Pressbilder och fotografier'
+								item: 'Pressbilder och fotografier',
+								is_sub_level: true,
 							},
 							{
-								item: 'Kontakt'
+								item: 'Kontakt',
+								is_sub_level: true,
 							}
 
 						]
@@ -150,6 +164,7 @@ module.exports = {
 			},
 			{
 				headline: 'English',
+				list_id: 'english',
 				topics: [
 					{
 						topic: '',
@@ -182,6 +197,14 @@ module.exports = {
 			context: {
 				domain_search: true
 			}
+		},
+		{
+			name: 'With both searches',
+			context: {
+				domain_search: true,
+				search: true,
+				hidden: true
+			}
 		}
 	]
 }

package/src/organisms/podcast/_podcast-player.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use "sass:color";
 
 @use "sass:math";
 
@@ -17,7 +18,7 @@
 	transform: translateY(0);
 	transition: transform 0.25s ease-out;
 	background-color: $color-snow;
-	box-shadow: 0 -#{rhythm(1)} rhythm(3) lighten($color-cyberspace, 70%);
+	box-shadow: 0 -#{rhythm(1)} rhythm(3) color.adjust($color-cyberspace, $lightness: 70%);
 
 	@include m(hidden) {
 		transform: translateY(100%);

package/src/organisms/search/_search.scss

@@ -1,3 +1,6 @@
+@charset 'UTF-8';
+@use "sass:color";
+
 @include organism(search) {
 	border-radius: $border-radius;
 	background-color: $color-snow;
@@ -33,13 +36,13 @@
 		transition: padding 0.25s ease-out;
 		border: 0;
 		border-radius: $border-radius;
-		background-color: lighten($color-ash, 4%);
+		background-color: color.adjust($color-ash, $lightness: 4%);
 		letter-spacing: -0.1px;
 		-webkit-appearance: none;
 
 		&:focus {
 			@extend %input-focus;
-			
+
 			background-color: $color-snow;
 		}
 
@@ -48,10 +51,10 @@
 		}
 
 		@include m(force-focus-look) {
-			background-color: lighten($color-ash, 4%);
+			background-color: color.adjust($color-ash, $lightness: 4%);
 
 			&:focus {
-				background-color: lighten($color-ash, 4%);
+				background-color: color.adjust($color-ash, $lightness: 4%);
 			}
 		}
 	}

package/src/organisms/tabs/_tabs.scss

@@ -1,4 +1,5 @@
 @charset 'UTF-8';
+@use "sass:color";
 
 @include organism(tab-list) {
 	overflow: hidden;
@@ -81,7 +82,7 @@
 		}
 
 		&:hover {
-			background-color: darken($color-concrete, 5%);
+			background-color: color.adjust($color-concrete, $lightness: -5%);
 		}
 	}
 

package/src/organisms/video-guide/_video-guide.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use "sass:color";
 
 @include organism(video-guide) {
 	flex-direction: column;
@@ -306,7 +307,7 @@
 				padding: 0;
 				margin: 0;
 				display: block;
-				border-top: 1px solid lighten($color-cyberspace, 10%);
+				border-top: 1px solid color.adjust($color-cyberspace, $lightness: 10%);
 			}
 		}
 
@@ -343,7 +344,7 @@
 			&:hover,
 			&:focus,
 			&.is-current {
-				background-color: lighten($color-cyberspace, 10%);
+				background-color: color.adjust($color-cyberspace, $lightness: 10%);
 
 				&::after {
 					overflow: visible;