@internetstiftelsen/styleguide 4.1.13 → 5.0.1

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,6 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/config' as config;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 
-/// @group Utilities
+/* @group Utilities */
 $class-m: u-m !default;
 $class-m-t: u-m-t !default;
 $class-m-r: u-m-r !default;
@@ -10,62 +13,62 @@ $class-m-x: u-m-x !default;
 $class-m-y: u-m-y !default;
 
 @for $i from 0 through 8 {
-	// Margin all
+	/* Margin all */
 	.#{$class-m}-#{$i} {
-		margin: rhythm($i) !important;
+		margin: func.rhythm($i) !important;
 	}
 
-	// Margin top
+	/* Margin top */
 	.#{$class-m-t}-#{$i} {
-		margin-top: rhythm($i) !important;
+		margin-top: func.rhythm($i) !important;
 	}
 
-	// Margin right
+	/* Margin right */
 	.#{$class-m-r}-#{$i} {
-		margin-right: rhythm($i) !important;
+		margin-right: func.rhythm($i) !important;
 	}
 
-	// Margin bottom
+	/* Margin bottom */
 	.#{$class-m-b}-#{$i} {
-		margin-bottom: rhythm($i) !important;
+		margin-bottom: func.rhythm($i) !important;
 	}
 
-	// Margin left
+	/* Margin left */
 	.#{$class-m-l}-#{$i} {
-		margin-left: rhythm($i) !important;
+		margin-left: func.rhythm($i) !important;
 	}
 
-	// Margin x (left and right)
+	/* 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)
+	/* 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;
 }
 

package/src/utilities/_padding.scss

@@ -1,6 +1,9 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/config' as config;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
 
-/// @group Utilities
+/* @group Utilities */
 $class-p: u-p !default;
 $class-p-t: u-p-t !default;
 $class-p-r: u-p-r !default;
@@ -11,60 +14,60 @@ $class-p-y: u-p-y !default;
 
 /* stylelint-disable */
 @for $i from 0 through 8 {
-	// Padding all
+	/* Padding all */
 	.#{$class-p}-#{$i} {
-		padding: rhythm($i) !important;
+		padding: func.rhythm($i) !important;
 	}
 
-	// Padding top
+	/* Padding top */
 	.#{$class-p-t}-#{$i} {
-		padding-top: rhythm($i) !important;
+		padding-top: func.rhythm($i) !important;
 	}
 
-	// Padding right
+	/* Padding right */
 	.#{$class-p-r}-#{$i} {
-		padding-right: rhythm($i) !important;
+		padding-right: func.rhythm($i) !important;
 	}
 
-	// Padding bottom
+	/* Padding bottom */
 	.#{$class-p-b}-#{$i} {
-		padding-bottom: rhythm($i) !important;
+		padding-bottom: func.rhythm($i) !important;
 	}
 
-	// Padding left
+	/* Padding left */
 	.#{$class-p-l}-#{$i} {
-		padding-left: rhythm($i) !important;
+		padding-left: func.rhythm($i) !important;
 	}
 
-	// Padding x (left and right)
+	/* Padding x (left and right) */
 	.#{$class-p-x}-#{$i} {
-		padding-right: rhythm($i) !important;
-		padding-left: rhythm($i) !important;
+		padding-right: func.rhythm($i) !important;
+		padding-left: func.rhythm($i) !important;
 	}
 
-	// Padding x (left and right)
+	/* Padding x (left and right) */
 	.#{$class-p-y}-#{$i} {
-		padding-top: rhythm($i) !important;
-		padding-bottom: rhythm($i) !important;
+		padding-top: func.rhythm($i) !important;
+		padding-bottom: func.rhythm($i) !important;
 	}
 }
 
 .u-p-default {
-	padding: $default-padding !important;
+	padding: config.$default-padding !important;
 }
 
 .u-p-t-default {
-	padding-top: $default-padding !important;
+	padding-top: config.$default-padding !important;
 }
 
 .u-p-b-default {
-	padding-bottom: $default-padding !important;
+	padding-bottom: config.$default-padding !important;
 }
 
 .u-p-l-default {
-	padding-left: $default-padding !important;
+	padding-left: config.$default-padding !important;
 }
 
 .u-p-r-default {
-	padding-right: $default-padding !important;
+	padding-right: config.$default-padding !important;
 }

package/src/utilities/_position.scss

@@ -1,4 +1,5 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/functions' as func;
 
 .u-position-absolute {
 	position: absolute !important;
@@ -23,5 +24,5 @@
 
 .u-position-sticky-top-4 {
 	position: sticky !important;
-	top: rhythm(4) !important;
+	top: func.rhythm(4) !important;
 }

package/src/utilities/_show.scss

@@ -1,31 +1,32 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../vendor/grid/breakpoints' as breakpoint;
 
 .u-show-xs {
-	@include bp-down(xs) {
+	@include breakpoint.bp-down(xs) {
 		display: initial !important;
 	}
 }
 
 .u-show-sm-xs {
-	@include bp-down(sm-xs) {
+	@include breakpoint.bp-down(sm-xs) {
 		display: initial !important;
 	}
 }
 
 .u-show-sm {
-	@include bp-down(sm) {
+	@include breakpoint.bp-down(sm) {
 		display: initial !important;
 	}
 }
 
 .u-show-md {
-	@include bp-down(md) {
+	@include breakpoint.bp-down(md) {
 		display: initial !important;
 	}
 }
 
 .u-show-lg {
-	@include bp-down(lg) {
+	@include breakpoint.bp-down(lg) {
 		display: initial !important;
 	}
 }

package/src/utilities/_text.scss

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

package/src/utilities/_vertical-align.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-valign-baseline {
 	vertical-align: baseline !important;

package/src/utilities/_wrap.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .u-nowrap {
 	white-space: nowrap !important;

package/src/utilities/_z-index.scss

@@ -1,21 +1,22 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../configurations/functions' as func;
 
 .u-z-index-background {
-	z-index: z_index(background) !important;
+	z-index: func.z_index(background) !important;
 }
 
 .u-z-index-foreground {
-	z-index: z_index(foreground) !important;
+	z-index: func.z_index(foreground) !important;
 }
 
 .u-z-index-foreground-minus {
-	z-index: z_index(foregroundMinus) !important;
+	z-index: func.z_index(foregroundMinus) !important;
 }
 
 .u-z-index-middleground {
-	z-index: z_index(middleground) !important;
+	z-index: func.z_index(middleground) !important;
 }
 
 .u-z-index-middleground-important {
-	z-index: z_index(middlegroundImportant) !important;
+	z-index: func.z_index(middlegroundImportant) !important;
 }

package/src/utilities/tab-highlighting/_tab-highlighting.scss

@@ -1,6 +1,7 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/colors/colors' as colors;
 
-$color-tab-highlight: $color-ruby !default;
+$color-tab-highlight: colors.$color-ruby !default;
 
 // Remove focus styling only when JS is active
 .js {
@@ -24,11 +25,11 @@ $color-tab-highlight: $color-ruby !default;
 	}
 
 	&::-webkit-slider-thumb {
-		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px inset $color-tab-highlight !important;
+		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 inset $color-tab-highlight !important;
 	}
 
 	&::-moz-range-thumb {
-		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px inset $color-tab-highlight !important;
+		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 inset $color-tab-highlight !important;
 	}
 }
 
@@ -38,6 +39,6 @@ $color-tab-highlight: $color-ruby !default;
 .tab-highlight .color-inverse .has-focus {
 	&,
 	+ label {
-		box-shadow: 0 0 0 2px inset $color-snow !important;
+		box-shadow: 0 0 0 2px inset colors.$color-snow !important;
 	}
 }

package/src/vendor/baseline/_plumber.scss

@@ -1,12 +1,13 @@
 @charset "UTF-8";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:map";
 
 // PLUMBER - Easy baseline grids with SASS
 // https://jamonserrano.github.io/plumber-sass
 // Copyright 2016 Viktor Honti
 // MIT License
 
-@use "sass:math";
-
 @mixin plumber(
 	$font-size: null,
 	$line-height: null,
@@ -21,7 +22,7 @@
 	@if not $font-size {
 		$font-size: -plumber-get-default(font-size);
 	}
-	@if not unitless($font-size) or $font-size <= 0 {
+	@if not math.is-unitless($font-size) or $font-size <= 0 {
 		@error '$font-size parameter must be a positive unitless number, got #{$font-size} instead';
 	}
 
@@ -29,7 +30,7 @@
 	@if not $line-height {
 		$line-height: -plumber-get-default(line-height);
 	}
-	@if not unitless($line-height) or $line-height != round($line-height) or $line-height < 1 {
+	@if not math.is-unitless($line-height) or $line-height != math.round($line-height) or $line-height < 1 {
 		@error '$line-height parameter must be a positive unitless integer, got #{$line-height} instead';
 	}
 
@@ -53,7 +54,7 @@
 	@if not $grid-height {
 		$grid-height: -plumber-get-default(grid-height);
 	}
-	@if unitless($grid-height) or $grid-height < 0 {
+	@if math.is-unitless($grid-height) or $grid-height < 0 {
 		@error '$grid-height parameter must be a positive unit, got #{$grid-height} instead';
 	}
 
@@ -63,7 +64,7 @@
 	}
 	@if not $baseline {
 		@error '$baseline must be passed as a parameter or defined in defaults';
-	} @else if not (unitless($baseline) and $baseline >= 0 and $baseline < 1) {
+	} @else if not (math.is-unitless($baseline) and $baseline >= 0 and $baseline < 1) {
 		@error '$baseline parameter must be a unitless fraction between 0 and 1, got #{$baseline} instead';
 	}
 
@@ -71,7 +72,7 @@
 	@if not $use-baseline-origin {
 		$use-baseline-origin: -plumber-get-default(use-baseline-origin);
 	}
-	@if type-of($use-baseline-origin) != bool {
+	@if meta.type-of($use-baseline-origin) != bool {
 		@error '$use-baseline-origin parameter must be Boolean, got #{$use-baseline-origin} instead';
 	}
 
@@ -79,7 +80,7 @@
 	// the distance of the original baseline from the bottom
 	$baseline-from-bottom: math.div($line-height - $font-size, 2) + ($font-size * $baseline);
 	// the corrected baseline will be on the nearest gridline
-	$corrected-baseline: round($baseline-from-bottom);
+	$corrected-baseline: math.round($baseline-from-bottom);
 	// the difference between the original and the corrected baseline
 	$baseline-difference: $corrected-baseline - $baseline-from-bottom;
 
@@ -120,7 +121,7 @@
 	}
 
 	// round pixel values to decrease browser inconsistencies
-	@if unit($grid-height) == 'px' {
+	@if math.unit($grid-height) == 'px' {
 		$line-height: -plumber-round($line-height);
 		$margin-top: -plumber-round($margin-top);
 		$padding-top: -plumber-round($padding-top);
@@ -151,21 +152,21 @@ $-plumber-defaults: (
 
 // Merge provided settings into the defaults map
 @mixin plumber-set-defaults($defaults...) {
-	$-plumber-defaults: map-merge($-plumber-defaults, keywords($defaults)) !global;
+	$-plumber-defaults: map.merge($-plumber-defaults, meta.keywords($defaults)) !global;
 }
 
 // Get a default value
 @function -plumber-get-default($key) {
-	@return map-get($-plumber-defaults, $key);
+	@return map.get($-plumber-defaults, $key);
 }
 
 // Check if a value is a non-negative integer
 @function -plumber-is-integer($value) {
-	@return (unitless($value) and $value == round($value));
+	@return (math.is-unitless($value) and $value == math.round($value));
 }
 
 // Round value to the nearest quarter pixel
 // This provides reasonable precision and prevents grid creep (by fractions adding up) in most browsers
 @function -plumber-round($value) {
-	@return math.div(round($value * 4), 4);
+	@return math.div(math.round($value * 4), 4);
 }

package/src/vendor/grid/_breakpoints.scss

@@ -1,4 +1,8 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:list";
+@use "sass:map";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
 
 // Breakpoint viewport sizes and media queries.
 //
@@ -6,7 +10,7 @@
 //
 //    (xs: 0, sm: 576px, md: 769px, lg: 992px, xl: 1200px, xxl: 1400)
 //
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+// The map defined in the `var.$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
 //
@@ -16,17 +20,17 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-	$n: index($breakpoint-names, $name);
-	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: var.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+	$n: list.index($breakpoint-names, $name);
+	@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 769px, lg: 992px, xl: 1200px, xxl: 1400))
 //    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-	$min: map-get($breakpoints, $name);
+@function breakpoint-min($name, $breakpoints: var.$grid-breakpoints) {
+	$min: map.get($breakpoints, $name);
 	@return if($min != 0, $min, null);
 }
 
@@ -35,7 +39,7 @@
 //
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 769px, lg: 992px, xl: 1200px, xxl: 1400))
 //    767px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-max($name, $breakpoints: var.$grid-breakpoints) {
 	$next: breakpoint-next($name, $breakpoints);
 	@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
@@ -47,13 +51,13 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 769px, lg: 992px, xl: 1200px, xxl: 1400))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-infix($name, $breakpoints: var.$grid-breakpoints) {
 	@return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin bp-up($name, $breakpoints: $grid-breakpoints) {
+@mixin bp-up($name, $breakpoints: var.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	@if $min {
 		@media (min-width: $min) {
@@ -66,7 +70,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin bp-down($name, $breakpoints: $grid-breakpoints) {
+@mixin bp-down($name, $breakpoints: var.$grid-breakpoints) {
 	$max: breakpoint-max($name, $breakpoints);
 	@if $max {
 		@media (max-width: $max) {
@@ -79,7 +83,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin bp-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+@mixin bp-between($lower, $upper, $breakpoints: var.$grid-breakpoints) {
 	$min: breakpoint-min($lower, $breakpoints);
 	$max: breakpoint-max($upper, $breakpoints);
 
@@ -91,7 +95,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin bp-only($name, $breakpoints: $grid-breakpoints) {
+@mixin bp-only($name, $breakpoints: var.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	$max: breakpoint-max($name, $breakpoints);
 

package/src/vendor/grid/_flex.scss

@@ -1,12 +1,16 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:map";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
 
 // Flex variation
 //
 // Custom styles for additional flex alignment options.
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-	@include bp-up($breakpoint) {
-		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@each $breakpoint in map.keys(var.$grid-breakpoints) {
+	@include breakpoint.bp-up($breakpoint) {
+		$infix: breakpoint.breakpoint-infix($breakpoint, var.$grid-breakpoints);
 
 		.display-flex { display: flex !important; }
 

package/src/vendor/grid/_functions.scss

@@ -1,14 +1,17 @@
-@charset 'UTF-8';
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@charset "UTF-8";
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
+@mixin assert-ascending($map, $map-name) {
 	$prev-key: null;
 	$prev-num: null;
 	@each $key, $num in $map {
 		@if $prev-num == null {
 			// Do nothing
-		} @else if not comparable($prev-num, $num) {
+		} @else if not math.compatible($prev-num, $num) {
 			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
 		} @else if $prev-num >= $num {
 			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -20,9 +23,9 @@
 
 // Starts at zero
 // Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map) {
-	$values: map-values($map);
-	$first-value: nth($values, 1);
+@mixin assert-starts-at-zero($map) {
+	$values: map.values($map);
+	$first-value: list.nth($values, 1);
 	@if $first-value != 0 {
 		@warn 'First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.';
 	}