@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/utilities/_fill.scss

@@ -1,17 +1,18 @@
 @charset "UTF-8";
+@use '../configurations/colors/colors' as colors;
 
 .u-fill-snow {
-	fill: $color-snow !important;
+	fill: colors.$color-snow !important;
 }
 
 .u-fill-concrete {
-	fill: $color-concrete !important;
+	fill: colors.$color-concrete !important;
 }
 
 .u-fill-granit {
-	fill: $color-granit !important;
+	fill: colors.$color-granit !important;
 }
 
 .u-fill-ocean-dark {
-	fill: $color-ocean-dark !important;
+	fill: colors.$color-ocean-dark !important;
 }

package/src/utilities/_flex.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-flex-grow-0 {
 	flex-grow: 0 !important;

package/src/utilities/_font-size.scss

@@ -1,20 +1,21 @@
 @charset "UTF-8";
-
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 .u-font-size-small {
-	font-size: $size-small !important;
+	font-size: var.$size-small !important;
 	line-height: 1.5;
 }
 
 .u-font-size-medium {
-	font-size: $size-medium !important;
+	font-size: var.$size-medium !important;
 	line-height: 1.5;
 }
 
 .u-font-size-medium-plus {
-	font-size: $size-medium-plus !important;
+	font-size: var.$size-medium-plus !important;
 	line-height: 1.5;
 }
 
 .u-font-size-base {
-	font-size: $size-base !important;
+	font-size: var.$size-base !important;
 }

package/src/utilities/_fonts.scss

@@ -1,16 +1,17 @@
-@charset 'UTF-8';
-
+@charset "UTF-8";
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 .u-weight-normal {
-	font-family: $font-family-base !important;
+	font-family: var.$font-family-base !important;
 	font-weight: normal !important;
 }
 
 .u-weight-bold {
-	font-family: $font-family-headings !important;
+	font-family: var.$font-family-headings !important;
 	font-weight: normal !important;
 }
 
 .u-weight-bolder {
-	font-family: $font-family-bold !important;
+	font-family: var.$font-family-bold !important;
 	font-weight: normal !important;
 }

package/src/utilities/_gutter.scss

@@ -1,6 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/functions' as func;
 
-$gutter-width: rhythm(3);
+$gutter-width: func.rhythm(3);
 
 .u-gutter {
 	display: flex;

package/src/utilities/_hide.scss

@@ -1,17 +1,19 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/mixins' as mixin;
+@use '../vendor/grid/breakpoints' as breakpoint;
 
 // Hide visually but not for screen readers
 /// @group Utilities
 %u-visuallyhidden,
 .u-visuallyhidden {
-	@include visuallyhidden;
+	@include mixin.visuallyhidden;
 }
 
 // Hide on certain breakpoint
 /// @group Utilities
 @mixin hide-on-screen-width($bp) {
-	@include bp-down($bp) {
-		@include visuallyhidden;
+	@include breakpoint.bp-down($bp) {
+		@include mixin.visuallyhidden;
 	}
 }
 
@@ -24,7 +26,7 @@
 // Hide on mobile
 /// @group Utilities
 .u-hidden-mobile {
-	@include bp-down(lg) {
+	@include breakpoint.bp-down(lg) {
 		display: none !important;
 	}
 }
@@ -35,61 +37,61 @@
 }
 
 .u-hide-xs {
-	@include bp-down(xs) {
+	@include breakpoint.bp-down(xs) {
 		display: none !important;
 	}
 }
 
 .u-hide-sm-xs {
-	@include bp-down(sm-xs) {
+	@include breakpoint.bp-down(sm-xs) {
 		display: none !important;
 	}
 }
 
 .u-hide-sm {
-	@include bp-down(sm) {
+	@include breakpoint.bp-down(sm) {
 		display: none !important;
 	}
 }
 
 .u-hide-md {
-	@include bp-down(md) {
+	@include breakpoint.bp-down(md) {
 		display: none !important;
 	}
 }
 
 .u-hide-lg {
-	@include bp-down(lg) {
+	@include breakpoint.bp-down(lg) {
 		display: none !important;
 	}
 }
 
 .u-hide-xs-up {
-	@include bp-up(xs) {
+	@include breakpoint.bp-up(xs) {
 		display: none !important;
 	}
 }
 
 .u-hide-sm-up {
-	@include bp-up(sm) {
+	@include breakpoint.bp-up(sm) {
 		display: none !important;
 	}
 }
 
 .u-hide-md-up {
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		display: none !important;
 	}
 }
 
 .u-hide-lg-up {
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		display: none !important;
 	}
 }
 
 .u-hide-xl-up {
-	@include bp-up(xl) {
+	@include breakpoint.bp-up(xl) {
 		display: none !important;
 	}
 }

package/src/utilities/_icons.scss

@@ -1,73 +1,77 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;@use '../configurations/colors/colors' as colors;
+@use '../configurations/bem' as bem;
+@use '../vendor/grid/breakpoints' as breakpoint;
 
 // Default
-$fill-color: $color-black;
+$fill-color: colors.$color-black;
 
-@include b(u-icon) {
+@include bem.b(u-icon) {
 	display: block !important;
-	width: $icon-size !important;
-	height: $icon-size !important;
+	width: var.$icon-size !important;
+	height: var.$icon-size !important;
 	background-repeat: no-repeat !important;
 	background-position: center center !important;
 
 	// Sizes
-	@include m(smallest) {
-		width: $icon-size-smallest !important;
-		height: $icon-size-smallest !important;
+	@include bem.m(smallest) {
+		width: var.$icon-size-smallest !important;
+		height: var.$icon-size-smallest !important;
 	}
 
-	@include m(small) {
-		width: $icon-size-small !important;
-		height: $icon-size-small !important;
+	@include bem.m(small) {
+		width: var.$icon-size-small !important;
+		height: var.$icon-size-small !important;
 	}
 
-	@include m(medium) {
-		width: $icon-size-medium !important;
-		height: $icon-size-medium !important;
+	@include bem.m(medium) {
+		width: var.$icon-size-medium !important;
+		height: var.$icon-size-medium !important;
 	}
 
-	@include m(large) {
-		width: $icon-size-large !important;
-		height: $icon-size-large !important;
+	@include bem.m(large) {
+		width: var.$icon-size-large !important;
+		height: var.$icon-size-large !important;
 	}
 
-	@include m(supersize) {
-		width: $icon-size-large * 1.5 !important;
-		height: $icon-size-large * 1.5 !important;
+	@include bem.m(supersize) {
+		width: calc(var.$icon-size-large * 1.5) !important;
+		height: calc(var.$icon-size-large * 1.5) !important;
 	}
 
-	@include m(responsive) {
-		width: $icon-size !important;
-		height: $icon-size !important;
+	@include bem.m(responsive) {
+		width: var.$icon-size !important;
+		height: var.$icon-size !important;
 
-		@include bp-up(md) {
-			width: $icon-size-large !important;
-			height: $icon-size-large !important;
+		@include breakpoint.bp-up(md) {
+			width: var.$icon-size-large !important;
+			height: var.$icon-size-large !important;
 		}
 	}
 
 	// Specific icons
-	@include m(check) {
+	@include bem.m(check) {
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24.42' fill='" + $fill-color + "'%3E%3Cpolygon points='12.04 24.42 0 13.26 2.87 10.16 11.81 18.44 28.9 0 32 2.87 12.04 24.42' data-name='Layer 3'/%3E%3C/svg%3E") !important;
 		// Colors
-		@include m(jade) {
-			$fill-color: $color-jade !important;
+		@include bem.m(jade) {
+			$fill-color: colors.$color-jade !important;
 
 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24.42' fill='" + $fill-color + "'%3E%3Cpolygon points='12.04 24.42 0 13.26 2.87 10.16 11.81 18.44 28.9 0 32 2.87 12.04 24.42' data-name='Layer 3'/%3E%3C/svg%3E") !important;
 		}
 	}
 
-	@include m(close) {
+	@include bem.m(close) {
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='" + $fill-color + "'%3E%3Cpath d='M27.5,2L30,4.5L4.5,30L2,27.5L27.5,2z'/%3E%3Cpath d='M30,27.5L27.5,30L2,4.5L4.5,2L30,27.5z'/%3E%3C/svg%3E") !important;
 
-		@include m(ruby) {
-			$fill-color: $color-ruby !important;
+		@include bem.m(ruby) {
+			$fill-color: colors.$color-ruby !important;
 
 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='" + $fill-color + "'%3E%3Cpath d='M27.5,2L30,4.5L4.5,30L2,27.5L27.5,2z'/%3E%3Cpath d='M30,27.5L27.5,30L2,4.5L4.5,2L30,27.5z'/%3E%3C/svg%3E") !important;
 		}
 	}
 
-	@include m(color) {
+	@include bem.m(color) {
 		fill: currentColor;
 	}
 }

package/src/utilities/_indent.scss

@@ -1,19 +1,21 @@
 @charset "UTF-8";
-
+@use '../vendor/grid/breakpoints' as breakpoint;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 .u-indent-0 {
-	@include bp-up(lg) {
+	@include breakpoint.bp-up(lg) {
 		margin-left: 0;
 	}
 }
 
 .u-indent-1 {
-	@include bp-up(lg) {
-		margin-left: $indent;
+	@include breakpoint.bp-up(lg) {
+		margin-left: var.$indent;
 	}
 }
 
 .u-indent-2 {
-	@include bp-up(lg) {
-		margin-left: $indent * 2;
+	@include breakpoint.bp-up(lg) {
+		margin-left: var.$indent * 2;
 	}
 }

package/src/utilities/_links.scss

@@ -1,4 +1,8 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;@use '../configurations/colors/colors' as colors;
+@use '../configurations/bem' as bem;
+@use '../configurations/colors/colors-functions' as colorFunc;
 
 /* Force normalize links */
 .u-link-normal,
@@ -22,35 +26,35 @@
 
 /* Force body text link link-styles */
 .u-link {
-	padding: rhythm(0) rhythm(0.5) !important;
-	border-bottom: rem(2px) solid $color-peacock !important;
+	padding: func.rhythm(0) func.rhythm(0.5) !important;
+	border-bottom: func.to_rem(2px) solid colors.$color-peacock !important;
 	color: var(--cyberspace-color) !important;
 	text-decoration: none !important;
 
 	&:hover,
 	&:focus {
-		border-bottom: rem(2px) solid $color-ocean-light !important;
-		border-radius: $border-radius !important;
-		background-color: $color-ocean-light !important;
+		border-bottom: func.to_rem(2px) solid colors.$color-ocean-light !important;
+		border-radius: var.$border-radius !important;
+		background-color: colors.$color-ocean-light !important;
 	}
 
 	&[href^='mailto'] {
 		hyphens: none !important;
 	}
 
-	@include m(light) {
-		color: $color-snow !important;
+	@include bem.m(light) {
+		color: colors.$color-snow !important;
 
 		&:hover,
 		&:focus {
-			color: $color-cyberspace !important;
+			color: colors.$color-cyberspace !important;
 		}
 	}
 }
 
 /* Create linked box (requires parent box to have position:relative) */
 .u-link-area {
-	color: $color-cyberspace !important;
+	color: colors.$color-cyberspace !important;
 	text-decoration: none !important;
 
 	&::after {
@@ -66,7 +70,7 @@
 
 	&:hover,
 	&:focus {
-		color: $color-ruby !important;
+		color: colors.$color-ruby !important;
 		text-decoration: underline !important;
 	}
 }
@@ -74,17 +78,17 @@
 .u-icon-list-link {
 	padding: 0;
 	border-bottom: 0;
-	color: $color-cyberspace;
+	color: colors.$color-cyberspace;
 	text-decoration: none;
 
 	&:hover,
 	&:focus {
-		border-radius: $border-radius;
-		background-color: $color-ocean-light;
+		border-radius: var.$border-radius;
+		background-color: colors.$color-ocean-light;
 	}
 
-	@include m(current) {
-		color: $color-ruby;
+	@include bem.m(current) {
+		color: colors.$color-ruby;
 		text-decoration: underline;
 	}
 }
@@ -92,8 +96,8 @@
 // Generate parent element link color classes e.g. .u-color-ruby a
 /// @group Colors
 .u-link-color {
-	@include color_classes (
-		$map: $colors,
+	@include colorFunc.color_classes (
+		$map: colorFunc.$colors,
 		$separator: '-',
 		$attribute: 'color',
 		$element: 'a'

package/src/utilities/_lists.scss

@@ -1,4 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;@use '../configurations/colors/colors' as colors;
+@use '../configurations/mixins' as mixin;
+@use '../configurations/bem' as bem;
 
 %list-clean {
 	margin: 0;
@@ -11,8 +16,8 @@
 
 	> li ul,
 	> li ol {
-		margin-top: rhythm(1);
-		margin-left: rhythm(2);
+		margin-top: func.rhythm(1);
+		margin-left: func.rhythm(2);
 	}
 }
 
@@ -23,14 +28,14 @@
 	li {
 		display: flex;
 		align-items: center;
-		padding: rhythm(1);
+		padding: func.rhythm(1);
 
 		&:nth-child(odd) {
-			background-color: $color-ash;
+			background-color: colors.$color-ash;
 		}
 
 		&:nth-child(even) {
-			background-color: $color-snow;
+			background-color: colors.$color-snow;
 		}
 	}
 }
@@ -39,17 +44,17 @@
 	@extend %list-striped;
 }
 
-@include b(u-list__icon) {
+@include mixin.b(u-list__icon) {
 	flex-shrink: 0;
-	width: $icon-size;
-	height: $icon-size;
-	margin-right: rhythm(2);
+	width: var.$icon-size;
+	height: var.$icon-size;
+	margin-right: func.rhythm(2);
 
-	@include m(green) {
-		fill: $color-jade;
+	@include bem.m(green) {
+		fill: colors.$color-jade;
 	}
 
-	@include m(red) {
-		fill: $color-ruby;
+	@include bem.m(red) {
+		fill: colors.$color-ruby;
 	}
 }

package/src/utilities/_manifest.scss

@@ -1,29 +1,29 @@
 @charset "UTF-8";
 
-@import 'margin';
-@import 'padding';
-@import 'hide';
-@import 'show';
-@import 'lists';
-@import 'position';
-@import 'fonts';
-@import 'tab-highlighting/tab-highlighting';
-@import 'border';
-@import 'align';
-@import 'vertical-align';
-@import 'icons';
-@import 'wrap';
-@import 'links';
-@import 'z-index';
-@import 'box-shadow';
-@import 'flex';
-@import 'display';
-@import 'misc';
-@import 'gutter';
-@import 'text';
-@import 'pointer-events';
-@import 'clear';
-@import 'fill';
-@import 'indent';
-@import 'font-size';
-@import 'cursor';
+@use 'margin';
+@use 'padding';
+@use 'hide';
+@use 'show';
+@use 'lists';
+@use 'position';
+@use 'fonts';
+@use 'tab-highlighting/tab-highlighting';
+@use 'border';
+@use 'align';
+@use 'vertical-align';
+@use 'icons';
+@use 'wrap';
+@use 'links';
+@use 'z-index';
+@use 'box-shadow';
+@use 'flex';
+@use 'display';
+@use 'misc';
+@use 'gutter';
+@use 'text';
+@use 'pointer-events';
+@use 'clear';
+@use 'fill';
+@use 'indent';
+@use 'font-size';
+@use 'cursor';

package/src/utilities/_margin.scss

@@ -1,4 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/config' as config;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 
 /// @group Utilities
 $class-m: u-m !default;
@@ -12,60 +15,60 @@ $class-m-y: u-m-y !default;
 @for $i from 0 through 8 {
 	// Margin all
 	.#{$class-m}-#{$i} {
-		margin: rhythm($i) !important;
+		margin: func.rhythm($i) !important;
 	}
 
 	// Margin top
 	.#{$class-m-t}-#{$i} {
-		margin-top: rhythm($i) !important;
+		margin-top: func.rhythm($i) !important;
 	}
 
 	// Margin right
 	.#{$class-m-r}-#{$i} {
-		margin-right: rhythm($i) !important;
+		margin-right: func.rhythm($i) !important;
 	}
 
 	// Margin bottom
 	.#{$class-m-b}-#{$i} {
-		margin-bottom: rhythm($i) !important;
+		margin-bottom: func.rhythm($i) !important;
 	}
 
 	// Margin left
 	.#{$class-m-l}-#{$i} {
-		margin-left: rhythm($i) !important;
+		margin-left: func.rhythm($i) !important;
 	}
 
 	// Margin x (left and right)
 	.#{$class-m-x}-#{$i} {
-		margin-right: rhythm($i) !important;
-		margin-left: rhythm($i) !important;
+		margin-right: func.rhythm($i) !important;
+		margin-left: func.rhythm($i) !important;
 	}
 
 	// Margin y (top and bottom)
 	.#{$class-m-y}-#{$i} {
-		margin-top: rhythm($i) !important;
-		margin-bottom: rhythm($i) !important;
+		margin-top: func.rhythm($i) !important;
+		margin-bottom: func.rhythm($i) !important;
 	}
 }
 
 .u-m-default {
-	margin: $default-margin !important;
+	margin: config.$default-margin !important;
 }
 
 .u-m-t-default {
-	margin-top: $default-margin !important;
+	margin-top: config.$default-margin !important;
 }
 
 .u-m-b-default {
-	margin-bottom: $default-margin !important;
+	margin-bottom: config.$default-margin !important;
 }
 
 .u-m-l-default {
-	margin-left: $default-margin !important;
+	margin-left: config.$default-margin !important;
 }
 
 .u-m-r-default {
-	margin-right: $default-margin !important;
+	margin-right: config.$default-margin !important;
 }
 
 .u-m-offset-0 {
@@ -73,11 +76,11 @@ $class-m-y: u-m-y !default;
 }
 
 .u-m-offset-1 {
-	margin-left: $indent !important;
+	margin-left: var.$indent !important;
 }
 
 .u-m-offset-2 {
-	margin-left: $indent * 2 !important;
+	margin-left: var.$indent * 2 !important;
 }
 
 .u-m-l-auto {

package/src/utilities/_misc.scss

@@ -1,4 +1,5 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/colors/colors' as colors;
 
 // Adds a divider between two words, like a pipe (|) character.
 // Example usage:
@@ -12,7 +13,7 @@
 	height: 1em;
 	margin: 0 0.5em;
 	padding: 0.7em 0;
-	background: $color-black;
+	background: colors.$color-black;
 	vertical-align: sub;
 }