@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

package/src/configurations/colors/_background-colors.scss

@@ -1,7 +1,8 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use 'colors-functions' as colorFunc;
 
 // Generate background color classes e.g. .background-ruby
 /// @group Colors
 .background {
-	@include color_values($colors, 'background-color', $separator: '-');
+	@include colorFunc.color_values(colorFunc.$colors, 'background-color', $separator: '-');
 }

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

@@ -1,71 +1,73 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use 'sass:meta';
+@use 'colors' as colors;
 
 /// Get a shaded version of a color
 /// @group Colors
 @function shade($color, $percentage) {
-	@return mix(black, $color, $percentage);
+	@return mix(black, colors.$color, $percentage);
 }
 
 /// Get a tinted version of a color
 /// @group Colors
 @function tint($color, $percentage) {
-	@return mix(white, $color, $percentage);
+	@return mix(white, colors.$color, $percentage);
 }
 
 /// @group Colors
 $colors: (
-	black: $color-black,
-	snow: $color-snow,
-	cyberspace: $color-cyberspace,
-	dark: $color-dark,
-	granit: $color-granit,
-	concrete: $color-concrete,
-	ash: $color-ash,
+	black: colors.$color-black,
+	snow: colors.$color-snow,
+	cyberspace: colors.$color-cyberspace,
+	dark: colors.$color-dark,
+	granit: colors.$color-granit,
+	concrete: colors.$color-concrete,
+	ash: colors.$color-ash,
 	ruby: (
-		base: $color-ruby,
-		light: $color-ruby-light,
-		dark: $color-ruby-dark,
-		medium-dark: $color-ruby-medium-dark
+		base: colors.$color-ruby,
+		light: colors.$color-ruby-light,
+		dark: colors.$color-ruby-dark,
+		medium-dark: colors.$color-ruby-medium-dark
 	),
 	peacock: (
-		base: $color-peacock,
-		light: $color-peacock-light,
-		dark: $color-peacock-dark,
-		medium-dark: $color-peacock-medium-dark
+		base: colors.$color-peacock,
+		light: colors.$color-peacock-light,
+		dark: colors.$color-peacock-dark,
+		medium-dark: colors.$color-peacock-medium-dark
 	),
 	jade: (
-		base: $color-jade,
-		light: $color-jade-light,
-		dark: $color-jade-dark,
-		medium-dark: $color-jade-medium-dark
+		base: colors.$color-jade,
+		light: colors.$color-jade-light,
+		dark: colors.$color-jade-dark,
+		medium-dark: colors.$color-jade-medium-dark
 	),
 	sandstone: (
-		base: $color-sandstone,
-		light: $color-sandstone-light,
-		dark: $color-sandstone-dark,
-		medium-dark: $color-sandstone-medium-dark
+		base: colors.$color-sandstone,
+		light: colors.$color-sandstone-light,
+		dark: colors.$color-sandstone-dark,
+		medium-dark: colors.$color-sandstone-medium-dark
 	),
 	lemon: (
-		base: $color-lemon,
-		light: $color-lemon-light,
-		dark: $color-lemon-dark,
-		medium-dark: $color-lemon-medium-dark
+		base: colors.$color-lemon,
+		light: colors.$color-lemon-light,
+		dark: colors.$color-lemon-dark,
+		medium-dark: colors.$color-lemon-medium-dark
 	),
 	ocean: (
-		base: $color-ocean,
-		light: $color-ocean-light,
-		dark : $color-ocean-dark,
-		medium-dark: $color-ocean-medium-dark
+		base: colors.$color-ocean,
+		light: colors.$color-ocean-light,
+		dark : colors.$color-ocean-dark,
+		medium-dark: colors.$color-ocean-medium-dark
 	)
 );
 
-/// Generate color values on attributes e.g @include color_values($colors, 'color', $separator: '-');
+/// Generate color values on attributes e.g @include color_values(colors.$colors, 'color', $separator: '-');
 /// Generates this: color: color-name;
 /// @group Colors
 @mixin color_values($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
 	@each $key, $value in $map {
 		&#{if($key != $base, #{$prefix}#{$key}, '')} {
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@include color_values($value, $attribute, $separator);
 			}
 			@else {
@@ -75,13 +77,13 @@ $colors: (
 	}
 }
 
-/// Generate color classes with attribute and value and pass optional nested element e.g @include color_classes ($map: $colors,$prefix: '-',$attribute: 'fill',$element: 'svg');
+/// Generate color classes with attribute and value and pass optional nested element e.g @include color_classes ($map: colors.$colors,$prefix: '-',$attribute: 'fill',$element: 'svg');
 /// Generates this: element.color-name element {fill: color-name}
 /// @group Colors
 @mixin color_classes($map, $attribute, $prefix: '', $separator: '.', $base: 'base', $element: '') {
 	@each $key, $value in $map {
 		&#{if($key != $base, #{$separator}#{$key}, '')} {
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@include color_classes($value, $attribute, $prefix: '.', $separator: '-', $element:  $element);
 			}
 			@else {
@@ -104,7 +106,7 @@ $colors: (
 /// @group Colors
 @mixin wordpress_color_classes($map, $attribute,  $separator: '-', $suffix: '', $base: 'base') {
 	@each $key, $value in $map {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			&#{if($key != $base, #{$separator}#{$key}, '')} {
 				@include wordpress_color_classes($value, $attribute, $separator, '-color');
 			}

package/src/configurations/colors/_colors.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
 
 /// @group Colors

package/src/configurations/colors/_text-colors.scss

@@ -1,7 +1,8 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use 'colors-functions' as colorFunc;
 
 // Generate text color classes e.g. .color-ruby
 /// @group Colors
 .color {
-	@include color_values($colors, 'color', $separator: '-');
+	@include colorFunc.color_values(colorFunc.$colors, 'color', $separator: '-');
 }

package/src/configurations/colors/_wordpress-colors.scss

@@ -1,10 +1,11 @@
 @charset "UTF-8";
+@use 'colors-functions' as colorFunc;
 
 // Generate wordpress color classes e.g. .has-ruby-color
 /// @group Colors
 .has {
-	@include wordpress_color_classes (
-		$colors,
+	@include colorFunc.wordpress_color_classes (
+		colorFunc.$colors,
 		$attribute: 'color',
 		$separator: '-',
 		$suffix: '-color'

package/src/configurations/forms/_fields.scss

@@ -1,9 +1,14 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
+@use '../bem' as bem;
+@use '../variables' as var;
+@use '../functions' as func;
+@use '../extends';
+@use '../colors/colors' as colors;
 
-@include b(field-group) {
+@include bem.b(field-group) {
 	position: relative;
-	margin-bottom: rhythm(4);
+	margin-bottom: func.rhythm(4);
 
 	&:last-child {
 		margin-bottom: 0;
@@ -13,7 +18,7 @@
 	textarea,
 	select {
 		+ .button {
-			margin-top: rhythm(1);
+			margin-top: func.rhythm(1);
 		}
 	}
 
@@ -25,28 +30,28 @@
 			@extend %invalid;
 		}
 
-		@include b(input-help) {
-			background-color: $color-ruby-light;
+		@include bem.b(input-help) {
+			background-color: colors.$color-ruby-light;
 
 			&::selection {
-				background-color: $color-ruby;
+				background-color: colors.$color-ruby;
 			}
 
 			&::-moz-selection {
-				background-color: $color-ruby;
+				background-color: colors.$color-ruby;
 			}
 		}
 	}
 }
 
-@include b(input-help) {
+@include bem.b(input-help) {
 	width: 100%;
-	padding: rhythm(0.5) rhythm(1);
-	transform: translateY(rem(-3px));
-	border-bottom-right-radius: $border-radius;
-	border-bottom-left-radius: $border-radius;
-	background-color: $color-concrete;
-	font-size: rem(16px);
+	padding: func.rhythm(0.5) func.rhythm(1);
+	transform: translateY(func.to_rem(-3px));
+	border-bottom-right-radius: var.$border-radius;
+	border-bottom-left-radius: var.$border-radius;
+	background-color: colors.$color-concrete;
+	font-size: func.to_rem(16px);
 
 	&:empty {
 		display: none;
@@ -66,7 +71,7 @@ fieldset[disabled] {
 		&:hover,
 		&:focus {
 			svg {
-				fill: $color-cyberspace;
+				fill: colors.$color-cyberspace;
 			}
 		}
 	}
@@ -79,9 +84,9 @@ fieldset[disabled] {
 		+ label {
 			@extend %disabled;
 
-			background-color: $color-granit;
-			box-shadow: 0 0 0 1px inset $color-granit;
-			color: $color-granit;
+			background-color: colors.$color-granit;
+			box-shadow: 0 0 0 1px inset colors.$color-granit;
+			color: colors.$color-granit;
 
 			&:hover,
 			&:focus {
@@ -95,7 +100,7 @@ fieldset[disabled] {
 			@extend %disabled;
 
 			&::before {
-				background-color: color.adjust($color-concrete, $lightness: -5%) !important;
+				background-color: color.adjust(colors.$color-concrete, $lightness: -5%) !important;
 			}
 		}
 	}
@@ -105,14 +110,14 @@ fieldset[disabled] {
 			@extend %disabled;
 
 			&::before {
-				background-color: color.adjust($color-concrete, $lightness: -5%);
+				background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
 			}
 
 			&:hover,
 			&:focus {
 				/* stylelint-disable */
 				&::before {
-					background-color: color.adjust($color-concrete, $lightness: -5%);
+					background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
 				}
 				/* stylelint-enable */
 			}
@@ -124,7 +129,7 @@ fieldset[disabled] {
 
 				/* stylelint-disable */
 				&::before {
-					background-color: $color-cyberspace;
+					background-color: colors.$color-cyberspace;
 				}
 				/* stylelint-enable */
 			}

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();
 	}
 }
 
@@ -52,20 +57,20 @@
 	@for $i from 1 through 3 {
 		$col-gap: $gap * ($i - 1);
 
+		@if $reversed == false {
+			$col-gap: -$col-gap;
+		}
+
 		> .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));
 			}
 		}
-
-		@if $reversed == false {
-			$col-gap: -$col-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,15 +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;
@@ -115,13 +121,13 @@
 
 		&.asymmetric-reversed {
 			$bp-gap: $gap;
-			margin-bottom: calc(125px);
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(125px);
 		}
 	}
 
-	@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;
@@ -130,39 +136,39 @@
 
 		&.asymmetric-reversed {
 			$bp-gap: $gap;
-			margin-bottom: calc(150px);
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(150px);
 		}
 	}
 }
 
-@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;
 			}
@@ -191,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();
 }