Skip to content

Commit a10d2d6

Browse files
zoltanszogyenyizoltanszogyenyi
committed
refactor(plugin): use CSS variables for colors instead of hex overriding
1 parent ad0a91e commit a10d2d6

File tree

1 file changed

+118
-135
lines changed

1 file changed

+118
-135
lines changed

‎plugin.js‎

Lines changed: 118 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,124 @@ module.exports = plugin.withOptions(
1919
} = options;
2020

2121
return function ({ addBase, addComponents, theme }) {
22+
addBase({
23+
':root': {
24+
'color-transparent': 'transparent',
25+
'--color-white': '#ffffff',
26+
'--color-black': '#000000',
27+
'--color-gray-50': '#F9FAFB',
28+
'--color-gray-100': '#F3F4F6',
29+
'--color-gray-200': '#E5E7EB',
30+
'--color-gray-300': '#D1D5DB',
31+
'--color-gray-400': '#9CA3AF',
32+
'--color-gray-500': '#6B7280',
33+
'--color-gray-600': '#4B5563',
34+
'--color-gray-700': '#374151',
35+
'--color-gray-800': '#1F2937',
36+
'--color-gray-900': '#111827',
37+
'--color-red-50': '#FEF2F2',
38+
'--color-red-100': '#FEE2E2',
39+
'--color-red-200': '#FECACA',
40+
'--color-red-300': '#FCA5A5',
41+
'--color-red-400': '#F87171',
42+
'--color-red-500': '#EF4444',
43+
'--color-red-600': '#DC2626',
44+
'--color-red-700': '#B91C1C',
45+
'--color-red-800': '#991B1B',
46+
'--color-red-900': '#7F1D1D',
47+
'--color-yellow-50': '#FFFBEB',
48+
'--color-yellow-100': '#FEF3C7',
49+
'--color-yellow-200': '#FDE68A',
50+
'--color-yellow-300': '#FCD34D',
51+
'--color-yellow-400': '#FBBF24',
52+
'--color-yellow-500': '#F59E0B',
53+
'--color-yellow-600': '#D97706',
54+
'--color-yellow-700': '#B45309',
55+
'--color-yellow-800': '#92400E',
56+
'--color-yellow-900': '#78350F',
57+
'--color-green-50': '#ECFDF5',
58+
'--color-green-100': '#D1FAE5',
59+
'--color-green-200': '#A7F3D0',
60+
'--color-green-300': '#6EE7B7',
61+
'--color-green-400': '#34D399',
62+
'--color-green-500': '#10B981',
63+
'--color-green-600': '#059669',
64+
'--color-green-700': '#047857',
65+
'--color-green-800': '#065F46',
66+
'--color-green-900': '#064E3B',
67+
'--color-blue-50': '#EFF6FF',
68+
'--color-blue-100': '#DBEAFE',
69+
'--color-blue-200': '#BFDBFE',
70+
'--color-blue-300': '#93C5FD',
71+
'--color-blue-400': '#60A5FA',
72+
'--color-blue-500': '#3B82F6',
73+
'--color-blue-600': '#2563EB',
74+
'--color-blue-700': '#1D4ED8',
75+
'--color-blue-800': '#1E40AF',
76+
'--color-blue-900': '#1E3A8A',
77+
'--color-indigo-50': '#EEF2FF',
78+
'--color-indigo-100': '#E0E7FF',
79+
'--color-indigo-200': '#C7D2FE',
80+
'--color-indigo-300': '#A5B4FC',
81+
'--color-indigo-400': '#818CF8',
82+
'--color-indigo-500': '#6366F1',
83+
'--color-indigo-600': '#4F46E5',
84+
'--color-indigo-700': '#4338CA',
85+
'--color-indigo-800': '#3730A3',
86+
'--color-indigo-900': '#312E81',
87+
'--color-purple-50': '#F5F3FF',
88+
'--color-purple-100': '#EDE9FE',
89+
'--color-purple-200': '#DDD6FE',
90+
'--color-purple-300': '#C4B5FD',
91+
'--color-purple-400': '#A78BFA',
92+
'--color-purple-500': '#8B5CF6',
93+
'--color-purple-600': '#7C3AED',
94+
'--color-purple-700': '#6D28D9',
95+
'--color-purple-800': '#5B21B6',
96+
'--color-purple-900': '#4C1D95',
97+
'--color-pink-50': '#FDF2F8',
98+
'--color-pink-100': '#FCE7F3',
99+
'--color-pink-200': '#FBCFE8',
100+
'--color-pink-300': '#F9A8D4',
101+
'--color-pink-400': '#F472B6',
102+
'--color-pink-500': '#EC4899',
103+
'--color-pink-600': '#DB2777',
104+
'--color-pink-700': '#BE185D',
105+
'--color-pink-800': '#9D174D',
106+
'--color-pink-900': '#831843',
107+
'--color-orange-50': '#FFFAF0',
108+
'--color-orange-100': '#FEEBC8',
109+
'--color-orange-200': '#FBD38D',
110+
'--color-orange-300': '#F6AD55',
111+
'--color-orange-400': '#ED8936',
112+
'--color-orange-500': '#DD6B20',
113+
'--color-orange-600': '#C05621',
114+
'--color-orange-700': '#9C4221',
115+
'--color-orange-800': '#7B341E',
116+
'--color-orange-900': '#652B19',
117+
'--color-cyan-50': '#ECFEFF',
118+
'--color-cyan-100': '#CFFAFE',
119+
'--color-cyan-200': '#A5F3FC',
120+
'--color-cyan-300': '#67E8F9',
121+
'--color-cyan-400': '#22D3EE',
122+
'--color-cyan-500': '#06B6D4',
123+
'--color-cyan-600': '#0891B2',
124+
'--color-cyan-700': '#0E7490',
125+
'--color-cyan-800': '#155E75',
126+
'--color-cyan-900': '#164E63',
127+
'--color-teal-50': '#F0FDFA',
128+
'--color-teal-100': '#CCFBF1',
129+
'--color-teal-200': '#99F6E4',
130+
'--color-teal-300': '#5EEAD4',
131+
'--color-teal-400': '#2DD4BF',
132+
'--color-teal-500': '#14B8A6',
133+
'--color-teal-600': '#0D9488',
134+
'--color-teal-700': '#0F766E',
135+
'--color-teal-800': '#115E59',
136+
'--color-teal-900': '#134E4A',
137+
},
138+
});
139+
22140
// tooltip and popover styles
23141
if (tooltips) {
24142
addBase({
@@ -1320,141 +1438,6 @@ module.exports = plugin.withOptions(
13201438
function (options = {}) {
13211439
return {
13221440
darkMode: 'class', // or 'media' or 'class',
1323-
theme: {
1324-
extend: {
1325-
height: {
1326-
modal: 'calc(100% - 2rem)',
1327-
},
1328-
boxShadow: {
1329-
'sm-light': '0 2px 5px 0px rgba(255, 255, 255, 0.08)',
1330-
},
1331-
colors: {
1332-
transparent: 'transparent',
1333-
white: '#ffffff',
1334-
black: '#000000',
1335-
gray: {
1336-
50: '#F9FAFB',
1337-
100: '#F3F4F6',
1338-
200: '#E5E7EB',
1339-
300: '#D1D5DB',
1340-
400: '#9CA3AF',
1341-
500: '#6B7280',
1342-
600: '#4B5563',
1343-
700: '#374151',
1344-
800: '#1F2937',
1345-
900: '#111827',
1346-
},
1347-
red: {
1348-
50: '#FDF2F2',
1349-
100: '#FDE8E8',
1350-
200: '#FBD5D5',
1351-
300: '#F8B4B4',
1352-
400: '#F98080',
1353-
500: '#F05252',
1354-
600: '#E02424',
1355-
700: '#C81E1E',
1356-
800: '#9B1C1C',
1357-
900: '#771D1D',
1358-
},
1359-
orange: {
1360-
50: '#FFF8F1',
1361-
100: '#FEECDC',
1362-
200: '#FCD9BD',
1363-
300: '#FDBA8C',
1364-
400: '#FF8A4C',
1365-
500: '#FF5A1F',
1366-
600: '#D03801',
1367-
700: '#B43403',
1368-
800: '#8A2C0D',
1369-
900: '#771D1D',
1370-
},
1371-
yellow: {
1372-
50: '#FDFDEA',
1373-
100: '#FDF6B2',
1374-
200: '#FCE96A',
1375-
300: '#FACA15',
1376-
400: '#E3A008',
1377-
500: '#C27803',
1378-
600: '#9F580A',
1379-
700: '#8E4B10',
1380-
800: '#723B13',
1381-
900: '#633112',
1382-
},
1383-
green: {
1384-
50: '#F3FAF7',
1385-
100: '#DEF7EC',
1386-
200: '#BCF0DA',
1387-
300: '#84E1BC',
1388-
400: '#31C48D',
1389-
500: '#0E9F6E',
1390-
600: '#057A55',
1391-
700: '#046C4E',
1392-
800: '#03543F',
1393-
900: '#014737',
1394-
},
1395-
teal: {
1396-
50: '#EDFAFA',
1397-
100: '#D5F5F6',
1398-
200: '#AFECEF',
1399-
300: '#7EDCE2',
1400-
400: '#16BDCA',
1401-
500: '#0694A2',
1402-
600: '#047481',
1403-
700: '#036672',
1404-
800: '#05505C',
1405-
900: '#014451',
1406-
},
1407-
blue: {
1408-
50: '#EBF5FF',
1409-
100: '#E1EFFE',
1410-
200: '#C3DDFD',
1411-
300: '#A4CAFE',
1412-
400: '#76A9FA',
1413-
500: '#3F83F8',
1414-
600: '#1C64F2',
1415-
700: '#1A56DB',
1416-
800: '#1E429F',
1417-
900: '#233876',
1418-
},
1419-
indigo: {
1420-
50: '#F0F5FF',
1421-
100: '#E5EDFF',
1422-
200: '#CDDBFE',
1423-
300: '#B4C6FC',
1424-
400: '#8DA2FB',
1425-
500: '#6875F5',
1426-
600: '#5850EC',
1427-
700: '#5145CD',
1428-
800: '#42389D',
1429-
900: '#362F78',
1430-
},
1431-
purple: {
1432-
50: '#F6F5FF',
1433-
100: '#EDEBFE',
1434-
200: '#DCD7FE',
1435-
300: '#CABFFD',
1436-
400: '#AC94FA',
1437-
500: '#9061F9',
1438-
600: '#7E3AF2',
1439-
700: '#6C2BD9',
1440-
800: '#5521B5',
1441-
900: '#4A1D96',
1442-
},
1443-
pink: {
1444-
50: '#FDF2F8',
1445-
100: '#FCE8F3',
1446-
200: '#FAD1E8',
1447-
300: '#F8B4D9',
1448-
400: '#F17EB8',
1449-
500: '#E74694',
1450-
600: '#D61F69',
1451-
700: '#BF125D',
1452-
800: '#99154B',
1453-
900: '#751A3D',
1454-
},
1455-
},
1456-
},
1457-
},
14581441
};
14591442
}
14601443
);

0 commit comments

Comments
 (0)