@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.1.13",
+	"version": "5.0.0",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
 	},
 	"scripts": {
-		"start": "npm run dev",
+		"start": "npm run dev --trace-deprecation",
 		"start:fractal": "fractal start -s",
 		"build:fractal": "fractal build",
 		"scss": "sass src/app.scss public/assets/css/app.css",
@@ -41,32 +41,32 @@
 		"create-icons-config": "node ./createIconsJson"
 	},
 	"devDependencies": {
-		"@frctl/fractal": "^1.5.14",
+		"@frctl/fractal": "^1.5.15",
 		"@frctl/mandelbrot": "^1.10.3",
-		"@internetstiftelsen/eslint-config": "^0.0.5",
-		"@internetstiftelsen/stylelint-config": "^1.0.0",
+		"@internetstiftelsen/eslint-config": "^3.0.0",
+		"@internetstiftelsen/stylelint-config": "^3.0.0",
 		"babel-cli": "^6.26.0",
-		"babel-eslint": "^10.0.3",
+		"babel-eslint": "^10.1.0",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-class-properties": "^6.24.1",
 		"babel-plugin-transform-custom-element-classes": "^0.1.0",
 		"babel-plugin-transform-es2015-classes": "^6.24.1",
 		"babel-plugin-transform-object-rest-spread": "^6.26.0",
 		"babel-preset-env": "^1.7.0",
-		"browserify": "^16.5.0",
+		"browserify": "^17.0.1",
 		"concat": "^1.0.3",
-		"concurrently": "^5.2.0",
-		"copyfiles": "^2.2.0",
-		"css-loader": "^5.2.6",
-		"cssnano": "^5.0.6",
-		"eslint": "^7.28.0",
-		"imagemin-cli": "^7.0.0",
-		"onchange": "^6.1.0",
+		"concurrently": "^9.0.1",
+		"copyfiles": "^2.4.1",
+		"css-loader": "^7.1.2",
+		"cssnano": "^7.0.6",
+		"eslint": "^9.13.0",
+		"imagemin-cli": "^8.0.0",
+		"onchange": "^7.1.0",
 		"postcss-class-prefix": "^0.3.0",
-		"postcss-cli": "^8.3.1",
-		"replace": "^1.2.1",
-		"sass": "^1.79.4",
-		"stylelint": "^13.13.1",
+		"postcss-cli": "^11.0.0",
+		"replace": "^1.2.2",
+		"sass": "^1.80.3",
+		"stylelint": "^16.10.0",
 		"uglify-es": "^3.3.9"
 	},
 	"dependencies": {

package/src/app.scss

@@ -1,102 +1,99 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 // Base
-@import 'globals';
-
-$namespace: '';
+@use 'globals';
 
 // Configurations
-@import 'configurations/grid/grid';
-@import 'configurations/colors/colors';
-@import 'configurations/colors/wordpress-colors';
-@import 'configurations/colors/colors-functions';
-@import 'configurations/colors/text-colors';
-@import 'configurations/colors/background-colors';
-@import 'configurations/extends';
-@import 'configurations/typography/typography';
-@import 'configurations/forms/fields';
-@import 'configurations/wordpress';
+@use 'configurations/grid/grid';
+@use 'configurations/colors/colors';
+@use 'configurations/colors/wordpress-colors';
+@use 'configurations/colors/colors-functions';
+@use 'configurations/colors/text-colors';
+@use 'configurations/colors/background-colors';
+@use 'configurations/extends';
+@use 'configurations/typography/typography';
+@use 'configurations/forms/fields';
+@use 'configurations/wordpress';
 
 // Atoms
-@import 'atoms/skip/skip';
-@import 'atoms/meta/meta';
-@import 'atoms/tag/tag';
-@import 'atoms/logotype/logotype';
-@import 'atoms/main-menu/main-menu';
-@import 'atoms/button/button';
-@import 'atoms/paging/paging';
-@import 'atoms/grid-toggle/grid-toggle';
-@import 'atoms/archive-link/archive-link';
-@import 'atoms/label/label';
-@import 'atoms/input/input';
-@import 'atoms/password-toggle/password-toggle';
-@import 'atoms/radiobutton/radiobutton';
-@import 'atoms/checkbox/checkbox';
-@import 'atoms/textarea/textarea';
-@import 'atoms/select/select';
-@import 'atoms/spinner/spinner';
-@import 'atoms/tooltip/tooltip';
-@import 'atoms/height-limiter/height-limiter';
-@import 'atoms/file/file';
-@import 'atoms/ribbon/ribbon';
-@import 'atoms/quote/quote';
-@import 'atoms/rating/rating';
-@import 'atoms/progress/progress';
-@import 'atoms/range/range';
+@use 'atoms/skip/skip';
+@use 'atoms/meta/meta';
+@use 'atoms/tag/tag';
+@use 'atoms/logotype/logotype';
+@use 'atoms/main-menu/main-menu';
+@use 'atoms/button/button';
+@use 'atoms/paging/paging';
+@use 'atoms/grid-toggle/grid-toggle';
+@use 'atoms/archive-link/archive-link';
+@use 'atoms/label/label';
+@use 'atoms/input/input';
+@use 'atoms/password-toggle/password-toggle';
+@use 'atoms/radiobutton/radiobutton';
+@use 'atoms/checkbox/checkbox';
+@use 'atoms/textarea/textarea';
+@use 'atoms/select/select';
+@use 'atoms/spinner/spinner';
+@use 'atoms/tooltip/tooltip';
+@use 'atoms/height-limiter/height-limiter';
+@use 'atoms/file/file';
+@use 'atoms/ribbon/ribbon';
+@use 'atoms/quote/quote';
+@use 'atoms/rating/rating';
+@use 'atoms/progress/progress';
+@use 'atoms/range/range';
 
 // Molecules
-@import 'molecules/breadcrumb/breadcrumb';
-@import 'molecules/card/card';
-@import 'molecules/download/download';
-@import 'molecules/teaser-news-list/teaser-news-list';
-@import 'molecules/form-control/form-control';
-@import 'molecules/alert/alert';
-@import 'molecules/table/table';
-@import 'molecules/system-error/system-error';
-@import 'molecules/info-box/info-box';
-@import 'molecules/share/share';
-@import 'molecules/cookie-disclaimer/cookie-disclaimer';
-@import 'molecules/byline/byline';
-@import 'molecules/context-menu/context-menu';
-@import 'molecules/modal/modal';
-@import 'molecules/readspeaker/readspeaker';
-@import 'molecules/natural-language-form/natural-language-form';
-@import 'molecules/icon-overlay/icon-overlay';
-@import 'molecules/submenu/submenu';
-@import 'molecules/glider/glider';
-@import 'molecules/glider/glider-course';
-@import 'molecules/glider/glider-hero';
-@import 'molecules/continue-video-guide/continue-video-guide';
-@import 'molecules/overview-navigation/overview-navigation';
-@import 'molecules/multi-select/multi-select';
-@import 'molecules/input-group/input-group';
+@use 'molecules/breadcrumb/breadcrumb';
+@use 'molecules/card/card';
+@use 'molecules/download/download';
+@use 'molecules/teaser-news-list/teaser-news-list';
+@use 'molecules/form-control/form-control';
+@use 'molecules/alert/alert';
+@use 'molecules/table/table';
+@use 'molecules/system-error/system-error';
+@use 'molecules/info-box/info-box';
+@use 'molecules/share/share';
+@use 'molecules/cookie-disclaimer/cookie-disclaimer';
+@use 'molecules/byline/byline';
+@use 'molecules/context-menu/context-menu';
+@use 'molecules/modal/modal';
+@use 'molecules/natural-language-form/natural-language-form';
+@use 'molecules/icon-overlay/icon-overlay';
+@use 'molecules/submenu/submenu';
+@use 'molecules/glider/glider';
+@use 'molecules/glider/glider-course';
+@use 'molecules/glider/glider-hero';
+@use 'molecules/continue-video-guide/continue-video-guide';
+@use 'molecules/overview-navigation/overview-navigation';
+@use 'molecules/multi-select/multi-select';
+@use 'molecules/input-group/input-group';
 
 // Organisms
-@import 'organisms/header/header';
-@import 'organisms/footer/footer';
-@import 'organisms/mega-menu/mega-menu';
-@import 'organisms/hero/hero';
-@import 'organisms/hero/hero--dynamic-headline';
-@import 'organisms/hero/hero--bbk';
-@import 'organisms/sections/sections';
-@import 'organisms/accordion/accordion';
-@import 'organisms/domain-search/domain-search';
-@import 'organisms/search-result/search-result';
-@import 'organisms/filter/filter';
-@import 'organisms/search/search';
-@import 'organisms/tabs/tabs';
-@import 'organisms/mailchimp/mailchimp';
-@import 'organisms/features-box/features-box';
-@import 'organisms/event-listing-item/event-listing-item';
-@import 'organisms/podcast/podcast-episodes';
-@import 'organisms/podcast/podcast-player';
-@import 'organisms/video-guide/video-guide';
-@import 'organisms/timeline/timeline';
-@import 'organisms/members-service-product/members-service-product';
-@import 'organisms/schedule/schedule';
+@use 'organisms/header/header';
+@use 'organisms/footer/footer';
+@use 'organisms/mega-menu/mega-menu';
+@use 'organisms/hero/hero';
+@use 'organisms/hero/hero--dynamic-headline';
+@use 'organisms/hero/hero--bbk';
+@use 'organisms/sections/sections';
+@use 'organisms/accordion/accordion';
+@use 'organisms/domain-search/domain-search';
+@use 'organisms/search-result/search-result';
+@use 'organisms/filter/filter';
+@use 'organisms/search/search';
+@use 'organisms/tabs/tabs';
+@use 'organisms/mailchimp/mailchimp';
+@use 'organisms/features-box/features-box';
+@use 'organisms/event-listing-item/event-listing-item';
+@use 'organisms/podcast/podcast-episodes';
+@use 'organisms/podcast/podcast-player';
+@use 'organisms/video-guide/video-guide';
+@use 'organisms/timeline/timeline';
+@use 'organisms/members-service-product/members-service-product';
+@use 'organisms/schedule/schedule';
 
 // Structures
-@import 'structures/manifest';
+@use 'structures/manifest';
 
 // Dark mode
-@import 'theme/dark-mode';
+@use 'theme/dark-mode';

package/src/atoms/archive-link/archive-link.scss

@@ -1,11 +1,18 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+
 
 /// @group Links
-@include b(archive-link-wrapper) {
-	padding: rhythm(2) 0;
-	border-bottom: 1px solid $color-cyberspace;
+@include bem.b(archive-link-wrapper) {
+	padding: func.rhythm(2) 0;
+	border-bottom: 1px solid colors.$color-cyberspace;
 }
-@include atom(archive-link) {
+@include mixin.atom(archive-link) {
 	display: inline-flex;
 	position: relative;
 	flex-wrap: nowrap;
@@ -13,7 +20,7 @@
 	justify-content: center;
 	border: 0;
 	color: currentColor;
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 	text-decoration: none;
 	hyphens: auto;
 
@@ -22,24 +29,24 @@
 		text-decoration: underline;
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		position: relative;
-		top: -#{rhythm(0.2)};
-		color: $color-cyberspace;
+		top: -#{func.rhythm(0.2)};
+		color: colors.$color-cyberspace;
 	}
 
-	@include m(icon) {
+	@include bem.m(icon) {
 		justify-content: space-between;
-		max-width: rhythm(50);
-		padding-right: rhythm(5);
+		max-width: func.rhythm(50);
+		padding-right: func.rhythm(5);
 		text-align: left;
 	}
 
-	@include e(icon) {
-		width: $icon-size-small;
-		height: $icon-size-small;
-		margin-top: rem(3px);
-		margin-left: rhythm(1);
+	@include bem.e(icon) {
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
+		margin-top: func.to_rem(3px);
+		margin-left: func.rhythm(1);
 		fill: currentColor;
 	}
 }