@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/configurations/_bem.scss

@@ -1,54 +1,57 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:meta";
+@use "sass:string";
+@use '../configurations/variables' as var;
 
-/// Element class separator
-/// @group BEM
+/* Element class separator
+/// @group BEM */
 $element-separator: '__';
 
-/// Element class modifier
-/// @group BEM
+/* Element class modifier
+/// @group BEM */
 $modifier-separator: '--';
 
-/// Element class state prefix
-/// @group BEM
+/* Element class state prefix
+/// @group BEM */
 $state-prefix: 'is';
 
-/// Converts selector to string
-/// @group BEM
+/* Converts selector to string
+/// @group BEM */
 @function selector_to_string($selector) {
-	$selector: inspect($selector); //cast to string
-	$selector: str-slice($selector, 2, -2); //remove brackets
+	$selector: meta.inspect($selector); /*cast to string */
+	$selector: string.slice($selector, 2, -2); /* remove brackets */
 	@return $selector;
 }
 
-/// Checks if a inside a BEM modifier
-/// @group BEM
+/* Checks if a inside a BEM modifier
+/// @group BEM */
 @function contains_modifier($selector) {
 	$selector: selector_to_string($selector);
-	@if str-index($selector, $modifier-separator) {
+	@if string.index($selector, $modifier-separator) {
 		@return true;
 	} @else {
 		@return false;
 	}
 }
 
-/// Get BEM block
-/// @group BEM
+/* Get BEM block
+/// @group BEM */
 @function get_block($selector) {
 	$selector: selector_to_string($selector);
-	$modifier-start: str-index($selector, $modifier-separator) - 1;
-	@return str-slice($selector, 0, $modifier-start);
+	$modifier-start: string.index($selector, $modifier-separator) - 1;
+	@return string.slice($selector, 0, $modifier-start);
 }
 
-/// Encapsulates a standalone entity that is meaningful on its own.
-/// @group BEM
+/* Encapsulates a standalone entity that is meaningful on its own.
+/// @group BEM */
 @mixin b($name) {
-	.#{$namespace}#{$name} {
+	.#{var.$namespace}#{$name} {
 		@content;
 	}
 }
 
-/// Parts of a block and have no standalone meaning
-/// @group BEM
+/* Parts of a block and have no standalone meaning
+/// @group BEM */
 @mixin e($element) {
 	$selector: &;
 	@if contains_modifier($selector) {
@@ -69,8 +72,8 @@ $state-prefix: 'is';
 	}
 }
 
-/// Flags on blocks or elements. Use them to change appearance or behavior.
-/// @group BEM
+/* Flags on blocks or elements. Use them to change appearance or behavior.
+/// @group BEM */
 @mixin m($modifier) {
 	@at-root {
 		#{&}#{$modifier-separator + $modifier} {
@@ -79,8 +82,8 @@ $state-prefix: 'is';
 	}
 }
 
-/// States on blocks or elements. Use them to state.
-/// @group BEM
+/* States on blocks or elements. Use them to state.
+/// @group BEM */
 @mixin s($state, $prefix: $state-prefix) {
 	@at-root {
 		&.#{$prefix}-#{$state} {

package/src/configurations/_config.scss

@@ -1,49 +1,50 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
-@import '../configurations/colors/colors';
-@import '../configurations/colors/colors-functions';
+@use '../configurations/functions' as func;
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/colors/colors-functions' as colorFunc;
 
-/// Namespace
+/* Namespace
 /// Prepended to all outputted classes
 ///
-/// @group Config
+/// @group Config */
 $namespace: '' !default;
 
-/// Theme path
+/* Theme path
 /// For images and other media
 ///
-/// @group Config
+/// @group Config */
 $theme-path: '/app/themes/internetstiftelsen' !default;
 
-/// Responsive breakpoints
-/// @group Config
+/* Responsive breakpoints
+/// @group Config */
 $breakpoints: (
 	'sm': 0,
 	'md': 640px,
 	'lg': 1100px
 );
 
-/// Default margin and padding
+/* Default margin and padding
 ///
-/// @group Config
-$default-margin: rhythm(2) !default;
-$default-padding: rhythm(2) !default;
+/// @group Config */
+$default-margin: func.rhythm(2) !default;
+$default-padding: func.rhythm(2) !default;
 
-/// Theme colors
+/* Theme colors
 ///
-/// @group Config
+/// @group Config */
 $theme-colors: (
-	primary: $color-ruby,
-	secondary: $color-jade,
-	subtle: $color-granit
+	primary: colors.$color-ruby,
+	secondary: colors.$color-jade,
+	subtle: colors.$color-granit
 );
 
-/// Text colors
+/* Text colors
 ///
-/// @group Config
+/// @group Config */
 .color {
-	@include color_values($theme-colors, 'color', $separator: '-');
+	@include colorFunc.color_values($theme-colors, 'color', $separator: '-');
 }
 
-// Default text-shadow
-$text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5);
+/* Default text-shadow */
+$text-shadow: 0 0 func.rhythm(2) rgba(colors.$color-black, 0.5);

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) {
+/* Converts px value to rem */
+@function to_rem($size) {
 	@return math.div($size, $size-base) * 1rem;
 }
 
@@ -15,16 +22,25 @@
 	@return math.div($n, $n * 0 + 1);
 }
 
-// Convert rem back to px
+/* 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,42 +1,45 @@
-@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
+/* Typography */
 $font-family-base: 'HK Grotesk', sans-serif !default;
 $font-family-headings: 'HK Grotesk Semibold', sans-serif !default;
 $font-family-medium: 'HK Grotesk Medium', sans-serif !default;
 $font-family-bold: 'HK Grotesk Bold', sans-serif !default;
 $font-family-mono: 'Roboto Mono Regular', monospace !default;
 
-$headings-baseline: 0.150 !default; // HK Semibold
-$body-baseline: 0.150 !default; // HK Regular
-$mono-baseline: 0.110 !default; // Roboto Mono Regular
+$headings-baseline: 0.150 !default; /* HK Semibold */
+$body-baseline: 0.150 !default; /* HK Regular */
+$mono-baseline: 0.110 !default; /* Roboto Mono Regular */
 
-// Size base
+/* Size base */
 $size-base: 18px !default;
 
-// Size medium plus
+/* Size medium plus */
 $size-medium-plus: 15.3px !default;
 
-// Size medium
+/* Size medium */
 $size-medium: 14px !default;
 
-// Size small
+/* Size small */
 $size-small: 12px !default;
 
-// Base units
+/* 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 size */
+$small-text: func.to_rem($size-small);
 
-// Baseline defaults
-@include plumber-set-defaults(
-	$grid-height: rem($base-unit),
+/* Baseline defaults */
+@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,
@@ -46,10 +49,10 @@ $small-text: rem($size-small);
 
 $enable-grid-classes: true !default;
 
-// Grid breakpoints
+/* Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
+// adapting to different screen sizes, for use in media queries. */
 
 $grid-breakpoints: (
 	xs: 0,
@@ -61,43 +64,34 @@ $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
+/* Grid columns
 //
-// Set the number of columns and specify the width of the gutters.
+// 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
+/* Grid containers
 //
-// Define the maximum width of `.container` for different screen sizes.
+// Define the maximum width of `.container` for different screen sizes. */
 
 $container-max-widths: (
 	xl: 1360px
 ) !default;
 
-@include _assert-ascending($container-max-widths, '$container-max-widths');
-
-// Default border-radius
-$border-radius: 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
-);
+@include grid.assert-ascending($container-max-widths, '$container-max-widths');
+
+/* Default border-radius */
+$border-radius: func.rhythm(0.5);
+
+/* Icons */
+$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%;