@internetstiftelsen/styleguide 5.0.0 → 5.0.1

package/src/base/_normalize.scss

@@ -25,7 +25,7 @@ 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;
@@ -40,7 +40,7 @@ body {
 	box-sizing: inherit;
 }
 
-// HTML5 display definitions
+/* HTML5 display definitions
 // ==========================================================================
 
 //
@@ -48,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,
@@ -66,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]) {
@@ -98,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;
@@ -132,7 +132,7 @@ a {
 	}
 }
 
-// Prevent 300ms click delay
+/* Prevent 300ms click delay */
 a,
 button,
 input,
@@ -142,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] {
@@ -155,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,
@@ -184,33 +184,33 @@ h6 {
 	font-weight: normal;
 }
 
-//
+/*
 // Address styling not present in IE 8/9.
-//
+*/
 
 mark {
 	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 {
@@ -228,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%;
@@ -241,7 +241,7 @@ img {
 	border: 0;
 }
 
-// Images in Google Translate Widget
+/* Images in Google Translate Widget */
 
 /* stylelint-disable */
 .google_translate_element {
@@ -255,9 +255,9 @@ img {
 }
 /* stylelint-enable */
 
-//
+/*
 // Correct overflow not hidden in IE 9/10/11.
-//
+*/
 
 svg {
 	&:not(:root) {
@@ -265,20 +265,20 @@ 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 {
@@ -291,9 +291,9 @@ hr.wp-block-separator {
 	border-bottom: 1px solid colors.$color-concrete;
 }
 
-//
+/*
 // Contain overflow in all browsers.
-//
+*/
 
 pre {
 	width: 100%;
@@ -319,9 +319,9 @@ code {
 	color: colors.$color-cyberspace;
 }
 
-//
+/*
 // Address odd `em`-unit font size rendering in all browsers.
-//
+*/
 
 code,
 kbd,
@@ -330,7 +330,7 @@ samp {
 	font-family: var.$font-family-mono;
 }
 
-// Forms
+/* Forms
 // ==========================================================================
 
 //
@@ -343,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 {
@@ -411,65 +411,65 @@ 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: colors.$color-granit;
@@ -495,7 +495,7 @@ input[type='search']::-webkit-search-decoration {
 	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,
@@ -508,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;
@@ -523,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: func.rhythm(1);
-	padding: 0; // 2
-	border: 0; // 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/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/configurations/_bem.scss

@@ -3,28 +3,28 @@
 @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: meta.inspect($selector); //cast to string
-	$selector: string.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 string.index($selector, $modifier-separator) {
@@ -34,24 +34,24 @@ $state-prefix: 'is';
 	}
 }
 
-/// Get BEM block
-/// @group BEM
+/* Get BEM block
+/// @group BEM */
 @function get_block($selector) {
 	$selector: selector_to_string($selector);
 	$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) {
 	.#{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) {
@@ -72,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} {
@@ -82,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} {