marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shaffuru files sync

Browse Source
This commit is contained in:
Lalit Deore
2026-05-07 15:27:32 +05:30
parent 0bc92c9fa7
commit 4cff6addde
54 changed files with 5857 additions and 3687 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/theme.jsx
+85 -95
View File
@@ -77,7 +77,7 @@ const theme = createTheme(adaptV4Theme({
defaultImage: "/images/no_image.png",
singulOrange: "/images/singul_orange.png",
singulGreen: "/images/singul_green.png",
singulBlackWhite: "/images/singul_black_white.png",
singulBlackWhite: "/icons/workflow-page/shuffle_agent.png", // For AI Agent stuff
},
typography: {
fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
@@ -153,20 +153,10 @@ const theme = createTheme(adaptV4Theme({
export default theme;
export const getTheme = (themeMode, brandColor) => {
// Handle "system" mode by checking user's system preference
let resolvedMode = themeMode;
if (themeMode === "system" || !themeMode) {
resolvedMode = window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
}
// Ensure mode is only "dark" or "light"
if (resolvedMode !== "dark" && resolvedMode !== "light") {
resolvedMode = "dark";
}
return createTheme({
export const getTheme = (themeMode, brandColor) =>
createTheme({
palette: {
mode: resolvedMode,
mode: themeMode,
main: brandColor || "#FF8544",
primary: {
main: brandColor || "#FF8544",
@@ -177,35 +167,36 @@ export const getTheme = (themeMode, brandColor) => {
contrastText:"#000000",
},
text: {
primary: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
secondary: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
primary: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
secondary: themeMode === "dark" ? "#9E9E9E" : "#616161",
},
type: resolvedMode,
inputColor: resolvedMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)",
textColor: resolvedMode === "dark" ? "#F1F1F1" : "#1A1A1A",
textPrimary: resolvedMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)",
surfaceColor: resolvedMode === "dark" ? "#27292d" : "#EFEFEF",
platformColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
backgroundColor: resolvedMode === "dark" ? "#1a1a1a" : "#f1f1f1",
cytoscapeBackgroundColor: resolvedMode === "dark" ? "#161616" : "#f5f5f5",
distributionColor: resolvedMode === "dark" ? "#40E0D0" : "#008080",
cardBackgroundColor: resolvedMode === "dark" ? "#1e1e1e" : "#eaeaea",
cardHoverColor: resolvedMode === "dark" ? "#323232" : "#F0F0F0",
hoverColor: resolvedMode === "dark" ? "#323232" : "#D6D6D6",
usecaseCardColor: resolvedMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)",
usecaseCardHoverColor: resolvedMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)",
usecaseDialogFieldColor: resolvedMode === "dark" ? "#2B2B2B" : "#F5F5F5",
accentColor: resolvedMode === "dark" ? "#ff8544" : "#ff8544",
green: resolvedMode === "dark" ? "#5cc879" : "#008000",
defaultBorder: resolvedMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC',
type: themeMode,
inputColor: themeMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)",
textColor: themeMode === "dark" ? "#F1F1F1" : "#1A1A1A",
textPrimary: themeMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)",
surfaceColor: themeMode === "dark" ? "#27292d" : "#EFEFEF",
platformColor: themeMode === "dark" ? "#212121" : "#ffffff",
backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#f1f1f1",
cytoscapeBackgroundColor: themeMode === "dark" ? "#161616" : "#f5f5f5",
distributionColor: themeMode === "dark" ? "#40E0D0" : "#008080",
cardBackgroundColor: themeMode === "dark" ? "#1e1e1e" : "#eaeaea",
cardHoverColor: themeMode === "dark" ? "#323232" : "#F0F0F0",
hoverColor: themeMode === "dark" ? "#323232" : "#D6D6D6",
usecaseCardColor: themeMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)",
usecaseCardHoverColor: themeMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)",
usecaseDialogFieldColor: themeMode === "dark" ? "#2B2B2B" : "#F5F5F5",
accentColor: themeMode === "dark" ? "#ff8544" : "#ff8544",
green: themeMode === "dark" ? "#5cc879" : "#008000",
defaultBorder: themeMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC',
linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor,
slateGrayColor: resolvedMode === "dark" ? "#494949" : "#CCCCCC",
parsedAppPaperColor: resolvedMode === "dark" ? "#2f2f2f" : "#CCCCCC",
slateGrayColor: themeMode === "dark" ? "#494949" : "#CCCCCC",
parsedAppPaperColor: themeMode === "dark" ? "#2f2f2f" : "#CCCCCC",
welcomeCardSubtextColor: themeMode === "dark" ? "#C8C8C8" : "#2f2f2f",
deleteColor: themeMode === "dark" ? "#FD4C62" : "#d32f2f",
borderRadius: 10,
loaderColor: resolvedMode === "dark" ? "#1a1a1a" : "#E0E0E0",
loaderColor: themeMode === "dark" ? "#1a1a1a" : "#E0E0E0",
jsonIconStyle: "round",
jsonTheme: resolvedMode === "dark" ? "summerfruit" : {
jsonTheme: themeMode === "dark" ? "summerfruit" : {
base00: "#ffffff", // background
base01: "#f0f0f0", // very light grey
base02: "#f5f5f5", // light grey
@@ -225,11 +216,11 @@ export const getTheme = (themeMode, brandColor) => {
},
jsonCollapseStringsAfterLength: 100,
drawer: {
backgroundColor: resolvedMode === "dark" ? "#262626" : "#f9f9f9"
backgroundColor: themeMode === "dark" ? "#262626" : "#f9f9f9"
},
actionSidebarField: {
backgroundColor: resolvedMode === "dark" ? "#2F2F2F" : "#F1F1F1",
color: resolvedMode === "dark" ? "#ffffff" : "#000000",
backgroundColor: themeMode === "dark" ? "#2F2F2F" : "#F1F1F1",
color: themeMode === "dark" ? "#ffffff" : "#000000",
borderRadius: 8,
height: 40,
border: "none",
@@ -238,53 +229,53 @@ export const getTheme = (themeMode, brandColor) => {
padding: 5,
width: "98%",
borderRadius: 5,
border: resolvedMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)",
backgroundColor: resolvedMode === "dark"
border: themeMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)",
backgroundColor: themeMode === "dark"
? "#1A1A1A"
: "#f1f1f1",
color: resolvedMode === "dark"
color: themeMode === "dark"
? "#F1F1F1"
: "#1A1A1A",
overflowX: "auto",
},
textFieldStyle: {
backgroundColor: resolvedMode === "dark" ? "#212121" : "#FFFFFF",
color: resolvedMode === "dark" ? "#ffffff" : "#000000",
backgroundColor: themeMode === "dark" ? "#212121" : "#FFFFFF",
color: themeMode === "dark" ? "#ffffff" : "#000000",
borderRadius: "5px",
height: 40,
border: resolvedMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0",
border: themeMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0",
},
DialogStyle: {
backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff",
borderRadius: 2,
boxShadow: resolvedMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)",
border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
boxShadow: themeMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
},
innerTextfieldStyle: {
height: 40,
fontSize: 16,
backgroundColor: resolvedMode === "dark" ? "#212121" : "#f5f5f5",
backgroundColor: themeMode === "dark" ? "#212121" : "#f5f5f5",
},
tooltip: {
backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
color: resolvedMode === "dark" ? "#ffffff" : "#000000",
border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff",
color: themeMode === "dark" ? "#ffffff" : "#000000",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
},
chipStyle: {
backgroundColor: resolvedMode === "dark" ? "#333333" : "#F5F5F5",
borderColor: resolvedMode === "dark" ? "#444444" : "#E0E0E0",
color: resolvedMode === "dark" ? "#FFFFFF" : "#333333",
backgroundColor: themeMode === "dark" ? "#333333" : "#F5F5F5",
borderColor: themeMode === "dark" ? "#444444" : "#E0E0E0",
color: themeMode === "dark" ? "#FFFFFF" : "#333333",
},
defaultImage: "/images/no_image.png",
singulOrange: "/images/singul_orange.png",
singulGreen: "/images/singul_green.png",
singulBlackWhite: "/icons/workflow-page/shuffle_agent.png",
scrollbarColor: resolvedMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1",
scrollbarColorTransparent: resolvedMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent",
scrollbarColor: themeMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1",
scrollbarColorTransparent: themeMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent",
},
typography: {
fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
color: resolvedMode === "dark" ? "#ffffff" : "#000000",
color: themeMode === "dark" ? "#ffffff" : "#000000",
useNextVariants: true,
fontWeightLight: 300,
fontWeightRegular: 400,
@@ -292,36 +283,36 @@ export const getTheme = (themeMode, brandColor) => {
fontWeightSemiBold: 600,
fontWeightBold: 700,
allVariants: {
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
},
h1: {
fontSize: 40,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
h2: {
fontSize: 36,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
h3: {
fontSize: 32,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
h4: {
fontSize: 30,
fontWeight: 500,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
h6: {
fontSize: 22,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
body1: {
fontSize: 16,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
body2: {
fontSize: 14,
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A"
},
},
components: {
@@ -336,7 +327,7 @@ export const getTheme = (themeMode, brandColor) => {
{
props: { variant: 'text', color: 'primary' },
style: {
color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A",
whiteSpace: "nowrap",
textWrap: "normal",
},
@@ -344,7 +335,7 @@ export const getTheme = (themeMode, brandColor) => {
{
props: { variant: 'text', color: 'secondary' },
style: {
color: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
color: themeMode === "dark" ? "#9E9E9E" : "#616161",
whiteSpace: "nowrap",
textWrap: "normal",
},
@@ -352,24 +343,24 @@ export const getTheme = (themeMode, brandColor) => {
{
props: { variant: 'contained', color: 'primary' },
style: {
backgroundColor: resolvedMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35',
color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
backgroundColor: themeMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF',
borderRadius: '4px',
whiteSpace: "nowrap",
textWrap: "normal",
transition: 'background-color 0.2s ease-in-out',
'&:hover': {
fontWeight: 600,
backgroundColor: resolvedMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F',
color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
backgroundColor: themeMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF',
},
},
},
{
props: { variant: 'contained', color: 'secondary' },
style: {
backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C',
borderRadius: '4px',
boxShadow: 'none',
whiteSpace: "nowrap",
@@ -377,23 +368,23 @@ export const getTheme = (themeMode, brandColor) => {
textWrap: "normal",
'&:hover': {
fontWeight: 600,
border: resolvedMode === "dark" ? '1px solid #f1f1f1' : 'none',
backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
border: themeMode === "dark" ? '1px solid #f1f1f1' : 'none',
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C',
},
},
},
{
props: { variant: 'outlined', color: 'primary' },
style: {
borderColor: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
color: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
borderColor: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
color: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
whiteSpace: "nowrap",
fontWeight: 'normal',
textWrap: "normal",
'&:hover': {
backgroundColor: resolvedMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc",
color: resolvedMode === "dark" ? "#1a1a1a" : "#8a3d00",
backgroundColor: themeMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc",
color: themeMode === "dark" ? "#1a1a1a" : "#8a3d00",
fontWeight: 600,
},
},
@@ -402,14 +393,14 @@ export const getTheme = (themeMode, brandColor) => {
props: { variant: 'outlined', color: 'secondary' },
style: {
border: '1px solid #C5C5C5',
color: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
color: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D',
whiteSpace: "nowrap",
textWrap: "normal",
'&:hover': {
backgroundColor: resolvedMode === "dark" ? '#C5C5C5' : '#EFEFEF',
borderColor: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
backgroundColor: themeMode === "dark" ? '#C5C5C5' : '#EFEFEF',
borderColor: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D',
fontWeight: 600,
color: resolvedMode === "dark" ? '#1a1a1a' : '#1A1A1A',
color: themeMode === "dark" ? '#1a1a1a' : '#1A1A1A',
},
},
},
@@ -432,8 +423,8 @@ export const getTheme = (themeMode, brandColor) => {
background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)',
},
'&:disabled': {
background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
background: themeMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#9E9E9E' : '#616161',
},
},
},
@@ -478,9 +469,9 @@ export const getTheme = (themeMode, brandColor) => {
},
'&:disabled': {
background: 'transparent',
color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
color: themeMode === "dark" ? '#9E9E9E' : '#616161',
'&::before': {
background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
background: themeMode === "dark" ? '#494949' : '#C9C9C9',
},
},
},
@@ -490,7 +481,7 @@ export const getTheme = (themeMode, brandColor) => {
MuiTab: {
styleOverrides: {
root: {
color: resolvedMode === "dark" ? "#C5C5C5" : "#1A1A1A",
color: themeMode === "dark" ? "#C5C5C5" : "#1A1A1A",
},
},
},
@@ -499,7 +490,7 @@ export const getTheme = (themeMode, brandColor) => {
overrides: {
MuiMenu: {
list: {
backgroundColor: resolvedMode === "dark" ? "#27292d" : "#ffffff",
backgroundColor: themeMode === "dark" ? "#27292d" : "#ffffff",
},
},
MuiCssBaseline: {
@@ -545,5 +536,4 @@ export const getTheme = (themeMode, brandColor) => {
},
},
});
}