@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/configurations/_wordpress.scss

@@ -1,32 +1,39 @@
-@charset 'UTF-8';
-
-//
-// Modifies Wordpress Core classes
-//
+@charset "UTF-8";
 @use "sass:math";
+@use '../vendor/grid/breakpoints' as breakpoint;
+@use '../vendor/baseline/plumber' as plumber;
+@use 'colors/colors' as colors;
+@use 'variables' as var;
+@use 'functions' as func;
+@use 'mixins' as mixin;
+@use 'extends';
+
+/*
+// Modifies Wordpress Core classes
+*/
 
 .wp-caption {
-	margin-bottom: rhythm(3);
+	margin-bottom: func.rhythm(3);
 }
 
-// Customize
+/* Customize */
 .aligncenter,
 div.aligncenter {
 	display: block;
-	margin: 0 auto rhythm(3);
+	margin: 0 auto func.rhythm(3);
 }
 
-@include bp-up(lg) {
+@include breakpoint.bp-up(lg) {
 	.alignright {
-		width: calc(#{make_col(6)} - 13px); // <== You ugly magic number you, we hates it!
-		margin: 0 0 rhythm(3) 0;
+		width: calc(#{func.make_col(6)} - 13px); /* <== You ugly magic number you, we hates it! */
+		margin: 0 0 func.rhythm(3) 0;
 		float: right;
 		clear: right;
 	}
 
 	.alignleft {
-		width: calc(#{make_col(6)} - 13px); // <== You ugly magic number you, we hates it!
-		margin: 0 rhythm(2) rhythm(3) 0;
+		width: calc(#{func.make_col(6)} - 13px); /* <== You ugly magic number you, we hates it! */
+		margin: 0 func.rhythm(2) func.rhythm(3) 0;
 		float: left;
 		clear: left;
 	}
@@ -47,11 +54,11 @@ div.aligncenter {
 }
 
 .wp-block-image {
-	margin-bottom: rhythm(3);
+	margin-bottom: func.rhythm(3);
 
 	figcaption {
-		@include plumber(
-			$font-size: 1.7,
+		@include plumber.plumber(
+			var.$font-size: 1.7,
 			$line-height: 2,
 			$leading-bottom: 0
 		);
@@ -121,13 +128,13 @@ div.aligncenter {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	margin: rhythm(2) 0;
+	margin: func.rhythm(2) 0;
 	padding: 0;
 	list-style: none;
 
 	.blocks-gallery-item {
 		width: 48%;
-		margin-bottom: rhythm(2);
+		margin-bottom: func.rhythm(2);
 
 		img {
 			display: block;
@@ -135,17 +142,17 @@ div.aligncenter {
 		}
 
 		figcaption {
-			padding: rhythm(1);
-			font-size: $size-small;
+			padding: func.rhythm(1);
+			font-size: var.$size-small;
 			line-height: 1.4;
 
-			@include bp-up(sm) {
-				padding-bottom: rhythm(2);
-				font-size: $size-medium;
+			@include breakpoint.bp-up(sm) {
+				padding-bottom: func.rhythm(2);
+				font-size: var.$size-medium;
 			}
 
-			@include bp-up(lg) {
-				font-size: $size-base;
+			@include breakpoint.bp-up(lg) {
+				font-size: var.$size-base;
 			}
 		}
 	}
@@ -153,8 +160,8 @@ div.aligncenter {
 
 .wp-block-embed {
 	figcaption {
-		@include plumber(
-			$font-size: 1.5,
+		@include plumber.plumber(
+			var.$font-size: 1.5,
 			$line-height: 2,
 			$leading-bottom: 0
 		);
@@ -170,13 +177,13 @@ div.aligncenter {
 
 	> .row {
 		> [class*='grid'] {
-			margin-bottom: rhythm(2);
+			margin-bottom: func.rhythm(2);
 
 			> *:only-child {
 				margin-bottom: 0;
 			}
 
-			@include molecule(card) {
+			@include mixin.molecule(card) {
 				&:not(:only-child) {
 					height: auto;
 				}
@@ -190,14 +197,14 @@ div.aligncenter {
 	}
 }
 
-// WP Core Column Block/Group Styles
+/* WP Core Column Block/Group Styles */
 
 .wp-block-group {
 	display: flex;
 	flex-wrap: wrap;
-	margin-right: math.div($grid-gutter-width, -2);
-	margin-bottom: rhythm(2);
-	margin-left: math.div($grid-gutter-width, -2);
+	margin-right: math.div(var.$grid-gutter-width, -2);
+	margin-bottom: func.rhythm(2);
+	margin-left: math.div(var.$grid-gutter-width, -2);
 
 	&.alignfull {
 		right: auto;
@@ -214,9 +221,9 @@ div.aligncenter {
 .wp-block-columns {
 	display: flex;
 	flex-wrap: wrap;
-	margin-right: math.div($grid-gutter-width, -2);
-	margin-bottom: rhythm(2);
-	margin-left: math.div($grid-gutter-width, -2);
+	margin-right: math.div(var.$grid-gutter-width, -2);
+	margin-bottom: func.rhythm(2);
+	margin-left: math.div(var.$grid-gutter-width, -2);
 
 	&.alignfull {
 		right: auto;
@@ -224,7 +231,7 @@ div.aligncenter {
 		width: auto;
 	}
 }
-@include bp-up(md) {
+@include breakpoint.bp-up(md) {
 	.wp-block-columns {
 		flex-wrap: nowrap;
 	}
@@ -233,18 +240,18 @@ div.aligncenter {
 .wp-block-column {
 	flex-grow: 1;
 	min-width: 0;
-	margin-right: math.div($grid-gutter-width, 2);
-	margin-left: math.div($grid-gutter-width, 2);
+	margin-right: math.div(var.$grid-gutter-width, 2);
+	margin-left: math.div(var.$grid-gutter-width, 2);
 	word-break: break-word;
 	overflow-wrap: break-word;
 }
-@include bp-down(sm) {
+@include breakpoint.bp-down(sm) {
 	.wp-block-column {
 		flex-basis: 100% !important;
 	}
 }
 
-@include bp-up(md) {
+@include breakpoint.bp-up(md) {
 	.wp-block-column {
 		flex-basis: 0;
 		flex-grow: 1;
@@ -255,18 +262,18 @@ div.aligncenter {
 	}
 
 	.wp-block-column:not(:first-child) {
-		margin-left: math.div($grid-gutter-width, 2);
+		margin-left: math.div(var.$grid-gutter-width, 2);
 	}
 }
 
-@include bp-between(sm, md) {
+@include breakpoint.bp-between(sm, md) {
 	.wp-block-column:nth-child(even) {
-		margin-left: math.div($grid-gutter-width, 2);
+		margin-left: math.div(var.$grid-gutter-width, 2);
 	}
 }
 
 .wp-block-column:nth-child(even) {
-	margin-left: math.div($grid-gutter-width, 2);
+	margin-left: math.div(var.$grid-gutter-width, 2);
 }
 
 .wp-block-columns.are-vertically-aligned-top {
@@ -302,8 +309,8 @@ div.aligncenter {
 
 .wp-block-table {
 	td {
-		padding-top: rhythm(2) !important;
-		padding-bottom: rhythm(2) !important;
+		padding-top: func.rhythm(2) !important;
+		padding-bottom: func.rhythm(2) !important;
 	}
 
 	[class*='lines'],
@@ -316,8 +323,8 @@ div.aligncenter {
 			background-image:
 				linear-gradient(
 					to right,
-					$color-cyberspace,
-					$color-cyberspace 2px,
+					colors.$color-cyberspace,
+					colors.$color-cyberspace 2px,
 					transparent 2px,
 					transparent 6px
 				);
@@ -331,27 +338,27 @@ div.aligncenter {
 .wp-block-image,
 .wp-block-image:not(.is-style-rounded) {
 	img {
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 	}
 }
 
 .wp-block-embed-youtube {
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 	overflow: hidden;
 }
 
 .wp-block-graph {
-	margin-top: rhythm(4);
+	margin-top: func.rhythm(4);
 
 	& + & {
-		margin-top: -#{rhythm(3)};
+		margin-top: -#{func.rhythm(3)};
 	}
 }
 
 hr.wp-block-separator {
 	display: flex;
 	border-top: 0;
-	border-color: $color-concrete;
+	border-color: colors.$color-concrete;
 
 	&[class*=align] {
 		height: 22px;
@@ -365,20 +372,20 @@ hr.wp-block-separator {
 
 	&.aligncenter {
 		width: 50vw;
-		max-width: rem(469px);
-		margin-top: rhythm(2);
-		margin-bottom: rhythm(2);
+		max-width: func.to_rem(469px);
+		margin-top: func.rhythm(2);
+		margin-bottom: func.rhythm(2);
 	}
 
 	&.alignleft {
 		float: none;
 		margin-left: 0;
-		max-width: rem(90px);
-		margin-top: rhythm(2);
-		margin-bottom: rhythm(2);
+		max-width: func.to_rem(90px);
+		margin-top: func.rhythm(2);
+		margin-bottom: func.rhythm(2);
 
-		@include bp-up(lg) {
-			margin-left: $indent * 2;
+		@include breakpoint.bp-up(lg) {
+			margin-left: var.$indent * 2;
 		}
 	}
 

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,7 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
 
-/// @group Colors
+/* @group Colors */
 $color-black: #000 !default;
 $color-snow: #fff !default;
 $color-granit: #8e9297 !default;
@@ -25,7 +25,7 @@ $color-facebook: #0866ff !default;
 $color-twitter: #00aced !default;
 $color-linkedin: #0a66c2 !default;
 
-// Dark colors only for accessibility
+/* 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%);
@@ -33,7 +33,7 @@ $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%);
 
-// Medium dark colors, for decoration purposes like borders
+/* 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%);

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/colors/colors.config.js

@@ -222,4 +222,4 @@ module.exports = {
 			},
 		]
 	}
-}
+};

package/src/configurations/favicon/favicon.config.js

@@ -4,4 +4,4 @@ module.exports = {
 	context: {
 		url: 'https://static.internetstiftelsen.se/favicons/'
 	}
-}
+};

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 */
 			}