Fichiers tailwind

Fichier local tailwind

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
  content: [
    "./scripts/**/*.{js,json}",
    "../styleguide/src/**/*.{html,js,php,json}",
    "../styleguide/components/**/*.{json,php}",
    "./tools/**/*.{html,js,php}",
    "../styleguide/layout/**/*.{html,js,php}",
    "../../templates/**/*.html.twig"
  ],
  theme: {
    screens: {
      'sm-mobile': '375px',
      'md-mobile': '390px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        primary: {
          'lighter': "#F0F6FF",
          'light': "#B1CDF6",
          'medium': "#3F8CFB",
          'accent': "#0260E7",
          'DEFAULT': "#0144AA",
          'bright': "#0092FF"
        },
        secondary: {
          'lighter': "#FFF4E5",
          'light': "#FFEECD",
          'medium': "#FFDE89",
          'accent': "#FEBA02",
          'DEFAULT': "#FE8D00",
          'dark': "#FE7A00",
        },
        text: {
          'light': "#434B72",
          'DEFAULT': "#222A51"
        },
        background: {
          'DEFAULT': "#37465C",
          'darker': "#303E54",
          'dark': "#202D40",
        },
        ui: {
          'light': "#F6F6F8",
          'medium': "#EFEFF3",
          'DEFAULT': "#DEE0E7",
          "border": "#D8DAE1"
        },
        icon: {
          'DEFAULT': "#8697B0"
        },
        error: {
          'light': "#FFF1F1",
          'DEFAULT': "#FF6464"
        },
        warning: {
          'light': "#FFF4E7",
          'DEFAULT': "#FFB65B"
        },
        success: {
          'light': "#E5FCFC",
          'DEFAULT': "#01AFAF",
          'dark': "#019A9A"
        },
        hector: {
          'DEFAULT': "#344153",
          'dark': "#1F2D41"
        },
        label: {
          'autodiscount': '#391994',
          'web': '#01AFAF'
        },
        dashboard: {
          'background': '#162337',
          'background-lighter': '#1A2942'
        }
      },
      screens: {
        'menu-bp': '1115px',
        '2lg': '1245px',
        '2xl': '1440px',
        '3xl': '1536px',
        '4xl': '1920px',
      },
      fontFamily: {
        poppins: 'Poppins, Helvetica, Arial, sans-serif',
        primary: 'Poppins, Helvetica, Arial, sans-serif',
      },
      fontSize: {
        'very-tiny': "0.563rem", // 9px
        'xs-tiny': "0.625rem", // 10px
        tiny: "0.688rem", // 11px
        xxs: "0.75rem", // 12px
        xs: "0.8125rem", // 13px
        sm: "0.875rem", // 14px
        smaller: "0.9375rem", // 15px
        '1.5xl': "1.375rem", // 22px
        '2.5xl': "1.563rem", // 25px
        '2.75xl': "1.75rem", // 28px
        '3.25xl': "2rem", // 32px
        '3.5xl': "2.188rem", // 35px
        '4.5xl': "2.813rem", // 45px
        '5.25xl': "3.125rem", // 50px
      },
      spacing: {
        '0.75': '0.188rem', // 3px
        '1.25': '0.313rem', // 5px
        '1.75': '0.438rem', // 7px
        '2.25': '0.5628rem', // 9px
        '2.5': '0.625rem', // 10px
        '2.75': '0.6875rem', // 11px
        '3.25': '0.8125rem', // 13px
        '3.5': '0.875rem', // 14px
        '3.75': '0.9375rem', // 15px
        '4.25': '1.063rem', // 17px
        '4.5': '1.125rem', // 18px
        '5.5': '1.375rem', // 22px
        '6.25': '1.563rem', // 25px
        '6.5': '1.625rem', // 26px
        '7.5': '1.875rem', // 30px
        '8.5': '2.125rem', // 34px
        '8.75': '2.188rem', // 35px
        '9.5': '2.375rem', // 38px
        '11.5': '2.813rem', // 45px
        '13': '3.125rem', // 50px
        '15': '3.75rem', // 60px
        '35': '8.75rem', // 140px
        'fit': "fit-content",
        '1/6': "16.666667%",
        '2/6': "33.333333%",
        '3/6': "50%",
        '4/6': "66.666667%",
        '5/6': "83.333333%"
      },
      maxWidth: {
        'desktop': '1440px',
        'container': '1273px',
        'group': '1166px',
        'footer': '1273px',
        'modal': '1316px',
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%'
      },
      borderWidth: {
        '1': '1px',
        '3': '3px'
      },
      borderRadius: {
        'medium': '10px',
        'button': '15px',
        'small-button': '6px',
        'timeslot': '8px'
      },
      letterSpacing: {
        'tight': '-0.41px',
        'tightened': '-0.03em', // -3%
        'spaced': '0.1em', // 10%
      },
      lineHeight: {
        '2.5': '0.625rem', // 10px
        '2.75': '0.6875rem', // 11px
        '3.5': '0.875rem', // 14px
        '3.75': '0.935rem', // 15px
        '4.25': '1.063rem', // 17px
        '4.5': '1.125rem', // 18px
        '5.5': '1.375rem', // 22px
        '6.25': '1.563rem', // 25px
        '6.5': '1.625rem', // 26px
        '6.75': '1.688rem', // 27px
        '7.5': '1.875rem', // 30px
        '8.5': '2.125rem', // 34px
        '8.75': '2.188rem', // 35px
        '9.5': '2.375rem', // 38px
        '11.5': '2.813rem', // 45px
        '13': '3.125rem', // 50px
        '17': '4.375rem', // 60px
        'tiny': '1.09',
        'tight': '1.1',
        'tightened': '1.2'
      },
      transitionDelay: {
        'unset': 'unset'
      },
      columns: {
        '4': '4',
      },
      zIndex: {
        '1': '1',
        'negative': '-1'
      },
      boxShadow: {
        'item-product': '0px 10px 25px -10px rgba(34, 42, 81, 0.14)',
        'swipe-button': '-7px 0px 4px -3px rgba(0, 0, 0, 0.18)',
        'swipe-button-left': '7px 0px 4px -3px rgba(0, 0, 0, 0.18)',
        'filter-footer': '0px -10px 26px -11px rgba(0, 0, 0, 0.25)',
        'submenu': '0px 2.7px 3.6px rgba(0, 0, 0, 0.043), 0px 6.7px 10px rgba(0, 0, 0, 0.047), 0px 13.6px 24.1px rgba(0, 0, 0, 0.048), 0px 33px 80px rgba(0, 0, 0, 0.07)'
      },
      transitionProperty: {
        'height': 'height'
      },
      animation: {
        'favorite-add': 'favoriteAdd 0.25s linear forwards',
        'favorite-remove': 'favoriteRemove 0.25s linear forwards',
        'loader': 'loader 0.8s linear forwards infinite alternate',
        'ping-notice': 'pingNotice 1.2s cubic-bezier(0, 0, 0.2, 1) infinite',
        'pulse-notice': 'pulseNotice 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'skeleton': 'skeletonAnim 2s infinite forwards'
      },
      keyframes: {
        'skeletonAnim': {
          'from': {transform: 'translateX(100%)'},
          'to': {transform: 'translateX(-100%)'}
        },
        'favoriteAdd': {
          '0%': {transform: 'scale(1.2)'},
          '100%': {transform: 'scale(1)'}
        },
        'favoriteRemove': {
          '0%': {transform: 'scale(0.6)'},
          '100%': {transform: 'scale(1)'}
        },
        'loader': {
          '0%': {padding: '2px'},
          '50%': {padding: '2px'},
          '100%': {padding: '0px'}
        },
        'pingNotice': {
          '75%': {
            transform: 'scale(1.5)',
            opacity: 0
          },
          '100%': {
            transform: 'scale(1.5)',
            opacity: 0
          },
        },
        'pulseNotice': {
          '0%': {opacity: 0.4},
          '50%': {opacity: 0.1},
          '100%': {opacity: 0.4}
        }
      }
    }
  },
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.gradient-recovery': {
          'background': 'linear-gradient(180deg, #253142 0%, #37465C 65.1%, #212C3B 97.4%)',
        },
        '.gradient-fund-car': {
          'background': 'linear-gradient(180deg, #0A4A9C 0%, #0D54BE 65.1%, #094BAF 97.4%)',
        },
        '.gradient-emissions': {
          'background': 'linear-gradient(90deg, #36DF7F 0%, #C8D878 22.28%, #FFC743 44.05%, #FFE279 60.94%, #FFA444 78.41%, #FD5133 100%);'
        },
        '.gradient-dashboard-background': {
          'background': 'linear-gradient(180deg, #162337 0%, #162338 73.55%, #1A2942 100%)'
        },
        '.gradient-fade-slider-items': {
          'background': 'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 90%, rgb(255 255 255) 98%, rgb(255 255 255) 100%)'
        },
        '.visible-important': {
          'visibility': 'visible'
        },
        '.block-important': {
          'display': 'block'
        }
      })
    })
  ],
}