@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/theme/_theme.scss

@@ -1,40 +1,43 @@
-@charset 'UTF-8';
+@use "sass:map";
+@charset "UTF-8";
 
-@import '../configurations/colors/colors';
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/mixins' as mixin;
+@use '../configurations/bem' as bem;
 
 :root {
-	--snow-color: #{$color-snow};
-	--cyberspace-color: #{$color-cyberspace};
-	--black-color: #{$color-black};
-	--ash-color: #{$color-ash};
-	--dark-color: #{$color-cyberspace};
-	--white-color: #{$color-snow};
-	--ocean-dark-color: #{$color-ocean-dark};
+	--snow-color: #{colors.$color-snow};
+	--cyberspace-color: #{colors.$color-cyberspace};
+	--black-color: #{colors.$color-black};
+	--ash-color: #{colors.$color-ash};
+	--dark-color: #{colors.$color-cyberspace};
+	--white-color: #{colors.$color-snow};
+	--ocean-dark-color: #{colors.$color-ocean-dark};
 }
 
 $namespace: '';
 
-// Theme palette
+/* Theme palette */
 $theme-palette: (
 	background: var(--ash-color)
 ) !default;
 
 @function theme_palette($key: 'background') {
-	@return map-get($theme-palette, $key);
+	@return map.get($theme-palette, $key);
 }
 
-@include b(site) {
+@include mixin.b(site) {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
 
-	@include e(header) {
+	@include bem.e(header) {
 		display: flex;
 		position: relative;
 		flex-direction: column;
 	}
 
-	@include e(main) {
+	@include bem.e(main) {
 		flex: 1 0 auto;
 		transition: opacity 0.2s ease-out, height 0.2s ease-out;
 		opacity: 1;
@@ -47,16 +50,16 @@ $theme-palette: (
 }
 
 :root {
-	--m-submenu-background-color: #{$color-ocean-light};
-	--m-submenu-icon-fill-color: #{$color-cyberspace};
-	--m-submenu-icon-background-hover-color: #{$color-ocean-light};
-	--m-info-box-border-color: #{$color-peacock};
-	--m-modal-button-primary-color: #{$color-peacock-light};
-	--m-modal-button-primary-hover-color: #{$color-peacock};
-	--m-modal-button-primary-border-color: #{$color-peacock};
-	--m-modal-button-primary-text-color: #{$color-cyberspace};
-	--m-modal-button-secondary-color: #{$color-ruby-light};
-	--m-modal-button-secondary-hover-color: #{$color-ruby};
-	--m-modal-button-secondary-border-color: #{$color-ruby};
-	--m-modal-button-secondary-text-color: #{$color-cyberspace};
+	--m-submenu-background-color: #{colors.$color-ocean-light};
+	--m-submenu-icon-fill-color: #{colors.$color-cyberspace};
+	--m-submenu-icon-background-hover-color: #{colors.$color-ocean-light};
+	--m-info-box-border-color: #{colors.$color-peacock};
+	--m-modal-button-primary-color: #{colors.$color-peacock-light};
+	--m-modal-button-primary-hover-color: #{colors.$color-peacock};
+	--m-modal-button-primary-border-color: #{colors.$color-peacock};
+	--m-modal-button-primary-text-color: #{colors.$color-cyberspace};
+	--m-modal-button-secondary-color: #{colors.$color-ruby-light};
+	--m-modal-button-secondary-hover-color: #{colors.$color-ruby};
+	--m-modal-button-secondary-border-color: #{colors.$color-ruby};
+	--m-modal-button-secondary-text-color: #{colors.$color-cyberspace};
 }

package/src/utilities/_align.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-align-left {
 	text-align: left !important;

package/src/utilities/_border.scss

@@ -1,7 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;@use '../configurations/colors/colors-functions' as colorFunc;
 
 .u-border-radius {
-	border-radius: $border-radius !important;
+	border-radius: var.$border-radius !important;
 }
 
 .u-border-radius-50 {
@@ -43,7 +45,7 @@ $class-b-y: u-b-y !default;
 // Generate border color classes e.g. .border-color-ruby
 /// @group Colors
 .u-b {
-	@include color_values($colors, 'border-color', $separator: '-');
+	@include colorFunc.color_values(colorFunc.$colors, 'border-color', $separator: '-');
 }
 
 // Generate classes for border widths e.g. .u-b-0 and .u-b-l-4.

package/src/utilities/_box-shadow.scss

@@ -1,9 +1,12 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/mixins' as mixin;
+@use '../configurations/extends';
+@use '../configurations/colors/colors' as colors;
 
 .u-box-shadow {
 	@extend %box-shadow;
 }
 
 .u-box-shadow-card {
-	@include card-shadow($color-cyberspace, 0.2);
+	@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 }

package/src/utilities/_display.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-display-block {
 	display: block !important;

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;
+/* Default */
+$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;
+	/* Sizes */
+	@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) {
+	/* Specific icons */
+	@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;
+		/* Colors */
+		@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;
 	}
 }