@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/configurations/grid/_grid.scss

@@ -1,6 +1,11 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 @use "sass:math";
+@use '../variables' as var;
+@use '../functions' as func;
+@use '../../vendor/grid/grid' as grid;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/grid/grid-framework' as gridFramework;
 
 // Grid only
 //
@@ -19,16 +24,16 @@
 //
 // Set the container width, and override it for fixed navbars in media queries.
 
-@if $enable-grid-classes {
+@if var.$enable-grid-classes {
 	.wrapper,
 	%wrapper {
-		@include make-container();
-		@include make-container-max-widths();
+		@include grid.make-container();
+		@include grid.make-container-max-widths();
 
 		// Specify bigger wrapper padding on smaller screens
-		@include bp-down(xl) {
-			padding-right: $grid-gutter-width;
-			padding-left: $grid-gutter-width;
+		@include breakpoint.bp-down(xl) {
+			padding-right: var.$grid-gutter-width;
+			padding-left: var.$grid-gutter-width;
 		}
 	}
 }
@@ -38,9 +43,9 @@
 // Utilizes the mixin meant for fixed width containers, but with 100% width for
 // fluid, full width layouts.
 
-@if $enable-grid-classes {
+@if var.$enable-grid-classes {
 	.wrapper-fluid {
-		@include make-container();
+		@include grid.make-container();
 	}
 }
 
@@ -58,12 +63,12 @@
 
 		> .grid,
 		> [class*='grid-']:nth-child(#{$i}) {
-			transform: translateY(rhythm($col-gap));
+			transform: translateY(func.rhythm($col-gap));
 		}
 
-		@include bp-only(sm) {
+		@include breakpoint.bp-only(sm) {
 			> [class*='grid-']:last-child {
-				transform: translateY(rhythm($gap));
+				transform: translateY(func.rhythm($gap));
 			}
 		}
 	}
@@ -74,7 +79,7 @@
 	$bp-gap: $gap;
 	$margin: 7;
 
-	margin: rhythm($margin) 0 0;
+	margin: func.rhythm($margin) 0 0;
 
 	&:not(.asymmetric-reversed) {
 		@include make-asymmetric-cols($bp-gap);
@@ -84,8 +89,8 @@
 		@include make-asymmetric-cols($bp-gap, true);
 	}
 
-	@include bp-up(sm) {
-		margin: rhythm($margin * 1.25) 0 0;
+	@include breakpoint.bp-up(sm) {
+		margin: func.rhythm($margin * 1.25) 0 0;
 
 		&:not(.asymmetric-reversed) {
 			$bp-gap: $gap * 1.25;
@@ -98,16 +103,16 @@
 		}
 	}
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		&.asymmetric-reversed {
 			margin-bottom: calc(100px);
 		}
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 
 
-		margin: rhythm($margin * 1.5) 0 0;
+		margin: func.rhythm($margin * 1.5) 0 0;
 
 		&:not(.asymmetric-reversed) {
 			$bp-gap: $gap * 1.5;
@@ -121,8 +126,8 @@
 		}
 	}
 
-	@include bp-up(xl) {
-		margin: rhythm($margin * 2) 0 0;
+	@include breakpoint.bp-up(xl) {
+		margin: func.rhythm($margin * 2) 0 0;
 
 		&:not(.asymmetric-reversed) {
 			$bp-gap: $gap * 2;
@@ -137,33 +142,33 @@
 	}
 }
 
-@if $enable-grid-classes {
+@if var.$enable-grid-classes {
 	.row {
-		@include make-row();
+		@include grid.make-row();
 	}
 
 	.asymmetric {
 		@include make-asymmetric-row;
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			&-sm {
 				@include make-asymmetric-row;
 			}
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			&-md {
 				@include make-asymmetric-row;
 			}
 		}
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 			&-lg {
 				@include make-asymmetric-row;
 			}
 		}
 
-		@include bp-up(xl) {
+		@include breakpoint.bp-up(xl) {
 			&-xl {
 				@include make-asymmetric-row;
 			}
@@ -192,6 +197,6 @@
 //
 // Common styles for small and large grid columns
 
-@if $enable-grid-classes {
-	@include make-grid-columns();
+@if var.$enable-grid-classes {
+	@include gridFramework.make-grid-columns();
 }

package/src/configurations/grid/grid.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		title: 'Grid',
 		description: 'Layout grid - 18 columns.'
 	}
-}
+};

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
+[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]

package/src/configurations/typography/_typography.scss

@@ -1,23 +1,31 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../variables' as var;
+@use '../functions' as func;
+@use '../extends';
+@use '../colors/colors' as colors;
+@use '../colors/colors-functions' as colorFunc;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/baseline/plumber' as plumber;
+@use '../bem' as bem;
 
 h1,
 .alpha,
 %alpha {
-	@include plumber(
-		$font-size: 3,
+	@include plumber.plumber(
+		var.$font-size: 3,
 		$line-height: 4,
 		$leading-bottom: 2,
-		$baseline: $headings-baseline
+		$baseline: var.$headings-baseline
 	);
 
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 
-	@include bp-up(sm) {
-		@include plumber(
-			$font-size: 4,
+	@include breakpoint.bp-up(sm) {
+		@include plumber.plumber(
+			var.$font-size: 4,
 			$line-height: 5,
 			$leading-bottom: 1,
-			$baseline: $headings-baseline
+			$baseline: var.$headings-baseline
 		);
 	}
 }
@@ -25,18 +33,18 @@ h1,
 h2,
 .beta,
 %beta {
-	@include plumber(
-		$font-size: 2.44444,
+	@include plumber.plumber(
+		var.$font-size: 2.44444,
 		$line-height: 3,
 		$leading-bottom: 1,
-		$baseline: $headings-baseline
+		$baseline: var.$headings-baseline
 	);
-	
-	font-family: $font-family-headings;
 
-	@include bp-up(sm) {
-		@include plumber(
-			$font-size: 2.666666,
+	font-family: var.$font-family-headings;
+
+	@include breakpoint.bp-up(sm) {
+		@include plumber.plumber(
+			var.$font-size: 2.666666,
 			$leading-bottom: 1
 		);
 
@@ -47,27 +55,27 @@ h2,
 h3,
 .gamma,
 %gamma {
-	@include plumber(
-		$font-size: 2.22222,
+	@include plumber.plumber(
+		var.$font-size: 2.22222,
 		$line-height: 3,
 		$leading-top: 0,
 		$leading-bottom: 1
 	);
 
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 }
 
 h4,
 .delta,
 %delta {
-	@include plumber(
-		$font-size: 1.888888,
+	@include plumber.plumber(
+		var.$font-size: 1.888888,
 		$line-height: 3,
 		$leading-top: 0,
 		$leading-bottom: 1
 	);
 
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 }
 
 %reset-link-style {
@@ -100,14 +108,14 @@ ol:not([class]) {
 }
 
 li {
-	padding-top: rhythm(0.25);
-	padding-bottom: rhythm(0.25);
+	padding-top: func.rhythm(0.25);
+	padding-bottom: func.rhythm(0.25);
 }
 
 li ul,
 li ol {
-	margin-top: rhythm(1);
-	margin-left: rhythm(4);
+	margin-top: func.rhythm(1);
+	margin-left: func.rhythm(4);
 	padding-top: 0;
 	padding-left: 0;
 }
@@ -124,7 +132,7 @@ p,
 ul,
 ol,
 dl {
-	@include plumber(
+	@include plumber.plumber(
 		$leading-bottom: 3
 	);
 }
@@ -134,14 +142,14 @@ ol,
 dl {
 	+ h2,
 	+ .beta {
-		margin-top: rhythm(5);
+		margin-top: func.rhythm(5);
 	}
 }
 
 .small,
 small {
-	@include plumber(
-		$font-size: 1.5,
+	@include plumber.plumber(
+		var.$font-size: 1.5,
 		$line-height: 2,
 		$leading-bottom: 0
 	);
@@ -149,26 +157,26 @@ small {
 
 .supersize,
 %supersize {
-	@include plumber(
-		$font-size: 3,
+	@include plumber.plumber(
+		var.$font-size: 3,
 		$line-height: 4,
 		$leading-bottom: 1,
-		$baseline: $headings-baseline
+		$baseline: var.$headings-baseline
 	);
 
-	font-family: $font-family-bold;
+	font-family: var.$font-family-bold;
 
-	@include bp-up(sm) {
-		@include plumber(
-			$font-size: 4.5,
+	@include breakpoint.bp-up(sm) {
+		@include plumber.plumber(
+			var.$font-size: 4.5,
 			$line-height: 5,
 			$leading-bottom: 1
 		);
 	}
 
-	@include bp-up(md) {
-		@include plumber(
-			$font-size: 7,
+	@include breakpoint.bp-up(md) {
+		@include plumber.plumber(
+			var.$font-size: 7,
 			$line-height: 8,
 			$leading-bottom: 2
 		);
@@ -179,18 +187,18 @@ small {
 		hyphenate-limit-chars: 13 3 4;
 		overflow-wrap: break-word;
 
-		@include plumber(
-			$font-size: 4.5,
+		@include plumber.plumber(
+			var.$font-size: 4.5,
 			$line-height: 5,
 			$leading-bottom: 1
 		);
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			hyphens: initial;
 			overflow-wrap: normal;
 
-			@include plumber(
-				$font-size: 7,
+			@include plumber.plumber(
+				var.$font-size: 7,
 				$line-height: 8,
 				$leading-bottom: 2
 			);
@@ -199,49 +207,49 @@ small {
 }
 
 .godzilla {
-	@include plumber(
+	@include plumber.plumber(
 		$leading-top: 0,
 		$leading-bottom: 0
 	);
 
 	line-height: 79px;
 	font-size: 120px;
-	font-family: $font-family-bold;
-	letter-spacing: -#{rem(5px)};
+	font-family: var.$font-family-bold;
+	letter-spacing: -#{func.to_rem(5px)};
 
-	@include bp-up(sm) {
+	@include breakpoint.bp-up(sm) {
 		line-height: 100px;
 		font-size: 150px;
 	}
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		line-height: 135px;
 		font-size: 200px;
-		letter-spacing: -#{rem(10px)};
+		letter-spacing: -#{func.to_rem(10px)};
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		line-height: 201px;
 		font-size: 295px;
-		letter-spacing: -#{rem(20px)};
+		letter-spacing: -#{func.to_rem(20px)};
 	}
 
-	@include bp-up(xl) {
+	@include breakpoint.bp-up(xl) {
 		line-height: 247px;
 		font-size: 360px;
 	}
 
 	// Special rule for decade starting with 1
-	@include m(19) {
+	@include bem.m(19) {
 		&::first-letter {
-			letter-spacing: -#{rem(20px)};
+			letter-spacing: -#{func.to_rem(20px)};
 
-			@include bp-up(lg) {
-				letter-spacing: -#{rem(40px)};
+			@include breakpoint.bp-up(lg) {
+				letter-spacing: -#{func.to_rem(40px)};
 			}
 
-			@include bp-up(xl) {
-				letter-spacing: -#{rem(45px)};
+			@include breakpoint.bp-up(xl) {
+				letter-spacing: -#{func.to_rem(45px)};
 			}
 		}
 	}
@@ -250,15 +258,15 @@ small {
 .preamble,
 %preamble {
 
-	@include plumber(
-		$font-size: 2.55555,
+	@include plumber.plumber(
+		var.$font-size: 2.55555,
 		$line-height: 4,
 		$leading-bottom: 4
 	);
 
-	@include bp-up(sm) {
-		@include plumber(
-			$font-size: 3,
+	@include breakpoint.bp-up(sm) {
+		@include plumber.plumber(
+			var.$font-size: 3,
 			$line-height: 4,
 			$leading-bottom: 4
 		);
@@ -266,37 +274,37 @@ small {
 }
 
 .meta {
-	@include plumber(
-		$font-size: 1.75,
-		$baseline: $mono-baseline
+	@include plumber.plumber(
+		var.$font-size: 1.75,
+		$baseline: var.$mono-baseline
 	);
 
-	font-family: $font-family-mono;
+	font-family: var.$font-family-mono;
 	font-weight: normal;
-	letter-spacing: rem(0.5px);
+	letter-spacing: func.to_rem(0.5px);
 	text-transform: uppercase;
 }
 
 .mono {
-	font-family: $font-family-mono;
+	font-family: var.$font-family-mono;
 	font-weight: normal;
-	letter-spacing: rem(0.5px);
+	letter-spacing: func.to_rem(0.5px);
 	text-decoration: none;
 	text-transform: uppercase;
 }
 
 ::selection {
-	background-color: $color-ruby-light;
+	background-color: colors.$color-ruby-light;
 }
 
 ::-moz-selection {
-	background-color: $color-ruby-light;
+	background-color: colors.$color-ruby-light;
 }
 
 blockquote {
 
-	@include color_classes (
-		$map: $colors,
+	@include colorFunc.color_classes (
+		$map: colorFunc.$colors,
 		$prefix: '-',
 		$attribute: 'fill',
 		$element: 'svg'
@@ -305,19 +313,19 @@ blockquote {
 	display: flex;
 	position: relative;
 	flex-direction: column;
-	margin-top: rhythm(6);
+	margin-top: func.rhythm(6);
 	margin-right: 0;
-	margin-bottom: rhythm(5);
+	margin-bottom: func.rhythm(5);
 	margin-left: 0;
-	padding-left: rem(40px);
+	padding-left: func.to_rem(40px);
 
 	p {
-		@include plumber(
-			$font-size: 2.5,
+		@include plumber.plumber(
+			var.$font-size: 2.5,
 			$line-height: 3,
 			$leading-top: 1,
 			$leading-bottom: 0,
-			$baseline: $headings-baseline
+			$baseline: var.$headings-baseline
 		);
 	}
 
@@ -326,40 +334,40 @@ blockquote {
 		position: absolute;
 		top: 0;
 		left: 0;
-		width: rhythm(2);
-		height: rhythm(4);
-		fill: $color-black;
+		width: func.rhythm(2);
+		height: func.rhythm(4);
+		fill: colors.$color-black;
 
-		@include bp-up(md) {
-			width: rhythm(3);
-			height: rhythm(6);
+		@include breakpoint.bp-up(md) {
+			width: func.rhythm(3);
+			height: func.rhythm(6);
 		}
 	}
 
 	.meta {
-		@include plumber(
-			$font-size: 1.75,
+		@include plumber.plumber(
+			var.$font-size: 1.75,
 			$leading-bottom: 0
 		);
 
-		margin-top: rhythm(1);
-		line-height: rhythm(2.5);
+		margin-top: func.rhythm(1);
+		line-height: func.rhythm(2.5);
 	}
 
-	@include bp-up(sm) {
-		padding-right: rhythm(3);
-		max-width: rem(613px);
+	@include breakpoint.bp-up(sm) {
+		padding-right: func.rhythm(3);
+		max-width: func.to_rem(613px);
 		margin-left: auto;
 		margin-right: auto;
 	}
 
-	@include bp-up(md) {
-		margin-top: rhythm(6.5);
-		padding-left: rem(52px);
+	@include breakpoint.bp-up(md) {
+		margin-top: func.rhythm(6.5);
+		padding-left: func.to_rem(52px);
 
 		p {
-			@include plumber(
-				$font-size: 2.7,
+			@include plumber.plumber(
+				var.$font-size: 2.7,
 				$line-height: 4,
 				$leading-bottom: 0,
 				$leading-top: 1
@@ -369,12 +377,12 @@ blockquote {
 		}
 
 		.meta {
-			margin-top: rhythm(0.5);
-			line-height: rhythm(3.5);
+			margin-top: func.rhythm(0.5);
+			line-height: func.rhythm(3.5);
 		}
 	}
 
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		margin-left: initial;
 		margin-right: initial;
 	}
@@ -383,6 +391,6 @@ blockquote {
 b,
 strong,
 legend {
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 	font-weight: normal;
 }

package/src/configurations/typography/readme.md

@@ -1,4 +1,4 @@
 # Typography
 
 ## Blockquote
-Blockquote icon can use any of the base colors. This is set by using class ```.colorname``` on the blockquote tag itself. If color is not set manually it will default to $color-black. For a list of color names, see [Color component](/components/detail/colors)
+Blockquote icon can use any of the base colors. This is set by using class ```.colorname``` on the blockquote tag itself. If color is not set manually it will default to colors.$color-black. For a list of color names, see [Color component](/components/detail/colors)

package/src/configurations/typography/typography.config.js

@@ -15,4 +15,4 @@ module.exports = {
 		strong: 'Den här texten är bold',
 		italic: 'den här texten är italic',
 	}
-}
+};