mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update src/components/ThemeColor/index.js and tailwind.config.js

Browse Source
master
mahdi 3 years ago
parent 0448564fb7
commit 8ef1bf6e3a
6 changed files with 154 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/components/ThemeColor/ItemColor.js
  2. 13
      src/components/ThemeColor/default.js
  3. 118
      src/components/ThemeColor/index.js
  4. 16
      src/components/ThemeColor/util/Picker.js
  5. 9
      src/components/ThemeColor/util/putTheme.js
  6. 83
      tailwind.config.js

9
src/components/ThemeColor/ItemColor.js
Unescape View File

@ -0,0 +1,9 @@
const ItemColor = ({ item, theme, className, onClick }) => {
return (
<div className={className} onClick={onClick}>
{item}
<p className="text-xs">{theme[item]}</p>
</div>
);
};
export default ItemColor;

13
src/components/ThemeColor/default.js
Unescape View File

@ -0,0 +1,13 @@
const defaultTheme = {
primary: "#61DAFB",
primaryText: "#000000",
primaryDark: "#61DAFB",
primaryLight: "#61DAFB",
secondary: "#254E70",
secondaryText: "#000000",
secondaryDark: "#61DAFB",
secondaryLight: "#61DAFB",
};
const classNames =
"bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark bg-primaryLight text-primaryDark text-primaryLight bg-primaryDark bg-secondaryLight text-secondaryDark text-secondaryLight bg-secondaryDark text-secondaryDark ";
export default defaultTheme;

118
src/components/ThemeColor/index.js
Unescape View File

@ -1,15 +1,14 @@
import React, { useState } from "react"; import React, { useState } from "react";
import SwitchDesign from "../SwitchDesign/Switch"; import SwitchDesign from "../SwitchDesign/Switch";
import { SketchPicker } from "react-color"; import putTheme from "./util/putTheme";
import defaultTheme from "./default";
import Picker from "./util/Picker";
import ItemColor from "./ItemColor";
const ThemeColor = () => { const ThemeColor = () => {
const colors = ["#9253a1", "#f063a4", "#2dc5f4"]; const [item, setItem] = useState(null);
const [theme, setTheme] = useState(defaultTheme);
const [background, setBackground] = useState("#071415"); putTheme(theme);
const [current, setCurrent] = useState(null);
const [color, setColor] = useState("lightblue");
const [hidden, setHidden] = useState(false);
return ( return (
<div className="ltr w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]"> <div className="ltr w-full h-screen flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
@ -27,7 +26,7 @@ const ThemeColor = () => {
{/* right */} {/* right */}
<div className="w-1/2 flex-grow flex-1 flex flex-col p-4">fsd</div> <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">fsd</div>
{/* left */} {/* left */}
<div className="w-1/2 flex-grow flex-1 flex flex-col p-4 bg-red-200"> <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">
<div className="w-full flex flex-row-reverse items-center justify-between"> <div className="w-full flex flex-row-reverse items-center justify-between">
<div className="flex flex-row-reverse items-center justify-between"> <div className="flex flex-row-reverse items-center justify-between">
<span className="text-xs ml-2">Dark</span> <SwitchDesign /> <span className="text-xs ml-2">Dark</span> <SwitchDesign />
@ -35,35 +34,106 @@ const ThemeColor = () => {
<p className="text-2xl">The Color System</p> <p className="text-2xl">The Color System</p>
</div> </div>
<hr className="my-2 border border-[#b8dff3]" /> <hr className="my-2 border border-[#b8dff3]" />
<p className="text-[#64b6df] text-lg font-sansbold">
<p className="text-[#64b6df] text-lg font-sansbold ">
Original Colors Original Colors
</p> </p>
<div className="bg-red-400 flex flex-row justify-between gap-x-10 mt-2"> <div className="flex flex-row justify-between gap-x-10 mt-2">
<ColorCard
theme={theme}
item="primary"
text={true}
dark={true}
light={true}
setItem={setItem}
/>
<ColorCard
theme={theme}
item="secondary"
text={true}
dark={true}
light={true}
setItem={setItem}
/>
</div>
<ColorCard
theme={theme}
item="background"
text={true}
setItem={setItem}
/>
<ColorCard
theme={theme}
item="surface"
text={true}
setItem={setItem}
/>
</div>
</div>
{item && <Picker item={item} theme={theme} setTheme={setTheme} />}
</div>
);
};
export default ThemeColor;
const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
return (
<div className="flex-1 flex flex-col gap-y-3">
<div <div
className="flex-1 rounded-sm relative" className={`flex flex-col cursor-pointer rounded-lg relative p-4 bg-${item} ${
style={{ background: color }} text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item)}
> >
{hidden && ( <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
<SketchPicker {text && (
className="absolute bottom-10 left-0" <ItemColor
color={color} className="self-end text-sm"
onChange={(updatedColor) => setColor(updatedColor.hex)} item={item + "Text"}
theme={theme}
onClick={(e) => {
e.stopPropagation();
setItem(item + "Text");
}}
/> />
)} )}
<button onClick={() => setHidden(!hidden)}>
{hidden ? "close" : "open"}
</button>
</div> </div>
<div className="flex-1 bg-yellow-600 rounded-sm">Card</div> <div className="flex flex-row gap-x-3">
{" "}
{dark ? (
<div
className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Dark ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Dark")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Dark"}
theme={theme}
/>
</div> </div>
) : null}
{light ? (
<div
className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Light ${
text ? `text-${item}Text` : ""
}`}
onClick={() => setItem(item + "Light")}
>
<ItemColor
className=" text-lg font-bold"
item={item + "Light"}
theme={theme}
/>
</div> </div>
) : null}
</div> </div>
</div> </div>
); );
}; };
export default ThemeColor;
// <div style={{ background: background }} className="h-screen w-full"> // <div style={{ background: background }} className="h-screen w-full">
// {current != null && <h1>Copied {current}</h1>} // {current != null && <h1>Copied {current}</h1>}
// <div className=" flex flex-row item-center justify-center"> // <div className=" flex flex-row item-center justify-center">

16
src/components/ThemeColor/util/Picker.js
Unescape View File

@ -0,0 +1,16 @@
import { SketchPicker } from "react-color";
import { useState } from "react";
const Picker = ({ theme, item, setTheme }) => {
const [color, setColor] = useState(theme[item]);
return (
<SketchPicker
className="absolute bottom-16 left-0"
color={color}
onChange={(updatedColor) => {
setColor(updatedColor.hex);
setTheme({ ...theme, [item]: updatedColor.hex });
}}
/>
);
};
export default Picker;

9
src/components/ThemeColor/util/putTheme.js
Unescape View File

@ -0,0 +1,9 @@
const putTheme = (theme) => {
const root = document.documentElement;
Object.keys(theme).forEach((property) => {
if (property === "name") return;
root.style.setProperty(`--theme-${property}`, theme[property]);
});
};
putTheme({});
export default putTheme;

83
tailwind.config.js
Unescape View File

@ -11,79 +11,16 @@ module.exports = {
sansbold: ["sansbold"], sansbold: ["sansbold"],
}, },
}, },
colors: {
textColor: (theme) => ({ primary: "var(--theme-primary)",
...theme("colors"), primaryText: "var(--theme-primaryText)",
// used in ProductDesign Component secondary: "var(--theme-secondary)",
discountPriceTitle: "#4ACA53", secondaryText: "var(--theme-secondaryText)",
productTitle: "#246E8A", primaryDark: "var(--theme-primaryDark)",
productContent: "#707070", primaryLight: "var(--theme-primaryLight)",
productStar: "#F7FF00", secondaryDark: "var(--theme-secondaryDark)",
productPrice: "#132F52", secondaryLight: "var(--theme-secondaryLight)",
productBorderBtn: "FFF3F3", },
productTag: "#38A1B6",
borderColor: "#dbdbdb",
selectColor1: "#924EEB",
selectColor2: "#89ECFF",
selectColor3: "#FC5353",
selectColor4: "#FCF653",
grayTextColor: "#646464",
lightGrayTextColor: "#818181",
lightOrangeTextColor: "#F7B605",
lightYellowTextColor: "#C8EE49",
lightGreenTextColor: "#5DCE06",
lightPurpleTextColor: "#A680FF",
lightBlueTextColor: "#06BACE",
lightBlueTextColor2: "#196EC0",
darkBlueTextColor: "#0615CE",
darkBlueTextColor2: "#235A90",
darkRedTextColor: "#CE3B06",
darkCrimsonTextColor: "#05335F",
}),
backgroundColor: (theme) => ({
...theme("colors"),
// used in ProductDesign Component
productTagBg: "#E1FAFF",
likeBtnBg: "#FFF3F3",
discountPriceBg: "#F0FFF1",
counterBg: "#66B1EB",
incrementDecrementBg: "#2E7AB5",
blueBgColor: "#196EC0",
darkGreenBg: "#038A99",
lightGrayBgColor: "#818181",
midGrayBgColor: "#DBDBDB",
lightOrangeBgColor: "#F7B60511",
lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%
lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
greenBookBg: "#5DA041",
darkGreenBookBg: "#293636",
lightBlueBookBg: "#9BBCCC",
lightSkyBlueBookBg: "#B2D6EE",
darkNavyBlueBookBg: "#0E0E0E",
darkCrimsonBgColor: "#132F52",
rangeBgColor: "#D3E9FF",
rangeFillBgColor: "#68A8E6",
playButtonIcon: "#0D0D0D99",
playButtonIcon2: "#E8E8E899",
blackBg: "#606060 ",
removeCardBgColor: "#FA472B",
}),
borderColor: (theme) => ({
...theme("colors"),
// used in ProductDesign Component
productDesignBorderColor: "#F3F3F3",
lightBlueBorderColor: "#06BACE",
grayBorderColor: "#C3C3C3",
lightGrayBorderColor: "#DBDBDB88",
lightOrangeBorderColor: "#F7B605",
lightYellowBorderColor: "#CFFF2D",
lightGreenBorderColor: "#5DCE06",
lightPurpleBorderColor: "#A680FF",
darkBlueBorderColor: "#0615CE",
darkCrimsonBorderColor: "#132F52",
}),
}, },
plugins: [ plugins: [
require("@themesberg/flowbite/plugin"), require("@themesberg/flowbite/plugin"),

Write Preview
Loading…
Cancel
Save