@transfermarkt/global-styles 1.20.0 → 1.22.0

package/package.json

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

package/scss/base/index.scss

@@ -1419,7 +1419,7 @@ tm-latest-transfers {
 .wettbewerb-stats {
   display: block;
 
-  @include desktop {
+  @include breakpoint(laptop) {
     display: flex;
     flex-wrap: wrap;
   }
@@ -1427,7 +1427,7 @@ tm-latest-transfers {
   .columns {
     display: block;
 
-    @include desktop {
+    @include breakpoint(laptop) {
       display: flex;
       flex: 1;
       flex-direction: column;

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

@@ -5,10 +5,9 @@
 @use '../../../mixins/icon' as *;
 
 // "!importants" can be removed if the styles are not overridden by other styles (comes often from main.scss)
-
 .tm-btn {
   $font-size-small: rem-calc(12);
-  $font-size-medium: rem-calc(15);
+  $font-size-medium: rem-calc(14);
   $position: 'right';
 
   align-items: center;
@@ -54,7 +53,7 @@
   }
 
   &__primary {
-    background-color: tm-color('dark-blue-new');
+    background-color: tm-color('light-blue-new');
 
     &--large {
       height: rem-calc(40);
@@ -75,18 +74,13 @@
     }
 
     &:hover {
-      background-color: tm-color('light-blue-new');
+      background-color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
-
-      &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
-      }
+      background-color: tm-color('soft-sky');
+      color: tm-color('white');
     }
 
     &--warning {
@@ -112,7 +106,8 @@
 
   &__secondary {
     background-color: unset;
-    color: tm-color('admiral');
+    border: 1px solid;
+    color: tm-color('light-blue-new');
 
     &--large {
       text-transform: uppercase;
@@ -127,21 +122,22 @@
     }
 
     &:hover {
-      color: tm-color('light-blue-new');
+      border: 1px solid;
+      color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
+      border: 1px solid;
+      color: tm-color('soft-sky');
 
       &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
+        color: tm-color('soft-sky');
       }
     }
 
     &--warning {
+      border: 1px solid tm-color('warning-new');
       color: tm-color('warning-new');
 
       &:hover {
@@ -150,6 +146,7 @@
     }
 
     &--success {
+      border: 1px solid tm-color('success-dark');
       color: tm-color('success-dark');
 
       &:hover {
@@ -162,10 +159,43 @@
     }
   }
 
+  &__secondary-greys {
+    background-color: unset;
+    border: 1px solid tm-color('silver-mist');
+    color: tm-color('admiral');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      border: 1px solid tm-color('grey-new');
+      color: tm-color('admiral');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      border: 1px solid tm-color('silver-mist');
+      color: tm-color('silver-mist');
+
+      &:hover {
+        border: 1px solid tm-color('silver-mist');
+        color: tm-color('silver-mist');
+      }
+    }
+  }
+
   &__tertiary {
     background-color: tm-color('white');
-    border: 1px solid #d9dde2;
-    color: tm-color('admiral');
+    color: tm-color('light-blue-new');
 
     &--large {
       text-transform: uppercase;
@@ -180,17 +210,15 @@
     }
 
     &:hover {
-      color: tm-color('light-blue-new');
+      color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
+      color: tm-color('soft-sky');
 
       &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
+        color: tm-color('soft-sky');
       }
     }
 
@@ -210,6 +238,66 @@
       }
     }
   }
+
+  &__tertiary-blue {
+    background-color: unset;
+    color: tm-color('light-blue-new');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      color: tm-color('dark-blue-new');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      color: tm-color('soft-sky');
+
+      &:hover {
+        color: tm-color('soft-sky');
+      }
+    }
+  }
+
+  &__tertiary-grey {
+    background-color: unset;
+    color: tm-color('admiral');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      color: tm-color('admiral');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      color: tm-color('silver-mist');
+
+      &:hover {
+        color: tm-color('silver-mist');
+      }
+    }
+  }
 }
 
 .tm-icon-collect {

package/scss/variables/_colors.scss

@@ -9,15 +9,16 @@ $tm-colors: (
   'cadet-blue': #6da0bc,
   'cobalt': #00449e,
   'cyan': #5ca6ff,
+  'dark-blue-new': #1f62f1,
   'dark-blue': #1a3151,
   'dark-blue-150': #d9dde2,
-  'dark-blue-new': #0087ff,
+  'light-blue-new': #0087ff,
   'denim': #374457,
   'foggy-sky': #d2e3ed,
   'kashmir-blue': #596a81,
   'lighest-sky-blue': #bdd9ef,
   'light-blue': #1d75a3,
-  'light-blue-new': #069bff,
+  // 'light-blue-new': #069bff,
   'light-midnight': #16273e,
   'lightest-blue': #00aded,
   'medium-blue': #314f77,
@@ -29,6 +30,7 @@ $tm-colors: (
   'royal': #09224d,
   // #0d2051 see below
   'sapphire': #1274a5,
+  'soft-sky': #bedbff,
   // old tm-sapphire is now tm-royal
   'seagull': #8ebad1,
   'sky-blue': #0ebce6,
@@ -54,6 +56,7 @@ $tm-colors: (
   'pickle': #739f17,
   'reef': #ceddae,
   // greys
+  'silver-mist': #d9dde3,
   'abalone': #d5d5d5,
   'alice-blue': #eef6ff,
   'border-grey': #ccc,
@@ -101,7 +104,8 @@ $tm-colors: (
   'raspberry-ripple': #c8102e,
   'pure-red': #f00,
   'warning-new': #c90c0c,
-  'warning-dark-new': #ef1717,
+  // 'warning-dark-new': #ef1717,
+  'warning-dark-new': #ab1744,
   'warning-light-new': #ffedea,
   'pale-chestnut': #e6a8ae,
   // yellows