@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/atoms/textarea/_textarea.scss

@@ -1,11 +1,20 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:color";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@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;
+@use '../../vendor/baseline/plumber' as plumber;
 
-@include atom(textarea) {
+@include mixin.atom(textarea) {
 	@extend %input;
 
 	min-width: 100%;
 	max-width: 100%;
-	min-height: rhythm(12);
+	min-height: func.rhythm(12);
 
 	&:focus {
 		@extend %input-focus;
@@ -15,12 +24,12 @@
 		@extend %disabled;
 	}
 
-	@include m(discreet) {
+	@include bem.m(discreet) {
 		@extend %discreet;
 	}
 
-	@include m(hidden) {
-		@include visuallyhidden;
+	@include bem.m(hidden) {
+		@include mixin.visuallyhidden;
 
 		min-height: 0;
 		min-width: 0;
@@ -28,17 +37,17 @@
 		padding: 0;
 	}
 
-	@include m(rich-text) {
+	@include bem.m(rich-text) {
 		min-height: auto;
 
 		> div {
-			min-height: rhythm(12);
+			min-height: func.rhythm(12);
 
 			p,
 			ul,
 			ol {
-				@include plumber(
-					$font-size: 1.75,
+				@include plumber.plumber(
+					var.$font-size: 1.75,
 					$leading-bottom: 2
 				);
 			}
@@ -49,12 +58,12 @@
 		}
 	}
 
-	@include e(toolbar) {
+	@include bem.e(toolbar) {
 		button {
 			@extend %button-toolbar;
 
-			margin-right: rhythm(0.5);
-			margin-bottom: rhythm(1);
+			margin-right: func.rhythm(0.5);
+			margin-bottom: func.rhythm(1);
 		}
 	}
 }

package/src/atoms/textarea/textarea.config.js

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

package/src/atoms/toggle-button/toggle-button.config.js

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

package/src/atoms/tooltip/_tooltip.scss

@@ -1,21 +1,28 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use "sass:color";
+@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;
 
-@include atom(tooltip) {
+@include mixin.atom(tooltip) {
 	position: relative;
-	width: $icon-size;
-	height: $icon-size;
-	margin-right: rhythm(1);
-	margin-left: rhythm(1);
-	padding: rhythm(1);
+	width: var.$icon-size;
+	height: var.$icon-size;
+	margin-right: func.rhythm(1);
+	margin-left: func.rhythm(1);
+	padding: func.rhythm(1);
 	border-radius: 50%;
-	box-shadow: 0 0 0 rem(5px) transparent;
+	box-shadow: 0 0 0 func.to_rem(5px) transparent;
 	overflow: visible;
 
 	&:focus,
 	&:hover {
 		overflow: visible;
 		clip: auto;
-		box-shadow: 0 0 0 rem(5px) $color-ocean-light;
+		box-shadow: 0 0 0 func.to_rem(5px) colors.$color-ocean-light;
 
 		[class*='text'] {
 			overflow: visible;
@@ -36,27 +43,27 @@
 		fill: currentColor;
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		display: block;
 		position: absolute;
-		z-index: z_index(foreground);
+		z-index: func.z_index(foreground);
 		top: auto;
 		bottom: 130%;
 		left: 50%;
-		width: rem(300px);
+		width: func.to_rem(300px);
 		height: auto;
-		margin: 0 0 rem(5px) 0;
-		padding: rhythm(1);
+		margin: 0 0 func.to_rem(5px) 0;
+		padding: func.rhythm(1);
 		transform: rotateX(90deg) scale(0.2) translateX(-100%);
 		transform-origin: bottom center;
 		-webkit-backface-visibility: hidden;
 		transition: transform 0.3s cubic-bezier(0.3, 0, 0, 1);
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 		opacity: 0;
-		background-color: $color-cyberspace;
-		color: $color-snow;
-		font-family: $font-family-base;
-		font-size: $size-small;
+		background-color: colors.$color-cyberspace;
+		color: colors.$color-snow;
+		font-family: var.$font-family-base;
+		font-size: var.$size-small;
 		text-align: left;
 		user-select: none;
 
@@ -72,7 +79,7 @@
 			border: solid transparent;
 			border-width: 15px;
 			border-color: rgba(31, 42, 54, 0);
-			border-top-color: $color-cyberspace;
+			border-top-color: colors.$color-cyberspace;
 			border-bottom-color: transparent;
 			pointer-events: none;
 		}
@@ -86,7 +93,7 @@
 				top: auto;
 				bottom: calc(100% - 1px);
 				border-top-color: transparent;
-				border-bottom-color: $color-cyberspace;
+				border-bottom-color: colors.$color-cyberspace;
 			}
 		}
 	}

package/src/atoms/tooltip/tooltip.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		name: "Tooltip",
 		text: "Ett .se-domännamn kan registreras för en period mellan 12-120 månader. Efter att ett domännamn förfallit kommer den att få statusen “Expired” i tio dagar. Om domänen inte förnyas under dessa tio dagar ändras statusen på domänen till “Deactivated”, vilket innebär att den inte kommer med i zonfilen. Domänen är därefter deaktiverad i 60 dagar om ingen förnyelse sker. Under deaktiveringsperioden har du möjlighet att förnya domänen."
 	}
-}
+};

package/src/base/_grid.scss

@@ -1,10 +1,10 @@
 // Inspired by https://github.com/fractures/fractures
-@include b(grid) {
+@include bem.b(grid) {
 	display: grid;
 
-	&-gap { grid-gap: $grid-gutter-width; }
-	&-gap-y { grid-row-gap: $grid-gutter-width; }
-	&-gap-x { grid-column-gap: $grid-gutter-width; }
+	&-gap { grid-gap: var.$grid-gutter-width; }
+	&-gap-y { grid-row-gap: var.$grid-gutter-width; }
+	&-gap-x { grid-column-gap: var.$grid-gutter-width; }
 
 	&-cols {
 		@for $i from 2 through $grid-columns {