@internetstiftelsen/styleguide 3.0.17 → 4.0.0

package/dist/assets/js/responsivePosition.js

@@ -2,9 +2,9 @@
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _lodash = require('lodash.throttle');
+var _throttle = require('lodash/throttle');
 
-var _lodash2 = _interopRequireDefault(_lodash);
+var _throttle2 = _interopRequireDefault(_throttle);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -74,7 +74,7 @@ function dispatch() {
 	}
 }
 
-var onResize = (0, _lodash2.default)(dispatch, 100);
+var onResize = (0, _throttle2.default)(dispatch, 100);
 
 window.addEventListener('resize', onResize);
 dispatch();

package/dist/molecules/form/Form.js

@@ -10,9 +10,9 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _lodash = require('lodash.template');
+var _template = require('lodash/template');
 
-var _lodash2 = _interopRequireDefault(_lodash);
+var _template2 = _interopRequireDefault(_template);
 
 var _Events = require('../../assets/js/Events');
 
@@ -128,7 +128,7 @@ var Form = function () {
 		this.onSuccess = function (json) {
 			_this.setLoading(false);
 
-			var tmpl = (0, _lodash2.default)(_this.successMessage);
+			var tmpl = (0, _template2.default)(_this.successMessage);
 
 			_this.success.classList.remove('is-hidden');
 			_this.success.innerHTML = tmpl(json);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "3.0.17",
+	"version": "4.0.0",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -84,8 +84,7 @@
 		"a11y-toggle": "^2.1.0",
 		"focus-trap": "^6.7.3",
 		"glider-js": "^1.7.7",
-		"lodash.template": "^4.5.0",
-		"lodash.throttle": "^4.1.1",
+		"lodash": "^4.17.21",
 		"smooth-scroll": "^16.1.3",
 		"van11y-accessible-accordion-aria": "^3.0.1"
 	},

package/src/app.scss

@@ -3,6 +3,9 @@
 // Base
 @import 'globals';
 
+// Dark mode
+@import 'theme/dark-mode';
+
 $namespace: '';
 
 // Configurations
@@ -47,7 +50,6 @@ $namespace: '';
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';
 @import 'molecules/card/card';
-@import 'molecules/teaser/teaser';
 @import 'molecules/download/download';
 @import 'molecules/teaser-news-list/teaser-news-list';
 @import 'molecules/form-control/form-control';

package/src/assets/js/responsivePosition.js

@@ -1,4 +1,4 @@
-import throttle from 'lodash.throttle';
+import throttle from 'lodash/throttle';
 
 const breakpoints = {
 	xs: 0,

package/src/atoms/button/_button.scss

@@ -176,7 +176,8 @@
 			width: $icon-size;
 			height: $icon-size;
 			transform: none;
-			fill: $color-cyberspace;
+			color: var(--cyberspace-color);
+			fill: currentColor;
 		}
 
 		@include m(white) {
@@ -204,7 +205,7 @@
 		border-color: transparent;
 		background-color: transparent;
 		box-shadow: none;
-		color: $color-cyberspace;
+		color: var(--cyberspace-color);
 
 		&:hover,
 		&:focus {
@@ -213,13 +214,14 @@
 		}
 
 		@include e(text) {
-			color: $color-cyberspace;
+			color: var(--cyberspace-color);
 		}
 
 		@include e(icon) {
 			width: $icon-size;
 			height: $icon-size;
-			fill: $color-cyberspace;
+			fill: var(--cyberspace-cyberspace);
+			fill: currentColor;
 		}
 
 		@include m(small-icon) {

package/src/atoms/main-menu/_main-menu.scss

@@ -64,7 +64,7 @@
 			padding: rhythm(2) rhythm(1);
 			border: 0;
 			background-color: transparent;
-			color: $color-cyberspace;
+			color: var(--cyberspace-color);
 			font-family: $font-family-medium;
 			font-size: rem($size-small);
 			text-decoration: none;
@@ -126,7 +126,7 @@
 				border: 0;
 				border-radius: 0;
 				background-color: currentColor;
-				color: $color-cyberspace;
+				color: var(--cyberspace-color);
 
 				&::before,
 				&::after {
@@ -161,7 +161,7 @@
 				transition: all 0.3s ease-out;
 				border: 0;
 				border-radius: 0;
-				color: $color-cyberspace;
+				color: var(--cyberspace-color);
 
 				&::before,
 				&::after {

package/src/atoms/meta/_meta.scss

@@ -12,7 +12,7 @@
 	display: flex;
 	position: relative;
 	align-items: center;
-	color: $color-cyberspace;
+	color: var(--cyberspace-color);
 	font-family: $font-family-mono;
 	text-decoration: none;
 	text-transform: uppercase;
@@ -30,6 +30,8 @@
 		height: $icon-size;
 		margin-right: rhythm(1);
 		fill: inherit;
+		color: var(--color-cyberspace);
+		fill: currentColor;
 	}
 
 	@include m(light) {

package/src/atoms/tag/_tag.scss

@@ -24,7 +24,7 @@
 	}
 
 	@include e(text) {
-		color: $color-cyberspace;
+		color: var(--cyberspace-color);
 		letter-spacing: 0.025rem;
 	}
 

package/src/atoms/tooltip/_tooltip.scss

@@ -32,7 +32,8 @@
 		overflow: visible;
 		transform: translateX(-50%) translateY(-50%);
 		transition: box-shadow 0.3s cubic-bezier(0.3, 0, 0, 1);
-		fill: $color-cyberspace;
+		color: var(--cyberspace-color);
+		fill: currentColor;
 	}
 
 	@include e(text) {

package/src/base/_normalize.scss

@@ -9,7 +9,7 @@ html {
 	height: 100%;
 	min-height: 100%;
 	background-color: theme_palette('background');
-	color: $color-cyberspace;
+	color: var(--cyberspace-color);
 	font-family: sans-serif;
 	font-size: percentage(math.div($size-base, 16px));
 	font-variant-ligatures: no-common-ligatures;
@@ -313,6 +313,7 @@ code {
 	width: 100%;
 	padding: rhythm(2);
 	font-size: $size-medium;
+	color: $color-cyberspace;
 }
 
 //

package/src/configurations/_extends.scss

@@ -17,7 +17,7 @@
 %link-styles {
 	padding: rhythm(0) rhythm(0.5);
 	border-bottom: rem(2px) solid $color-peacock;
-	color: $color-black;
+	color: var(---cyberspace-color);
 	text-decoration: none;
 
 	&:hover,

package/src/molecules/breadcrumb/_breadcrumb.scss

@@ -79,6 +79,8 @@
 		height: math.div($icon-size, 2);
 		margin: 0 rhythm(1);
 		transform: translateY(rem(1px));
+		color: var(--cyberspace-color);
+		fill: currentColor;
 
 		&:first-child {
 			margin: 0 rhythm(1) 0 0;
@@ -94,7 +96,7 @@
 
 		max-width: rhythm(30);
 		overflow: hidden;
-		color: $color-cyberspace;
+		color: var(--cyberspace-color);
 		text-decoration: none;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/src/molecules/card/_card.scss

@@ -42,7 +42,7 @@
 	}
 
 	@include e(link) {
-		color: $color-cyberspace;
+		color: var(---cyberspace-color);
 		text-decoration: none;
 
 		&::after {
@@ -114,7 +114,7 @@
 	}
 
 	@include m(padded) {
-		background-color: $color-snow;
+		background-color: var(--snow-color);
 
 		@include e(media) {
 			flex: 0 0 auto;
@@ -273,17 +273,17 @@
 			align-content: stretch;
 			justify-content: flex-end;
 			padding: rhythm(4);
-			color: $color-snow;
+			color: var(--snow-color);
 			text-shadow: $text-shadow;
 		}
 
 		@include e(link) {
-			color: $color-snow;
+			color: var(--snow-color);
 		}
 
 		@include e(text) {
 			margin-top: 0;
-			color: $color-snow;
+			color: var(--snow-color);
 		}
 
 		@include e(bottom) {
@@ -292,11 +292,11 @@
 
 		@include e(meta) {
 			* {
-				color: $color-snow;
+				color: var(--snow-color);
 			}
 
 			svg {
-				fill: $color-snow;
+				fill: var(--snow-color);
 			}
 		}
 	}

package/src/molecules/download/_download.scss

@@ -5,7 +5,7 @@
 	padding: rhythm(2.5);
 	border: 1px solid $color-peacock;
 	border-radius: $border-radius;
-	background-color: $color-snow;
+	background-color: var(--snow-color);
 
 	@include e(link) {
 		display: block;
@@ -59,6 +59,8 @@
 	@include b(icon) {
 		width: rem(57px);
 		height: rem(78px);
+		color: var(--cyberspace-color);
+		fill: currentColor;
 	}
 
 	@include e(trigger) {
@@ -68,6 +70,8 @@
 		@include b(icon) {
 			width: $icon-size-medium;
 			height: $icon-size-medium;
+			color: var(--dark-color);
+			fill: currentColor;
 		}
 
 		@include bp-up(sm) {

package/src/molecules/form/Form.js

@@ -1,4 +1,4 @@
-import template from 'lodash.template';
+import template from 'lodash/template';
 import Events from '../../assets/js/Events';
 import Button from '../../atoms/button/Button';
 import className from '../../assets/js/className';

package/src/molecules/info-box/_info-box.scss

@@ -5,7 +5,7 @@
 	padding: rhythm(4);
 	border-top: rem(4px) solid $color-lemon;
 	border-radius: $border-radius;
-	background-color: $color-snow;
+	background-color: var(--snow-color);
 
 	> p,
 	> ul,

package/src/molecules/modal/_modal.scss

@@ -38,7 +38,7 @@
 		padding: rhythm(4) rhythm(2) rhythm(4) rhythm(2);
 		overflow-y: auto;
 		border-radius: $border-radius;
-		background: $color-snow;
+		background: var(--snow-color);
 
 		> button {
 			position: absolute;

package/src/molecules/natural-language-form/_natural-language-form.scss

@@ -14,6 +14,12 @@
 			background-size: $icon-size-medium $icon-size-medium;
 			text-decoration: none;
 
+			@if variable-exists(cyberspace-color) {
+				@media (prefers-color-scheme: dark) {
+					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23ffffff' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
+				}
+			}
+
 			&[data-color='ocean'] {
 				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2350b2fc' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
 			}

package/src/molecules/table/_table.scss

@@ -53,7 +53,7 @@
 		padding-bottom: rhythm(1);
 		padding-left: rhythm(2);
 		border-bottom: 2px solid $color-granit;
-		color: $color-cyberspace;
+		color: var(--cyberspace-color);
 		font-size: 90%;
 		text-align: left;
 
@@ -128,7 +128,7 @@
 		th,
 		td {
 			&:nth-child(even) {
-				background-color: $color-snow;
+				background-color: var(--snow-color);
 			}
 		}
 	}
@@ -136,7 +136,7 @@
 	@include m(rows) {
 		thead {
 			th {
-				background-color: $color-ash;
+				background-color: var(--ash-color);
 			}
 		}
 
@@ -144,14 +144,14 @@
 			tr:nth-child(odd) {
 				th,
 				td {
-					background-color: $color-snow;
+					background-color: var(--snow-color);
 				}
 			}
 
 			tr:nth-child(even) {
 				th,
 				td {
-					background-color: $color-ash;
+					background-color: var(--ash-color);
 				}
 			}
 		}
@@ -173,14 +173,14 @@
 			tr:nth-child(odd) {
 				th,
 				td {
-					background-color: $color-ash;
+					background-color: var(--ash-color);
 				}
 			}
 
 			tr:nth-child(even) {
 				th,
 				td {
-					background-color: $color-snow;
+					background-color: var(--snow-color);
 				}
 			}
 		}

package/src/molecules/teaser-news-list/_teaser-news-list.scss

@@ -4,7 +4,7 @@
 	height: 100%;
 	padding: rhythm(2);
 	border-radius: $border-radius;
-	background-color: $color-snow;
+	background-color: var(--snow-color);
 
 	@include bp-up(md) {
 		padding: rhythm(2) rhythm(4);

package/src/organisms/accordion/_accordion.scss

@@ -36,7 +36,7 @@
 		transform: translateY(-50%);
 		transform-origin: center center;
 		transition: transform 0.25s ease-out;
-		background-color: $color-cyberspace;
+		background-color: var(--cyberspace-color);
 	}
 
 	&::before {
@@ -70,7 +70,7 @@
 	padding: 0;
 	transition: visibility 0s ease, max-height 0.25s ease, opacity 0.25s ease;
 	transition-delay: 0s;
-	background-color: $color-snow;
+	background-color: var(--snow-color);
 }
 
 %is-visible {
@@ -112,7 +112,7 @@
 	.js-accordion {
 
 		@include e(header) {
-			border-bottom: 1px solid $color-snow;
+			border-bottom: 1px solid var(--snow-color);
 
 			&[aria-expanded='true'] {
 				border-color: transparent;
@@ -274,7 +274,7 @@
 
 			@extend %word-break;
 
-			color: $color-cyberspace;
+			color: var(--cyberspace-color);
 			text-decoration: none;
 
 			&:focus,

package/src/organisms/header/_header.scss

@@ -4,7 +4,7 @@
 	position: relative;
 	z-index: z_index(foregroundMinus);
 	border-bottom: 1px solid $color-ash;
-	background-color: $color-snow;
+	background-color: var(--snow-color);
 
 	@include e(logo-link) {
 		display: flex;

package/src/organisms/sections/_sections.scss

@@ -7,15 +7,17 @@ $spacing: rhythm(6);
 @include organism(section) {
 	position: relative;
 	padding: math.div($spacing, 1.5) 0;
+	background-color: var(--ash-color);
 
 	@include m(white) {
 		padding: $spacing 0;
-		background-color: $color-snow;
+		background-color: var(--snow-color);
 
 		&::before,
 		&::after {
 			content: '';
 			position: absolute;
+			z-index: z_index(background);
 			right: 0;
 			left: 0;
 			height: $spacing;
@@ -23,12 +25,12 @@ $spacing: rhythm(6);
 
 		&::before {
 			top: 0;
-			background-image: linear-gradient(to right top, #fff 0, #fff 50%, rgba(237, 237, 237, 01) 50.1%);
+			background-image: linear-gradient(to right top, var(--snow-color) 0, var(--snow-color) 50%, var(--ash-color) 50.1%);
 		}
 
 		&::after {
 			bottom: 0;
-			background-image: linear-gradient(to left top, #ededed 0, #ededed 50%, rgba(255,255,255,0) 50.1%);
+			background-image: linear-gradient(to left top, var(--ash-color) 0, var(--ash-color) 50%, var(--snow-color) 50.1%);
 		}
 
 		&:last-child {

package/src/pages/dark-mode/dark-mode.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		alt: 'Hands typing on laptop',
+		img_url: '/assets/images/ALX_0876.jpg',
+		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
+		url: 'http://www.google.se',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: false,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

package/src/theme/_dark-mode.scss

@@ -0,0 +1,18 @@
+@charset 'UTF-8';
+
+:root {
+	--snow-color: #{$color-snow};
+	--cyberspace-color: #{$color-cyberspace};
+	--black-color: #{$color-black};
+	--ash-color: #{$color-ash};
+	--dark-color: #{$color-cyberspace};
+	--white-color: #{$color-snow};
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--cyberspace-color: #{$color-snow};
+		--snow-color: #{$color-cyberspace};
+		--ash-color: #{$color-black};
+	}
+}

package/src/theme/_theme.scss

@@ -6,7 +6,7 @@ $namespace: '';
 
 // Theme palette
 $theme-palette: (
-	background: $color-ash
+	background: var(--ash-color)
 ) !default;
 
 @function theme_palette($key: 'background') {

package/src/utilities/_links.scss

@@ -24,7 +24,7 @@
 .u-link {
 	padding: rhythm(0) rhythm(0.5) !important;
 	border-bottom: rem(2px) solid $color-peacock !important;
-	color: $color-black !important;
+	color: var(--cyberspace-color) !important;
 	text-decoration: none !important;
 
 	&:hover,

package/src/molecules/teaser/_teaser.scss

@@ -1,94 +0,0 @@
-@charset 'UTF-8';
-
-@include molecule(teaser) {
-	position: relative;
-	height: 100%;
-	overflow: hidden;
-	border-radius: $border-radius;
-
-	&:hover,
-	&:focus {
-		img {
-			opacity: 0.8;
-		}
-	}
-
-	&::after {
-		content: '';
-		position: absolute;
-		z-index: z_index(background);
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		transition: opacity 0.75s ease-out;
-		border-radius: $border-radius;
-		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-cyberspace, 0) 55%, rgba($color-cyberspace, 1) 100%);
-	}
-
-	@include e(image) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		transition: opacity 0.25s ease-out;
-		object-fit: cover;
-	}
-
-	@include e(caption) {
-		display: flex;
-		position: absolute;
-		z-index: z_index(middleground);
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		flex-direction: column;
-		align-content: stretch;
-		justify-content: flex-end;
-	}
-
-	@include e(link) {
-		display: block;
-		padding: rhythm(4);
-		text-decoration: none;
-
-		&:hover,
-		&:focus {
-			color: $color-snow;
-			text-decoration: underline;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			z-index: z_index(middleground);
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			cursor: pointer;
-		}
-	}
-
-	@include e(headline) {
-		align-items: flex-end;
-		align-self: stretch;
-		width: 100%;
-		overflow: hidden;
-		color: $color-snow;
-
-		@include bp-up(sm) {
-			+ a {
-				margin-top: rhythm(2);
-			}
-		}
-
-		@include e(icon) {
-			position: relative;
-			width: $icon-size-medium;
-			height: $icon-size-medium;
-			transform: translateY(rem(1px));
-			fill: currentColor;
-		}
-	}
-}