betagouv/service-national-universel

const { Media } = require("reactstrap");
const colors = require("tailwindcss/colors");

/* https://find-nearest-tailwind-colour.netlify.app/ */
module.exports = {
  presets: [require("@snu/ds/tailwind.config")],
  content: ["./src/**/*.{js,ts,jsx,tsx}", "../packages/ds/dist/**/*.{js,jsx}"],
  darkMode: Media, // or 'media' or 'class'
  theme: {
    minWidth: {
      0: "0",
      "1/4": "265px",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
    },
    screens: {
      sm: "300px",
      smmd: "351px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      print: { raw: "print" },
    },
    extend: {
      cursor: {
        "col-resize": "col-resize",
        "row-resize": "row-resize",
      },
      boxShadow: {
        one: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
        base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
        block: "0px 10px 20px rgba(0, 0, 0, 0.1)",
        button: "0px 1px 5px rgba(0, 0, 0, 0.5)",
        ninaButton: "0px 4px 10px 3px rgba(0, 0, 0, 0.07);",
      },
      fontSize: {
        0: "0px",
      },
      colors: {
        "snu-purple-900": "#32257F",
        "snu-purple-800": "#3830a9",
        "snu-purple-600": "#43389b",
        "snu-purple-300": "#5145cc",
        "snu-purple-200": "#4F46E5",
        "snu-purple-100": "#C7D2FE",
        warmGray: colors.stone,
        trueGray: colors.neutral,
        coolGray: colors.gray,
        "deep-blue": {
          900: "#0C1035",
          800: "#1B1F42",
          700: "#25294F",
          600: "#2A2E56",
          500: "#30345B",
          400: "#3E426A",
          300: "#7F83A7",
          200: "#B3B5CD",
          100: "#D0D2E2",
          50: "#EEEFF5",
        },
        brand: {
          black: "#111111",
          darkBlue: "#00008b",
          darkGreen: "#1C7713",
          darkPurple: "#382F79",
          extraLightGrey: "#fafafa",
          green: "#6CC763",
          grey: "#6e757c",
          detail_title: "#798399",
          lightBlueGrey: "#e6ebfa",
          lightGold: "#d9bb71",
          lightGrey: "#d7d7d7",
          lightOrange: "#ffa987",
          orange: "#FE7B52",
          pink: "#F8A9AD",
          purple: "#5145cd",
          red: "#BE3B12",
          transPurple: "#5145cd66",
          yellow: "#FEB951",
        },
        status: {
          "in-progress": "#382f79",
          "not-done": "#be3b12",
          "not-eligible": "#fe7b52",
          "waiting-acceptation": "#feb951",
          "waiting-affectation": "#feb951",
          "waiting-correction": "#feb951",
          "waiting-list": "#FFA987",
          "waiting-realisation": "#fe7b52",
          "waiting-validation": "#fe7b52",
          affected: "#382f79",
          cancel: "#fe7b52",
          deleted: "#111111",
          done: "#6cc763",
          exempted: "#fe7b52",
          refused: "#f8a9ad",
          validated: "#6cc763",
          withdrawn: "#D7D7D7",
        },
        "snu-purple": {
          900: "#32257F",
          800: "#3830a9",
          600: "#43389b",
          300: "#5145cc",
          200: "#4F46E5",
          100: "#C7D2FE",
        },
      },
      fontFamily: {
        ubuntu: ["Marianne", "Ubuntu", "ui-sans-serif", "system-ui"],
        marianne: ["Marianne", "Ubuntu", "ui-sans-serif", "system-ui"],
      },
      width: {
        "screen-1/4": "25vw",
        "screen-1/2": "50vw",
        "screen-3/4": "75vw",
      },
      maxWidth: {
        "screen-1/4": "25vw",
        "screen-1/2": "50vw",
        "screen-3/4": "75vw",
        "screen-80": "80vw",
        "screen-85": "85vw",
        "screen-90": "90vw",
        "screen-95": "95vw",
      },
      height: {
        "screen-1/4": "25vw",
        "screen-1/2": "50vw",
        "screen-3/4": "75vw",
        84: "21rem",
        88: "22rem",
      },
    },
    maxHeight: {
      0: "0",
      80: "20rem",
      "1/4": "25%",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};