From a10d2d6fe4f12aeca6706ed7c7417b7527334c76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Fri, 24 Jan 2025 14:11:10 +0200 Subject: [PATCH] refactor(plugin): use CSS variables for colors instead of hex overriding --- plugin.js | 253 +++++++++++++++++++++++++----------------------------- 1 file changed, 118 insertions(+), 135 deletions(-) diff --git a/plugin.js b/plugin.js index 1c6ed626..7dfc79f8 100644 --- a/plugin.js +++ b/plugin.js @@ -19,6 +19,124 @@ module.exports = plugin.withOptions( } = options; return function ({ addBase, addComponents, theme }) { + addBase({ + ':root': { + 'color-transparent': 'transparent', + '--color-white': '#ffffff', + '--color-black': '#000000', + '--color-gray-50': '#F9FAFB', + '--color-gray-100': '#F3F4F6', + '--color-gray-200': '#E5E7EB', + '--color-gray-300': '#D1D5DB', + '--color-gray-400': '#9CA3AF', + '--color-gray-500': '#6B7280', + '--color-gray-600': '#4B5563', + '--color-gray-700': '#374151', + '--color-gray-800': '#1F2937', + '--color-gray-900': '#111827', + '--color-red-50': '#FEF2F2', + '--color-red-100': '#FEE2E2', + '--color-red-200': '#FECACA', + '--color-red-300': '#FCA5A5', + '--color-red-400': '#F87171', + '--color-red-500': '#EF4444', + '--color-red-600': '#DC2626', + '--color-red-700': '#B91C1C', + '--color-red-800': '#991B1B', + '--color-red-900': '#7F1D1D', + '--color-yellow-50': '#FFFBEB', + '--color-yellow-100': '#FEF3C7', + '--color-yellow-200': '#FDE68A', + '--color-yellow-300': '#FCD34D', + '--color-yellow-400': '#FBBF24', + '--color-yellow-500': '#F59E0B', + '--color-yellow-600': '#D97706', + '--color-yellow-700': '#B45309', + '--color-yellow-800': '#92400E', + '--color-yellow-900': '#78350F', + '--color-green-50': '#ECFDF5', + '--color-green-100': '#D1FAE5', + '--color-green-200': '#A7F3D0', + '--color-green-300': '#6EE7B7', + '--color-green-400': '#34D399', + '--color-green-500': '#10B981', + '--color-green-600': '#059669', + '--color-green-700': '#047857', + '--color-green-800': '#065F46', + '--color-green-900': '#064E3B', + '--color-blue-50': '#EFF6FF', + '--color-blue-100': '#DBEAFE', + '--color-blue-200': '#BFDBFE', + '--color-blue-300': '#93C5FD', + '--color-blue-400': '#60A5FA', + '--color-blue-500': '#3B82F6', + '--color-blue-600': '#2563EB', + '--color-blue-700': '#1D4ED8', + '--color-blue-800': '#1E40AF', + '--color-blue-900': '#1E3A8A', + '--color-indigo-50': '#EEF2FF', + '--color-indigo-100': '#E0E7FF', + '--color-indigo-200': '#C7D2FE', + '--color-indigo-300': '#A5B4FC', + '--color-indigo-400': '#818CF8', + '--color-indigo-500': '#6366F1', + '--color-indigo-600': '#4F46E5', + '--color-indigo-700': '#4338CA', + '--color-indigo-800': '#3730A3', + '--color-indigo-900': '#312E81', + '--color-purple-50': '#F5F3FF', + '--color-purple-100': '#EDE9FE', + '--color-purple-200': '#DDD6FE', + '--color-purple-300': '#C4B5FD', + '--color-purple-400': '#A78BFA', + '--color-purple-500': '#8B5CF6', + '--color-purple-600': '#7C3AED', + '--color-purple-700': '#6D28D9', + '--color-purple-800': '#5B21B6', + '--color-purple-900': '#4C1D95', + '--color-pink-50': '#FDF2F8', + '--color-pink-100': '#FCE7F3', + '--color-pink-200': '#FBCFE8', + '--color-pink-300': '#F9A8D4', + '--color-pink-400': '#F472B6', + '--color-pink-500': '#EC4899', + '--color-pink-600': '#DB2777', + '--color-pink-700': '#BE185D', + '--color-pink-800': '#9D174D', + '--color-pink-900': '#831843', + '--color-orange-50': '#FFFAF0', + '--color-orange-100': '#FEEBC8', + '--color-orange-200': '#FBD38D', + '--color-orange-300': '#F6AD55', + '--color-orange-400': '#ED8936', + '--color-orange-500': '#DD6B20', + '--color-orange-600': '#C05621', + '--color-orange-700': '#9C4221', + '--color-orange-800': '#7B341E', + '--color-orange-900': '#652B19', + '--color-cyan-50': '#ECFEFF', + '--color-cyan-100': '#CFFAFE', + '--color-cyan-200': '#A5F3FC', + '--color-cyan-300': '#67E8F9', + '--color-cyan-400': '#22D3EE', + '--color-cyan-500': '#06B6D4', + '--color-cyan-600': '#0891B2', + '--color-cyan-700': '#0E7490', + '--color-cyan-800': '#155E75', + '--color-cyan-900': '#164E63', + '--color-teal-50': '#F0FDFA', + '--color-teal-100': '#CCFBF1', + '--color-teal-200': '#99F6E4', + '--color-teal-300': '#5EEAD4', + '--color-teal-400': '#2DD4BF', + '--color-teal-500': '#14B8A6', + '--color-teal-600': '#0D9488', + '--color-teal-700': '#0F766E', + '--color-teal-800': '#115E59', + '--color-teal-900': '#134E4A', + }, + }); + // tooltip and popover styles if (tooltips) { addBase({ @@ -1320,141 +1438,6 @@ module.exports = plugin.withOptions( function (options = {}) { return { darkMode: 'class', // or 'media' or 'class', - theme: { - extend: { - height: { - modal: 'calc(100% - 2rem)', - }, - boxShadow: { - 'sm-light': '0 2px 5px 0px rgba(255, 255, 255, 0.08)', - }, - colors: { - transparent: 'transparent', - white: '#ffffff', - black: '#000000', - gray: { - 50: '#F9FAFB', - 100: '#F3F4F6', - 200: '#E5E7EB', - 300: '#D1D5DB', - 400: '#9CA3AF', - 500: '#6B7280', - 600: '#4B5563', - 700: '#374151', - 800: '#1F2937', - 900: '#111827', - }, - red: { - 50: '#FDF2F2', - 100: '#FDE8E8', - 200: '#FBD5D5', - 300: '#F8B4B4', - 400: '#F98080', - 500: '#F05252', - 600: '#E02424', - 700: '#C81E1E', - 800: '#9B1C1C', - 900: '#771D1D', - }, - orange: { - 50: '#FFF8F1', - 100: '#FEECDC', - 200: '#FCD9BD', - 300: '#FDBA8C', - 400: '#FF8A4C', - 500: '#FF5A1F', - 600: '#D03801', - 700: '#B43403', - 800: '#8A2C0D', - 900: '#771D1D', - }, - yellow: { - 50: '#FDFDEA', - 100: '#FDF6B2', - 200: '#FCE96A', - 300: '#FACA15', - 400: '#E3A008', - 500: '#C27803', - 600: '#9F580A', - 700: '#8E4B10', - 800: '#723B13', - 900: '#633112', - }, - green: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 200: '#BCF0DA', - 300: '#84E1BC', - 400: '#31C48D', - 500: '#0E9F6E', - 600: '#057A55', - 700: '#046C4E', - 800: '#03543F', - 900: '#014737', - }, - teal: { - 50: '#EDFAFA', - 100: '#D5F5F6', - 200: '#AFECEF', - 300: '#7EDCE2', - 400: '#16BDCA', - 500: '#0694A2', - 600: '#047481', - 700: '#036672', - 800: '#05505C', - 900: '#014451', - }, - blue: { - 50: '#EBF5FF', - 100: '#E1EFFE', - 200: '#C3DDFD', - 300: '#A4CAFE', - 400: '#76A9FA', - 500: '#3F83F8', - 600: '#1C64F2', - 700: '#1A56DB', - 800: '#1E429F', - 900: '#233876', - }, - indigo: { - 50: '#F0F5FF', - 100: '#E5EDFF', - 200: '#CDDBFE', - 300: '#B4C6FC', - 400: '#8DA2FB', - 500: '#6875F5', - 600: '#5850EC', - 700: '#5145CD', - 800: '#42389D', - 900: '#362F78', - }, - purple: { - 50: '#F6F5FF', - 100: '#EDEBFE', - 200: '#DCD7FE', - 300: '#CABFFD', - 400: '#AC94FA', - 500: '#9061F9', - 600: '#7E3AF2', - 700: '#6C2BD9', - 800: '#5521B5', - 900: '#4A1D96', - }, - pink: { - 50: '#FDF2F8', - 100: '#FCE8F3', - 200: '#FAD1E8', - 300: '#F8B4D9', - 400: '#F17EB8', - 500: '#E74694', - 600: '#D61F69', - 700: '#BF125D', - 800: '#99154B', - 900: '#751A3D', - }, - }, - }, - }, }; } );