tailwind.config.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. module.exports = {
  2. content: ['./src/**/*.{html,js,ts,jsx,tsx,pug,styl,json}'],
  3. darkMode: 'class', // или 'media' для автоматического определения системной темы
  4. theme: {
  5. extend: {
  6. colors: {
  7. // Основная палитра на основе красного золота
  8. 'primary': {
  9. 50: '#fef7ee',
  10. 100: '#fdedd6',
  11. 200: '#fbd7ad',
  12. 300: '#f8ba79',
  13. 400: '#f49343',
  14. 500: '#f17317', // Базовый красное золото
  15. 600: '#e2570d',
  16. 700: '#bc3f0d',
  17. 800: '#963213',
  18. 900: '#792b14',
  19. 950: '#411308',
  20. },
  21. // Вторичные цвета - глубокие благородные тона
  22. 'secondary': {
  23. 50: '#f8fafc',
  24. 100: '#f1f5f9',
  25. 200: '#e2e8f0',
  26. 300: '#cbd5e1',
  27. 400: '#94a3b8',
  28. 500: '#64748b',
  29. 600: '#475569',
  30. 700: '#334155',
  31. 800: '#1e293b',
  32. 900: '#0f172a',
  33. 950: '#020617',
  34. },
  35. // Акцентные цвета - контрастные элементы
  36. 'accent': {
  37. 50: '#fffbeb',
  38. 100: '#fef3c7',
  39. 200: '#fde68a',
  40. 300: '#fcd34d',
  41. 400: '#fbbf24',
  42. 500: '#f59e0b', // Теплый золотой акцент
  43. 600: '#d97706',
  44. 700: '#b45309',
  45. 800: '#92400e',
  46. 900: '#78350f',
  47. 950: '#451a03',
  48. },
  49. // Фоновые цвета для светлой и темной тем
  50. 'surface': {
  51. light: {
  52. DEFAULT: '#ffffff',
  53. variant: '#f8fafc',
  54. elevated: '#ffffff',
  55. },
  56. dark: {
  57. DEFAULT: '#0f172a',
  58. variant: '#1e293b',
  59. elevated: '#334155',
  60. }
  61. },
  62. // Статусные цвета
  63. 'success': {
  64. 50: '#f0fdf4',
  65. 100: '#dcfce7',
  66. 200: '#bbf7d0',
  67. 300: '#86efac',
  68. 400: '#4ade80',
  69. 500: '#22c55e',
  70. 600: '#16a34a',
  71. 700: '#15803d',
  72. 800: '#166534',
  73. 900: '#14532d',
  74. },
  75. 'warning': {
  76. 50: '#fffbeb',
  77. 100: '#fef3c7',
  78. 200: '#fde68a',
  79. 300: '#fcd34d',
  80. 400: '#fbbf24',
  81. 500: '#f59e0b',
  82. 600: '#d97706',
  83. 700: '#b45309',
  84. 800: '#92400e',
  85. 900: '#78350f',
  86. },
  87. 'error': {
  88. 50: '#fef2f2',
  89. 100: '#fee2e2',
  90. 200: '#fecaca',
  91. 300: '#fca5a5',
  92. 400: '#f87171',
  93. 500: '#ef4444',
  94. 600: '#dc2626',
  95. 700: '#b91c1c',
  96. 800: '#991b1b',
  97. 900: '#7f1d1d',
  98. }
  99. },
  100. // Дополнительные настройки темы
  101. fontFamily: {
  102. 'display': ['Playfair Display', 'serif'], // Для заголовков
  103. 'body': ['Inter', 'sans-serif'], // Для основного текста
  104. },
  105. backgroundImage: {
  106. 'gold-gradient': 'linear-gradient(135deg, #f17317 0%, #f59e0b 100%)',
  107. 'premium-gradient': 'linear-gradient(135deg, #792b14 0%, #411308 100%)',
  108. },
  109. boxShadow: {
  110. 'gold': '0 4px 14px 0 rgba(241, 115, 23, 0.3)',
  111. 'premium': '0 8px 32px 0 rgba(121, 43, 20, 0.4)',
  112. }
  113. },
  114. },
  115. plugins: [],
  116. }