meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Give dashboards a themed orb background and a solid current-nav state.

Browse Source 
Login pages share the same wash as the app shell; customer light mode matches business while dark mode stays gray.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-17 09:00:08 +03:30
co-authored by Cursor
parent e0e68de30f
commit 36180cda2b
25 changed files with 636 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/super-admin/src/index.css
+6 -6
View File
@@ -7,14 +7,14 @@
}
:root {
--bg-gradient-start: #dce8ff;
--bg-gradient-mid: #e8eeff;
--bg-gradient-end: #f4f7ff;
--bg-gradient-start: #eef3ff;
--bg-gradient-mid: #f4f8ff;
--bg-gradient-end: #f3fbff;
--glass-bg: rgba(255, 255, 255, 0.42);
--glass-bg-strong: rgba(255, 255, 255, 0.62);
--header-bg: color-mix(
in srgb,
color-mix(in srgb, var(--primary-light) 42%, #ffffff) 90%,
color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
transparent
);
--glass-border: rgba(255, 255, 255, 0.75);
@@ -63,8 +63,8 @@ body {
font-family: var(--font-ui);
color: var(--text-primary);
background:
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 90% 100%, rgba(56, 189, 248, 0.16) 0%, transparent 50%),
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 90% 100%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 45%, var(--bg-gradient-end) 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
apps/super-admin/src/utils/applyBusinessTheme.ts
+4
View File
@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
'--page-accent': '#38bdf8',
'--page-accent-rgb': '56 189 248',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
root.style.setProperty('--page-accent', tokens.pageAccent)
root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
}
export function resetBusinessPrimaryColor() {
apps/super-admin/src/utils/businessPrimaryColors.ts
+51 -6
View File
@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
/** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
pageAccent: string
pageAccentRgb: string
}
const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
chartAccentDarkRgb: '8 145 178',
} as const
const PEACH_PAGE = {
pageAccent: '#fb923c',
pageAccentRgb: '251 146 60',
} as const
const GOLD_PAGE = {
pageAccent: '#fbbf24',
pageAccentRgb: '251 191 36',
} as const
const SKY_PAGE = {
pageAccent: '#38bdf8',
pageAccentRgb: '56 189 248',
} as const
const PINK_PAGE = {
pageAccent: '#f472b6',
pageAccentRgb: '244 114 182',
} as const
const MINT_PAGE = {
pageAccent: '#34d399',
pageAccentRgb: '52 211 153',
} as const
const SAND_PAGE = {
pageAccent: '#d6b896',
pageAccentRgb: '214 184 150',
} as const
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
'dark-red': {
label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '153 27 27',
primaryDarkRgb: '127 29 29',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
yellow: {
label: 'Yellow',
primary: '#eab308',
primaryDark: '#ca8a04',
primaryLight: '#fef9c3',
primaryGlow: '#eab308',
primaryRgb: '234 179 8',
primaryDarkRgb: '202 138 4',
primary: '#facc15',
primaryDark: '#eab308',
primaryLight: '#fde047',
primaryGlow: '#facc15',
primaryRgb: '250 204 21',
primaryDarkRgb: '234 179 8',
...PURPLE_ACCENT,
...GOLD_PAGE,
},
black: {
label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
...SKY_PAGE,
},
cyan: {
label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
...SKY_PAGE,
},
purple: {
label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
...PINK_PAGE,
},
'light-blue': {
label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
...SKY_PAGE,
},
'dark-blue': {
label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
...SKY_PAGE,
},
brown: {
label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '139 94 60',
primaryDarkRgb: '111 74 47',
...CYAN_ACCENT,
...SAND_PAGE,
},
navy: {
label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 58 138',
primaryDarkRgb: '23 37 84',
...CYAN_ACCENT,
...SKY_PAGE,
},
'dark-green': {
label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '22 101 52',
primaryDarkRgb: '20 83 45',
...CYAN_ACCENT,
...MINT_PAGE,
},
orange: {
label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '234 88 12',
primaryDarkRgb: '194 65 12',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
}