refactor: differentiate by theme

mfranzke · mfranzke · commit 7b01f6a30ce8 · 2024-06-20T18:17:59.000+02:00
diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss
@@ -26,11 +26,15 @@
 				}
 			}
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
-			@include db-cmp-brand-rea-header;
-		}
-		@container not style(--db-narrower-screen: true) {
-			@include db-cmp-brand-rea-header;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-brand-rea-header;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-brand-rea-header;
+			}
 		}
 	}
 	@mixin db-cmp-brand-site-name {
@@ -42,10 +46,14 @@
 			}
 		}
 	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
-		@include db-cmp-brand-site-name;
-	}
-	@container style(--db-narrower-screen: true) {
-		@include db-cmp-brand-site-name;
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-brand-site-name;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-brand-site-name;
+		}
 	}
 }
diff --git a/source/_patterns/02-components/brand/enterprise/brand.scss b/source/_patterns/02-components/brand/enterprise/brand.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "brand.variables";
 @import "../brand";
diff --git a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "language-switcher.variables";
 @import "../language-switcher";
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -66,11 +66,15 @@
 				top: to-rem($pxValue: 56);
 			}
 
-			@media screen and (width > $db-break-the-header-max-width) {
-				@include db-cmp-language-switcher-li-rea-header;
-			}
-			@container not style(--db-narrower-screen: true) {
-				@include db-cmp-language-switcher-li-rea-header;
+			@if variable-exists(enterprise) {
+				// Based on the browser strategy, we could ignore Firefox for the moment
+				@container not style(--db-narrower-screen: true) {
+					@include db-cmp-language-switcher-li-rea-header;
+				}
+			} @else {
+				@media screen and (width > $db-break-the-header-max-width) {
+					@include db-cmp-language-switcher-li-rea-header;
+				}
 			}
 		}
 
diff --git a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "mainnavigation.variables";
 @import "../mainnavigation";
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -35,11 +35,15 @@
 				display: none;
 			}
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
-			@include cmp-mainnavigation-checkbox;
-		}
-		@container not style(--db-narrower-screen: true) {
-			@include cmp-mainnavigation-checkbox;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include cmp-mainnavigation-checkbox;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include cmp-mainnavigation-checkbox;
+			}
 		}
 	}
 
@@ -88,11 +92,16 @@
 			}
 		}
 	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
-		@include db-cmp-mainnavigation;
-	}
-	@container style(--db-narrower-screen: true) {
-		@include db-cmp-mainnavigation;
+
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-mainnavigation;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-mainnavigation;
+		}
 	}
 
 	ul {
@@ -108,21 +117,29 @@
 
 			z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
-			@include db-cmp-mainnavigation-ul-ul-above;
-		}
-		@container not style(--db-narrower-screen: true) {
-			@include db-cmp-mainnavigation-ul-ul-above;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-ul-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-ul-above;
+			}
 		}
 
 		@mixin db-cmp-mainnavigation-ul-ul {
 			display: none;
 		}
-		@media screen and (max-width: $db-break-the-header-max-width) {
-			@include db-cmp-mainnavigation-ul-ul;
-		}
-		@container style(--db-narrower-screen: true) {
-			@include db-cmp-mainnavigation-ul-ul;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-ul;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-ul;
+			}
 		}
 	}
 
@@ -131,11 +148,15 @@
 		@mixin db-cmp-mainnavigation-ul-above {
 			display: flex;
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
-			@include db-cmp-mainnavigation-ul-above;
-		}
-		@container not style(--db-narrower-screen: true) {
-			@include db-cmp-mainnavigation-ul-above;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-above;
+			}
 		}
 
 		& > li,
@@ -158,11 +179,15 @@
 						border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500;
 					}
 				}
-				@media screen and (width > $db-break-the-header-max-width) {
-					@include db-cmp-mainnavigation-ul-li-elm-link-above;
-				}
-				@container not style(--db-narrower-screen: true) {
-					@include db-cmp-mainnavigation-ul-li-elm-link-above;
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container not style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-ul-li-elm-link-above;
+					}
+				} @else {
+					@media screen and (width > $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-ul-li-elm-link-above;
+					}
 				}
 			}
 
@@ -189,11 +214,15 @@
 						padding-right: to-rem($pxValue: 18);
 					}
 				}
-				@media screen and (width > $db-break-the-header-max-width) {
-					@include db-cmp-mainnavigation-ul-li-ul-above;
-				}
-				@container not style(--db-narrower-screen: true) {
-					@include db-cmp-mainnavigation-ul-li-ul-above;
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container not style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-ul-li-ul-above;
+					}
+				} @else {
+					@media screen and (width > $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-ul-li-ul-above;
+					}
 				}
 
 				& > li,
@@ -203,11 +232,15 @@
 						@mixin db-cmp-mainnavigation-ul-ul-li {
 							padding-left: to-rem($pxValue: 34);
 						}
-						@media screen and (max-width: $db-break-the-header-max-width) {
-							@include db-cmp-mainnavigation-ul-ul-li;
-						}
-						@container style(--db-narrower-screen: true) {
-							@include db-cmp-mainnavigation-ul-ul-li;
+						@if variable-exists(enterprise) {
+							// Based on the browser strategy, we could ignore Firefox for the moment
+							@container style(--db-narrower-screen: true) {
+								@include db-cmp-mainnavigation-ul-ul-li;
+							}
+						} @else {
+							@media screen and (max-width: $db-break-the-header-max-width) {
+								@include db-cmp-mainnavigation-ul-ul-li;
+							}
 						}
 					}
 
@@ -220,11 +253,15 @@
 								@mixin db-cmp-mainnavigation-ul-ul-ul-li {
 									padding-left: to-rem($pxValue: 60);
 								}
-								@media screen and (max-width: $db-break-the-header-max-width) {
-									@include db-cmp-mainnavigation-ul-ul-ul-li;
-								}
-								@container style(--db-narrower-screen: true) {
-									@include db-cmp-mainnavigation-ul-ul-ul-li;
+								@if variable-exists(enterprise) {
+									// Based on the browser strategy, we could ignore Firefox for the moment
+									@container style(--db-narrower-screen: true) {
+										@include db-cmp-mainnavigation-ul-ul-ul-li;
+									}
+								} @else {
+									@media screen and (max-width: $db-break-the-header-max-width) {
+										@include db-cmp-mainnavigation-ul-ul-ul-li;
+									}
 								}
 							}
 						}
@@ -265,11 +302,15 @@
 				@mixin db-cmp-mainnavigation-li-hover {
 					display: initial;
 				}
-				@media screen and (max-width: $db-break-the-header-max-width) {
-					@include db-cmp-mainnavigation-li-hover;
-				}
-				@container style(--db-narrower-screen: true) {
-					@include db-cmp-mainnavigation-li-hover;
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-li-hover;
+					}
+				} @else {
+					@media screen and (max-width: $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-li-hover;
+					}
 				}
 			}
 		}
@@ -299,11 +340,15 @@
 				position: relative;
 			}
 		}
-		@media screen and (max-width: $db-break-the-header-max-width) {
-			@include db-cmp-mainnavigation-li;
-		}
-		@container style(--db-narrower-screen: true) {
-			@include db-cmp-mainnavigation-li;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-li;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-li;
+			}
 		}
 
 		@mixin db-cmp-mainnavigation-li-above {
@@ -326,11 +371,15 @@
 				}
 			}
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
-			@include db-cmp-mainnavigation-li-above;
-		}
-		@container not style(--db-narrower-screen: true) {
-			@include db-cmp-mainnavigation-li-above;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-li-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-li-above;
+			}
 		}
 	}
 }
diff --git a/source/_patterns/03-areas/00-header/enterprise/header.scss b/source/_patterns/03-areas/00-header/enterprise/header.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "header.variables";
 @import "../header";
diff --git a/source/_patterns/03-areas/00-header/enterprise/meta.scss b/source/_patterns/03-areas/00-header/enterprise/meta.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "meta.variables";
 @import "../meta";
diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md
@@ -17,7 +17,7 @@ If you're using CSS only without SCSS, you could set the CSS Custom Property / C
 }
 ```
 
-Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing, please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support.
+Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing (please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support), and that for we've only enabled it within the `enterprise` themed stylings.
 
 ## Fixed positioned header
 
diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss
@@ -31,10 +31,14 @@
 		border-bottom: $header---borderBottom;
 		min-height: to-rem($pxValue: 64);
 	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
-		@include db-cmp-header;
-	}
-	@container style(--db-narrower-screen: true) {
-		@include db-cmp-header;
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-header;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-header;
+		}
 	}
 }
diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss
@@ -25,11 +25,15 @@
 		@mixin db-cmp-header-meta {
 			margin-top: to-rem($pxValue: 8);
 		}
-		@media screen and (max-width: $db-break-the-header-max-width) {
-			@include db-cmp-header-meta;
-		}
-		@container style(--db-narrower-screen: true) {
-			@include db-cmp-header-meta;
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-header-meta;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-header-meta;
+			}
 		}
 	}
 
diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss
diff --git a/source/_patterns/03-areas/enterprise/_areas.scss b/source/_patterns/03-areas/enterprise/_areas.scss

Original file line number	Diff line number	Diff line change
`@@ -26,11 +26,15 @@`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`}`
`29`		`- @media screen and (width > $db-break-the-header-max-width) {`
`30`		`- @include db-cmp-brand-rea-header;`
`31`		`- }`
`32`		`- @container not style(--db-narrower-screen: true) {`
`33`		`- @include db-cmp-brand-rea-header;`
	`29`	`+ @if variable-exists(enterprise) {`
	`30`	`+ // Based on the browser strategy, we could ignore Firefox for the moment`
	`31`	`+ @container not style(--db-narrower-screen: true) {`
	`32`	`+ @include db-cmp-brand-rea-header;`
	`33`	`+ }`
	`34`	`+ } @else {`
	`35`	`+ @media screen and (width > $db-break-the-header-max-width) {`
	`36`	`+ @include db-cmp-brand-rea-header;`
	`37`	`+ }`
`34`	`38`	`}`
`35`	`39`	`}`
`36`	`40`	`@mixin db-cmp-brand-site-name {`
`@@ -42,10 +46,14 @@`
`42`	`46`	`}`
`43`	`47`	`}`
`44`	`48`	`}`
`45`		`- @media screen and (max-width: $db-break-the-header-max-width) {`
`46`		`- @include db-cmp-brand-site-name;`
`47`		`- }`
`48`		`- @container style(--db-narrower-screen: true) {`
`49`		`- @include db-cmp-brand-site-name;`
	`49`	`+ @if variable-exists(enterprise) {`
	`50`	`+ // Based on the browser strategy, we could ignore Firefox for the moment`
	`51`	`+ @container style(--db-narrower-screen: true) {`
	`52`	`+ @include db-cmp-brand-site-name;`
	`53`	`+ }`
	`54`	`+ } @else {`
	`55`	`+ @media screen and (max-width: $db-break-the-header-max-width) {`
	`56`	`+ @include db-cmp-brand-site-name;`
	`57`	`+ }`
`50`	`58`	`}`
`51`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,11 +66,15 @@`
`66`	`66`	`top: to-rem($pxValue: 56);`
`67`	`67`	`}`
`68`	`68`
`69`		`- @media screen and (width > $db-break-the-header-max-width) {`
`70`		`- @include db-cmp-language-switcher-li-rea-header;`
`71`		`- }`
`72`		`- @container not style(--db-narrower-screen: true) {`
`73`		`- @include db-cmp-language-switcher-li-rea-header;`
	`69`	`+ @if variable-exists(enterprise) {`
	`70`	`+ // Based on the browser strategy, we could ignore Firefox for the moment`
	`71`	`+ @container not style(--db-narrower-screen: true) {`
	`72`	`+ @include db-cmp-language-switcher-li-rea-header;`
	`73`	`+ }`
	`74`	`+ } @else {`
	`75`	`+ @media screen and (width > $db-break-the-header-max-width) {`
	`76`	`+ @include db-cmp-language-switcher-li-rea-header;`
	`77`	`+ }`
`74`	`78`	`}`
`75`	`79`	`}`
`76`	`80`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ If you're using CSS only without SCSS, you could set the CSS Custom Property / C`
`17`	`17`	`}`
`18`	`18`	```
`19`	`19`
`20`		`-Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing, please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support.`
	`20`	+Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing (please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support), and that for we've only enabled it within the `enterprise` themed stylings.
`21`	`21`
`22`	`22`	`## Fixed positioned header`
`23`	`23`