@internetstiftelsen/styleguide 4.1.10-beta.0.1 → 4.1.11

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

@@ -197,7 +197,7 @@ function setupTextArea(el) {
 	editorEl.className = el.className;
 	editorEl.classList.add((0, _className2.default)('a-textarea--rich-text'));
 
-	el.style.display = 'none';
+	el.classList.add((0, _className2.default)('a-textarea--hidden'));
 	el.editor = editor;
 
 	el.parentNode.insertBefore(editorEl, el);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.1.10-beta.0.1",
+	"version": "4.1.11",
 	"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.79.4",
+		"sass": "^1.35.1",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9"
 	},

package/src/atoms/button/_button.scss

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

package/src/atoms/checkbox/_checkbox.scss

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

package/src/atoms/file/_file.scss

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

package/src/atoms/icon/sprite.svg

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

package/src/atoms/meta/_meta.scss

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

package/src/atoms/radiobutton/_radiobutton.scss

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

package/src/atoms/range/_range.scss

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

package/src/atoms/textarea/_textarea.scss

@@ -22,10 +22,9 @@
 	@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;
+		width: 100%;
 		padding: 0;
 	}
 

package/src/configurations/_extends.scss

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

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

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

package/src/configurations/colors/_colors.scss

@@ -1,5 +1,4 @@
 @charset 'UTF-8';
-@use "sass:color";
 
 /// @group Colors
 $color-black: #000 !default;
@@ -25,18 +24,11 @@ $color-facebook: #0866ff !default;
 $color-twitter: #00aced !default;
 $color-linkedin: #0a66c2 !default;
 
-// 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%);
+// Temporary darker colors
 
-// 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%);
+$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%);

package/src/configurations/forms/_fields.scss

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

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

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

package/src/molecules/submenu/_submenu.scss

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

package/src/molecules/table/_table.scss

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

package/src/organisms/accordion/_accordion.scss

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

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

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

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

@@ -1,6 +1,11 @@
 @charset "UTF-8";
 
 @include organism(event-listing-item) {
+
+	@include e(button) {
+
+	}
+
 	position: relative;
 	padding: rhythm(2);
 	border-left: 4px solid;
@@ -8,10 +13,6 @@
 	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,9 +1,11 @@
+$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: currentColor;
+	background-color: $color-jade-light;
 
 	&[aria-hidden='true'] {
 		display: none;
@@ -29,182 +31,35 @@
 	}
 
 	@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: 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;
-			}
-		}
+		margin-top: rhythm(1);
 
 		@include e(topic) {
-			margin-top: 0;
-			margin-bottom: 0;
-			border-bottom: 1px solid currentColor;
+			margin-top: rhythm(2);
+			margin-bottom: rhythm(0.5);
+			padding: rhythm(1) rhythm(1);
+			border-bottom: 1px solid $border-color;
 			font-family: $font-family-headings;
 
-			> 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;
-				}
+			&:first-child {
+				margin-top: 0;
 			}
 		}
 
 		@include e(item) {
-			margin: 0;
-			border-bottom: 1px solid currentColor;
+			margin: 0 0 rhythm(0.5) 0;
+			padding: rhythm(1) rhythm(1);
 
-			&:last-child {
-				border-bottom: 0;
-			}
-
-			@include bp-up(lg) {
-				padding: rhythm(1) rhythm(1);
-				margin-bottom: rhythm(0.5);
-				border-bottom: 0;
+			& + & {
+				border-top: 1px solid $border-color;
 			}
 		}
 
@@ -230,14 +85,8 @@
 	@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) {
@@ -245,20 +94,15 @@
 			}
 		}
 
-		@include bp-up(lg) {
-			padding: 0;
-		}
-
 		@include m(large) {
 			display: block;
-			width: 100%;
-			padding: rhythm(1.5) rhythm(2);
+			padding: 0 rhythm(1);
 			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,12 +3,11 @@ module.exports = {
 
 	context: {
 		hidden: 'false',
-		id: 'megaMenu',
+		id: 'mega-menu',
 		modifier:'',
 		columns: [
 			 {
 				headline: 'Domäner',
-				list_id: 'domains',
 				topics: [
 					{
 						topic: '',
@@ -62,22 +61,18 @@ module.exports = {
 			 },
 			{
 				headline: 'Kunskap',
-				list_id: 'kunskap',
 				topics: [
 					{
 						topic: 'För skolan',
 						items: [
 							{
-								item: 'Digitala lektioner',
-								is_sub_level: true,
+								item: 'Digitala lektioner'
 							},
 							{
-								item: 'Lärarfortbildning',
-								is_sub_level: true,
+								item: 'Lärarfortbildning'
 							},
 							{
-								item: 'Fördjupning',
-								is_sub_level: true,
+								item: 'Fördjupning'
 							},
 
 						]
@@ -86,16 +81,13 @@ module.exports = {
 						topic: 'För samhället',
 						items: [
 							{
-								item: 'Svenskarna och internet',
-								is_sub_level: true,
+								item: 'Svenskarna och internet'
 							},
 							{
-								item: 'Projekt internetaccess',
-								is_sub_level: true,
+								item: 'Projekt internetaccess'
 							},
 							{
-								item: 'Federationers',
-								is_sub_level: true,
+								item: 'Federationers'
 							},
 
 						]
@@ -104,7 +96,6 @@ module.exports = {
 			},
 			{
 				headline: 'Mötesplatser',
-				list_id: 'motesplatser',
 				topics: [
 					{
 						topic: '',
@@ -126,7 +117,7 @@ module.exports = {
 							},
 							{
 								item: 'Investeringar',
-								external: true,
+								external: true
 							},
 
 						]
@@ -135,27 +126,22 @@ 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',
-								is_sub_level: true,
+								item: 'Press'
 							},
 							{
-								item: 'Pressbilder och fotografier',
-								is_sub_level: true,
+								item: 'Pressbilder och fotografier'
 							},
 							{
-								item: 'Kontakt',
-								is_sub_level: true,
+								item: 'Kontakt'
 							}
 
 						]
@@ -164,7 +150,6 @@ module.exports = {
 			},
 			{
 				headline: 'English',
-				list_id: 'english',
 				topics: [
 					{
 						topic: '',
@@ -197,14 +182,6 @@ 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,5 +1,4 @@
 @charset "UTF-8";
-@use "sass:color";
 
 @use "sass:math";
 
@@ -18,7 +17,7 @@
 	transform: translateY(0);
 	transition: transform 0.25s ease-out;
 	background-color: $color-snow;
-	box-shadow: 0 -#{rhythm(1)} rhythm(3) color.adjust($color-cyberspace, $lightness: 70%);
+	box-shadow: 0 -#{rhythm(1)} rhythm(3) lighten($color-cyberspace, 70%);
 
 	@include m(hidden) {
 		transform: translateY(100%);

package/src/organisms/search/_search.scss

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

package/src/organisms/tabs/_tabs.scss

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

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

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

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

@@ -1 +0,0 @@
-<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>