style(design): revise scss linting configuration (#3357)

Co-authored-by: Damien Retzinger <damienwebdev@gmail.com>
graycoreio · Dec 12, 2024 · eb5e20b · eb5e20b
1 parent a8ea9b1
commit eb5e20b
Show file tree

Hide file tree

Showing 46 changed files with 227 additions and 192 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -13,7 +13,7 @@
     "function-comma-space-before": "never",
     "function-name-case": "lower",
     "function-url-quotes": "always",
-    "function-url-scheme-blacklist": [
+    "function-url-scheme-disallowed-list": [
       "data"
     ],
     "function-whitespace-after": "always",
@@ -24,10 +24,11 @@
     "string-quotes": "single",
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": [
+    "unit-allowed-list": [
       "px",
       "%",
       "deg",
+      "dvh",
       "ms",
       "rem",
       "em",
@@ -55,16 +56,6 @@
     "declaration-block-semicolon-space-after": "always-single-line",
     "declaration-block-semicolon-newline-before": "never-multi-line",
     "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-property-value-blacklist": [
-      {
-        "/.*/": [
-          "initial"
-        ]
-      },
-      {
-        "message": "The `initial` value is not supported in IE."
-      }
-    ],
     "declaration-no-important": true,
     "declaration-empty-line-before":"never",
     "block-no-empty": true,
@@ -93,7 +84,7 @@
     "indentation": "tab",
     "linebreaks": "unix",
     "selector-class-pattern": [
-      "^_?(daff-|demo-|daffio-)",
+      "(^_?(daff-|demo-|daffio-))|(^(active|horizontal|vertical|left|right|disabled|hidden)$)",
       {
         "resolveNestedSelectors": true
       }

diff --git a/libs/design/accordion/src/accordion-theme.scss b/libs/design/accordion/src/accordion-theme.scss
@@ -12,9 +12,9 @@
 		&:last-child {
 			border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
 		}
-		
+
 		&__header {
-			&:after {
+			&::after {
 				border-color: currentColor;
 			}
 		}

diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss
@@ -19,23 +19,23 @@
 		position: relative;
 
 		&::after {
-      content: '';
-      position: absolute;
-      top: 48%;
-      right: 2px;
-      display: inline-block;
-      border-right: 2px solid currentColor;
-      border-bottom: 2px solid currentColor;
-      width: 8px;
-      height: 8px;
-      transform: translateY(-50%) rotate(45deg);
-      transition: transform 150ms;
-    }
+			content: '';
+			position: absolute;
+			top: 48%;
+			right: 2px;
+			display: inline-block;
+			border-right: 2px solid currentColor;
+			border-bottom: 2px solid currentColor;
+			width: 8px;
+			height: 8px;
+			transform: translateY(-50%) rotate(45deg);
+			transition: transform 150ms;
+		}
 	}
 
 	&.daff-open {
 		#{$root}__header {
-			&:after {
+			&::after {
 				top: 56%;
 				transform: translateY(-50%) rotate(225deg);
 			}

diff --git a/libs/design/button/src/button/basic/button-theme.scss b/libs/design/button/src/button/basic/button-theme.scss
@@ -10,7 +10,7 @@
 	background-color: $base-color;
 	color: theming.daff-text-contrast($base-color);
 
-	&:after {
+	&::after {
 		background: $hover-color;
 	}
 
@@ -21,7 +21,7 @@
 	&:active {
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background: $active-color;
 		}
 	}

diff --git a/libs/design/button/src/button/button-base.scss b/libs/design/button/src/button/button-base.scss
@@ -35,7 +35,7 @@
 }
 
 @mixin daff-button-background($border-radius) {
-	&:after {
+	&::after {
 		content: '';
 		border-radius: $border-radius;
 		position: absolute;
@@ -47,7 +47,7 @@
 
 	&:hover,
 	&:active {
-		&:after {
+		&::after {
 			opacity: 1;
 		}
 	}
@@ -76,4 +76,4 @@
 		height: 3.5rem;
 		padding: 0 1.5rem;
 	}
-}
+}
diff --git a/libs/design/button/src/button/flat/flat-theme.scss b/libs/design/button/src/button/flat/flat-theme.scss
@@ -8,7 +8,7 @@
 ) {
 	color: $base-color;
 
-	&:after {
+	&::after {
 		background-color: $base-color;
 	}
 
@@ -19,7 +19,7 @@
 	&:active {
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background-color: $active-color;
 		}
 	}
@@ -42,12 +42,12 @@
 	.daff-flat-button {
 		color: currentColor;
 
-		&:after {
+		&::after {
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 		}
 
 		&:active {
-			&:after {
+			&::after {
 				background-color: theming.daff-illuminate($base, $neutral, 3);
 			}
 		}
@@ -113,7 +113,7 @@
 			&:hover,
 			&:focus,
 			&:active {
-				&:after {
+				&::after {
 					background: transparent;
 				}
 			}

diff --git a/libs/design/button/src/button/flat/flat.component.scss b/libs/design/button/src/button/flat/flat.component.scss
@@ -6,4 +6,4 @@
 	@include base.daff-button-sizes();
 	background: none;
 	border: none;
-}
+}
diff --git a/libs/design/button/src/button/icon/icon.component.scss b/libs/design/button/src/button/icon/icon.component.scss
@@ -27,4 +27,4 @@
 		height: 3.5rem;
 		width: 3.5rem;
 	}
-}
+}
diff --git a/libs/design/button/src/button/raised/raised-theme.scss b/libs/design/button/src/button/raised/raised-theme.scss
@@ -14,15 +14,14 @@
 	}
 
 	$black: theming.daff-color(theming.$daff-neutral, 110);
-
 	background-color: $base-color;
 	border: 1px solid $base-color;
 	box-shadow:
 		0 3px 5px rgba($black, 0.12),
 		0 1px 3px rgba($black, 0.08);
 	color: theming.daff-text-contrast($base-color);
 
-	&:after {
+	&::after {
 		box-shadow:
 			0 6px 12px rgba($black, 0.08),
 			0 4px 6px rgba($black, 0.04);
@@ -94,7 +93,7 @@
 			);
 			color: theming.daff-illuminate($base, $neutral, 5);
 
-			&:after {
+			&::after {
 				box-shadow: none;
 			}
 		}

diff --git a/libs/design/button/src/button/raised/raised.component.scss b/libs/design/button/src/button/raised/raised.component.scss
@@ -2,6 +2,6 @@
 
 .daff-raised-button {
 	@include base.daff-button-base();
-	@include base.daff-button-background(0px);
+	@include base.daff-button-background(0);
 	@include base.daff-button-sizes();
-}
+}
diff --git a/libs/design/button/src/button/stroked/stroked-theme.scss b/libs/design/button/src/button/stroked/stroked-theme.scss
@@ -10,7 +10,7 @@
 	color: $base-color;
 	background-color: transparent;
 
-	&:after {
+	&::after {
 		background-color: $base-color;
 	}
 
@@ -22,7 +22,7 @@
 		border: 1px solid $active-color;
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background-color: $active-color;
 		}
 	}
@@ -47,7 +47,7 @@
 		border: 1px solid theming.daff-illuminate($base, $neutral, 5);
 		color: currentColor;
 
-		&:after {
+		&::after {
 			background: theming.daff-illuminate($base, $neutral, 2);
 		}
 
@@ -64,7 +64,7 @@
 				theming.daff-illuminate($base, $neutral, 3)
 			);
 
-			&:after {
+			&::after {
 				background: theming.daff-illuminate($base, $neutral, 3);
 			}
 		}
@@ -127,7 +127,7 @@
 			&:hover {
 				color: theming.daff-illuminate($base, $neutral, 5);
 
-				&:after {
+				&::after {
 					background-color: transparent;
 					opacity: 0;
 				}

diff --git a/libs/design/button/src/button/stroked/stroked.component.scss b/libs/design/button/src/button/stroked/stroked.component.scss
@@ -4,4 +4,4 @@
 	@include base.daff-button-base();
 	@include base.daff-button-background(3px);
 	@include base.daff-button-sizes();
-}
+}
diff --git a/libs/design/button/src/button/underline/underline.component.scss b/libs/design/button/src/button/underline/underline.component.scss
@@ -79,4 +79,4 @@
 	to {
 		transform: translateX(0);
 	}
-}
+}
diff --git a/libs/design/card/src/card-theme-variants/linkable-card.scss b/libs/design/card/src/card-theme-variants/linkable-card.scss
@@ -4,7 +4,7 @@
 	$hover-color,
 ) {
 	.daff-card__wrapper {
-		&:after {
+		&::after {
 			background: $hover-color;
 		}
 	}

diff --git a/libs/design/card/src/card-theme.scss b/libs/design/card/src/card-theme.scss
@@ -160,7 +160,7 @@
 
 		&.daff-raised-card {
 			.daff-card__wrapper {
-				&:after {
+				&::after {
 					box-shadow: 0 16px 32px -4px rgba($black, 0.12),
 						0 8px 12px -2px rgba($black, 0.06);
 				}

diff --git a/libs/design/card/src/card/card.component.scss b/libs/design/card/src/card/card.component.scss
@@ -101,9 +101,11 @@ a {
 		$root: &;
 		text-decoration: none;
 
-		.daff-card__image + .daff-card__wrapper {
-			&::after {
-				border-radius: 0 0 $card-border-radius $card-border-radius;
+		.daff-card__image {
+			+ .daff-card__wrapper {
+				&::after {
+					border-radius: 0 0 $card-border-radius $card-border-radius;
+				}
 			}
 		}
 
@@ -124,11 +126,13 @@ a {
 				z-index: 1;
 			}
 		}
-		
+
 		&.daff-card--horizontal {
-			.daff-card__image + .daff-card__wrapper {
-				&::after {
-					border-radius: 0 $card-border-radius $card-border-radius 0;
+			.daff-card__image {
+				+ .daff-card__wrapper {
+					&::after {
+						border-radius: 0 $card-border-radius $card-border-radius 0;
+					}
 				}
 			}
 		}

diff --git a/libs/design/list/src/list-theme.scss b/libs/design/list/src/list-theme.scss
@@ -2,6 +2,7 @@
 @use '../../scss/core';
 @use '../../scss/theming';
 
+// styleline-disable selector-class-pattern
 @mixin daff-list-theme($theme) {
 	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
 	$base: core.daff-map-deep-get($theme, 'core.base');
@@ -23,13 +24,13 @@
 
 	.daff-nav-list {
 		.daff-list-item {
-			&:after {
+			&::after {
 				background-color: $base;
 			}
 
 			&:hover,
 			&.active {
-				&:after {
+				&::after {
 					background-color: theming.daff-illuminate($base, $neutral, 2);
 				}
 			}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,4 @@ @@
     		height: 3.5rem;
     		width: 3.5rem;
     	}
-    }
+    }