Skip to content

Commit

Permalink
refactor(plugin): use CSS variables for colors instead of hex overriding
Browse files Browse the repository at this point in the history
zoltanszogyenyi committed Jan 24, 2025
1 parent ad0a91e commit a10d2d6
Showing 1 changed file with 118 additions and 135 deletions.
253 changes: 118 additions & 135 deletions plugin.js
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
},
};
}
);

0 comments on commit a10d2d6

Please sign in to comment.