@transfermarkt/global-styles 1.9.0 → 1.10.0

package/config/stylelint/index.js

@@ -17,10 +17,12 @@ module.exports = {
       }
     ],
     "at-rule-disallowed-list": [
-      ["media","import"],
-      {severity: (atRule) => {
+      ["media", "import"],
+      {
+        severity: (atRule) => {
           return atRule.includes("import") ? "error" : "warning"
-        }}],
+        }
+      }],
     'unit-disallowed-list': ['px',
       {
         'ignoreProperties': {
@@ -44,7 +46,21 @@ module.exports = {
     ],
     'selector-pseudo-class-no-unknown': [
       true,
-      { ignorePseudoClasses: 'global' },
+      {ignorePseudoClasses: 'global'},
     ],
+    "selector-class-pattern": [
+      "^[a-z]([a-z0-9]*)(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",
+      {
+        "severity": "warning",
+        "message": "Unexpected class selector format. Class selectors must be written in kebab-case or BEM format, e.g., my-class-name or my__class--name."
+      }
+    ],
+    'selector-id-pattern': [
+      '^[a-z]([a-z0-9]+(-[a-z0-9]+)*)?$',
+      {
+        severity: 'warning',
+        message: 'Unexpected ID selector format. ID selectors must be written in kebab-case, e.g., my-id-name.'
+      }
+    ]
   },
 };

package/package.json

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

package/scss/mixins/_icon.scss

@@ -1,23 +1,71 @@
-@mixin tm-icon($name, $position) {
-  @if $position == 'left' {
-    &::after {
-      background: url('https://tmsi.akamaized.net/tm-svg-icons/arrow/right.svg');
-      bottom: 0;
-      color: white;
-      content: '';
-      fill: white;
+@mixin tm-icon($name, $position, $state: 'default') {
+  $base-url: 'https://tmsi.akamaized.net/tm-svg-icons';
+  $image-url: '#{$base-url}/#{$name}.svg';
+
+  &::after {
+    background: url('#{$image-url}');
+    bottom: 0;
+    color: white;
+    content: '';
+    fill: white;
+    height: 20px;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    width: 20px;
+
+    @if $position == 'left' {
+      left: 20px;
+      transform: rotate(180deg);
+    } @else if $position == 'right' {
+      right: 20px;
+    }
+
+    @if $state == 'disabled' {
+      filter: invert(80%) sepia(10%) saturate(0%) brightness(90%) contrast(80%);
+    } @else if $state == 'default' {
       filter: invert(100%)
         sepia(100%)
         saturate(1%)
         hue-rotate(207deg)
         brightness(102%)
         contrast(102%);
-      height: 20px;
-      margin: auto;
-      position: absolute;
-      right: 20px;
-      top: 0;
-      width: 20px;
+
+      &:hover {
+        filter: invert(90%)
+          sepia(90%)
+          saturate(10%)
+          hue-rotate(207deg)
+          brightness(110%)
+          contrast(110%);
+      }
+    } @else if $state == 'warning' {
+      filter: invert(77%)
+        sepia(38%)
+        saturate(5784%)
+        hue-rotate(359deg)
+        brightness(101%)
+        contrast(105%);
+
+      &:hover {
+        filter: invert(65%)
+          sepia(60%)
+          saturate(4500%)
+          hue-rotate(359deg)
+          brightness(105%)
+          contrast(110%);
+      }
+    } @else if $state == 'success' {
+      filter: invert(58%) sepia(79%) saturate(415%) hue-rotate(93deg) brightness(95%) contrast(91%);
+
+      &:hover {
+        filter: invert(58%)
+          sepia(90%)
+          saturate(500%)
+          hue-rotate(93deg)
+          brightness(100%)
+          contrast(95%);
+      }
     }
   }
 }

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

@@ -4,7 +4,8 @@
 @use '../../../mixins/icon' as *;
 
 .tm-btn {
-  background-color: tm-color('dark-blue-new');
+  $position: 'right';
+
   border: none;
   border-radius: 8px;
   color: tm-color('white');
@@ -20,15 +21,33 @@
   position: relative;
   text-decoration: none;
 
-  @include tm-icon('test', 'left');
-
   &__icon {
-    &--small {
-      @include tm-icon('test', 'left');
+    &--left {
+      &.tm-btn__primary--large {
+        @include tm-icon('arrow', 'left', 'default');
+      }
+
+      &.tm-btn__primary--medium,
+      &.tm-btn__primary--small {
+        @include tm-icon('chevron', 'left', 'default');
+      }
+    }
+
+    &--right {
+      &.tm-btn__primary--large {
+        @include tm-icon('arrow', 'right', 'default');
+      }
+
+      &.tm-btn__primary--medium,
+      &.tm-btn__primary--small {
+        @include tm-icon('chevron', 'right', 'default');
+      }
     }
   }
 
   &__primary {
+    background-color: tm-color('dark-blue-new');
+
     &--large {
       padding: rem-calc(8) rem-calc(40);
       text-transform: uppercase;
@@ -76,4 +95,92 @@
       }
     }
   }
+
+  &__secondary {
+    background-color: tm-color('white');
+    color: tm-color('admiral');
+    opacity: 1;
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: rem-calc(14);
+    }
+
+    &--small {
+      font-size: rem-calc(12);
+    }
+
+    &:hover {
+      color: tm-color('light-blue-new');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      background-color: tm-color('gainsboro-new');
+      color: tm-color('grey-new');
+    }
+
+    &--warning {
+      color: tm-color('warning-new');
+
+      &:hover {
+        color: #ef1717;
+      }
+    }
+
+    &--success {
+      color: tm-color('success-new');
+
+      &:hover {
+        color: #30996c;
+      }
+    }
+  }
+
+  &__tertiary {
+    background-color: tm-color('white');
+    border: 1px solid #d9dde2;
+    color: tm-color('admiral');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: rem-calc(14);
+    }
+
+    &--small {
+      font-size: rem-calc(12);
+    }
+
+    &:hover {
+      color: tm-color('light-blue-new');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      background-color: tm-color('gainsboro-new');
+      color: tm-color('grey-new');
+    }
+
+    &--warning {
+      color: tm-color('warning-new');
+
+      &:hover {
+        color: #ef1717;
+      }
+    }
+
+    &--success {
+      color: tm-color('success-new');
+
+      &:hover {
+        color: #30996c;
+      }
+    }
+  }
 }

package/scss/variables/_colors.scss

@@ -10,6 +10,7 @@ $tm-colors: (
   'cobalt': #00449e,
   'cyan': #5ca6ff,
   'dark-blue': #1a3151,
+  'dark-blue-150': #d9dde2,
   'dark-blue-new': #0087ff,
   'denim': #374457,
   'foggy-sky': #d2e3ed,
@@ -99,6 +100,7 @@ $tm-colors: (
   'raspberry-ripple': #c8102e,
   'pure-red': #f00,
   'warning-new': #c90c0c,
+  'warning-dark-new': #ef1717,
   'warning-light-new': #ffedea,
   'pale-chestnut': #e6a8ae,
   // yellows