@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/configurations/_extends.scss

@@ -1,5 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
+@use 'colors/colors' as colors;
+@use 'variables' as var;
+@use 'functions' as func;
+@use 'mixins' as mixin;
 
 %normalize-links {
 	padding: 0;
@@ -16,16 +20,16 @@
 }
 
 %link-styles {
-	padding: rhythm(0) rhythm(0.5);
-	border-bottom: rem(2px) solid $color-peacock;
+	padding: func.rhythm(0) func.rhythm(0.5);
+	border-bottom: func.to_rem(2px) solid colors.$color-peacock;
 	color: var(---cyberspace-color);
 	text-decoration: none;
 
 	&:hover,
 	&:focus {
-		border-bottom: rem(2px) solid $color-ocean-light;
-		border-radius: $border-radius;
-		background-color: $color-ocean-light;
+		border-bottom: func.to_rem(2px) solid colors.$color-ocean-light;
+		border-radius: var.$border-radius;
+		background-color: colors.$color-ocean-light;
 	}
 
 	&[href^='mailto'] {
@@ -55,25 +59,25 @@
 %input {
 	display: block;
 	position: relative;
-	z-index: z_index(middleground);
+	z-index: func.z_index(middleground);
 	width: 100%;
 	min-width: 0;
-	padding: rhythm(1);
-	border: 1px solid $color-granit;
-	border-radius: $border-radius;
-	background-color: color.adjust($color-ash, $lightness: 4%);
+	padding: func.rhythm(1);
+	border: 1px solid colors.$color-granit;
+	border-radius: var.$border-radius;
+	background-color: color.adjust(colors.$color-ash, $lightness: 4%);
 	-webkit-appearance: none;
-	font-size: rem(16px);
+	font-size: func.to_rem(16px);
 }
 
 %input-focus {
-	border-color: $color-ocean;
-	box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
+	border-color: colors.$color-ocean;
+	box-shadow: 0 0 0 inset rgba(colors.$color-cyberspace, 0.2), 0 1px 2px rgba(colors.$color-cyberspace, 0.2), 0 0 0 3px colors.$color-ocean-light;
 }
 
 %invalid {
-	border-color: $color-ruby;
-	background-color: color.adjust($color-ruby-light, $lightness: 16%);
+	border-color: colors.$color-ruby;
+	background-color: color.adjust(colors.$color-ruby-light, $lightness: 16%);
 }
 
 %disabled {
@@ -89,12 +93,12 @@
 
 %discreet {
 	border-style: dashed;
-	border-color: color.adjust($color-granit, $lightness: 20%);
+	border-color: color.adjust(colors.$color-granit, $lightness: 20%);
 	background-color: transparent;
 
 	&:focus {
 		border-style: solid;
-		background-color:  color.adjust($color-ash, $lightness: 4%);
+		background-color:  color.adjust(colors.$color-ash, $lightness: 4%);
 	}
 }
 
@@ -107,15 +111,15 @@
 }
 
 %tag {
-	@include tag;
+	@include mixin.tag;
 }
 
 %tag-light {
-	@include tag-light;
+	@include mixin.tag-light;
 }
 
 %box-shadow {
-	box-shadow: 0 rhythm(0.5) rhythm(0.5) rgba($color-cyberspace, 0.1) !important;
+	box-shadow: 0 func.rhythm(0.5) func.rhythm(0.5) rgba(colors.$color-cyberspace, 0.1) !important;
 }
 
 %button-toolbar {
@@ -124,46 +128,46 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: center;
-	width: rhythm(4);
-	height: rhythm(4);
+	width: func.rhythm(4);
+	height: func.rhythm(4);
 	margin: 0;
-	padding: rhythm(1);
+	padding: func.rhythm(1);
 	overflow: hidden;
 	border: 0;
 	border-radius: 0;
-	border-radius: $border-radius;
-	background-color: $color-snow;
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
 	cursor: pointer;
 
 	&:hover,
 	&:focus,
 	&:active,
 	&.is-active {
-		background-color: $color-cyberspace;
+		background-color: colors.$color-cyberspace;
 
 		svg {
-			fill: $color-snow;
+			fill: colors.$color-snow;
 		}
 	}
 
 	&:disabled {
-		background-color: $color-concrete !important;
+		background-color: colors.$color-concrete !important;
 		box-shadow: none;
 		cursor: not-allowed;
 
 		[class*='text'] {
-			color: $color-snow !important;
+			color: colors.$color-snow !important;
 		}
 
 		svg {
-			fill: $color-granit;
+			fill: colors.$color-granit;
 		}
 	}
 
 	svg {
-		width: rhythm(2);
-		height: rhythm(2);
-		fill: $color-cyberspace;
+		width: func.rhythm(2);
+		height: func.rhythm(2);
+		fill: colors.$color-cyberspace;
 	}
 }
 

package/src/configurations/_functions.scss

@@ -1,13 +1,20 @@
-@charset 'UTF-8';
-
+@charset "UTF-8";
+@use "sass:map";
 @use "sass:math";
 
+// Size base
+$size-base: 18px;
+// Base unit
+$base-unit: math.div($size-base, 2);
+// Grid columns
+$grid-columns: 18;
+
 @function rhythm($lines) {
-	@return rem($lines * $base-unit);
+	@return to_rem($lines * $base-unit);
 }
 
 // Converts px value to rem
-@function rem($size) {
+@function to_rem($size) {
 	@return math.div($size, $size-base) * 1rem;
 }
 
@@ -18,13 +25,22 @@
 // Convert rem back to px
 @function rem_to_px($size) {
 	$value: parse_int($size) * 10px;
-	@return round($value);
+	@return math.round($value);
 }
 
+// Z-indexes
+$z-index: (
+	'foreground': 1000,
+	'foregroundMinus': 999,
+	'middleground': 500,
+	'middlegroundImportant': 750,
+	'background': 1
+);
+
 @function z_index($layer) {
-	@return map_get($z-index, $layer);
+	@return map.get($z-index, $layer);
 }
 
 @function make_col($size, $columns: $grid-columns) {
-	@return percentage(math.div($size, $columns));
+	@return math.percentage(math.div($size, $columns));
 }

package/src/configurations/_mixins.scss

@@ -1,11 +1,15 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 /// Create an atom with the given name. Alias for the block mixin that autoprefixes the class with a-.
 ///@group General
 @use "sass:math";
+@use 'variables' as var;
+@use 'functions' as func;
+@use 'bem' as bem;
+@use 'colors/colors' as colors;
 
 @mixin atom($name) {
-	@include b(a-#{$name}) {
+	@include bem.b(a-#{$name}) {
 		@content;
 	}
 }
@@ -13,7 +17,7 @@
 /// Create a molecule with the given name. Alias for the block mixin that autoprefixes the class with m-.
 /// @group General
 @mixin molecule($name) {
-	@include b(m-#{$name}) {
+	@include bem.b(m-#{$name}) {
 		@content;
 	}
 }
@@ -21,7 +25,7 @@
 /// Create an organism with the given name. Alias for the block mixin that autoprefixes the class with o-.
 /// @group General
 @mixin organism($name) {
-	@include b(o-#{$name}) {
+	@include bem.b(o-#{$name}) {
 		@content;
 	}
 }
@@ -29,7 +33,7 @@
 /// Create a Block with the given name.
 /// @group General
 @mixin b($name) {
-	.#{$namespace}#{$name} {
+	.#{var.$namespace}#{$name} {
 		@content;
 	}
 }
@@ -49,11 +53,11 @@
 
 // Box shadows
 @mixin box-shadow($shadow-color, $color-opacity) {
-	box-shadow: 0 rhythm(math.div(1, 3)) rhythm(1 * 0.75) rgba($shadow-color, $color-opacity);
+	box-shadow: 0 func.rhythm(math.div(1, 3)) func.rhythm(1 * 0.75) rgba($shadow-color, $color-opacity);
 }
 
 @mixin card-shadow($shadow-color, $color-opacity) {
-	box-shadow: 0 rhythm(8) rhythm(12) rgba($color-cyberspace, 0.2);
+	box-shadow: 0 func.rhythm(8) func.rhythm(12) rgba(colors.$color-cyberspace, 0.2);
 }
 
 // Alerts
@@ -65,34 +69,34 @@
 
 // Tags
 @mixin tag {
-	border: 1px solid $color-granit;
-	border-radius: rem(17.5px);
-	color: $color-cyberspace;
+	border: 1px solid colors.$color-granit;
+	border-radius: func.to_rem(17.5px);
+	color: colors.$color-cyberspace;
 
 	&:hover,
 	&:focus {
-		border: 1px solid $color-granit;
-		border-radius: rem(17.5px);
-		background-color: $color-granit;
-		color: $color-snow;
+		border: 1px solid colors.$color-granit;
+		border-radius: func.to_rem(17.5px);
+		background-color: colors.$color-granit;
+		color: colors.$color-snow;
 
 		[class*=text] {
-			color: $color-snow;
+			color: colors.$color-snow;
 		}
 	}
 }
 
 @mixin tag-light {
-	border-color: $color-snow;
-	color: $color-snow;
+	border-color: colors.$color-snow;
+	color: colors.$color-snow;
 
 	&:hover,
 	&:focus {
 		border: 1px solid transparent;
-		background-color: rgba($color-snow, 0.5);
+		background-color: rgba(colors.$color-snow, 0.5);
 
 		[class*=text] {
-			color: $color-cyberspace;
+			color: colors.$color-cyberspace;
 		}
 	}
 }

package/src/configurations/_recaptcha.scss

@@ -1,5 +1,5 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .grecaptcha-badge {
-	z-index: z_index(foregroundMinus);
+	z-index: func.z_index(foregroundMinus);
 }

package/src/configurations/_variables.scss

@@ -1,8 +1,11 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 @use "sass:math";
+@use '../vendor/baseline/plumber' as plumber;
+@use '../vendor/grid/functions' as grid;
+@use '../configurations/functions' as func;
 
-@import '../vendor/grid/functions';
+$namespace: '' !default;
 
 // Typography
 $font-family-base: 'HK Grotesk', sans-serif !default;
@@ -29,14 +32,14 @@ $size-small: 12px !default;
 
 // Base units
 $base-unit: math.div($size-base, 2) !default;
-$rem-size: rem($base-unit) !default;
+$rem-size: func.to_rem($base-unit) !default;
 
 // Small size
-$small-text: rem($size-small);
+$small-text: func.to_rem($size-small);
 
 // Baseline defaults
-@include plumber-set-defaults(
-	$grid-height: rem($base-unit),
+@include plumber.plumber-set-defaults(
+	$grid-height: func.to_rem($base-unit), // 9px based on 18px font size
 	$baseline: $body-baseline,
 	$font-size: 2,
 	$line-height: 3,
@@ -61,15 +64,15 @@ $grid-breakpoints: (
 	xxl: 1400px
 ) !default;
 
-@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
-@include _assert-starts-at-zero($grid-breakpoints);
+@include grid.assert-ascending($grid-breakpoints, '$grid-breakpoints');
+@include grid.assert-starts-at-zero($grid-breakpoints);
 
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns: 18 !default;
-$grid-gutter-width: rem(20px) !default;
+$grid-gutter-width: func.to_rem(20px) !default;
 
 // Grid containers
 //
@@ -79,25 +82,16 @@ $container-max-widths: (
 	xl: 1360px
 ) !default;
 
-@include _assert-ascending($container-max-widths, '$container-max-widths');
+@include grid.assert-ascending($container-max-widths, '$container-max-widths');
 
 // Default border-radius
-$border-radius: rhythm(0.5);
+$border-radius: func.rhythm(0.5);
 
 // Icons
-$icon-size: rem(24px);
-$icon-size-large: rem(28px);
-$icon-size-medium: rem(20px);
-$icon-size-small: rem(16px);
-$icon-size-smallest: rem(12px);
-
-// Z-indexes
-$z-index: (
-	'foreground': 1000,
-	'foregroundMinus': 999,
-	'middleground': 500,
-	'middlegroundImportant': 750,
-	'background': 1
-);
+$icon-size: func.to_rem(24px);
+$icon-size-large: func.to_rem(28px);
+$icon-size-medium: func.to_rem(20px);
+$icon-size-small: func.to_rem(16px);
+$icon-size-smallest: func.to_rem(12px);
 
 $indent: 3.78825%;

package/src/configurations/_wordpress.scss

@@ -1,32 +1,39 @@
-@charset 'UTF-8';
+@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
 //
-@use "sass:math";
 
 .wp-caption {
-	margin-bottom: rhythm(3);
+	margin-bottom: func.rhythm(3);
 }
 
 // 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;
 				}
@@ -195,9 +202,9 @@ div.aligncenter {
 .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;
 		}
 	}