@transfermarkt/global-styles 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",

package/scss/mixins/_icon.scss

@@ -5,22 +5,26 @@ $icon-color-filters: (
   lightblue-light: invert(47%) sepia(87%) saturate(1532%) hue-rotate(184deg) brightness(103%)
     contrast(101%),
   darkblue-400: invert(78%) sepia(6%) saturate(7%) hue-rotate(196deg) brightness(92%) contrast(87%),
-  warning-dark: invert(15%) sepia(98%) saturate(6752%) hue-rotate(350deg) brightness(90%)
+  warning-light: invert(77%) sepia(38%) saturate(5784%) hue-rotate(359deg) brightness(101%)
+    contrast(105%),
+  warning-dark: invert(15%) sepia(64%) saturate(5304%) hue-rotate(350deg) brightness(90%)
     contrast(105%),
   warning: invert(22%) sepia(93%) saturate(6517%) hue-rotate(353deg) brightness(101%) contrast(102%),
   success-dark: invert(29%) sepia(58%) saturate(433%) hue-rotate(121deg) brightness(92%)
     contrast(87%),
-  success: invert(40%) sepia(44%) saturate(643%) hue-rotate(135deg) brightness(93%) contrast(95%)
+  success: invert(40%) sepia(44%) saturate(643%) hue-rotate(135deg) brightness(93%) contrast(95%),
+  success-light: invert(76%) sepia(61%) saturate(125%) hue-rotate(86deg) brightness(119%)
+    contrast(84%)
 );
 
 @function icon-filter-base($state) {
   @if $state == 'disabled' {
     @return invert(80%) sepia(10%) saturate(0%) brightness(90%) contrast(80%);
-  } @else if $state == 'warning' {
+  } @else if $state == 'warning-dark' {
     @return invert(77%) sepia(38%) saturate(5784%) hue-rotate(359deg) brightness(101%)
       contrast(105%);
   } @else if $state == 'success' {
-    @return invert(58%) sepia(79%) saturate(415%) hue-rotate(93deg) brightness(95%) contrast(91%);
+    @return invert(76%) sepia(61%) saturate(125%) hue-rotate(86deg) brightness(119%) contrast(84%);
   } @else {
     @return invert(100%) sepia(100%) saturate(1%) hue-rotate(207deg) brightness(102%) contrast(102%);
   }
@@ -37,56 +41,63 @@ $icon-color-filters: (
   }
 }
 
-@mixin tm-icon($name, $position, $state: 'default', $color-name: null, $size: 20px) {
+@mixin tm-icon-generate($name, $position: left, $state: 'default') {
   $base-url: 'https://tmsi.akamaized.net/tm-svg-icons';
   $image-url: '#{$base-url}/#{$name}.svg';
-  $use-custom: map-has-key($icon-color-filters, $color-name);
-  $custom-filter: if($use-custom, map-get($icon-color-filters, $color-name), null);
+  $base-filter: icon-filter-base($state);
 
-  @if $position == 'left' or $position == 'both' {
+  @if $position == left or $position == both {
     &::before {
       content: '';
       display: inline-block;
-      width: $size;
-      height: $size;
-      background: url('#{$image-url}') no-repeat center / contain;
       vertical-align: middle;
       margin-right: 8px;
+      width: 20px;
+      height: 20px;
+      background: url('#{$image-url}') no-repeat center/contain;
+      filter: $base-filter;
       transform: rotate(180deg);
-      @if $use-custom {
-        filter: $custom-filter;
-      } @else {
-        filter: icon-filter-base($state);
-        @if $state != 'disabled' {
-          &:hover {
-            filter: icon-filter-hover($state);
-          }
+      @if $state != 'disabled' {
+        &:hover {
+          filter: icon-filter-hover($state);
         }
       }
     }
   }
 
-  @if $position == 'right' or $position == 'both' {
+  @if $position == right or $position == both {
     &::after {
       content: '';
       display: inline-block;
-      width: $size;
-      height: $size;
-      background: url('#{$image-url}') no-repeat center / contain;
       vertical-align: middle;
       margin-left: 8px;
-
-      @if $use-custom {
-        filter: $custom-filter;
-      } @else {
-        filter: icon-filter-base($state);
-        @if $state != 'disabled' {
-          &:hover {
-            filter: icon-filter-hover($state);
-          }
+      width: 20px;
+      height: 20px;
+      background: url('#{$image-url}') no-repeat center/contain;
+      filter: $base-filter;
+      @if $state != 'disabled' {
+        &:hover {
+          filter: icon-filter-hover($state);
         }
       }
     }
   }
 }
+
+@mixin tm-icon-color($color-name) {
+  $filter: map-get($icon-color-filters, $color-name);
+  &::before,
+  &::after {
+    filter: $filter;
+  }
+}
+
+@mixin tm-icon-size($size) {
+  &::before,
+  &::after {
+    width: $size;
+    height: $size;
+  }
+}
+
 /* stylelint-enable */

package/scss/utils/components/buttons/buttons.scss

@@ -4,12 +4,14 @@
 @use '../../../mixins/breakpoint' as *;
 @use '../../../mixins/icon' as *;
 
+// "!importants" can be removed if the styles are not overridden by other styles (comes often from main.scss)
+
 .tm-btn {
   $position: 'right';
 
   align-items: center;
   border: none;
-  border-radius: 8px;
+  border-radius: 8px !important;
   color: tm-color('white');
   cursor: pointer;
   display: inline-flex;
@@ -25,177 +27,26 @@
   position: relative;
   text-decoration: none;
 
-  &__icon--left {
-    padding-right: rem-calc(24) !important;
-
-    @include tm-icon('chevron', 'left', 'default', 'white');
-  }
-
-  &__icon--right {
-    padding-left: rem-calc(24) !important;
-
-    @include tm-icon('chevron', 'right', 'default', 'white');
-  }
-
-  &__icon--both {
-    @include tm-icon('chevron', 'both', 'default', 'white');
-  }
-
-  &--admiral {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'admiral');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'admiral');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'admiral');
-    }
-  }
-
-  &--lightblue-light {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'lightblue-light');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'lightblue-light');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'lightblue-light');
-    }
-  }
-
-  &--darkblue-400 {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'darkblue-400');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'darkblue-400');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'darkblue-400');
-    }
-  }
-
-  &--warning-dark {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'warning-dark');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'warning-dark');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'warning-dark');
-    }
-  }
-
-  &--warning {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'warning');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'warning');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'warning');
-    }
-  }
-
-  &--success-dark {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'success-dark');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'success-dark');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'success-dark');
-    }
-  }
-
-  &--success {
-    &__icon--left {
-      @include tm-icon('chevron', 'left', 'default', 'success');
-    }
-
-    &__icon--right {
-      @include tm-icon('chevron', 'right', 'default', 'success');
-    }
-
-    &__icon--both {
-      @include tm-icon('chevron', 'both', 'default', 'success');
-    }
+  &--full-size {
+    display: flex;
   }
 
   &__primary {
     background-color: tm-color('dark-blue-new');
 
     &--large {
-      display: flex;
-
-      @include breakpoint(desktop) {
-        padding: rem-calc(8) rem-calc(20);
-        text-transform: uppercase;
-      }
-
-      &__icon--left {
-        @include tm-icon('chevron', 'left', 'default', 'white', rem-calc(20));
-      }
-
-      &__icon--right {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(20));
-      }
-
-      &__icon--both {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(20));
-      }
+      text-transform: uppercase;
     }
 
     &--medium {
       font-size: rem-calc(14);
       line-height: rem-calc(20);
       padding: rem-calc(8) rem-calc(16);
-
-      &__icon--left {
-        @include tm-icon('chevron', 'left', 'default', 'white', rem-calc(16));
-      }
-
-      &__icon--right {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(16));
-      }
-
-      &__icon--both {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(16));
-      }
     }
 
     &--small {
       font-size: rem-calc(12);
       padding: rem-calc(8) rem-calc(12);
-
-      &__icon--left {
-        @include tm-icon('chevron', 'left', 'default', 'white', rem-calc(14));
-      }
-
-      &__icon--right {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(14));
-      }
-
-      &__icon--both {
-        @include tm-icon('chevron', 'right', 'default', 'white', rem-calc(14));
-      }
     }
 
     &:hover {
@@ -219,12 +70,12 @@
     }
 
     &--success {
-      background-color: tm-color('success-light-new');
-      color: tm-color('success-new');
+      background-color: tm-color('success-light');
+      color: tm-color('success');
 
       &:hover {
-        background-color: tm-color('success-new');
-        color: tm-color('success-light-new');
+        background-color: tm-color('success-dark');
+        color: tm-color('success-light');
       }
     }
   }
@@ -265,10 +116,10 @@
     }
 
     &--success {
-      color: tm-color('success');
+      color: tm-color('success-dark');
 
       &:hover {
-        color: tm-color('success-light');
+        color: tm-color('success');
       }
     }
   }
@@ -309,11 +160,413 @@
     }
 
     &--success {
-      color: tm-color('success-new');
+      color: tm-color('success-dark');
 
       &:hover {
-        color: tm-color('success-light');
+        color: tm-color('success');
       }
     }
   }
 }
+
+.tm-icon-collect {
+  &__arrow {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('arrow');
+  }
+
+  &__arrow-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('arrow', right);
+  }
+
+  &__arrow-both {
+    @include tm-icon-generate('arrow', both);
+  }
+
+  &__chevron {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('chevron');
+  }
+
+  &__chevron-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('chevron', right);
+  }
+
+  &__chevron-both {
+    @include tm-icon-generate('chevron', both);
+  }
+
+  &__check {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('check');
+  }
+
+  &__check-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('check', right);
+  }
+
+  &__check-both {
+    @include tm-icon-generate('check', both);
+  }
+
+  &__clipboard {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('clipboard');
+  }
+
+  &__clipboard-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('clipboard', right);
+  }
+
+  &__clipboard-both {
+    @include tm-icon-generate('clipboard', both);
+  }
+
+  &__close {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('close');
+  }
+
+  &__close-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('close', right);
+  }
+
+  &__close-both {
+    @include tm-icon-generate('close', both);
+  }
+
+  &__copy {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('copy');
+  }
+
+  &__copy-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('copy', right);
+  }
+
+  &__copy-both {
+    @include tm-icon-generate('copy', both);
+  }
+
+  &__delete {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('delete');
+  }
+
+  &__delete-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('delete', right);
+  }
+
+  &__delete-both {
+    @include tm-icon-generate('delete', both);
+  }
+
+  &__edit {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('edit');
+  }
+
+  &__edit-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('edit', right);
+  }
+
+  &__edit-both {
+    @include tm-icon-generate('edit', both);
+  }
+
+  &__filter {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('filter');
+  }
+
+  &__filter-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('filter', right);
+  }
+
+  &__filter-both {
+    @include tm-icon-generate('filter', both);
+  }
+
+  &__globe {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('globe');
+  }
+
+  &__globe-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('globe', right);
+  }
+
+  &__globe-both {
+    @include tm-icon-generate('globe', both);
+  }
+
+  &__log-in {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('log-in');
+  }
+
+  &__log-in-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('log-in', right);
+  }
+
+  &__log-in-both {
+    @include tm-icon-generate('log-in', both);
+  }
+
+  &__log-out {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('log-out');
+  }
+
+  &__log-out-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('log-out', right);
+  }
+
+  &__log-out-both {
+    @include tm-icon-generate('log-out', both);
+  }
+
+  &__mail {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('mail');
+  }
+
+  &__mail-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('mail', right);
+  }
+
+  &__mail-both {
+    @include tm-icon-generate('mail', both);
+  }
+
+  &__map-pin {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('map-pin');
+  }
+
+  &__map-pin-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('map-pin', right);
+  }
+
+  &__map-pin-both {
+    @include tm-icon-generate('map-pin', both);
+  }
+
+  &__refresh {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('refresh');
+  }
+
+  &__refresh-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('refresh', right);
+  }
+
+  &__refresh-both {
+    @include tm-icon-generate('refresh', both);
+  }
+
+  &__search {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('search');
+  }
+
+  &__search-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('search', right);
+  }
+
+  &__search-both {
+    @include tm-icon-generate('search', both);
+  }
+
+  &__settings {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('settings');
+  }
+
+  &__settings-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('settings', right);
+  }
+
+  &__settings-both {
+    @include tm-icon-generate('settings', both);
+  }
+
+  &__share {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('share');
+  }
+
+  &__share-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('share', right);
+  }
+
+  &__share-both {
+    @include tm-icon-generate('share', both);
+  }
+
+  &__star {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('star');
+  }
+
+  &__star-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('star', right);
+  }
+
+  &__star-both {
+    @include tm-icon-generate('star', both);
+  }
+
+  &__trash {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('trash');
+  }
+
+  &__trash-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('trash', right);
+  }
+
+  &__trash-both {
+    @include tm-icon-generate('trash', both);
+  }
+
+  &__user {
+    padding-right: rem-calc(24);
+
+    @include tm-icon-generate('user');
+  }
+
+  &__user-right {
+    padding-left: rem-calc(24);
+
+    @include tm-icon-generate('user', right);
+  }
+
+  &__user-both {
+    @include tm-icon-generate('user', both);
+  }
+
+  &__white {
+    @include tm-icon-color(white);
+  }
+
+  &__admiral {
+    @include tm-icon-color(admiral);
+
+    &:hover {
+      @include tm-icon-color(lightblue-light);
+    }
+  }
+
+  &__lightblue-light {
+    @include tm-icon-color(lightblue-light);
+  }
+
+  &__darkblue-400 {
+    @include tm-icon-color(darkblue-400);
+  }
+
+  &__warning-dark {
+    @include tm-icon-color(warning-dark);
+
+    &:hover {
+      @include tm-icon-color(white);
+    }
+  }
+
+  &__warning {
+    @include tm-icon-color(warning-dark);
+
+    &:hover {
+      @include tm-icon-color(warning);
+    }
+  }
+
+  &__success {
+    @include tm-icon-color(success);
+
+    &:hover {
+      @include tm-icon-color(success-light);
+    }
+  }
+
+  &__success-dark {
+    @include tm-icon-color(success-dark);
+
+    &:hover {
+      @include tm-icon-color(success);
+    }
+  }
+
+  &__large {
+    @include tm-icon-size(24px);
+  }
+
+  &__medium {
+    @include tm-icon-size(16px);
+  }
+
+  &__small {
+    @include tm-icon-size(14px);
+  }
+}