@transfermarkt/global-styles 1.0.4 → 1.1.0

package/README.md

@@ -1 +1,117 @@
-# Global Styles for tm
+# Global Styles for Transfermarkt projects
+
+## Install
+
+```
+npm i @transfermarkt/global-styles
+```
+
+## Import
+
+To import the styles you have 2 options:
+
+1. Import all SCSS files at once (not recommended)
+   ```
+   @use '@transfermarkt/global-styles
+   ```
+2. Include parts of global-styles
+   ```
+   @use '@transfermarkt/global-styles/scss/functions' as *;
+   ```
+
+Maybe you have to specify the path with the node_modules folder
+
+```
+@use 'path-to-node_modules-folder/@transfermarkt/global-styles/scss/functions' as *;
+```
+
+## 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);
+    }
+    ```
+
+   #### 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(primary);
+   }
+   ```
+
+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
+   value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size`
+   variable.
+
+## Mixins
+
+`breakpoint`
+
+### Description
+
+Generates a media query for the given breakpoint.
+
+### Usage
+
+```
+.class {
+  @include breakpoint(desktop) {
+    width: 200px;
+  }
+```
+
+## Variables
+
+1. ### Colors
+   #### Description
+   Color palette of the colors currently used in the Transfermarkt projects.
+   [Here](scss/variables/_colors.scss) you can find the available colors.
+   #### Usage
+   Should only be used via the `tm-color` function.
+2. ### Fonts
+   #### Description
+   Collection of font sets currently in use in the Transfermarkt projects.
+   [Here](scss/variables/_fonts.scss) are the available font sets.
+   #### Usage
+   Should only be used via the `tm-font` function.

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.0.4",
-  "description": "Global stylings, colors and fonts for the transfermarkt web and apps.",
+  "version": "1.1.0",
+  "description": "Shared styles of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",
-  "scripts": {},
+  "main": "scss/index.scss",
+  "style": "scss/index.scss",
+  "scripts": {
+    "lint": "stylelint 'scss/**/*.{css,scss}'",
+    "prepare": "husky install",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "volta": {
     "node": "20.11.0"
   },
@@ -13,6 +19,26 @@
     "tag": "latest",
     "access": "public"
   },
+  "devDependencies": {
+    "@transfermarkt/prettier-config": "^1.3.0",
+    "@transfermarkt/semantic-release-config": "1.1.13",
+    "@transfermarkt/stylelint-config": "^2.0.0",
+    "husky": "^9.0.10",
+    "lint-staged": "^15.2.0"
+  },
+  "peerDependencies": {
+    "sass-map-get-next-prev": "^1.0.0"
+  },
+  "stylelint": {
+    "extends": "@transfermarkt/stylelint-config",
+    "customSyntax": "postcss-scss"
+  },
+  "prettier": "@transfermarkt/prettier-config",
+  "lint-staged": {
+    "*.scss": [
+      "prettier --parser scss --write"
+    ]
+  },
   "release": {
     "extends": "@transfermarkt/semantic-release-config",
     "plugins": [
@@ -23,8 +49,5 @@
         }
       ]
     ]
-  },
-  "devDependencies": {
-    "@transfermarkt/semantic-release-config": "1.1.13"
   }
 }

package/scss/functions/_index.scss

@@ -0,0 +1,3 @@
+@forward 'tm-color';
+@forward 'tm-font';
+@forward 'rem-calc';

package/scss/functions/_map-get-next.scss

@@ -0,0 +1,16 @@
+@function map-get-next($map, $key) {
+  $next: null;
+  $found: false;
+
+  @each $k, $v in $map {
+    @if $k == $key {
+      $found: true;
+    } @else if $found {
+      $next: $v;
+
+      @return $next;
+    }
+  }
+
+  @return $next;
+}

package/scss/functions/_rem-calc.scss

@@ -0,0 +1,47 @@
+@use 'sass:list';
+@use 'strip-unit' as *;
+@use 'zf-to-rem' as *;
+
+// Example usage: font-size: rem-calc(2px); padding: rem-calc(10px 5px 0)
+/* stylelint-disable */
+$global-font-size: 16px;
+
+/// Converts one or more pixel values into matching rem values.
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas.
+// If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of
+// the box, this is 16px. If this parameter is `null`, the function will reference the `$global-font-size` variable as
+// the base.
+/// @returns {List} A list of converted values.
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: list.length($values);
+
+  // If no base is defined, defer to the global font size
+  @if not $base {
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
+  }
+
+  // Using rem as base allows correct scaling
+  @if unit($base) == 'rem' {
+    $base: strip-unit($base) * 16px;
+  }
+
+  @if $count == 1 {
+    @return -zf-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: list.append($rem-values, -zf-to-rem(list.nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}
+
+/* stylelint-enable */

package/scss/functions/_strip-unit.scss

@@ -0,0 +1,9 @@
+@use 'sass:math';
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, $number * 0 + 1);
+  }
+
+  @return $number;
+}

package/scss/functions/_tm-color.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../variables';
+
+@function tm-color($color-name) {
+  $color-value: map.get(variables.$tm-colors, #{$color-name});
+
+  @if not $color-value {
+    @error 'Color #{$color-name} does not exist in color map.';
+  }
+
+  @return #{$color-value};
+}

package/scss/functions/_tm-font.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../variables';
+
+@function tm-font($font-name) {
+  $font-value: map.get(variables.$tm-fonts, #{$font-name});
+
+  @if not $font-value {
+    @error 'Font #{$font-name} does not exist in font map.';
+  }
+
+  @return #{$font-value};
+}

package/scss/functions/_zf-to-rem.scss

@@ -0,0 +1,35 @@
+@use 'sass:math';
+@use 'strip-unit' as *;
+
+/// 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.
+/// @access private
+/// @param {Number} $value - Pixel value to convert.
+/// @param {Number} $base [null] - Base for pixel conversion.
+/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are
+// passed through as is.
+@function -zf-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
+  // Transform em into rem if someone hands over 'em's
+  @if unit($value) == 'em' {
+    $value: strip-unit($value) * 1rem;
+  }
+
+  // Calculate rem if units for $value is not rem or em
+  @if unit($value) != 'rem' {
+    $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
+  }
+
+  // Turn 0rem into 0
+  @if $value == '0rem' {
+    $value: 0;
+  }
+
+  @return $value;
+}

package/scss/index.scss

@@ -0,0 +1,3 @@
+@forward 'functions';
+@forward 'mixins';
+@forward 'variables';

package/scss/mixins/_breakpoint.scss

@@ -0,0 +1,53 @@
+// Source: https://rimdev.io/making-media-query-mixins-with-sass/
+
+@use 'sass:map';
+@use '../functions/map-get-next' as *;
+@use '../variables/breakpoints' as *;
+
+/* stylelint-disable */
+
+@mixin breakpoint($breakpoint, $mode: min) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Get the breakpoint value.
+    $breakpoint-value: map.get($breakpoints, $breakpoint);
+    $breakpoint-next-value: map-get-next($breakpoints, $breakpoint);
+
+    @if $mode == range {
+      @media (min-width: $breakpoint-value) and (max-width: map-get-next($breakpoints, $breakpoint) - 1) {
+        @content;
+      }
+    }
+
+    @if $mode == max {
+      @media (max-width: ($breakpoint-value - 1)) {
+        @content;
+      }
+    } @else if $mode == min {
+      @media (min-width: $breakpoint-value) {
+        @content;
+      }
+    } @else {
+      @media ($mode: $breakpoint-value) {
+        @content;
+      }
+    }
+
+    // If the breakpoint doesn't exist in the map.
+  } @else {
+    @if $mode == max {
+      @media (max-width: $breakpoint) {
+        @content;
+      }
+    } @else if $mode == min {
+      @media (min-width: $breakpoint) {
+        @content;
+      }
+    } @else {
+      @media ($mode: $breakpoint) {
+        @content;
+      }
+    }
+  }
+}
+
+/* stylelint-enable */

package/scss/mixins/_index.scss

@@ -0,0 +1 @@
+@forward 'breakpoint';

package/scss/variables/_breakpoints.scss

@@ -0,0 +1,14 @@
+// BREAKPOINTS
+
+/* stylelint-disable */
+$breakpoints: (
+  base: 0,
+  phone: 400px,
+  tablet: 600px,
+  laptop: 769px,
+  desktop: 1024px,
+  desktoplg: 1280px,
+  desktopxlg: 1440px
+);
+
+/* stylelint-enable */

package/scss/variables/_colors.scss

@@ -0,0 +1,124 @@
+$tm-colors: (
+  'white': #fff,
+  'black': #000,
+  // blues
+  'admiral': #00193f,
+  'azure': #007aff,
+  // old value of tm-azure is now tm-medium-blue
+  'blue': #06183d,
+  'cadet-blue': #6da0bc,
+  'cobalt': #00449e,
+  'cyan': #5ca6ff,
+  'dark-blue': #1a3151,
+  'denim': #374457,
+  'foggy-sky': #d2e3ed,
+  'kashmir-blue': #596a81,
+  'lighest-sky-blue': #bdd9ef,
+  'light-blue': #1d75a3,
+  'light-midnight': #16273e,
+  'lightest-blue': #00aded,
+  'medium-blue': #314f77,
+  'midnight': #17283e,
+  'navy': #001942,
+  'pacific-blue': #0a96d6,
+  // $$carolinablue
+  'prussian-blue': #003555,
+  'royal': #09224d,
+  // #0d2051 see below
+  'sapphire': #1274a5,
+  // old tm-sapphire is now tm-royal
+  'seagull': #8ebad1,
+  'sky-blue': #0ebce6,
+  'sky-blue-transparent': #3fa6fc0d,
+  'tiffany': #21babf,
+  'turquoise': #02ced1,
+  // $tiffanyblue
+  // greens
+  'caper': #b9cf8b,
+  'dark-green': #008000,
+  'dealdone': #0cd97a,
+  'forest-green': #35652f,
+  // old name -> $wahretabelleDark
+  'green': #749f18,
+  'lightest-green': #e3ecd1,
+  'limeade': #55a826,
+  'olivine': #a5c169,
+  'pastel-green': #00bc4b,
+  'pear': #7ac142,
+  'pickle': #739f17,
+  'reef': #ceddae,
+  // greys
+  'abalone': #d5d5d5,
+  'alice-blue': #eef6ff,
+  'border-grey': #ccc,
+  'cool-grey': #ececec,
+  'dark-dim': #666,
+  // new $stealgrey
+  'dark-grey': #333,
+  // $darkgrey $anthracite
+  'dark-whisper': #e6e6e6,
+  'dim-grey': #6c6c6c,
+  'gainsboro': #e5e6e7,
+  'grey': #ddd,
+  'grey-blue': #8b8f9b,
+  'gun-powder': #585859,
+  // $$flaggenrahmen
+  'hawkes-blue': #d4d8de,
+  'light-grey': #e4e4e4,
+  'light-purplish-grey': #bbb,
+  'lightest-grey': #f2f2f2,
+  'lightest-grey-blue': #d5e4ec,
+  'lunar-rock': #c5c5c5,
+  'middle-grey': #57585a,
+  'middle-light-grey': #999,
+  'silver': #bbb,
+  'slate-grey': #728094,
+  'smoke': #f3f3f3,
+  // the new tm-ultralight-grey
+  'whisper': #e9e9e9,
+  // the new $rivergrey
+  'white-smoke': #f0f0f0,
+  // reds
+  'red': #8f1a29,
+  'danger': #d10414,
+  // maybe another name?
+  'dark-red': #bd2e2b,
+  'chili': #9c002d,
+  'vermilion': #d9020d,
+  'crimson': #a91b39,
+  'venetian-red': #b80718,
+  'peachpuff': #f8cfcd,
+  'light-red': #c03,
+  'raspberry-ripple': #c8102e,
+  'pure-red': #f00,
+  'pale-chestnut': #e6a8ae,
+  // yellows
+  'yellow': #efa93b,
+  'sunflower': #e6b40a,
+  'bird-flower': #d8c206,
+  'lightest-yellow': #fff6db,
+  'pure-yellow': #ff0,
+  'kournikova': #ffd24a,
+  'oasis': #ffeebd,
+  'paris-daisy': #ffea47,
+  // variations
+  'brown': #1c0e05,
+  'fuchsia': #d047d1,
+  'gold': #dcb24e,
+  'goldenrod': #d4c06a,
+  'indigo': #400080,
+  'magenta': #e20074,
+  'mustard': #a88040,
+  'orange': #ff9f05,
+  'petrol': #16738f,
+  'purple': #8d5ba1,
+  // brands
+  'brand-facebook': #37589a,
+  'brand-snapchat': #fffd00,
+  'brand-twitter': #0ea8e2,
+  'brand-whatsapp': #20b300,
+  'brand-youtube': #f2342c,
+  'brand-rss': #f60,
+  'brand-community': #1d75a3,
+  'brand-wahretabelle': #429535
+);

package/scss/variables/_fonts.scss

@@ -0,0 +1,9 @@
+$tm-fonts: (
+  'primary': "'Source Sans Pro', 'Source Sans Pro-fallback', sans-serif",
+  'secondary': "'Oswald-VF', 'Oswald-fallback', sans-serif",
+  'tertiary': "'OSB', 'OSB-fallback', sans-serif",
+  'quaternary': "'OSL', 'OSL-fallback', sans-serif",
+  'quinary': "'Arial', sans-serif",
+  'senary': "'Times New Roman', sans-serif",
+  'septenary': "'SourceSansPro-VF', sans-serif"
+);

package/scss/variables/_index.scss

@@ -0,0 +1,3 @@
+@forward 'colors';
+@forward 'fonts';
+@forward 'breakpoints';