refactor(icons): extracted icons mixin related files #526

Author: mfranzke

source/_patterns/00-base/icons/_icon.scss

@@ -0,0 +1,4 @@
+// This file is meant to get included within internal or even imported externally in case of that somebody wants to use the icon mixin
+@import "icons.variables";
+@import "icons.helpers";
+@import "icons.placeholder";

source/_patterns/01-elements/buttons/_button.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 // We want to set the alpha value and that for need the long form hex code
 // stylelint-disable color-hex-length

source/_patterns/01-elements/buttons/button.scss

@@ -1,5 +1,6 @@
 @charset "utf-8";
 
+@import "../../00-base/icons/icon";
 @import "button.variables";
 
 .elm-button {

source/_patterns/01-elements/checkbox/_checkbox.variables.scss

@@ -1,5 +1,3 @@
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 @import "../../00-base/colors/colors.variables";
 
 $checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default;

source/_patterns/01-elements/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "checkbox.variables";
 
 .elm-checkbox {

source/_patterns/01-elements/link/_link.variables.scss

@@ -1,6 +1,4 @@
-@import "../../00-base/icons/icons.variables";
 @import "../../00-base/colors/colors.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $link--disabled-opacity: 0.4 !default;
 $link-reaMain--color: $db-color-cyan-600 !default;

source/_patterns/01-elements/link/link.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "link.variables";
 
 .elm-link {

source/_patterns/02-components/accordion/_accordion.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $accordion---paddingLeft: 46 !default;
 $accordion---paddingRight: to-rem(

source/_patterns/02-components/accordion/accordion.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "accordion.variables";
 
 .cmp-accordion {

source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss

@@ -1,5 +1,3 @@
-@import "../../00-base/icons/icons.helpers";
-@import "../../00-base/icons/icons.variables";
 @import "../../00-base/colors/colors.variables";
 
 $breadcrumb-divider--icon: "chevron-right" !default;

source/_patterns/02-components/breadcrumb/breadcrumb.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "breadcrumb.variables";
 
 .cmp-breadcrumb {

source/_patterns/02-components/dialog/_dialog.variables.scss

@@ -1,5 +1,3 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $dialog-backdrop--backgroundColor: rgba(0, 0, 0, 0.9) !default;

source/_patterns/02-components/dialog/dialog.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "dialog.variables";
 
 .cmp-dialog {

source/_patterns/02-components/dropdown/_dropdown.variables.scss

@@ -1,3 +1 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";

source/_patterns/02-components/dropdown/dropdown.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "../overflow-menu/overflow-menu";
 @import "dropdown.variables";
 

source/_patterns/02-components/language-switcher/_language-switcher.variables.scss

@@ -1,3 +1 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.helpers";
-@import "../../00-base/icons/icons.variables";

source/_patterns/02-components/language-switcher/language-switcher.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "language-switcher.variables";
 
 .cmp-language-switcher {

source/_patterns/02-components/link-list/_link-list.variables.scss

@@ -1,3 +1 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";

source/_patterns/02-components/link-list/link-list.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "link-list.variables";
 
 .cmp-link-list {

source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $header-big-link-paddingTop: 32 * 0.0625 !default;
 $header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color

source/_patterns/02-components/mainnavigation/mainnavigation.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 // TODO: Replace magic numbers e.g. with flexbox implementations and extract variables as well for multi-brand
 @import "mainnavigation.variables";
 

source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $overflowMenu---borderRadius: 8px !default;
 $overflowMenu---backgroundColor: #fff !default;

source/_patterns/02-components/overflow-menu/overflow-menu.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "overflow-menu.variables";
 
 .cmp-overflow-menu {

source/_patterns/02-components/pagination/_pagination.variables.scss

@@ -1,3 +1 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";

source/_patterns/02-components/pagination/pagination.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "pagination.variables";
 
 .cmp-pagination {

source/_patterns/02-components/sidenavi/_sidenavi.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $sidenavi-link--color: $db-color-cool-gray-200 !default;
 $sidenavi-linkCurrent-hover-color: $db-color-cool-gray-600 !default;

source/_patterns/02-components/sidenavi/sidenavi.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "sidenavi.variables";
 
 .cmp-sidenavi {

source/_patterns/02-components/sitesearch/_sitesearch.variables.scss

@@ -1,6 +1,4 @@
 @import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
 
 $sitesearch-form-full-maxWidth: to-rem(
 	$pxValue: 500

source/_patterns/02-components/sitesearch/sitesearch.scss

@@ -1,4 +1,5 @@
 @import "../../../css/partials.meta";
+@import "../../00-base/icons/icon";
 @import "sitesearch.variables";
 
 .cmp-sitesearch {