Skip to content

Commit 38984c1

Browse files
refactor(colors): move colors from plugin to theme file
1 parent 23732fd commit 38984c1

File tree

4 files changed

+117
-119
lines changed

4 files changed

+117
-119
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@
119119
"files": [
120120
"lib",
121121
"dist",
122+
"src",
122123
"types",
123124
"plugin.d.ts",
124125
"plugin.js",

plugin.js

Lines changed: 0 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -18,125 +18,6 @@ module.exports = plugin.withOptions(function (options = {}) {
1818
} = options;
1919

2020
return function ({ addBase, addComponents, theme }) {
21-
// set color variables
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-
14021
// tooltip and popover styles
14122
if (tooltips) {
14223
addBase({

src/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "tailwindcss";
2+
@import "./themes/default.css";
23
@plugin "./../plugin.js";
34
@plugin "flowbite-typography";
45

src/themes/default.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@theme {
2+
--color-transparent: transparent;
3+
--color-white: #ffffff;
4+
--color-black: #000000;
5+
--color-gray-50: #F9FAFB;
6+
--color-gray-100: #F3F4F6;
7+
--color-gray-200: #E5E7EB;
8+
--color-gray-300: #D1D5DB;
9+
--color-gray-400: #9CA3AF;
10+
--color-gray-500: #6B7280;
11+
--color-gray-600: #4B5563;
12+
--color-gray-700: #374151;
13+
--color-gray-800: #1F2937;
14+
--color-gray-900: #111827;
15+
--color-red-50: #FEF2F2;
16+
--color-red-100: #FEE2E2;
17+
--color-red-200: #FECACA;
18+
--color-red-300: #FCA5A5;
19+
--color-red-400: #F87171;
20+
--color-red-500: #EF4444;
21+
--color-red-600: #DC2626;
22+
--color-red-700: #B91C1C;
23+
--color-red-800: #991B1B;
24+
--color-red-900: #7F1D1D;
25+
--color-yellow-50: #FFFBEB;
26+
--color-yellow-100: #FEF3C7;
27+
--color-yellow-200: #FDE68A;
28+
--color-yellow-300: #FCD34D;
29+
--color-yellow-400: #FBBF24;
30+
--color-yellow-500: #F59E0B;
31+
--color-yellow-600: #D97706;
32+
--color-yellow-700: #B45309;
33+
--color-yellow-800: #92400E;
34+
--color-yellow-900: #78350F;
35+
--color-green-50: #ECFDF5;
36+
--color-green-100: #D1FAE5;
37+
--color-green-200: #A7F3D0;
38+
--color-green-300: #6EE7B7;
39+
--color-green-400: #34D399;
40+
--color-green-500: #10B981;
41+
--color-green-600: #059669;
42+
--color-green-700: #047857;
43+
--color-green-800: #065F46;
44+
--color-green-900: #064E3B;
45+
--color-blue-50: #EFF6FF;
46+
--color-blue-100: #DBEAFE;
47+
--color-blue-200: #BFDBFE;
48+
--color-blue-300: #93C5FD;
49+
--color-blue-400: #60A5FA;
50+
--color-blue-500: #3B82F6;
51+
--color-blue-600: #2563EB;
52+
--color-blue-700: #1D4ED8;
53+
--color-blue-800: #1E40AF;
54+
--color-blue-900: #1E3A8A;
55+
--color-indigo-50: #EEF2FF;
56+
--color-indigo-100: #E0E7FF;
57+
--color-indigo-200: #C7D2FE;
58+
--color-indigo-300: #A5B4FC;
59+
--color-indigo-400: #818CF8;
60+
--color-indigo-500: #6366F1;
61+
--color-indigo-600: #4F46E5;
62+
--color-indigo-700: #4338CA;
63+
--color-indigo-800: #3730A3;
64+
--color-indigo-900: #312E81;
65+
--color-purple-50: #F5F3FF;
66+
--color-purple-100: #EDE9FE;
67+
--color-purple-200: #DDD6FE;
68+
--color-purple-300: #C4B5FD;
69+
--color-purple-400: #A78BFA;
70+
--color-purple-500: #8B5CF6;
71+
--color-purple-600: #7C3AED;
72+
--color-purple-700: #6D28D9;
73+
--color-purple-800: #5B21B6;
74+
--color-purple-900: #4C1D95;
75+
--color-pink-50: #FDF2F8;
76+
--color-pink-100: #FCE7F3;
77+
--color-pink-200: #FBCFE8;
78+
--color-pink-300: #F9A8D4;
79+
--color-pink-400: #F472B6;
80+
--color-pink-500: #EC4899;
81+
--color-pink-600: #DB2777;
82+
--color-pink-700: #BE185D;
83+
--color-pink-800: #9D174D;
84+
--color-pink-900: #831843;
85+
--color-orange-50: #FFFAF0;
86+
--color-orange-100: #FEEBC8;
87+
--color-orange-200: #FBD38D;
88+
--color-orange-300: #F6AD55;
89+
--color-orange-400: #ED8936;
90+
--color-orange-500: #DD6B20;
91+
--color-orange-600: #C05621;
92+
--color-orange-700: #9C4221;
93+
--color-orange-800: #7B341E;
94+
--color-orange-900: #652B19;
95+
--color-cyan-50: #ECFEFF;
96+
--color-cyan-100: #CFFAFE;
97+
--color-cyan-200: #A5F3FC;
98+
--color-cyan-300: #67E8F9;
99+
--color-cyan-400: #22D3EE;
100+
--color-cyan-500: #06B6D4;
101+
--color-cyan-600: #0891B2;
102+
--color-cyan-700: #0E7490;
103+
--color-cyan-800: #155E75;
104+
--color-cyan-900: #164E63;
105+
--color-teal-50: #F0FDFA;
106+
--color-teal-100: #CCFBF1;
107+
--color-teal-200: #99F6E4;
108+
--color-teal-300: #5EEAD4;
109+
--color-teal-400: #2DD4BF;
110+
--color-teal-500: #14B8A6;
111+
--color-teal-600: #0D9488;
112+
--color-teal-700: #0F766E;
113+
--color-teal-800: #115E59;
114+
--color-teal-900: #134E4A;
115+
}

0 commit comments

Comments
 (0)