tailwind.config.cjs 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /** @type {import('tailwindcss').Config} */
  2. module.exports = {
  3. content: [
  4. './index.html',
  5. './src/**/*.{js,ts,jsx,tsx}',
  6. './node_modules/react-tailwindcss-datepicker/dist/index.esm.js',
  7. ],
  8. darkMode: 'class',
  9. theme: {
  10. extend: {
  11. colors: {
  12. text: {
  13. title: 'var(--color-text-title)',
  14. caption: 'var(--color-text-caption)',
  15. placeholder: 'var(--color-text-placeholder)',
  16. disabled: 'var(--color-text-disabled)',
  17. link: {
  18. default: 'var(--color-text-link-default)',
  19. hover: 'var(--color-text-link-hover)',
  20. pressed: 'var(--color-text-link-pressed)',
  21. disabled: 'var(--color-text-link-disabled)',
  22. }
  23. },
  24. content: {
  25. default: 'var(--color-content-default)',
  26. hover: 'var(--color-content-hover)',
  27. pressed: 'var(--color-content-pressed)',
  28. disabled: 'var(--color-content-disabled)',
  29. onfill: 'var(--color-content-onfill)',
  30. },
  31. icon: {
  32. default: 'var(--color-icon-default)',
  33. secondary: 'var(--color-icon-secondary)',
  34. disabled: 'var(--color-icon-disabled)',
  35. },
  36. fill: {
  37. default: 'var(--color-fill-default)',
  38. hover: 'var(--color-fill-hover)',
  39. selector: 'var(--color-fill-selector)',
  40. active: 'var(--color-fill-active)',
  41. },
  42. line: {
  43. divider: 'var(--color-line-divider)',
  44. border: 'var(--color-line-border)',
  45. },
  46. bg: {
  47. body: 'var(--color-bg-body)',
  48. base: 'var(--color-bg-base)',
  49. mask: 'var(--color-bg-mask)',
  50. brand: 'var(--color-bg-brand)',
  51. tips: 'var(--color-bg-tips)',
  52. },
  53. function: {
  54. success: 'var(--color-function-success)',
  55. warning: 'var(--color-function-warning)',
  56. error: 'var(--color-function-error)',
  57. info: 'var(--color-function-info)',
  58. },
  59. tint: {
  60. 1: 'var(--color-tint-1)',
  61. 2: 'var(--color-tint-2)',
  62. 3: 'var(--color-tint-3)',
  63. 4: 'var(--color-tint-4)',
  64. 5: 'var(--color-tint-5)',
  65. 6: 'var(--color-tint-6)',
  66. 7: 'var(--color-tint-7)',
  67. 8: 'var(--color-tint-8)',
  68. 9: 'var(--color-tint-9)',
  69. }
  70. },
  71. boxShadow: {
  72. md: '0px 0px 20px rgba(0, 0, 0, 0.1);',
  73. },
  74. },
  75. },
  76. plugins: [],
  77. };