@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/utilities/_padding.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-p: u-p !default;
@@ -13,58 +16,58 @@ $class-p-y: u-p-y !default;
 @for $i from 0 through 8 {
 	// Padding all
 	.#{$class-p}-#{$i} {
-		padding: rhythm($i) !important;
+		padding: func.rhythm($i) !important;
 	}
 
 	// Padding top
 	.#{$class-p-t}-#{$i} {
-		padding-top: rhythm($i) !important;
+		padding-top: func.rhythm($i) !important;
 	}
 
 	// Padding right
 	.#{$class-p-r}-#{$i} {
-		padding-right: rhythm($i) !important;
+		padding-right: func.rhythm($i) !important;
 	}
 
 	// Padding bottom
 	.#{$class-p-b}-#{$i} {
-		padding-bottom: rhythm($i) !important;
+		padding-bottom: func.rhythm($i) !important;
 	}
 
 	// Padding left
 	.#{$class-p-l}-#{$i} {
-		padding-left: rhythm($i) !important;
+		padding-left: func.rhythm($i) !important;
 	}
 
 	// 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)
 	.#{$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}.';
 	}

package/src/vendor/grid/_grid-framework.scss

@@ -1,13 +1,18 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:map";
+@use "sass:math";
+@use "sass:list";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
+@use 'grid' as m5;
 
 // Framework grid generation
 //
 // Used to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@use "sass:math";
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: var.$grid-columns, $gutter: var.$grid-gutter-width, $breakpoints: var.$grid-breakpoints) {
 	// Common properties for all breakpoints
 	%grid-column {
 		position: relative;
@@ -17,8 +22,8 @@
 		padding-left: math.div($gutter, 2);
 	}
 
-	@each $breakpoint in map-keys($breakpoints) {
-		$infix: breakpoint-infix($breakpoint, $breakpoints);
+	@each $breakpoint in map.keys($breakpoints) {
+		$infix: breakpoint.breakpoint-infix($breakpoint, $breakpoints);
 
 		// Allow columns to stretch full width below their breakpoints
 		@for $i from 1 through $columns {
@@ -32,7 +37,7 @@
 			@extend %grid-column;
 		}
 
-		@include bp-up($breakpoint, $breakpoints) {
+		@include breakpoint.bp-up($breakpoint, $breakpoints) {
 			// Provide basic `.grid-{bp}` classes for equal-width flexbox columns
 			.grid#{$infix} {
 				flex-basis: 0;
@@ -48,7 +53,7 @@
 
 			@for $i from 1 through $columns {
 				.grid#{$infix}-#{$i} {
-					@include make-col($i, $columns);
+					@include m5.make-col($i, $columns);
 				}
 			}
 
@@ -62,7 +67,7 @@
 			@for $i from 0 through ($columns - 1) {
 				@if not ($infix == '' and $i == 0) { // Avoid emitting useless .offset-0
 					.offset#{$infix}-#{$i} {
-						@include make-col-offset($i, $columns); }
+						@include m5.make-col-offset($i, $columns); }
 				}
 			}
 		}

package/src/vendor/grid/_grid.scss

@@ -1,23 +1,26 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:math";
+@use "sass:list";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
 
 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
 
-@use "sass:math";
-
 @mixin make-container() {
 	width: 100%;
 	margin-right: auto;
 	margin-left: auto;
-	padding-right: math.div($grid-gutter-width, 2);
-	padding-left: math.div($grid-gutter-width, 2);
+	padding-right: math.div(var.$grid-gutter-width, 2);
+	padding-left: math.div(var.$grid-gutter-width, 2);
 }
 
 // For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-container-max-widths($max-widths: var.$container-max-widths, $breakpoints: var.$grid-breakpoints) {
 	@each $breakpoint, $container-max-width in $max-widths {
-		@include bp-up($breakpoint, $breakpoints) {
+		@include breakpoint.bp-up($breakpoint, $breakpoints) {
 			max-width: $container-max-width;
 		}
 	}
@@ -26,8 +29,8 @@
 @mixin make-row() {
 	display: flex;
 	flex-wrap: wrap;
-	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);
 }
 
 @mixin make-col-ready() {
@@ -37,18 +40,18 @@
 	// later on to override this initial width.
 	width: 100%;
 	min-height: 1px; // Prevent collapsing
-	padding-right: math.div($grid-gutter-width, 2);
-	padding-left: math.div($grid-gutter-width, 2);
+	padding-right: math.div(var.$grid-gutter-width, 2);
+	padding-left: math.div(var.$grid-gutter-width, 2);
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-	flex: 0 0 percentage(math.div($size, $columns));
+@mixin make-col($size, $columns: var.$grid-columns) {
+	flex: 0 0 math.percentage(math.div($size, $columns));
 	// Add a `max-width` to ensure content within each column does not blow out
 	// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 	// do not appear to require this.
-	max-width: percentage(math.div($size, $columns));
+	max-width: math.percentage(math.div($size, $columns));
 }
 
-@mixin make-col-offset($size, $columns: $grid-columns) {
-	margin-left: percentage(math.div($size, $columns));
+@mixin make-col-offset($size, $columns: var.$grid-columns) {
+	margin-left: math.percentage(math.div($size, $columns));
 }

package/src/vendor/grid/_spacing.scss

@@ -1,6 +1,11 @@
-@each $breakpoint in map-keys($grid-breakpoints) {
-	@include bp-up($breakpoint) {
-		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@use "sass:map";
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use 'breakpoints' as breakpoint;
+
+@each $breakpoint in map.keys(var.$grid-breakpoints) {
+	@include breakpoint.bp-up($breakpoint) {
+		$infix: breakpoint.breakpoint-infix($breakpoint, var.$grid-breakpoints);
 
 		// Some special margin utils
 		.m#{$infix}-auto { margin: auto !important; }

package/src/atoms/toggle-high-contrast/readme.md

@@ -1,6 +0,0 @@
-# Toggle High Contrast
-When clicked, this component triggers the class ```high-contrast``` on the body-element which activated high contrast styles based on that class. The background is made dark and the text is made white.
-
-When activated, the site is not supposed to "look good". It's suppose to make text easier to read.
-
-The javascript is activated by this class: ```js-toggle-high-contrast```

package/src/atoms/toggle-high-contrast/toggle-high-contrast.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-	status: 'ready',
-
-	context: {
-		button_text: 'Toggle high contrast',
-		trigger_class: 'js-toggle-high-contrast'
-	}
-}

package/src/atoms/toggle-high-contrast/toggle-high-contrast.js

@@ -1,10 +0,0 @@
-const element = document.querySelector('.js-toggle-high-contrast');
-
-function classToggle() {
-	const body = document.querySelector('body');
-	body.classList.toggle('high-contrast');
-}
-
-if (element) {
-	element.addEventListener('click', classToggle);
-}