@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/base/_normalize.scss

@@ -1,17 +1,19 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 @use "sass:math";
-
-@import '../configurations/colors/colors';
+@use '../configurations/colors/colors' as colors;
+@use '../configurations/variables' as var;
+@use '../configurations/functions' as func;
+@use '../theme/theme' as theme;
 
 html {
 	box-sizing: border-box;
 	height: 100%;
 	min-height: 100%;
-	background-color: theme_palette('background');
+	background-color: theme.theme_palette('background');
 	color: var(--cyberspace-color);
 	font-family: sans-serif;
-	font-size: percentage(math.div($size-base, 16px));
+	font-size: math.percentage(math.div(var.$size-base, 16px));
 	font-variant-ligatures: no-common-ligatures;
 	-ms-overflow-style: scrollbar;
 	-webkit-text-size-adjust: 100%;
@@ -23,11 +25,11 @@ body {
 	min-height: 100%;
 	margin: 0;
 
-	//iPhone X landscape Notch fix
+	/* iPhone X landscape Notch fix */
 	padding-right: env(safe-area-inset-right);
 	padding-left: env(safe-area-inset-left);
 	overflow-x: hidden;
-	font-family: $font-family-base;
+	font-family: var.$font-family-base;
 	-ms-overflow-style: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -38,7 +40,7 @@ body {
 	box-sizing: inherit;
 }
 
-// HTML5 display definitions
+/* HTML5 display definitions
 // ==========================================================================
 
 //
@@ -46,7 +48,7 @@ body {
 // Correct `block` display not defined for `details` or `summary` in IE 10/11
 // and Firefox.
 // Correct `block` display not defined for `main` in IE 11.
-//
+*/
 
 article,
 aside,
@@ -64,30 +66,30 @@ summary {
 	display: block;
 }
 
-//
+/*
 // Iframe
-//
+//*
 iframe {
 	border: 0;
 }
 
-//
+/*
 // 1. Correct `inline-block` display not defined in IE 8/9.
 // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
-//
+*/
 
 audio,
 canvas,
 progress,
 video {
-	display: inline-block; // 1
-	vertical-align: baseline; // 2
+	display: inline-block; /* 1 */
+	vertical-align: baseline; /* 2 */
 }
 
-//
+/*
 // Prevent modern browsers from displaying `audio` without controls.
 // Remove excess height in iOS 5 devices.
-//
+*/
 
 audio {
 	&:not([controls]) {
@@ -96,30 +98,30 @@ audio {
 	}
 }
 
-//
+/*
 // Address
-//
+*/
 
 address {
 	font-style: normal;
 }
 
-//
+/*
 // Address `[hidden]` styling not present in IE 8/9/10.
 // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
-//
+*/
 
 [hidden],
 template {
 	display: none;
 }
 
-// Links
-// ==========================================================================
+/* Links
+/* ========================================================================== */
 
-//
+/*
 // Remove the gray background color from active links in IE 10.
-//
+*/
 
 a {
 	background-color: transparent;
@@ -130,7 +132,7 @@ a {
 	}
 }
 
-// Prevent 300ms click delay
+/* Prevent 300ms click delay */
 a,
 button,
 input,
@@ -140,12 +142,12 @@ label {
 	touch-action: manipulation;
 }
 
-// Text-level semantics
+/* Text-level semantics
 // ==========================================================================
 
 //
 // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
-//
+*/
 
 abbr {
 	&[title] {
@@ -153,18 +155,18 @@ abbr {
 	}
 }
 
-//
+/*
 // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
-//
+*/
 
 b,
 strong {
 	font-weight: 700;
 }
 
-//
+/*
 // Address styling not present in Safari and Chrome.
-//
+*/
 
 em,
 i,
@@ -182,33 +184,33 @@ h6 {
 	font-weight: normal;
 }
 
-//
+/*
 // Address styling not present in IE 8/9.
-//
+*/
 
 mark {
-	background: $color-lemon-light;
-	color: $color-black;
+	background: colors.$color-lemon-light;
+	color: colors.$color-black;
 }
 
-//
+/*
 // Remove default italic
-//
+*/
 cite {
 	font-style: normal;
 }
 
-//
+/*
 // Address inconsistent and variable font size in all browsers.
-//
+*/
 
 small {
 	font-size: 80%;
 }
 
-//
+/*
 // Prevent `sub` and `sup` affecting `line-height` in all browsers.
-//
+*/
 
 sub,
 sup {
@@ -226,12 +228,12 @@ sub {
 	bottom: -0.25em;
 }
 
-// Embedded content
+/* Embedded content
 // ==========================================================================
 
 //
 // Remove border when inside `a` element in IE 8/9/10.
-//
+*/
 
 img {
 	max-width: 100%;
@@ -239,7 +241,7 @@ img {
 	border: 0;
 }
 
-// Images in Google Translate Widget
+/* Images in Google Translate Widget */
 
 /* stylelint-disable */
 .google_translate_element {
@@ -253,9 +255,9 @@ img {
 }
 /* stylelint-enable */
 
-//
+/*
 // Correct overflow not hidden in IE 9/10/11.
-//
+*/
 
 svg {
 	&:not(:root) {
@@ -263,46 +265,46 @@ svg {
 	}
 }
 
-// Grouping content
+/* Grouping content
 // ==========================================================================
 
 //
 // Address margin not present in IE 8/9 and Safari.
-//
+*/
 
 figure {
 	margin: 0;
 }
 
-//
+/*
 // Address differences between Firefox and other browsers.
-//
+*/
 
 hr,
 hr.wp-block-separator {
 	box-sizing: content-box;
 	width: 100%;
 	height: 0;
-	margin-top: rhythm(2);
-	margin-bottom: rhythm(2);
+	margin-top: func.rhythm(2);
+	margin-bottom: func.rhythm(2);
 	border: 0;
-	border-bottom: 1px solid $color-concrete;
+	border-bottom: 1px solid colors.$color-concrete;
 }
 
-//
+/*
 // Contain overflow in all browsers.
-//
+*/
 
 pre {
 	width: 100%;
 	max-height: 80vh;
-	margin-bottom: rhythm(4);
-	padding: rhythm(2);
+	margin-bottom: func.rhythm(4);
+	padding: func.rhythm(2);
 	overflow: auto;
-	border-top: rem(4px) solid $color-sandstone;
-	border-radius: $border-radius;
-	background-color: $color-snow;
-	font-size: $size-medium;
+	border-top: func.to_rem(4px) solid colors.$color-sandstone;
+	border-radius: var.$border-radius;
+	background-color: colors.$color-snow;
+	font-size: var.$size-medium;
 
 	code {
 		padding: 0;
@@ -312,23 +314,23 @@ pre {
 code {
 	display: block;
 	width: 100%;
-	padding: rhythm(2);
-	font-size: $size-medium;
-	color: $color-cyberspace;
+	padding: func.rhythm(2);
+	font-size: var.$size-medium;
+	color: colors.$color-cyberspace;
 }
 
-//
+/*
 // Address odd `em`-unit font size rendering in all browsers.
-//
+*/
 
 code,
 kbd,
 pre,
 samp {
-	font-family: $font-family-mono;
+	font-family: var.$font-family-mono;
 }
 
-// Forms
+/* Forms
 // ==========================================================================
 
 //
@@ -341,67 +343,67 @@ samp {
 //    Known issue: affects color of disabled elements.
 // 2. Correct font properties not being inherited.
 // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
-//
+*/
 
 button,
 input,
 optgroup,
 select,
 textarea {
-	margin: 0; // 3
-	color: inherit; // 1
-	font: inherit; // 2
-	-webkit-appearance: none; // stylelint:disable-line no-vendor-prefixes
+	margin: 0; /* 3 */
+	color: inherit; /* 1 */
+	font: inherit; /* 2 */
+	-webkit-appearance: none; /* stylelint:disable-line no-vendor-prefixes */
 }
 
-//
+/*
 // Address `overflow` set to `hidden` in IE 8/9/10/11.
-//
+*/
 
 button {
 	overflow: visible;
 }
 
-//
+/*
 // Address inconsistent `text-transform` inheritance for `button` and `select`.
 // All other form control elements do not inherit `text-transform` values.
 // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 // Correct `select` style inheritance in Firefox.
-//
+*/
 
 button,
 select {
 	text-transform: none;
 }
 
-//
+/*
 // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 //    and `video` controls.
 // 2. Correct inability to style clickable `input` types in iOS.
 // 3. Improve usability and consistency of cursor style between image-type
 //    `input` and others.
-//
+*/
 
 button,
-html input[type='button'], // 1
+html input[type='button'], /* 1 */
 input[type='reset'],
 input[type='submit'] {
 	cursor: pointer;
-	-webkit-appearance: button; // 3
+	-webkit-appearance: button; /* 3 */
 }
 
-//
+/*
 // Re-set default cursor for disabled elements.
-//
+*/
 
 button[disabled],
 html input[disabled] {
 	cursor: default;
 }
 
-//
+/*
 // Remove inner padding and border in Firefox 4+.
-//
+*/
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
@@ -409,91 +411,91 @@ input::-moz-focus-inner {
 	border: 0;
 }
 
-//
+/*
 // Address Firefox 4+ setting `line-height` on `input` using `!important` in
 // the UA stylesheet.
-//
+*/
 
 input {
 	border-radius: 0;
 	line-height: normal;
 }
 
-//
+/*
 // It's recommended that you don't attempt to style these elements.
 // Firefox's implementation doesn't respect box-sizing, padding, or width.
 //
 // 1. Address box sizing set to `content-box` in IE 8/9/10.
 // 2. Remove excess padding in IE 8/9/10.
-//
+*/
 
 input,
 input {
 	&[type='checkbox'],
 	&[type='radio'] {
-		box-sizing: border-box; // 1
-		padding: 0; // 2
+		box-sizing: border-box; /* 1 */
+		padding: 0; /* 2 */
 	}
 }
 
-//
+/*
 // Fix the cursor style for Chrome's increment/decrement buttons. For certain
 // `font-size` values of the `input`, it causes the cursor style of the
 // decrement button to change from `default` to `text`.
-//
+*/
 
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
 	height: auto;
 }
 
-//
+/*
 // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
-//
+*/
 
 input[type='search'] {
 	-webkit-appearance: none;
 }
 
-//
+/*
 // Remove inner padding and search cancel button in Safari and Chrome on OS X.
 // Safari (but not Chrome) clips the cancel button when the search input has
 // padding (and `textfield` appearance).
-//
+*/
 
 input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-decoration {
 	-webkit-appearance: none;
 }
 
-// Style placeholders
+/* Style placeholders */
 ::-webkit-input-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 ::-moz-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 :-ms-input-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 :-moz-placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
 ::placeholder {
 	opacity: 1;
-	color: $color-granit;
+	color: colors.$color-granit;
 }
 
-// Remove spinner from fields in Chrome
+/* Remove spinner from fields in Chrome */
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button,
 input[type=date]::-webkit-inner-spin-button,
@@ -506,14 +508,14 @@ input[type=time]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 }
 
-// Remove spinner from number fields in Firefox
+/* Remove spinner from number fields in Firefox */
 input[type=number] {
 	-moz-appearance: textfield;
 }
 
-//
+/*
 // Define consistent border, margin, and padding.
-//
+*/
 
 fieldset {
 	margin: 0;
@@ -521,41 +523,41 @@ fieldset {
 	border: 0;
 }
 
-//
+/*
 // 1. Correct `color` not being inherited in IE 8/9/10/11.
 // 2. Remove padding so people aren't caught out if they zero out fieldsets.
-//
+*/
 
 legend {
-	margin-bottom: rhythm(1);
-	padding: 0; // 2
-	border: 0; // 1
+	margin-bottom: func.rhythm(1);
+	padding: 0; /* 2 */
+	border: 0; /* 1 */
 	font-weight: 700;
 }
 
-//
+/*
 // Remove default vertical scrollbar in IE 8/9/10/11.
-//
+*/
 
 textarea {
 	overflow: auto;
 }
 
-//
+/*
 // Don't inherit the `font-weight` (applied by a rule above).
 // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
-//
+*/
 
 optgroup {
 	font-weight: bold;
 }
 
-// Tables
+/* Tables
 // ==========================================================================
 
-//
+/*
 // Remove most spacing between table cells.
-//
+*/
 
 table {
 	border-spacing: 0;

package/src/base/fonts/_fonts.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 // Fonts
 @font-face {

package/src/brandbook/goto10/goto10.config.js

@@ -184,4 +184,4 @@ module.exports = {
 			}
 		]
 	}
-}
+};

package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js

@@ -2,4 +2,4 @@ module.exports = {
 	status: 'ready',
 	label: 'Bildmanér',
 	title: 'Bildmanér'
-}
+};

package/src/brandbook/internetstiftelsen/identitet/identitet.config.js

@@ -2,4 +2,4 @@ module.exports = {
 	status: 'ready',
 	label: 'Identitet',
 	title: 'Identitet'
-}
+};

package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.config.js"

@@ -2,4 +2,4 @@ module.exports = {
 	status: 'ready',
 	label: 'Tonalitet och språkbruk',
 	title: 'Tonalitet och språkbruk'
-}
+};

package/src/components.js

@@ -11,7 +11,6 @@ import './organisms/mega-menu/mega-menu';
 import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
-import './atoms/toggle-high-contrast/toggle-high-contrast';
 import './atoms/height-limiter/height-limiter';
 import './atoms/file/file';
 import './atoms/file/filePreview';
@@ -23,7 +22,6 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
-import './molecules/modal/modal-graph';
 import './molecules/continue-video-guide/continue-video-guide';
 import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';