@transfermarkt/global-styles 1.25.4 → 1.26.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.4",
+  "version": "1.26.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);
+      }
     }
   }
 }