Skip to content

Commit 57c24d0

Browse files
JefteCaroJefteCaro
authored
Merge pull request #40 from dimitribarbot/allow-custom-colors
Add primary and secondary colors as available theming colors to allow anyone to use their own custom color
2 parents b0df81d + e3a81da commit 57c24d0

File tree

3 files changed

+50
-48
lines changed

3 files changed

+50
-48
lines changed

‎src/components/Calendar/Days.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import dayjs from "dayjs";
22
import React, { useCallback, useContext } from "react";
33

4-
import { BG_COLOR } from "../../constants";
4+
import { BG_COLOR, TEXT_COLOR } from "../../constants";
55
import DatepickerContext from "../../contexts/DatepickerContext";
6-
import {
7-
formatDate,
8-
getTextColorByPrimaryColor,
9-
nextMonth,
10-
previousMonth,
11-
classNames as cn
12-
} from "../../helpers";
6+
import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
137

148
const isBetween = require("dayjs/plugin/isBetween");
159
dayjs.extend(isBetween);
@@ -53,7 +47,7 @@ const Days: React.FC<Props> = ({
5347
item >= 10 ? item : "0" + item
5448
}`;
5549
if (formatDate(dayjs()) === formatDate(dayjs(itemDate)))
56-
return getTextColorByPrimaryColor(primaryColor);
50+
return TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
5751
return "";
5852
},
5953
[calendarData.date, primaryColor]

‎src/components/utils.tsx‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useContext } from "react";
22

3-
import { BG_COLOR, BORDER_COLOR, RING_COLOR } from "../constants";
3+
import { BG_COLOR, BORDER_COLOR, BUTTON_COLOR, RING_COLOR } from "../constants";
44
import DatepickerContext from "../contexts/DatepickerContext";
55

66
interface IconProps {
@@ -181,44 +181,9 @@ export const RoundedButton: React.FC<Button> = ({
181181
const defaultClass = !roundedFull
182182
? `w-full tracking-wide ${darkClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
183183
: `${darkClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
184-
switch (primaryColor) {
185-
case "blue":
186-
return `${defaultClass} focus:ring-blue-500/50 focus:bg-blue-100/50`;
187-
case "orange":
188-
return `${defaultClass} focus:ring-orange-500/50 focus:bg-orange-100/50`;
189-
case "yellow":
190-
return `${defaultClass} focus:ring-yellow-500/50 focus:bg-yellow-100/50`;
191-
case "red":
192-
return `${defaultClass} focus:ring-red-500/50 focus:bg-red-100/50`;
193-
case "purple":
194-
return `${defaultClass} focus:ring-purple-500/50 focus:bg-purple-100/50`;
195-
case "amber":
196-
return `${defaultClass} focus:ring-amber-500/50 focus:bg-amber-100/50`;
197-
case "lime":
198-
return `${defaultClass} focus:ring-lime-500/50 focus:bg-lime-100/50`;
199-
case "green":
200-
return `${defaultClass} focus:ring-green-500/50 focus:bg-green-100/50`;
201-
case "emerald":
202-
return `${defaultClass} focus:ring-emerald-500/50 focus:bg-emerald-100/50`;
203-
case "teal":
204-
return `${defaultClass} focus:ring-teal-500/50 focus:bg-teal-100/50`;
205-
case "cyan":
206-
return `${defaultClass} focus:ring-cyan-500/50 focus:bg-cyan-100/50`;
207-
case "sky":
208-
return `${defaultClass} focus:ring-sky-500/50 focus:bg-sky-100/50`;
209-
case "indigo":
210-
return `${defaultClass} focus:ring-indigo-500/50 focus:bg-indigo-100/50`;
211-
case "violet":
212-
return `${defaultClass} focus:ring-violet-500/50 focus:bg-violet-100/50`;
213-
case "fuchsia":
214-
return `${defaultClass} focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50`;
215-
case "pink":
216-
return `${defaultClass} focus:ring-pink-500/50 focus:bg-pink-100/50`;
217-
case "rose":
218-
return `${defaultClass} focus:ring-rose-500/50 focus:bg-rose-100/50`;
219-
default:
220-
return "";
221-
}
184+
const buttonFocusColor =
185+
BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
186+
return `${defaultClass} ${buttonFocusColor}`;
222187
}, [padding, primaryColor, roundedFull]);
223188

224189
return (

‎src/constants/index.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export const COLORS = [
2525

2626
export const DEFAULT_COLOR = "blue";
2727

28+
// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `bg-${color}-100`
29+
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
2830
export const BG_COLOR = {
2931
100: {
3032
blue: "bg-blue-100",
@@ -105,6 +107,25 @@ export const BG_COLOR = {
105107
};
106108

107109
export const TEXT_COLOR = {
110+
500: {
111+
blue: "text-blue-500",
112+
orange: "text-orange-500",
113+
yellow: "text-yellow-500",
114+
red: "text-red-500",
115+
purple: "text-purple-500",
116+
amber: "text-amber-500",
117+
lime: "text-lime-500",
118+
green: "text-green-500",
119+
emerald: "text-emerald-500",
120+
teal: "text-teal-500",
121+
cyan: "text-cyan-500",
122+
sky: "text-sky-500",
123+
indigo: "text-indigo-500",
124+
violet: "text-violet-500",
125+
fuchsia: "text-fuchsia-500",
126+
pink: "text-pink-500",
127+
rose: "text-rose-500"
128+
},
108129
600: {
109130
blue: "text-blue-600 dark:text-blue-400 dark:hover:text-blue-400",
110131
orange: "text-orange-600 dark:text-orange-400 dark:hover:text-orange-400",
@@ -227,6 +248,28 @@ export const RING_COLOR = {
227248
}
228249
};
229250

251+
export const BUTTON_COLOR = {
252+
focus: {
253+
blue: "focus:ring-blue-500/50 focus:bg-blue-100/50",
254+
orange: "focus:ring-orange-500/50 focus:bg-orange-100/50",
255+
yellow: "focus:ring-yellow-500/50 focus:bg-yellow-100/50",
256+
red: "focus:ring-red-500/50 focus:bg-red-100/50",
257+
purple: "focus:ring-purple-500/50 focus:bg-purple-100/50",
258+
amber: "focus:ring-amber-500/50 focus:bg-amber-100/50",
259+
lime: "focus:ring-lime-500/50 focus:bg-lime-100/50",
260+
green: "focus:ring-green-500/50 focus:bg-green-100/50",
261+
emerald: "focus:ring-emerald-500/50 focus:bg-emerald-100/50",
262+
teal: "focus:ring-teal-500/50 focus:bg-teal-100/50",
263+
cyan: "focus:ring-cyan-500/50 focus:bg-cyan-100/50",
264+
sky: "focus:ring-sky-500/50 focus:bg-sky-100/50",
265+
indigo: "focus:ring-indigo-500/50 focus:bg-indigo-100/50",
266+
violet: "focus:ring-violet-500/50 focus:bg-violet-100/50",
267+
fuchsia: "focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50",
268+
pink: "focus:ring-pink-500/50 focus:bg-pink-100/50",
269+
rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
270+
}
271+
};
272+
230273
export const DEFAULT_SHORTCUTS = {
231274
today: {
232275
text: "Today",

0 commit comments

Comments
 (0)