@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

package/src/organisms/hero/_hero--bbk.scss

@@ -1,8 +1,20 @@
-@charset 'UTF-8';
-
-@include organism(hero) {
-	@include m(bbk) {
-		background-color: $color-ocean-dark;
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@use '../../configurations/typography/typography';
+@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;
+@use '../../vendor/grid/grid' as grid;
+@use '../../vendor/baseline/plumber' as plumber;
+
+@include mixin.organism(hero) {
+	@include bem.m(bbk) {
+		background-color: colors.$color-ocean-dark;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -10,37 +22,37 @@
 		position: relative;
 		overflow: visible;
 
-		@include e(top) {
+		@include bem.e(top) {
 			display: flex;
 			flex-direction: row;
 			justify-content: center;
 			align-items: center;
 			position: relative;
-			padding-top: rhythm(2);
-			padding-bottom: rhythm(2);
+			padding-top: func.rhythm(2);
+			padding-bottom: func.rhythm(2);
 			max-width: 100%;
 
-			@include bp-up(md) {
-				padding-top: rhythm(4);
-				padding-bottom: rhythm(4);
+			@include breakpoint.bp-up(md) {
+				padding-top: func.rhythm(4);
+				padding-bottom: func.rhythm(4);
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				max-width: 900px;
 			}
 
-			@include bp-up(xl) {
-				padding-top: rhythm(8);
-				padding-bottom: rhythm(8);
+			@include breakpoint.bp-up(xl) {
+				padding-top: func.rhythm(8);
+				padding-bottom: func.rhythm(8);
 			}
 
-			@include bp-up(xxl) {
-				padding-top: rhythm(10);
-				padding-bottom: rhythm(10);
+			@include breakpoint.bp-up(xxl) {
+				padding-top: func.rhythm(10);
+				padding-bottom: func.rhythm(10);
 			}
 		}
 
-		@include e(button) {
+		@include bem.e(button) {
 			position: absolute;
 			bottom: 0;
 			transform: translateY(50%);
@@ -48,9 +60,9 @@
 			@extend %box-shadow;
 		}
 
-		@include e(text) {
-			color: $color-snow;
-			margin-left: rhythm(4);
+		@include bem.e(text) {
+			color: colors.$color-snow;
+			margin-left: func.rhythm(4);
 			transition: opacity 0.25s ease;
 			overflow: hidden;
 			opacity: 1;
@@ -59,25 +71,25 @@
 				opacity: 0;
 			}
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				max-width: 60%;
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				max-width: 60%;
 			}
 		}
 	}
 
-	@include e(gauge) {
-		width: rem(162px);
-		height: rem(162px);
+	@include bem.e(gauge) {
+		width: func.to_rem(162px);
+		height: func.to_rem(162px);
 		flex-shrink: 0;
 		transform: scale(.7) translate3d(0,0,0);
 		position: relative;
 
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			position: absolute;
 			left: 0;
 			top:37%;
@@ -91,7 +103,7 @@
 			}
 		}
 
-		@include bp-up(xl) {
+		@include breakpoint.bp-up(xl) {
 			top: 50%;
 			transform: scale(1) translate3d(0,-50%,0);
 
@@ -104,20 +116,20 @@
 
 	}
 
-	@include e(icon-gauge) {
-		fill: $color-snow;
+	@include bem.e(icon-gauge) {
+		fill: colors.$color-snow;
 		width: 100%;
 		height: 100%;
 	}
 
-	@include e(icon-pointer) {
+	@include bem.e(icon-pointer) {
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		width: rhythm(2);
-		height: rhythm(2);
-		margin-top: -#{rhythm(1)};
-		margin-left: -#{rhythm(1)};
+		width: func.rhythm(2);
+		height: func.rhythm(2);
+		margin-top: -#{func.rhythm(1)};
+		margin-left: -#{func.rhythm(1)};
 		transform: rotate(0deg);
 		transition: transform .8s;
 
@@ -134,8 +146,8 @@
 			background-repeat: no-repeat;
 			background-size: 46px 43px;
 			position: absolute;
-			top: -#{rem(7px)};
-			left: -#{rem(20px)};
+			top: -#{func.to_rem(7px)};
+			left: -#{func.to_rem(20px)};
 		}
 	}
 }

package/src/organisms/hero/_hero--dynamic-headline.scss

@@ -1,14 +1,24 @@
 @charset "UTF-8";
-
-@include organism(hero) {
-	@include m(dynamic-headline) {
+@use '../../configurations/mixins' as mixin;
+@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;
+@use '../../vendor/grid/grid' as grid;
+@use '../../vendor/baseline/plumber' as plumber;
+
+@include mixin.organism(hero) {
+	@include bem.m(dynamic-headline) {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-around;
 		overflow: visible;
 		border-radius: 0;
 
-		@include e(image) {
+		@include bem.e(image) {
 			max-height: none;
 			min-height: 0;
 			height: 100%;
@@ -19,20 +29,20 @@
 			bottom: 0;
 			z-index: -1;
 
-			@include bp-up(xxl) {
+			@include breakpoint.bp-up(xxl) {
 				object-position: 50% 50%;
 			}
 		}
 
-		@include e(caption) {
+		@include bem.e(caption) {
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			padding: rhythm(3);
+			padding: func.rhythm(3);
 			background-image: none;
 			position: static;
 			z-index: auto;
-			color: $color-snow;
+			color: colors.$color-snow;
 
 			> h1 {
 				--minFontSize: 22px;
@@ -40,92 +50,92 @@
 				--scaler: 10vw;
 
 				font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
-				font-family: $font-family-bold;
+				font-family: var.$font-family-bold;
 				margin: 0;
 				padding: 0;
 				line-height: 1.2;
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					line-height: 1.1;
 				}
 
-				@include bp-up(lg) {
+				@include breakpoint.bp-up(lg) {
 					line-height: 1;
 				}
 			}
 
-			@include bp-up(sm-xs) {
-				padding: rhythm(4);
+			@include breakpoint.bp-up(sm-xs) {
+				padding: func.rhythm(4);
 			}
 
-			@include bp-up(sm) {
-				padding: rhythm(5);
+			@include breakpoint.bp-up(sm) {
+				padding: func.rhythm(5);
 			}
 
-			@include bp-up(md) {
-				padding: rhythm(7);
+			@include breakpoint.bp-up(md) {
+				padding: func.rhythm(7);
 			}
 
-			@include bp-up(lg) {
-				padding: rhythm(8);
+			@include breakpoint.bp-up(lg) {
+				padding: func.rhythm(8);
 			}
 
-			@include bp-up(xl) {
-				padding: rhythm(10);
+			@include breakpoint.bp-up(xl) {
+				padding: func.rhythm(10);
 			}
 
 			&::before {
 				display: block;
 				content: attr(data-meta);
-				font-family: $font-family-mono;
+				font-family: var.$font-family-mono;
 				font-size: 14px !important;
 				text-transform: uppercase;
-				text-shadow: 0 0 rem(5px) $color-black;
+				text-shadow: 0 0 func.to_rem(5px) colors.$color-black;
 
-				@include bp-up(sm-xs) {
-					margin-left: rhythm(0.5);
+				@include breakpoint.bp-up(sm-xs) {
+					margin-left: func.rhythm(0.5);
 				}
 
-				@include bp-up(md) {
+				@include breakpoint.bp-up(md) {
 					font-size: 18px !important;
-					margin-left: rhythm(1);
+					margin-left: func.rhythm(1);
 				}
 
-				@include bp-up(lg) {
+				@include breakpoint.bp-up(lg) {
 					font-size: 20px !important;
 				}
 
-				@include bp-up(xl) {
+				@include breakpoint.bp-up(xl) {
 					font-size: 22px !important;
 				}
 
-				@include bp-up(xxl) {
+				@include breakpoint.bp-up(xxl) {
 					font-size: 24px !important;
 				}
 			}
 		}
 
-		@include e(button-continue) {
+		@include bem.e(button-continue) {
 			position: relative;
-			z-index: z_index(middleground);
+			z-index: func.z_index(middleground);
 			align-self: center;
 			transform: scale(1) translateY(0);
 			animation: pulse infinite 1.5s ease;
 			will-change: transform;
-			top: rem(15px);
+			top: func.to_rem(15px);
 
-			@include bp-up(sm) {
+			@include breakpoint.bp-up(sm) {
 				animation: pulse2 infinite 1.5s ease;
-				top: rem(20px);
+				top: func.to_rem(20px);
 			}
 
-			@include bp-up(md) {
-				top: rem(40px);
+			@include breakpoint.bp-up(md) {
+				top: func.to_rem(40px);
 			}
 
-			@include bp-up(xl) {
+			@include breakpoint.bp-up(xl) {
 				animation: pulse3 infinite 1.5s ease;
-				top: rem(50px);
+				top: func.to_rem(50px);
 			}
 		}