@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/molecules/alert/_alert.scss

@@ -1,49 +1,58 @@
-@charset 'UTF-8';
-
-$alert-success-border: $color-jade;
-$alert-success-bg: $color-jade-light;
-$alert-info-border: $color-ocean;
-$alert-info-bg: $color-ocean-light;
-$alert-warning-border: $color-lemon;
-$alert-warning-bg: $color-lemon-light;
-$alert-error-border: $color-ruby;
-$alert-error-bg: $color-ruby-light;
-$alert-text: $color-cyberspace;
-
-@include molecule(alert) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@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;
+
+$alert-success-border: colors.$color-jade;
+$alert-success-bg: colors.$color-jade-light;
+$alert-info-border: colors.$color-ocean;
+$alert-info-bg: colors.$color-ocean-light;
+$alert-warning-border: colors.$color-lemon;
+$alert-warning-bg: colors.$color-lemon-light;
+$alert-error-border: colors.$color-ruby;
+$alert-error-bg: colors.$color-ruby-light;
+$alert-text: colors.$color-cyberspace;
+
+@include mixin.molecule(alert) {
 	position: relative;
-	margin-bottom: rhythm(4);
-	padding: rhythm(2) rhythm(2) rhythm(3) rhythm(2);
+	margin-bottom: func.rhythm(4);
+	padding: func.rhythm(2) func.rhythm(2) func.rhythm(3) func.rhythm(2);
 	border: 1px solid transparent;
 	background-repeat: no-repeat;
-	background-position: rhythm(2) 50%;
+	background-position: func.rhythm(2) 50%;
 
 	> h2,
 	> p {
-		max-width: rem(600px);
+		max-width: func.to_rem(600px);
 	}
 
 	> p:last-child {
-		margin-bottom: rhythm(0.5);
+		margin-bottom: func.rhythm(0.5);
 	}
 
 	a {
 		@extend %normalize-links;
 
-		color: $color-cyberspace;
-		font-family: $font-family-headings;
+		color: colors.$color-cyberspace;
+		font-family: var.$font-family-headings;
 		text-decoration: underline;
 	}
 
-	@include m(dismissable) {
-		padding-right: rhythm(4);
+	@include bem.m(dismissable) {
+		padding-right: func.rhythm(4);
 
 		// Adjust close button position
 		button:not(.a-button--is-static) {
 			position: absolute;
-			z-index: z_index(background);
-			top: rhythm(1);
-			right: rhythm(1);
+			z-index: func.z_index(background);
+			top: func.rhythm(1);
+			right: func.rhythm(1);
 		}
 
 		&[aria-hidden="true"] {
@@ -55,27 +64,27 @@ $alert-text: $color-cyberspace;
 	//
 	// Generate contextual modifier classes for colorizing the alert.
 
-	@include m(success) {
-		@include alert-variant($alert-success-border, $alert-success-bg, $alert-text);
+	@include bem.m(success) {
+		@include mixin.alert-variant($alert-success-border, $alert-success-bg, $alert-text);
 	}
 
-	@include m(info) {
-		@include alert-variant($alert-info-border, $alert-info-bg, $alert-text);
+	@include bem.m(info) {
+		@include mixin.alert-variant($alert-info-border, $alert-info-bg, $alert-text);
 	}
 
-	@include m(warning) {
-		@include alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
+	@include bem.m(warning) {
+		@include mixin.alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
 	}
 
-	@include m(error) {
-		@include alert-variant($alert-error-border, $alert-error-bg, $alert-text);
+	@include bem.m(error) {
+		@include mixin.alert-variant($alert-error-border, $alert-error-bg, $alert-text);
 
 		::selection {
-			background-color: $color-ruby;
+			background-color: colors.$color-ruby;
 		}
 
 		::-moz-selection {
-			background-color: $color-ruby;
+			background-color: colors.$color-ruby;
 		}
 	}
 }

package/src/molecules/breadcrumb/_breadcrumb.scss

@@ -1,33 +1,41 @@
-@charset 'UTF-8';
-
+@charset "UTF-8";
+@use "sass:color";
 @use "sass:math";
-
-@include molecule(breadcrumb) {
+@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/grid/breakpoints' as breakpoint;
+
+@include mixin.molecule(breadcrumb) {
 	display: flex;
 	position: relative;
 	align-items: center;
 	width: 100%;
 	margin: 0;
-	padding: rhythm(1) 0;
+	padding: func.rhythm(1) 0;
 	list-style: none;
 
 	&::before {
 		content: '';
 		display: flex;
-		width: math.div($icon-size, 2);
-		height: math.div($icon-size, 2);
-		margin-right: rhythm(1);
-		transform: translateY(rem(1px));
+		width: math.div(var.$icon-size, 2);
+		height: math.div(var.$icon-size, 2);
+		margin-right: func.rhythm(1);
+		transform: translateY(func.to_rem(1px));
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-backwards' viewBox='0 0 18.1 32'%3E%3Cpolygon points='16,32 0,16 16,0 18.9,2.9 5.9,16 18.9,29.1 '%3E%3C/polygon%3E%3C/svg%3E");
 		background-repeat: no-repeat;
 		background-position: center center;
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			display: none;
 		}
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		display: none;
 		align-items: center;
 		align-self: stretch;
@@ -35,66 +43,66 @@
 		&:nth-last-child(2) {
 			display: flex;
 
-			@include b(icon) {
+			@include bem.b(icon) {
 				display: none;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					display: flex;
 				}
 			}
 		}
 
 		&:last-child {
-			@include b(icon) {
+			@include bem.b(icon) {
 				display: none;
 			}
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			display: flex;
 			position: static;
 			flex-shrink: 0;
 			width: auto;
-			max-width: rem(250px);
+			max-width: func.to_rem(250px);
 			min-height: 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 
-		@include bp-up(sm) {
-			max-width: rem(300px);
+		@include breakpoint.bp-up(sm) {
+			max-width: func.to_rem(300px);
 		}
 
-		@include bp-up(lg) {
-			max-width: rem(350px);
+		@include breakpoint.bp-up(lg) {
+			max-width: func.to_rem(350px);
 		}
 
-		@include bp-up(xl) {
-			max-width: rem(400px);
+		@include breakpoint.bp-up(xl) {
+			max-width: func.to_rem(400px);
 		}
 	}
 
-	@include b(icon) {
-		width: math.div($icon-size, 2);
-		height: math.div($icon-size, 2);
-		margin: 0 rhythm(1);
-		transform: translateY(rem(1px));
+	@include bem.b(icon) {
+		width: math.div(var.$icon-size, 2);
+		height: math.div(var.$icon-size, 2);
+		margin: 0 func.rhythm(1);
+		transform: translateY(func.to_rem(1px));
 		color: var(--cyberspace-color);
 		fill: currentColor;
 
 		&:first-child {
-			margin: 0 rhythm(1) 0 0;
+			margin: 0 func.rhythm(1) 0 0;
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				display: none;
 			}
 		}
 	}
 
-	@include e(link) {
+	@include bem.e(link) {
 		@extend %normalize-links;
 
-		max-width: rhythm(30);
+		max-width: func.rhythm(30);
 		overflow: hidden;
 		color: var(--cyberspace-color);
 		text-overflow: ellipsis;
@@ -111,14 +119,14 @@
 
 		&:hover,
 		&:focus {
-			color: $color-ruby;
+			color: colors.$color-ruby;
 		}
 
-		@include bp-up(md) {
-			max-width: rhythm(25);
+		@include breakpoint.bp-up(md) {
+			max-width: func.rhythm(25);
 		}
 
-		@include bp-up(xl) {
+		@include breakpoint.bp-up(xl) {
 			max-width: none;
 		}
 	}

package/src/molecules/byline/_byline.scss

@@ -1,48 +1,57 @@
-@charset 'UTF-8';
-
-@include molecule(byline) {
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@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(byline) {
 	width: 100%;
-	max-width: rem(400px);
+	max-width: func.to_rem(400px);
 
 	[class*='meta'] {
-		margin-bottom: rhythm(1);
+		margin-bottom: func.rhythm(1);
 	}
 
-	@include e(figure) {
+	@include bem.e(figure) {
 		display: flex;
 		align-items: center;
 	}
 
-	@include e(icon) {
-		width: rem(22px);
-		height: rem(22px);
-		margin-right: rhythm(0.5);
+	@include bem.e(icon) {
+		width: func.to_rem(22px);
+		height: func.to_rem(22px);
+		margin-right: func.rhythm(0.5);
 	}
 
-	@include e(link) {
+	@include bem.e(link) {
 		@extend %link-styles;
 
-		margin-left: rhythm(-0.5);
+		margin-left: func.rhythm(-0.5);
 	}
 
-	@include e(portrait) {
+	@include bem.e(portrait) {
 		display: block;
-		width: rem(64px);
-		height: rem(64px);
-		margin-bottom: rhythm(1);
+		width: func.to_rem(64px);
+		height: func.to_rem(64px);
+		margin-bottom: func.rhythm(1);
 		border-radius: 50%;
-		background-color: $color-concrete;
+		background-color: colors.$color-concrete;
 	}
 
-	@include e(list) {
-		margin: rhythm(2) 0 rhythm(1) 0;
+	@include bem.e(list) {
+		margin: func.rhythm(2) 0 func.rhythm(1) 0;
 		padding: 0;
 		list-style: none;
 
-		@include e(item) {
+		@include bem.e(item) {
 			padding-top: 0;
 			padding-bottom: 0;
-			font-size: $size-medium-plus;
+			font-size: var.$size-medium-plus;
 		}
 	}
 }