DesignSystemsPattern/tailwind.config.js at dev/lheo · lhelheo/DesignSystemsPattern · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      mulish: "Mulish, sans-serif",
    },
    screens: {
      mobile: "var(--screen-mobile)",
      tablet: "var(--screen-tablet)",
      desktop: "var(--screen-desktop)",
      tv: "var(--screen-tv)",
    },
    fontSize: {
      xs: "var(--text-xs)",
      sm: "var(--text-sm)",
      md: "var(--text-md)",
      lg: "var(--text-lg)",
      xl: "var(--text-xl)",
      tmd: "var(--title-md)",
      tlg: "var(--title-lg)",
      txl: "var(--title-xl)",
    },
    extend: {
      colors: {
        primary: "rgba(var(--primary), <alpha-value>)",
        secondary: "rgba(var(--secondary), <alpha-value>)",
        tertiary: "rgba(var(--tertiary), <alpha-value>)",
        quaternary: "rgba(var(--quaternary), <alpha-value>)",
        hover: "rgba(var(--hover), <alpha-value>)",
        click: "rgba(var(--click), <alpha-value>)",
        icon: "rgba(var(--icon), <alpha-value>)",
        outline: "rgba(var(--outline), <alpha-value>)",
        divider: "rgba(var(--divider), <alpha-value>)",
        disabled: "rgba(var(--text-disabled), <alpha-value>)",
        // Cores do RiseTact
        "primary-500": "rgba(var(--primary-500), <alpha-value>)",
        "primary-300": "rgba(var(--primary-300), <alpha-value>)",
        "primary-700": "rgba(var(--primary-700), <alpha-value>)",
        "secondary-500": "rgba(var(--secondary-500), <alpha-value>)",
        "neutral-500": "rgba(var(--neutral-500), <alpha-value>)",
        "white-500": "rgba(var(--white-500), <alpha-value>)",
        "black-500": "rgba(var(--black-500), <alpha-value>)",
        "danger-500": "rgba(var(--danger-500), <alpha-value>)",
      },
      backgroundColor: {
        light: "rgba(var(--bg-light), <alpha-value>)",
        dark: "rgba(var(--bg-dark), <alpha-value>)",
        success: "rgba(var(--text-success), <alpha-value>)",
        error: "rgba(var(--text-error), <alpha-value>)",
        disabled: "rgba(var(--bg-disabled), <alpha-value>)",
        // Alteração de teste
        danger: "rgba(var(--bg-disabled), <alpha-value>)",
      },
      textColor: {
        gray: {
          primary: "rgba(var(--text-primary), <alpha-value>)",
          secondary: "rgba(var(--text-secondary), <alpha-value>)",
          tertiary: "rgba(var(--text-tertiary), <alpha-value>)",
        },
        success: "rgba(var(--text-success), <alpha-value>)",
        error: "rgba(var(--text-error), <alpha-value>)",
      },
      boxShadow: {
        sm: "var(--shadow-sm)",
        md: "var(--shadow-md)",
        lg: "var(--shadow-lg)",
        focus: "var(--shadow-focus)",
        outline: "var(--shadow-outline)",
        "button-focus": "var(--shadow-button-focus)",
      },
      blur: {
        default: "var(--blur)",
      },
      borderRadius: {
        none: "var(--border-radius-none)",
        sm: "var(--border-radius-sm)",
        md: "var(--border-radius-md)",
        lg: "var(--border-radius-lg)",
      },
      spacing: {
        none: "var(--spacing-none) /* 0px */",
        "4xs": "var(--spacing-4xs) /* 8px */",
        "2xs": "var(--spacing-2xs) /* 12px */",
        xs: "var(--spacing-xs) /* 16px */",
        sm: "var(--spacing-sm) /* 20px */",
        md: "var(--spacing-md) /* 24px */",
        lg: "var(--spacing-lg) /* 32px */",
        xl: "var(--spacing-xl) /* 40px */",
        "2xl": "var(--spacing-2xl) /* 48px */",
        "4xl": "var(--spacing-4xl) /* 56px */",
        0: "var(--spacing-none) /* 0px */",
        1: "var(--spacing-4xs) /* 8px */",
        2: "var(--spacing-2xs) /* 12px */",
        3: "var(--spacing-xs) /* 16px */",
        4: "var(--spacing-sm) /* 20px */",
        5: "var(--spacing-md) /* 24px */",
        6: "var(--spacing-lg) /* 32px */",
        7: "var(--spacing-xl) /* 40px */",
        8: "var(--spacing-2xl) /* 48px */",
        9: "var(--spacing-4xl) /* 56px */",
      },
    },
  },
  plugins: [],
};