@transfermarkt/global-styles 1.25.5 → 1.27.0

package/README.md

@@ -11,6 +11,7 @@ npm i @transfermarkt/global-styles
 To use the stylelint config you have to edit your package.json
 
 ### package.json
+
 ```
 "stylelint": {"extends": "./node_modules/@transfermarkt/global-styles/config/stylelint/index.js"}
 ```
@@ -54,61 +55,76 @@ Maybe you have to specify the path with the node_modules folder
 ## Functions
 
 1. ### rem-calc
+
    #### Description
+
    Converts one or more pixel values into matching rem values.
    One or more values to convert. Be sure to separate them with spaces and not commas.
    Based on 16px.
+
    #### Usage
 
-    ```
-    .class {
-      font-size: rem-calc(12);
-    }
-    ```
+   ```
+   .class {
+     font-size: rem-calc(12);
+   }
+   ```
 
    #### Functionality
+
    Returns a list of converted values.
 
 2. ### strip-unit
 
    #### Description
+
    The `strip-unit` function in SCSS is designed to remove the unit from a numerical value, returning just the numeric
    part. This is particularly useful when you need to perform calculations or operations that require unitless numbers.
 
    #### Functionality
+
    Checks if the provided value is a number with a unit. If so, it strips off the unit by dividing the number by 1,
    effectively retaining only the numeric value. If the input is already a unitless number or not a number, it returns
    the value as is.
 
    #### Use Case
+
    Ideal for responsive designs and calculations where units (like px, em, rem) need to be removed from measurements to
    perform arithmetic or logical operations.
 
 3. ### tm-color
+
    #### Description & Functionality
+
    Returns the HEX value of a specific color.
 
    #### Usage
+
    ```
    .class {
      color: tm-color(gun-powder);
    }
    ```
+
 4. ### tm-font
+
    #### Description
+
    Returns a font set of the given name -> see font variables for available sets.
+
    #### Usage
+
    ```
    .class {
      font-family: tm-font('septenary');
    }
    ```
-   
-    **Warning:** Using tm-font with 'primary' is deprecated!
+
+   **Warning:** Using tm-font with 'primary' is deprecated!
 
 5. ### zf-to-rem
    #### Description
-   Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel
+   Converts a pixel value to matching rem value. _Any_ value passed, regardless of unit, is assumed to be a pixel
    value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size`
    variable.
 

package/package.json

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

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

@@ -115,9 +115,11 @@
       }
     }
 
-    &:hover {
-      background-color: tm-color('dark-blue-new');
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        background-color: tm-color('dark-blue-new');
+        text-decoration: none;
+      }
     }
 
     &--disabled {
@@ -129,9 +131,11 @@
       background-color: tm-color('warning-light-new');
       color: tm-color('warning-new');
 
-      &:hover {
-        background-color: tm-color('warning-new');
-        color: tm-color('warning-light-new');
+      @media (hover: hover) {
+        &:hover {
+          background-color: tm-color('warning-new');
+          color: tm-color('warning-light-new');
+        }
       }
     }
 
@@ -139,9 +143,11 @@
       background-color: tm-color('success-light');
       color: tm-color('success');
 
-      &:hover {
-        background-color: tm-color('success-dark');
-        color: tm-color('success-light');
+      @media (hover: hover) {
+        &:hover {
+          background-color: tm-color('success-dark');
+          color: tm-color('success-light');
+        }
       }
     }
   }
@@ -163,18 +169,22 @@
       font-size: $font-size-small;
     }
 
-    &:hover {
-      border: 1px solid;
-      color: tm-color('dark-blue-new');
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        border: 1px solid;
+        color: tm-color('dark-blue-new');
+        text-decoration: none;
+      }
     }
 
     &--disabled {
       border: 1px solid;
       color: tm-color('soft-sky');
 
-      &:hover {
-        color: tm-color('soft-sky');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('soft-sky');
+        }
       }
     }
 
@@ -182,8 +192,10 @@
       border: 1px solid tm-color('warning-new');
       color: tm-color('warning-new');
 
-      &:hover {
-        color: tm-color('warning-dark-new');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('warning-dark-new');
+        }
       }
     }
 
@@ -191,8 +203,10 @@
       border: 1px solid tm-color('success-dark');
       color: tm-color('success-dark');
 
-      &:hover {
-        color: tm-color('success');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('success');
+        }
       }
     }
 
@@ -218,19 +232,23 @@
       font-size: $font-size-small;
     }
 
-    &:hover {
-      border: 1px solid tm-color('grey-new');
-      color: tm-color('admiral');
-      text-decoration: none;
+    @media (hover: hover) {
+      &: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');
+      @media (hover: hover) {
+        &:hover {
+          border: 1px solid tm-color('silver-mist');
+          color: tm-color('silver-mist');
+        }
       }
     }
   }
@@ -251,32 +269,40 @@
       font-size: $font-size-small;
     }
 
-    &:hover {
-      color: tm-color('dark-blue-new');
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        color: tm-color('dark-blue-new');
+        text-decoration: none;
+      }
     }
 
     &--disabled {
       color: tm-color('soft-sky');
 
-      &:hover {
-        color: tm-color('soft-sky');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('soft-sky');
+        }
       }
     }
 
     &--warning {
       color: tm-color('warning-new');
 
-      &:hover {
-        color: tm-color('warning-dark-new');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('warning-dark-new');
+        }
       }
     }
 
     &--success {
       color: tm-color('success-dark');
 
-      &:hover {
-        color: tm-color('success');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('success');
+        }
       }
     }
   }
@@ -297,16 +323,20 @@
       font-size: $font-size-small;
     }
 
-    &:hover {
-      color: tm-color('dark-blue-new');
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        color: tm-color('dark-blue-new');
+        text-decoration: none;
+      }
     }
 
     &--disabled {
       color: tm-color('soft-sky');
 
-      &:hover {
-        color: tm-color('soft-sky');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('soft-sky');
+        }
       }
     }
   }
@@ -327,16 +357,20 @@
       font-size: $font-size-small;
     }
 
-    &:hover {
-      color: tm-color('admiral');
-      text-decoration: none;
+    @media (hover: hover) {
+      &:hover {
+        color: tm-color('admiral');
+        text-decoration: none;
+      }
     }
 
     &--disabled {
       color: tm-color('silver-mist');
 
-      &:hover {
-        color: tm-color('silver-mist');
+      @media (hover: hover) {
+        &:hover {
+          color: tm-color('silver-mist');
+        }
       }
     }
   }
@@ -383,9 +417,11 @@
       transform: rotate(180deg);
     }
 
-    &:hover {
-      @include tm-icon-color('lightblue-light');
-    }
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color('lightblue-light');
+      }
+   }
   }
 
   &__arrow-right {
@@ -412,8 +448,10 @@
       stroke-width: 1.2;
     }
 
-    &:hover {
-      @include tm-icon-color('lightblue-light');
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color('lightblue-light');
+      }
     }
   }
 
@@ -443,8 +481,10 @@
       transform: rotate(180deg);
     }
 
-    &:hover {
-      @include tm-icon-color('lightblue-light');
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color('lightblue-light');
+      }
     }
   }
 
@@ -1863,8 +1903,10 @@
   &__admiral {
     @include tm-icon-color(admiral);
 
-    &:hover {
-      @include tm-icon-color(lightblue-light);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(lightblue-light);
+      }
     }
   }
 
@@ -1879,32 +1921,40 @@
   &__warning-dark {
     @include tm-icon-color(warning-dark);
 
-    &:hover {
-      @include tm-icon-color(white);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(white);
+      }
     }
   }
 
   &__warning {
     @include tm-icon-color(warning-dark);
 
-    &:hover {
-      @include tm-icon-color(warning);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(warning);
+      }
     }
   }
 
   &__success {
     @include tm-icon-color(success);
 
-    &:hover {
-      @include tm-icon-color(success-light);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(success-light);
+      }
     }
   }
 
   &__success-dark {
     @include tm-icon-color(success-dark);
 
-    &:hover {
-      @include tm-icon-color(success);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(success);
+      }
     }
   }
 
@@ -1915,8 +1965,10 @@
   &__inverted {
     @include tm-icon-color(white);
 
-    &:hover {
-      @include tm-icon-color(lightblue-light);
+    @media (hover: hover) {
+      &:hover {
+        @include tm-icon-color(lightblue-light);
+      }
     }
   }
 }

package/scss/utils/components/info-cards/_index.scss

@@ -0,0 +1 @@
+@forward 'infos-cards';

package/scss/utils/components/info-cards/infos-cards.scss

@@ -0,0 +1,99 @@
+@use '../../../functions/rem-calc' as *;
+@use '../../../functions/tm-color' as *;
+@use '../../../functions/tm-font' as *;
+@use '../../../mixins/breakpoint' as *;
+@use '../../../mixins/icon' as *;
+
+.info-card__info {
+  border-radius: rem-calc(8);
+  padding: rem-calc(12) rem-calc(16);
+
+  &-text {
+    align-items: flex-start;
+    display: flex;
+    font-family: tm-font('septenary');
+    font-size: rem-calc(16);
+    font-variation-settings: 'wght' 400;
+    font-weight: initial;
+    gap: rem-calc(8);
+    line-height: rem-calc(24);
+    margin: 0;
+
+    @include breakpoint(laptop) {
+      font-size: rem-calc(14);
+      line-height: rem-calc(22);
+    }
+
+    &::before {
+      background-color: currentColor; /* stylelint-disable-line value-keyword-case */
+      content: '';
+      flex: 0 0 rem-calc(20);
+      height: rem-calc(20);
+      margin-top: rem-calc(2);
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/info.svg') no-repeat center;
+      mask-size: contain;
+    }
+  }
+
+  &--alert {
+    background-color: tm-color('warning-light-new');
+    color: tm-color('warning-new');
+
+    .info-card__info-text::before {
+      background-color: tm-color('warning-dark-new');
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/attention.svg') no-repeat center;
+      mask-size: contain;
+    }
+  }
+
+  &--blue {
+    background-color: tm-color('alice-blue');
+    color: tm-color('slate-blue');
+
+    .info-card__info-text::before {
+      background-color: tm-color('slate-blue');
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/info.svg') no-repeat center;
+      mask-size: contain;
+    }
+  }
+
+  &--blue-new {
+    background-color: tm-color('alice-blue');
+    color: tm-color('admiral');
+
+    .info-card__info-text::before {
+      background-color: tm-color('light-blue-new');
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/info.svg') no-repeat center;
+      mask-size: contain;
+    }
+  }
+
+  &--success {
+    background-color: tm-color('success-light');
+    color: tm-color('success-dark');
+
+    .info-card__info-text::before {
+      background-color: tm-color('success-dark');
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/success-check.svg') no-repeat center;
+      mask-size: contain;
+    }
+  }
+
+  &--border {
+    background-color: tm-color('white');
+    border: rem-calc(1) solid tm-color('silver-mist');
+    color: tm-color('admiral');
+
+    .info-card__info-text::before {
+      background-color: tm-color('ash-grey');
+
+      /* stylelint-disable-next-line property-no-vendor-prefix */
+      -webkit-mask: url('https://tmsi.akamaized.net/tm-svg-icons/info.svg') no-repeat center;
+      mask: url('https://tmsi.akamaized.net/tm-svg-icons/info.svg') no-repeat center;
+
+      /* stylelint-disable-next-line property-no-vendor-prefix */
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+  }
+}

package/scss/variables/_colors.scss

@@ -140,6 +140,8 @@ $tm-colors: (
   'brand-youtube': #f2342c,
   'brand-rss': #f60,
   'brand-community': #1d75a3,
-  'brand-wahretabelle': #429535
+  'brand-wahretabelle': #429535,
+  // new colors to discuss
+  'slate-blue': #4c5e78,
+  'ash-grey': #6b7280
 );
-