andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

theme-provider #17

Closed
kayela wants to merge 74 commits from theme-provider into main
pull from: theme-provider
merge into: andika:main
Conversation 0 Commits 74 Files Changed 113 +92 -60
16 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4cdccc0323 - Show all commits

1
src/components/ui/badge.jsx
View File

@@ -28,6 +28,7 @@ const badgeVariants = cva(
gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
gray3:
"border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
purple: "bg-light-lavender",
},
},
defaultVariants: {

1
src/components/ui/button.jsx
View File

@@ -14,6 +14,7 @@ const buttonVariants = cva("btn", {
accent: "btn-accent",
destructive: "btn-destructive",
link: "btn-link",
},
size: {
default: "btn-md",

2
src/components/ui/tabs.jsx
View File

@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple rounded-2xl px-3 py-1 text-brand-purple text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
"inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple rounded-2xl px-3 py-1 text-brand-purple text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow dark:data-[state=active]:bg-brand-light-lavender dark:data-[state=active]:text-background dark:border-brand-light-lavender dark:text-brand-light-lavender",
className
)}
{...props}

6
src/pages/Login.js
View File

@@ -87,8 +87,8 @@ const Login = () => {
value={formData.email}
onChange={handleInputChange}
placeholder="your.email@example.com"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="login-email-input"
className="h-14 rounded-xl border-2 focus:border-brand-purple "
data-testid="login-email-input "
/>
</div>
@@ -114,7 +114,7 @@ const Login = () => {
<Button
type="submit"
disabled={loading}
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
className="w-full py-6 text-lg font-medium shadow-lg hover:scale-105 disabled:opacity-50 btn-lavender"
data-testid="login-submit-button"
>
{loading ? 'Logging in...' : 'Login'}

12
src/pages/admin/AdminBylaws.js
View File

@@ -189,7 +189,7 @@ const AdminBylaws = () => {
{hasPermission('bylaws.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Version
@@ -202,8 +202,8 @@ const AdminBylaws = () => {
<Card className="p-6 border-2 border-brand-purple ">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-3 rounded-xl">
<Scale className="h-6 w-6 text-white" />
<div className="bg-light-lavender p-3 rounded-xl">
<Scale className="h-6 w-6 " />
</div>
<div>
<h3 className="text-xl font-semibold text-[var(--purple-ink)]">
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => handleDelete(bylawsDoc)}
className="border-red-500 text-red-500 hover:bg-red-50"
className="btn-outline-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
Cancel
</Button>
<Button
variant="destructive"
variant="outline"
onClick={confirmDelete}
className="bg-red-500 hover:bg-red-600"
className="btn-outline-destructive"
>
Delete
</Button>

26
src/pages/admin/AdminDashboard.js
View File

@@ -61,7 +61,7 @@ const AdminDashboard = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin Dashboard
</h1>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage users, events, and membership applications.
</p>
</div>
@@ -80,13 +80,13 @@ const AdminDashboard = () => {
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
<div className="flex items-center justify-between mb-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<Users className="h-6 w-6 text-[var(--purple-lavender)]" />
<Users className="h-6 w-6 text-brand-purple" />
</div>
</div>
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.totalMembers}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
@@ -98,7 +98,7 @@ const AdminDashboard = () => {
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.pendingValidations}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
@@ -110,7 +110,7 @@ const AdminDashboard = () => {
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.activeMembers}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
</Card>
</div>
@@ -118,15 +118,15 @@ const AdminDashboard = () => {
<div className="grid md:grid-cols-2 gap-8">
<Link to="/admin/members">
<Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
<Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
<Users className="h-12 w-12 text-brand-purple mb-4" />
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Manage Members
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage paying members and their subscription status.
</p>
<Button
className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
className="btn-lavender mt-4"
data-testid="manage-users-button"
>
Go to Members
@@ -140,11 +140,11 @@ const AdminDashboard = () => {
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Validation Queue
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review and validate pending membership applications.
</p>
<Button
className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
className="mt-4 btn-lavender"
data-testid="manage-validations-button"
>
View Validations
@@ -165,7 +165,7 @@ const AdminDashboard = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Members Needing Personal Outreach
</h3>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
These members have received multiple reminder emails. Consider calling them directly.
</p>
</div>
@@ -185,7 +185,7 @@ const AdminDashboard = () => {
{user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p>Email: {user.email}</p>
<p>Phone: {user.phone || 'N/A'}</p>
<p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -225,7 +225,7 @@ const AdminDashboard = () => {
</div>
<div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
A friendly phone call can help them complete the registration process and feel more welcomed to the community.
</p>

2
src/pages/admin/AdminEvents.js
View File

@@ -150,7 +150,7 @@ const AdminEvents = () => {
resetForm();
setEditingEvent(null);
}}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
className="btn-lavender "
data-testid="create-event-button"
>
<Plus className="mr-2 h-5 w-5" />

4
src/pages/admin/AdminFinancials.js
View File

@@ -167,7 +167,7 @@ const AdminFinancials = () => {
{hasPermission('financials.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Report
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
{reports.map(report => (
<Card key={report.id} className="p-6">
<div className="flex items-center gap-6">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
<div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
<DollarSign className="h-6 w-6 mx-auto mb-1" />
<div className="text-2xl font-bold">{report.year}</div>
</div>

6
src/pages/admin/AdminGallery.js
View File

@@ -196,7 +196,7 @@ const AdminGallery = () => {
</p>
<Link to="/admin/events">
<Button
className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
className="btn-lavender text-sm"
style={{ fontFamily: "'Inter', sans-serif" }}
>
<Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
<Button
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl"
className="btn-lavender "
style={{ fontFamily: "'Inter', sans-serif" }}
>
{uploading ? (
@@ -251,7 +251,7 @@ const AdminGallery = () => {
<h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Gallery Images
</h2>
<Badge className="bg-brand-purple text-white px-3 py-1">
<Badge variant="purple" className=" px-3 py-1">
{galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
</Badge>
</div>

2
src/pages/admin/AdminNewsletters.js
View File

@@ -195,7 +195,7 @@ const AdminNewsletters = () => {
{hasPermission('newsletters.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-light-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Newsletter

2
src/pages/admin/AdminPlans.js
View File

@@ -141,7 +141,7 @@ const AdminPlans = () => {
{hasPermission('subscriptions.plans') && (
<Button
onClick={handleCreatePlan}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
className="btn-lavender "
>
<Plus className="h-4 w-4 mr-2" />
Create Plan

2
src/pages/admin/AdminRoles.js
View File

@@ -193,7 +193,7 @@ const AdminRoles = () => {
Create and manage custom roles with specific permissions
</p>
</div>
<Button onClick={() => setShowCreateModal(true)}>
<Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
<Plus className="w-4 h-4 mr-2" />
Create Role
</Button>

24
src/pages/admin/AdminStaff.js
View File

@@ -99,16 +99,16 @@ const AdminStaff = () => {
const getRoleBadge = (role) => {
const config = {
superadmin: { label: 'Superadmin', className: 'bg-brand-purple text-white' },
admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
media: { label: 'Media', className: 'bg-gray-400 text-white' }
superadmin: { label: 'Superadmin', variant: 'purple' },
admin: { label: 'Admin', variant: 'green' },
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
staff: { label: 'Staff', variant: 'gray' },
media: { label: 'Media', variant: 'gray2' }
};
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
return (
<Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
<Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
<Shield className="h-3 w-3 mr-1 inline" />
{roleConfig.label}
</Badge>
@@ -117,13 +117,13 @@ const AdminStaff = () => {
const getStatusBadge = (status) => {
const config = {
active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
active: { label: 'Active', variant: 'green' },
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
};
const statusConfig = config[status] || config.inactive;
return (
<Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
<Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
{statusConfig.label}
</Badge>
);
@@ -145,7 +145,7 @@ const AdminStaff = () => {
{hasPermission('users.create') && (
<Button
onClick={() => setInviteDialogOpen(true)}
className="bg-brand-purple hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
className="btn-util-purple h-12 px-6"
>
<Mail className="h-5 w-5 mr-2" />
Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
{hasPermission('users.create') && (
<Button
onClick={() => setCreateDialogOpen(true)}
className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
className="btn-util-green h-12 px-6"
>
<UserPlus className="h-5 w-5 mr-2" />
Create Staff
@@ -195,11 +195,11 @@ const AdminStaff = () => {
{/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
<TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="staff-list" className="text-lg py-3">
<TabsTrigger value="staff-list" className="text-lg py-3">
<UserCog className="h-5 w-5 mr-2" />
Staff Members
</TabsTrigger>
<TabsTrigger value="pending-invitations" className="text-lg py-3">
<TabsTrigger value="pending-invitations" className="text-lg py-3 ">
<Mail className="h-5 w-5 mr-2" />
Pending Invitations
</TabsTrigger>

2
src/pages/admin/AdminValidations.js
View File

@@ -450,7 +450,7 @@ const AdminValidations = () => {
<Button
onClick={() => handleActivatePayment(user)}
size="sm"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
className="btn-light-lavender"
>
<CheckCircle className="h-4 w-4 mr-1" />
Activate Payment

46
src/styles/components.css
View File

@@ -9,31 +9,35 @@
}
.btn-primary {
@apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
@apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
}
.btn-secondary {
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-ghost {
@apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
@apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-outline {
@apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50 px-6;
@apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-accent {
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50 px-6;
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-destructive {
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50 px-6;
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-outline-destructive {
@apply border border-destructive border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-link {
@apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
@apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
}
.btn-sm {
@@ -52,26 +56,38 @@
@apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
}
.btn-util-green {
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 transition-transform;
}
.btn-util-purple {
@apply bg-brand-purple hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-[var(--purple-lavender)] transition-transform hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-light-orange {
@apply bg-brand-light-orange hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-brand-light-orange hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-pink {
@apply bg-brand-pink hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-brand-pink hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-lavender {
@apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
.btn-lavender {
@apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
}
.btn-light-lavender {
@apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
}
/* Badges */
.badge {
@apply px-3 py-1 rounded-full text-sm font-medium ;
@apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
}
.badge-green {
@apply bg-[var(--green-light)] text-white;
@apply bg-[var(--green-light)] text-white transition-transform;
}
/* Backgrounds */
.bg-light-lavender {
@apply bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
}
}

14
src/styles/theme.css
View File

@@ -118,6 +118,12 @@
--neutral-900: #ffffff;
}
.dark {
/*
==========================
Dark Theme Colors
==========================
*/
--background: 246 28% 8%;
--foreground: 255 30% 92%;
@@ -155,6 +161,14 @@
--radius: 0.5rem;
/*
=========================
Brand Colors
=========================
*/
--brand-purple: 262 46% 80%;
/* -------- Purples (Primary UI) -------- */
--purple-ink: #422268; /* deepest background */
--purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */