@transfermarkt/global-styles 1.60.0 → 1.62.0

package/package.json

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

package/scss/variables/_figma-variables.scss

@@ -90,6 +90,7 @@ $figma-variables: (
   'color-red-default': #ef1717,
   'color-red-lighter': #fff1f1,
   'color-red-darker': #c90c0c,
+  'color-red-light': #ff9c9c,
 
   // lightblue
   'color-lightblue-default': #0087ff,
@@ -127,6 +128,11 @@ $figma-variables: (
   'scale-1200-(48)': 48,
   'scale-1600-(64)': 64,
   'scale-500-(20)': 20,
+  // icon
+  // stroke
+  'scale-icon-stroke-lg': 2,
+  'scale-icon-stroke-md': 1.5,
+  'scale-icon-stroke-sm': 1.4,
 
   // ALIAS
   // primary
@@ -193,7 +199,8 @@ $figma-variables: (
   // error
   'error-default': 'color-red-default',
   'error-dark': 'color-red-darker',
-  'error-light': 'color-red-lighter',
+  'error-lighter': 'color-red-lighter',
+  'error-light': 'color-red-light',
 
   // highlight
   'highlight-default': 'color-skyblue_old-default',
@@ -226,267 +233,259 @@ $figma-variables: (
   'secondary-50': 'color-lightblue-50',
 
   // MAPPED
-  // text
+  // _text
   'text-heading': 'primary-default',
-  'text-body': 'primary-600',
-  'text-action': 'secondary-default',
-  'text-action-hover': 'secondary-dark',
-  'text-disabled': 'secondary-400',
-  'text-information': 'primary-600',
-  'text-success': 'success-dark',
-  'text-warning': 'warning-dark',
-  'text-error': 'error-dark',
+  'text-heading-on-blue': 'neutral-white',
+  'text-primary': 'primary-default',
+  'text-primary-on-blue': 'neutral-white',
+  'text-default': 'primary-600',
+  'text-default-on-blue': #000,
+  'text-primary-light': 'primary-400',
+  'text-primary-light-on-blue': #000,
+  'text-primary-lightest': 'primary-200',
+  'text-primary-lightest-on-blue': 'primary-200',
+  'text-primary-disabled': 'primary-150',
+  'text-primary-disabled-on-blue': #000,
+  'text-secondary': 'secondary-default',
+  'text-secondary-on-blue': 'secondary-default',
+  'text-secondary-dark': 'secondary-dark',
+  'text-secondary-dark-on-blue': 'secondary-dark',
+  'text-secondary-disabled': 'secondary-400',
+  'text-secondary-disabled-on-blue': 'neutral-white-30',
   'text-on-action': 'neutral-white',
+  'text-on-action-on-blue': 'neutral-white',
   'text-on-disabled': 'neutral-white',
-  // form-field
-  'text-form-field-label': 'primary-600',
-  'text-form-field-default': 'primary-200',
-  'text-form-field-filled': 'primary-600',
-  'text-form-field-error': 'error-dark',
-  'text-form-field-disabled': 'primary-150',
-  'text-form-field-assistive-text': 'primary-500',
-  'text-form-field-assistive-text-success': 'success-dark',
-  'text-form-field-assistive-text-unmet': 'primary-500',
-  'text-form-field-link': 'secondary-default',
-  'text-form-field-link-hover': 'secondary-dark',
-
-  // tab
-  'text-tab-selected': 'secondary-default',
-  'text-tab-unselected': 'primary-400',
-
-  // banner
-  'text-banner-information': 'primary-700',
-  'text-banner-success': 'success-dark',
-  'text-banner-error': 'error-dark',
-  'text-banner-neutral': 'primary-default',
-
-  // radio-button
-  'text-radio-button-default': 'primary-600',
-  'text-radio-button-disabled': 'primary-150',
-
-  // checkbox
-  'text-checkbox-default': 'primary-600',
-  'text-checkbox-disabled': 'primary-150',
-
-  // button
-  'text-button-default': 'neutral-white',
-  'text-button-hover': 'neutral-white',
-  'text-button-disabled': 'neutral-white',
-  'text-button-secondary-default': 'secondary-default',
-  'text-button-secondary-hover': 'secondary-dark',
-  'text-button-secondary-disabled': 'secondary-400',
-  'text-button-tertiary-default': 'secondary-default',
-  'text-button-tertiary-hover': 'secondary-default',
-  'text-button-tertiary-disabled': 'secondary-400',
-  'text-button-secondary-grey-default': 'primary-default',
-  'text-button-secondary-grey-hover': 'primary-default',
-  'text-button-secondary-grey-disabled': 'primary-150',
-  'text-button-tertiary-grey-default': 'primary-default',
-  'text-button-tertiary-grey-hover': 'primary-default',
-  'text-button-tertiary-grey-disabled': 'primary-150',
-  'text-button-warning': 'neutral-white',
-  'text-button-warning-hover': 'neutral-white',
-  'text-button-warning-disabled': 'neutral-white',
-  'text-button-tertiary-warning': 'error-default',
-  'text-button-tertiary-warning-hover': 'error-dark',
-
-  // heading
-  'text-heading-default': 'primary-default',
-
-  // body
-  'text-body-default': 'primary-600',
-  'text-body-disabled': 'color-darkblue-150',
-
-  // dropdown
-  'text-dropdown-default': 'primary-600',
-
-  // link
-  'text-link-default': 'secondary-default',
-  'text-link-hover': 'secondary-dark',
-
-  // divider
-  'text-divider-default': 'primary-400',
-
-  // icon
-  'icon-secondary': 'primary-400',
-  'icon-information': 'primary-700',
-  'icon-success': 'success-dark',
-  'icon-warning': 'warning-dark',
-  'icon-error': 'error-dark',
-  'icon-disabled': 'primary-150',
-  'icon-assistive-text-unmet': 'primary-400',
+  'text-on-disabled-on-blue': 'neutral-white-20',
+  'text-white-base': #000,
+  'text-white-base-on-blue': 'neutral-white',
+  'text-white-placeholder': #000,
+  'text-white-placeholder-on-blue': 'neutral-white-40',
+  'text-white-disabled': #000,
+  'text-white-disabled-on-blue': 'neutral-white-30',
+  'text-white-on-disabled': #000,
+  'text-white-on-disabled-on-blue': 'neutral-white-20',
+  'text-success': #000,
+  'text-success-on-blue': 'success-default',
+  'text-success-dark': 'success-dark',
+  'text-success-dark-on-blue': #000,
+  'text-warning-dark': 'warning-dark',
+  'text-warning-dark-on-blue': #000,
+  'text-error': 'error-default',
+  'text-error-on-blue': 'error-default',
+  'text-error-dark': 'error-dark',
+  'text-error-dark-on-blue': #000,
+  'text-error-disabled': 'error-light',
+  'text-error-disabled-on-blue': #000,
+  'text-warning': #000,
+  'text-warning-on-blue': 'warning-default',
+
+  // _surface
+  'surface-primary': 'primary-default',
+  'surface-primary-on-blue': 'primary-default',
+  'surface-primary-light': 'primary-400',
+  'surface-primary-light-on-blue': #000,
+  'surface-primary-lightest': 'primary-30',
+  'surface-primary-lightest-on-blue': #000,
+  'surface-secondary': 'secondary-default',
+  'surface-secondary-on-blue': 'secondary-default',
+  'surface-secondary-dark': 'secondary-dark',
+  'surface-secondary-dark-on-blue': 'secondary-dark',
+  'surface-secondary-disabled': 'secondary-400',
+  'surface-secondary-disabled-on-blue': #000,
+  'surface-hover': 'secondary-100',
+  'surface-hover-on-blue': #000,
+  'surface-information': 'secondary-100',
+  'surface-information-on-blue': #000,
+  'surface-default': 'neutral-white',
+  'surface-default-on-blue': 'primary-default',
+  'surface-white-surface-disabled': #000,
+  'surface-white-surface-disabled-on-blue': 'neutral-white-10',
+  'surface-success-light': 'success-light',
+  'surface-success-light-on-blue': #000,
+  'surface-error': 'error-default',
+  'surface-error-on-blue': 'error-default',
+  'surface-error-dark': 'error-dark',
+  'surface-error-dark-on-blue': #000,
+  'surface-error-lighter': 'error-lighter',
+  'surface-error-lighter-on-blue': #000,
+  'surface-error-disabled': 'error-lighter',
+  'surface-error-disabled-on-blue': #000,
+
+  // _icon
   'icon-primary': 'primary-default',
+  'icon-primary-on-blue': 'neutral-white',
+  'icon-primary-light': 'primary-400',
+  'icon-primary-light-on-blue': 'neutral-white',
+  'icon-primary-lightest': 'primary-200',
+  'icon-primary-lightest-on-blue': 'primary-200',
+  'icon-primary-disabled': 'primary-150',
+  'icon-primary-disabled-on-blue': #000,
+  'icon-secondary': 'secondary-default',
+  'icon-secondary-on-blue': 'secondary-default',
+  'icon-secondary-dark': 'secondary-dark',
+  'icon-secondary-dark-on-blue': 'secondary-dark',
+  'icon-secondary-disabled': 'secondary-400',
+  'icon-secondary-disabled-on-blue': 'neutral-white-30',
   'icon-on-action': 'neutral-white',
-  'icon-on-action-hover': 'neutral-white',
-  'icon-on-action-disabled': 'neutral-white',
-  'icon-on-action-secondary': 'secondary-default',
-  'icon-on-action-secondary-hover': 'secondary-dark',
-  'icon-on-action-secondary-disabled': 'secondary-400',
-  'icon-on-action-tertiary': 'secondary-default',
-  'icon-on-action-tertiary-hover': 'secondary-default',
-  'icon-on-action-tertiary-disabled': 'secondary-400',
-  'icon-on-action-secondary-grey': 'primary-default',
-  'icon-on-action-secondary-grey-hover': 'primary-default',
-  'icon-on-action-secondary-grey-disabled': 'primary-150',
-  'icon-on-action-tertiary-grey': 'primary-default',
-  'icon-on-action-tertiary-grey-hover': 'primary-default',
-  'icon-on-action-tertiary-grey-disabled': 'primary-150',
-  'icon-on-action-warning': 'neutral-white',
-  'icon-on-action-warning-hover': 'neutral-white',
-  'icon-on-action-warning-disabled': 'neutral-white',
-
-  // table
-  'table-highest': 'secondary-default',
-
-  // border
-  'border-container': 'primary-50',
-  'border-container-alt': #ddd,
-  // form-field
-  'border-form-field-default': 'primary-150',
-  'border-form-field-hover': 'primary-400',
-  'border-form-field-focus': 'secondary-default',
-  'border-form-field-error': 'error-dark',
-  'border-form-field-filled': 'primary-150',
-  'border-form-field-disabled': 'primary-150',
-
-  // button
-  'border-button-default': 'secondary-default',
-  'border-button-hover': 'secondary-dark',
-  'border-button-disabled': 'secondary-400',
-  'border-button-grey-default': 'primary-150',
-  'border-button-grey-hover': 'primary-400',
-  'border-button-secondary-grey-disabled': 'primary-150',
-
-  // radio-button
-  'border-radio-button-selected': 'secondary-default',
-  'border-radio-button-unselected': 'primary-150',
-  'border-radio-button-hover': 'primary-400',
-  'border-radio-button-disabled': 'primary-150',
-
-  // checkbox
-  'border-checkbox-selected': 'secondary-default',
-  'border-checkbox-unselected': 'primary-150',
-  'border-checkbox-hover': 'primary-400',
-  'border-checkbox-disabled': 'primary-150',
-
-  // flags
-  'border-flags-default': 'primary-600',
-
-  // banner
-  'border-banner-neutral': 'primary-150',
-
-  // dropdown
-  'border-dropdown-default': 'primary-150',
-  'border-dropdown-option-hover': 'secondary-400',
-
-  // divider
-  'border-divider-default': 'primary-150',
-
-  // radius
-  // width
-  // surface
-  // page
-  'surface-page-default': 'primary-50',
-  'surface-page-lighter': 'primary-30',
-
-  // button
-  'surface-button-default': 'secondary-default',
-  'surface-button-hover': 'secondary-dark',
-  'surface-button-primary-disabled': 'secondary-400',
-  'surface-button-warning': 'error-default',
-  'surface-button-warning-hover': 'error-dark',
-  'surface-button-warning-disabled': 'error-light',
-
-  // form-field
-  'surface-form-field-default': 'neutral-white',
-
-  // banner
-  'surface-banner-information': 'secondary-100',
-  'surface-banner-success': 'success-light',
-  'surface-banner-error': 'error-light',
-
-  // tab
-  'surface-tab-selected': 'secondary-default',
-
-  // modal
-  'surface-modal-default': 'neutral-white',
-
-  // radio-button
-  'surface-radio-button-selected': 'secondary-default',
-
-  // checkbox
-  'surface-checkbox-selected': 'secondary-default',
-
-  // dropdown
-  'surface-dropdown-default': 'neutral-white',
-  'surface-dropdown-hover': 'secondary-100',
-
-  // container
-  'surface-container-default': 'neutral-white',
-  'surface-container-light': 'primary-30',
-
-  // backdrop
-  'surface-backdrop-default': 'primary-400',
+  'icon-on-action-on-blue': 'neutral-white',
+  'icon-white-base': #000,
+  'icon-white-base-on-blue': 'neutral-white',
+  'icon-white-disabled': #000,
+  'icon-white-disabled-on-blue': 'neutral-white-30',
+  'icon-white-on-disabled': #000,
+  'icon-white-on-disabled-on-blue': 'neutral-white-20',
+  'icon-success': #000,
+  'icon-success-on-blue': 'success-default',
+  'icon-success-dark': 'success-dark',
+  'icon-success-dark-on-blue': #000,
+  'icon-warning-dark': 'warning-dark',
+  'icon-warning-dark-on-blue': #000,
+  'icon-error': 'error-default',
+  'icon-error-on-blue': 'error-default',
+  'icon-error-dark': 'error-dark',
+  'icon-error-dark-on-blue': #000,
+  'icon-error-disabled': 'error-light',
+  'icon-error-disabled-on-blue': #000,
+  'icon-warning': #000,
+  'icon-warning-on-blue': 'warning-default',
+
+  // _border
+  'border-primary-dark': 'primary-600',
+  'border-primary-dark-on-blue': #000,
+  'border-primary-light': 'primary-400',
+  'border-primary-light-on-blue': #000,
+  'border-default': 'primary-150',
+  'border-default-on-blue': #000,
+  'border-primary-lightest': 'primary-50',
+  'border-primary-lightest-on-blue': #000,
+  'border-secondary': 'secondary-default',
+  'border-secondary-on-blue': 'secondary-default',
+  'border-secondary-dark': 'secondary-dark',
+  'border-secondary-dark-on-blue': 'secondary-dark',
+  'border-secondary-disabled': 'secondary-400',
+  'border-secondary-disabled-on-blue': 'neutral-white-30',
+  'border-hover': 'secondary-400',
+  'border-hover-on-blue': #000,
+  'border-white-base': #000,
+  'border-white-base-on-blue': 'neutral-white',
+  'border-white-border': #000,
+  'border-white-border-on-blue': 'neutral-white-50',
+  'border-white-disabled': #000,
+  'border-white-disabled-on-blue': 'neutral-white-30',
+  'border-white-hover': #000,
+  'border-white-hover-on-blue': 'neutral-white-20',
+  'border-error': 'error-default',
+  'border-error-on-blue': 'error-default',
+  'border-error-dark': 'error-dark',
+  'border-error-dark-on-blue': #000,
+  'border-error-disabled': 'error-light',
+  'border-error-disabled-on-blue': #000,
+  'border-white-divider': #000,
+  'border-white-divider-on-blue': 'neutral-white-10',
 
   // RESPONSIVE
   // fontsize
   // body
-  'fontsize-body-lg': 16,
-  'fontsize-body-md': 14,
+  'fontsize-body-lg-desktop': 16,
+  'fontsize-body-lg': 18,
+  'fontsize-body-md-desktop': 14,
+  'fontsize-body-md': 16,
+  'fontsize-body-xl-desktop': 20,
   'fontsize-body-xl': 20,
-  'fontsize-body-sm': 12,
-  'fontsize-body-xs': 10,
+  'fontsize-body-sm-desktop': 12,
+  'fontsize-body-sm': 14,
+  'fontsize-body-xs-desktop': 10,
+  'fontsize-body-xs': 12,
 
   // headings
-  'fontsize-headings-h6': 14,
+  'fontsize-headings-h6-desktop': 14,
+  'fontsize-headings-h6': 16,
+  'fontsize-headings-h5-desktop': 20,
   'fontsize-headings-h5': 20,
+  'fontsize-headings-h4-desktop': 24,
   'fontsize-headings-h4': 24,
+  'fontsize-headings-h3-desktop': 32,
   'fontsize-headings-h3': 32,
+  'fontsize-headings-h2-desktop': 40,
   'fontsize-headings-h2': 40,
+  'fontsize-headings-h1-desktop': 48,
   'fontsize-headings-h1': 48,
 
   // line-height
   // body
-  'line-height-body-xs': 16,
-  'line-height-body-sm': 18,
-  'line-height-body-md': 22,
+  'line-height-body-xs-desktop': 16,
+  'line-height-body-xs': 18,
+  'line-height-body-sm-desktop': 18,
+  'line-height-body-sm': 22,
+  'line-height-body-md-desktop': 22,
+  'line-height-body-md': 24,
+  'line-height-body-xl-desktop': 32,
   'line-height-body-xl': 32,
-  'line-height-body-lg': 24,
+  'line-height-body-lg-desktop': 24,
+  'line-height-body-lg': 28,
 
   // headings
-  'line-height-headings-h6': 22,
+  'line-height-headings-h6-desktop': 22,
+  'line-height-headings-h6': 24,
+  'line-height-headings-h5-desktop': 32,
   'line-height-headings-h5': 32,
+  'line-height-headings-h4-desktop': 36,
   'line-height-headings-h4': 36,
+  'line-height-headings-h3-desktop': 40,
   'line-height-headings-h3': 40,
+  'line-height-headings-h2-desktop': 48,
   'line-height-headings-h2': 48,
+  'line-height-headings-h1-desktop': 56,
   'line-height-headings-h1': 56,
 
   // paragraph-spacing
   // body
-  'paragraph-spacing-body-xs': 6,
-  'paragraph-spacing-body-sm': 8,
-  'paragraph-spacing-body-md': 10,
+  'paragraph-spacing-body-xs-desktop': 6,
+  'paragraph-spacing-body-xs': 8,
+  'paragraph-spacing-body-sm-desktop': 8,
+  'paragraph-spacing-body-sm': 10,
+  'paragraph-spacing-body-md-desktop': 10,
+  'paragraph-spacing-body-md': 12,
+  'paragraph-spacing-body-lg-desktop': 12,
   'paragraph-spacing-body-lg': 12,
+  'paragraph-spacing-body-xl-desktop': 14,
   'paragraph-spacing-body-xl': 14,
 
   // headings
-  'paragraph-spacing-headings-h6': 10,
+  'paragraph-spacing-headings-h6-desktop': 10,
+  'paragraph-spacing-headings-h6': 12,
+  'paragraph-spacing-headings-h5-desktop': 14,
   'paragraph-spacing-headings-h5': 14,
+  'paragraph-spacing-headings-h4-desktop': 16,
   'paragraph-spacing-headings-h4': 16,
+  'paragraph-spacing-headings-h3-desktop': 20,
   'paragraph-spacing-headings-h3': 20,
+  'paragraph-spacing-headings-h2-desktop': 24,
   'paragraph-spacing-headings-h2': 24,
+  'paragraph-spacing-headings-h1-desktop': 28,
   'paragraph-spacing-headings-h1': 28,
 
   // spacing
+  'spacing-none-desktop': 'scale-0',
   'spacing-none': 'scale-0',
+  'spacing-3xs-desktop': 'scale-50-(2)',
   'spacing-3xs': 'scale-50-(2)',
+  'spacing-2xs-desktop': 'scale-100-(4)',
   'spacing-2xs': 'scale-100-(4)',
+  'spacing-xs-desktop': 'scale-200-(8)',
   'spacing-xs': 'scale-200-(8)',
+  'spacing-sm-desktop': 'scale-250-(10)',
   'spacing-sm': 'scale-250-(10)',
+  'spacing-md-desktop': 'scale-300-(12)',
   'spacing-md': 'scale-300-(12)',
+  'spacing-lg-desktop': 'scale-400-(16)',
   'spacing-lg': 'scale-400-(16)',
+  'spacing-xl-desktop': 'scale-600-(24)',
   'spacing-xl': 'scale-600-(24)',
+  'spacing-2xl-desktop': 'scale-800-(32)',
   'spacing-2xl': 'scale-800-(32)',
+  'spacing-3xl-desktop': 'scale-1200-(48)',
   'spacing-3xl': 'scale-1200-(48)',
+  'spacing-4xl-desktop': 'scale-1600-(64)',
   'spacing-4xl': 'scale-1600-(64)'
 );