mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-09 07:34:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode colors

Browse Source
This commit is contained in:
MartinBraquet
2026-04-30 16:04:25 +02:00
parent bbeccca977
commit 48b41aae5f
20 changed files with 140 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/components/answers/compatibility-questions-display.tsx
View File

@@ -254,7 +254,7 @@ export function CompatibilityQuestionsDisplay(props: {
)}
<Row className="flex-wrap items-center justify-between gap-x-6 gap-y-4">
{answeredQuestions.length > 0 && (
<div className="relative mt-3">
<div className="relative mt-3 w-full max-w-[50%] xl:max-w-[600px]">
{/*<input*/}
{/* type="text"*/}
{/* placeholder={t('answers.search_placeholder', 'Search prompts...')}*/}
@@ -268,10 +268,11 @@ export function CompatibilityQuestionsDisplay(props: {
<Input
value={searchTerm}
placeholder={t('answers.search_placeholder', 'Search prompts...')}
className={'w-48 xs:w-64'}
className={'w-full'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value)
}}
searchIcon
/>
</div>
)}
@@ -451,9 +452,7 @@ export function CompatibilityAnswerBlock(props: {
return (
<Col
data-testid="profile-compatibility-section"
className={
'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl px-3 py-2 leading-relaxed'
}
className={'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'}
>
<Row
className="justify-between gap-1 font-semibold"
@@ -582,28 +581,30 @@ export function CompatibilityAnswerBlock(props: {
))}
</Row>
)}
<Col>
{comparedProfile && isAnswered && (
<Row className="w-full justify-end sm:hidden">
<CompatibilityDisplay
question={question}
profile1={profile}
answer1={answer}
profile2={comparedProfile as Profile}
currentUserIsComparedProfile={!fromProfilePage}
currentUser={currentUser}
/>
</Row>
)}
{isCurrentUser && isAnswered && (
<Row className="w-full justify-end sm:hidden">
<ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />
</Row>
)}
{/*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*/}
</Col>
{/*{isAnswered && (*/}
{/* <Col>*/}
{/* {comparedProfile && isAnswered && (*/}
{/* <Row className="w-full justify-end sm:hidden">*/}
{/* <CompatibilityDisplay*/}
{/* question={question}*/}
{/* profile1={profile}*/}
{/* answer1={answer}*/}
{/* profile2={comparedProfile as Profile}*/}
{/* currentUserIsComparedProfile={!fromProfilePage}*/}
{/* currentUser={currentUser}*/}
{/* />*/}
{/* </Row>*/}
{/* )}*/}
{/* {isCurrentUser && isAnswered && (*/}
{/* <Row className="w-full justify-end sm:hidden">*/}
{/* <ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />*/}
{/* </Row>*/}
{/* )}*/}
{/* /!*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*!/*/}
{/* </Col>*/}
{/*)}*/}
{showCommunityInfo && (
<Row className={'mt-[-10px]'}>
<Row className={''}>
{shortenedPopularity && (
<Tooltip
text={t(

4
web/components/buttons/general-button.tsx
View File

@@ -7,9 +7,9 @@ export const GeneralButton = (props: {url: string; content: string}) => {
<div className="rounded-xl p-3 flex flex-col items-center group">
<Link
href={url}
className="w-full px-8 py-3 rounded-full border-2 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg
className="w-full px-8 py-3 rounded-full border-2 border-primary-200 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg
hover:translate-y-[-2px] transition-transform duration-200 ease-in-out
bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/50"
bg-canvas-50 hover:bg-canvas-100 dark:hover:bg-gray-800/50"
target={url.startsWith('http') ? '_blank' : undefined}
rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
>

1
web/components/filters/location-filter.tsx
View File

@@ -120,6 +120,7 @@ export function LocationFilter(props: {
className="h-8 w-full rounded-none border-0 bg-transparent px-1 focus:border-b focus:ring-0 focus:ring-transparent"
autoFocus
// onBlur // TODO
searchIcon
/>
</Row>

3
web/components/filters/search.tsx
View File

@@ -171,6 +171,7 @@ export const Search = forwardRef<
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setKeywordInput(e.target.value)
}}
searchIcon
/>
<Row className="gap-2">
@@ -232,7 +233,7 @@ export const Search = forwardRef<
}}
size={'xs'}
color={'none'}
className={'text-ink-100 bg-primary-500 hover:bg-primary-400 rounded-xl'}
className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl'}
>
🔔
{bookmarked

6
web/components/messaging/new-message-button.tsx
View File

@@ -20,7 +20,11 @@ export default function NewMessageButton() {
const t = useT()
return (
<>
<Button className="h-fit gap-1" color={'gray-outline'} onClick={() => setOpen(true)}>
<Button
className="h-fit gap-1 bg-canvas-50"
color={'gray-outline'}
onClick={() => setOpen(true)}
>
<PlusIcon className="h-5 w-5" aria-hidden="true" />
{t('messages.new_message', 'New Message')}
</Button>

1
web/components/multi-checkbox.tsx
View File

@@ -129,6 +129,7 @@ export const MultiCheckbox = (props: {
}
}}
className="h-10"
searchIcon
/>
<Button size="sm" onClick={submitAdd} loading={adding} disabled={adding}>
{t('common.add', 'Add')}

2
web/components/nav/profile-summary.tsx
View File

@@ -15,7 +15,7 @@ export function ProfileSummary(props: {user: User; className?: string}) {
href={profile === null ? '/signup' : `/${user.username}`}
onClick={trackCallback('sidebar: profile')}
className={clsx(
'hover:bg-ink-100 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-md py-3',
'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3',
className,
)}
>

6
web/components/nav/sidebar-item.tsx
View File

@@ -28,8 +28,8 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
}
const sidebarClass = clsx(
isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-100 hover:text-primary-700',
'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'text-[#776f65] hover:text-primary-700',
'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
'focus-visible:bg-ink-100 outline-none transition-all',
)
@@ -40,7 +40,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
className={clsx(
isCurrentPage
? 'text-primary-700'
: 'text-ink-100 group-hover:text-primary-700 group-hover:translate-x-[2px]',
: 'text-[#574f45] group-hover:text-primary-700 group-hover:translate-x-[2px]',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
)}
aria-hidden="true"

32
web/components/nav/sidebar.tsx
View File

@@ -49,26 +49,23 @@ export default function Sidebar(props: {
)}
style={style}
>
<SiteLogo className={'invert'} />
<SiteLogo className={'text-white'} />
{user === undefined && <div className="h-[24px]" />}
{user && !isMobile && <ProfileSummary user={user} className="mb-3 text-white" />}
{user && !isMobile && (
<>
<div className="h-px bg-canvas-900 mb-4" />
<ProfileSummary user={user} className="mb-3 text-white" />
</>
)}
<div className="h-px bg-canvas-900 mb-4" />
<div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
{navOptions.map((item) => (
<SidebarItem key={item.key} item={item} currentPage={currentPage} />
))}
{!isAndroid && (
<Image
src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
alt="divider"
width={160}
height={80}
className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
onClick={() => router.push(ANDROID_APP_URL)}
/>
)}
{user === null && <SignUpButton className="mt-4" text={t('nav.sign_up', 'Sign up')} />}
@@ -79,6 +76,17 @@ export default function Sidebar(props: {
)}
</div>
<div className="mb-[12px] mt-auto flex flex-col gap-1">
<div className="h-px bg-canvas-900" />
{!isAndroid && (
<Image
src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
alt="divider"
width={160}
height={80}
className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
onClick={() => router.push(ANDROID_APP_URL)}
/>
)}
{user === null && <LanguagePicker className={'w-fit mx-3 pr-12 mb-2'} />}
{bottomNavOptions.map((item) => (
<SidebarItem key={item.key} item={item} currentPage={currentPage} />

5
web/components/optional-profile-form.tsx
View File

@@ -849,7 +849,7 @@ export const OptionalProfileUserForm = (props: {
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setProfile('political_details', e.target.value)
}
className={'w-full sm:w-96'}
className={'w-full sm:w-[700px]'}
value={profile['political_details'] ?? undefined}
/>
</Col>
@@ -873,7 +873,7 @@ export const OptionalProfileUserForm = (props: {
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setProfile('religious_beliefs', e.target.value)
}
className={'w-full sm:w-96'}
className={'w-full sm:w-[700px]'}
value={profile['religious_beliefs'] ?? undefined}
/>
</Col>
@@ -1220,6 +1220,7 @@ const CitySearchBox = (props: {onCitySelected: (city: City | undefined) => void}
// Set to the best guess (first city) if no option selected
if (cities.length > 0) props.onCitySelected(cities[0])
}}
searchIcon
/>
<div className="relative w-full" ref={dropdownRef}>
<Col className="bg-canvas-50 absolute left-0 right-0 top-1 z-10 w-full overflow-hidden rounded-md">

3
web/components/profile-about.tsx
View File

@@ -20,7 +20,6 @@ import {formatHeight, MeasurementSystem} from 'common/measurement-utils'
import {Profile} from 'common/profiles/profile'
import {Socials} from 'common/socials'
import {UserActivity} from 'common/user'
import {capitalize} from 'lodash'
import {
BarChart2,
Brain,
@@ -91,7 +90,7 @@ export function AboutRow(props: {
<div className="text-ink-600 w-5 mt-0.5">{icon}</div>
<Col className={'w-full'}>
{children}
{suffix && <div className={'guidance'}>{capitalize(suffix)}</div>}
{suffix && <div className={'guidance'}>{suffix}</div>}
</Col>
</Row>
)

18
web/components/profile-grid.tsx
View File

@@ -311,8 +311,6 @@ function ProfilePreview(props: {
large: 'flex-col',
}[cardSize ?? 'medium']
const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
return (
<div
className={clsx(
@@ -327,13 +325,21 @@ function ProfilePreview(props: {
onPointerUp={handlePointerUp}
onClick={handleClick}
className={clsx(
'relative overflow-hidden rounded-lg bg-canvas-50 person-card',
'border-[1.5px] border-[#E4DDD4]',
'transition-all duration-[120ms] ease-in',
'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]',
'before:bg-[#C17F3E] before:rounded-l-lg',
'before:opacity-0 before:transition-opacity before:duration-[120ms]',
'hover:before:opacity-100',
'hover:bg-canvas-100',
'relative z-10 cursor-pointer group block rounded-lg overflow-hidden bg-transparent h-full border border-canvas-300',
hover,
// hover,
)}
>
{/* Phase 1: Dim overlay */}
{isLoading && (
<div className="absolute inset-0 bg-canvas-50/[0.32] rounded-lg z-20 pointer-events-none" />
<div className="absolute inset-0 bg-canvas-100/[0.32] rounded-lg z-20 pointer-events-none" />
)}
<Col className={clsx('relative w-full rounded transition-all')}>
<Row className={clsx('absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10')}>
@@ -482,7 +488,7 @@ function ProfilePreview(props: {
<div
className={clsx(
'absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-canvas-50 to-transparent pointer-events-none',
'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
// 'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
)}
/>
)}
@@ -522,7 +528,7 @@ function ProfilePreview(props: {
<div
className="absolute -inset-[200%] animate-spin"
style={{
background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #3b82f6)`,
background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #C17F3E)`,
animationDuration: '1s',
}}
/>

4
web/components/searches/button.tsx
View File

@@ -37,7 +37,7 @@ export function BookmarkSearchButton(props: {
onClick={() => setOpen(true)}
color="gray-outline"
size={'xs'}
className={'rounded-xl'}
className={'rounded-xl bg-canvas-50'}
>
⭐ {t('saved_searches.button', 'Saved Searches')}
</Button>
@@ -165,7 +165,7 @@ export function BookmarkStarButton(props: {
onClick={() => setOpen(true)}
color="gray-outline"
size={'xs'}
className={'rounded-xl'}
className={'rounded-xl bg-canvas-50'}
>
👥 {t('saved_people.button', 'Saved People')}
</Button>

1
web/components/select-users.tsx
View File

@@ -84,6 +84,7 @@ export function SelectUsers(props: {
value={query}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
placeholder="Search users..."
searchIcon
/>
</Col>
{queryReady && (

2
web/components/widgets/hide-profile-button.tsx
View File

@@ -77,7 +77,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
>
<button
className={clsx(
'rounded-full p-1 hover:bg-canvas-200 shadow focus:outline-none',
'border border-canvas-200 rounded-md p-1 hover:bg-canvas-200 focus:outline-none',
className,
)}
disabled={submitting}

7
web/components/widgets/input.tsx
View File

@@ -7,10 +7,11 @@ export const Input = forwardRef(
(
props: {
error?: boolean
searchIcon?: boolean
} & ComponentPropsWithoutRef<'input'>,
ref: Ref<HTMLInputElement>,
) => {
const {error, className, ...rest} = props
const {error, searchIcon, className, ...rest} = props
return (
<Row
@@ -22,7 +23,7 @@ export const Input = forwardRef(
className,
)}
>
<span className="search-icon">🔍</span>
{searchIcon && <span className="search-icon">🔍</span>}
<input
ref={ref}
step={0.001} // default to 3 decimal places
@@ -30,7 +31,7 @@ export const Input = forwardRef(
'bg-canvas-50 invalid:border-error invalid:text-error invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
error
? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
: '',
: 'border-transparent focus:border-transparent focus:ring-transparent',
className,
)}
{...rest}

1
web/components/widgets/searchable-select.tsx
View File

@@ -64,6 +64,7 @@ export function SearchableSelect(props: {
onChange={(e: any) => setQuery(e.target.value)}
placeholder="Search..."
className="mb-2 w-full"
searchIcon
/>
<div className="max-h-48 space-y-1 overflow-auto">
{filteredSuggestions.map((suggestion) => (

6
web/components/widgets/stat-box.tsx
View File

@@ -39,7 +39,11 @@ export function StatBox(props: StatBoxProps) {
className,
)}
>
<div className={clsx('font-semibold leading-none tracking-tight', sizeClass)}>{value}</div>
<div
className={clsx('font-semibold leading-none tracking-tight text-primary-800', sizeClass)}
>
{value}
</div>
{label && <div className="text-ink-700 text-sm">{label}</div>}
{children}
</Card>

1
web/pages/compatibility.tsx
View File

@@ -142,6 +142,7 @@ export default function CompatibilityPage() {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value)
}}
searchIcon
/>
<Checkbox
label={t('compatibility.pinned_only', 'Pinned only')}

118
web/styles/globals.css
View File

@@ -102,12 +102,6 @@
--color-ink-900: 30 26 20; /* Deep Warm Black (#1E1A14) */
--color-ink-500: 140 128 112; /* Muted Warm Gray (#8C8070) */
/* Canvas - Backgrounds & Surfaces */
--color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
--color-canvas-100: 237 232 224; /* Background - Warm Beige (#EDE8E0) */
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
/* Green - Accents */
--color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
@@ -127,49 +121,34 @@
--color-ink-950: 0 0 0;
--color-ink-1000: 0 0 0; /* black */
/* Medium Contrast */
/*--color-ink-0: 255 255 255; !* white *!*/
/*--color-ink-50: 245 245 245;*/
/*--color-ink-100: 230 230 230;*/
/*--color-ink-200: 200 200 200;*/
/*--color-ink-300: 170 170 170;*/
/*--color-ink-400: 140 140 140;*/
/*--color-ink-500: 110 110 110;*/
/*--color-ink-600: 85 85 85;*/
/*--color-ink-700: 60 60 60;*/
/*--color-ink-800: 40 40 40;*/
/*--color-ink-900: 25 25 25;*/
/*--color-ink-950: 12 12 12;*/
/*--color-ink-1000: 0 0 0; !* black *!*/
/* Background / Canvas Grey Scale */
/* Canvas - Backgrounds & Surfaces */
--color-canvas-0: 255 255 255; /* white */
--color-canvas-25: 242 240 232;
/*--color-canvas-50: 248 247 255;*/
/*--color-canvas-100: 220 220 220;*/
/*--color-canvas-200: 210 210 210;*/
--color-canvas-300: 190 190 190;
--color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
--color-canvas-100: 237 232 224; /* Main Page Background - Warm Beige (#EDE8E0) */
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
--color-canvas-300: 222 203 178;
--color-canvas-400: 160 160 160;
--color-canvas-500: 130 130 130;
--color-canvas-600: 100 100 100;
--color-canvas-700: 75 75 75;
--color-canvas-800: 50 50 50;
--color-canvas-900: 30 30 30;
/*--color-canvas-950: 15 15 15;*/
--color-canvas-900: 68 52 34; /* Sidebar pressed */
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
--color-canvas-1000: 0 0 0; /* black */
/* Primary - Warm Amber */
--color-primary-950: 250 243 233; /* #FAF3E9 */
--color-primary-900: 243 228 206; /* #F3E4CE */
--color-primary-800: 232 201 157; /* #E8C99D */
--color-primary-700: 220 171 113; /* #DCAB71 */
--color-primary-600: 208 147 82; /* #D09352 */
--color-primary-50: 250 243 233; /* #FAF3E9 */
--color-primary-100: 243 228 206; /* #F3E4CE */
--color-primary-200: 232 201 157; /* #E8C99D */
--color-primary-300: 220 171 113; /* #DCAB71 */
--color-primary-400: 208 147 82; /* #D09352 */
--color-primary-500: 193 127 62; /* #C17F3E - Base */
--color-primary-400: 166 104 46; /* #A6682E */
--color-primary-300: 133 80 34; /* #855022 */
--color-primary-200: 101 58 24; /* #653A18 */
--color-primary-100: 71 39 16; /* #472710 */
--color-primary-50: 43 21 8; /* #2B1508 */
--color-primary-600: 166 104 46; /* #A6682E */
--color-primary-700: 133 80 34; /* #855022 */
--color-primary-800: 101 58 24; /* #653A18 */
--color-primary-900: 71 39 16; /* #472710 */
--color-primary-950: 43 21 8; /* #2B1508 */
--color-yes-0: 255 255 255;
--color-yes-50: 249 249 249;
@@ -239,53 +218,50 @@
.dark {
color-scheme: dark;
/* Ink - Text becomes light */
--color-ink-950: 255 255 255; /* Purest highlight */
--color-ink-900: 247 244 239; /* Main Body Text (Old Card color) */
--color-ink-500: 176 160 140; /* Muted Text - shifted to warm tan */
/* Green - Sage looks great on dark brown */
--color-green-500: 125 160 131; /* Lightened Sage */
/* High Contrast */
--color-ink-1000: 255 255 255; /* white */
--color-ink-950: 255 255 255;
--color-ink-900: 255 255 255;
/*--color-ink-950: 255 255 255;*/
/*--color-ink-900: 255 255 255;*/
--color-ink-800: 255 255 255;
--color-ink-700: 255 255 255;
--color-ink-600: 255 255 255;
--color-ink-500: 200 200 200;
/*--color-ink-500: 200 200 200;*/
--color-ink-400: 100 100 100;
--color-ink-300: 100 100 100;
--color-ink-200: 0 0 0;
--color-ink-100: 0 0 0;
--color-ink-50: 0 0 0;
--color-ink-0: 0 0 0; /* black */
/* Medium Contrast */
/*--color-ink-1000: 255 255 255; !* white *!*/
/*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
/*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
/*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
/*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
/*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
/*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
/*--color-ink-400: 115 115 115; !* #737373 *!*/
/*--color-ink-300: 89 89 89; !* #595959 *!*/
/*--color-ink-200: 64 64 64; !* #404040 *!*/
/*--color-ink-100: 34 34 34; !* #222222 *!*/
/*--color-ink-50: 17 17 17; !* #111111 *!*/
/*--color-ink-0: 0 0 0; !* black *!*/
/* Canvas - Backgrounds become dark */
--color-canvas-0: 0 0 0;
--color-canvas-25: 20 20 20;
--color-canvas-50: 20 20 20;
--color-canvas-100: 40 40 40;
--color-canvas-200: 60 60 60;
--color-canvas-300: 90 90 90;
--color-canvas-50: 35 31 26; /* Elevated surfaces (Cards) */
--color-canvas-100: 26 22 18; /* Main Page Background (#2C2416) */
--color-canvas-200: 68 52 34; /* UI Elements/Tags */
--color-canvas-300: 78 62 44;
--color-canvas-950: 15 13 10; /* Deepest depth (Sidebar/Bottom) */
--color-primary-50: 10 14 26; /* Deepest Navy (Background-adjacent) */
--color-primary-100: 15 23 42; /* Dark Navy Layer */
--color-primary-200: 30 41 59; /* Slate Blue */
--color-primary-300: 30 58 138; /* Deep Brand Blue */
--color-primary-400: 29 78 216; /* Strong Royal Blue */
--color-primary-500: 59 130 246; /* Your Standard Blue (Anchor) */
--color-primary-600: 96 165 250; /* Bright Sky Blue */
--color-primary-700: 147 197 253; /* Light Luminous Blue */
--color-primary-800: 191 219 254; /* Soft Pastel Blue */
--color-primary-900: 219 234 254; /* Pale Ice Blue */
--color-primary-950: 240 247 255; /* Brightest Blue-White */
/* Dark Mode Primary - Luminous Amber */
--color-primary-50: 43 21 8; /* Deepest Shadow (Old 950) */
--color-primary-100: 71 39 16; /* Deep Bronze */
--color-primary-200: 101 58 24; /* Muted Gold */
--color-primary-300: 133 80 34; /* Antique Brass */
--color-primary-400: 166 104 46; /* Warm Gold */
--color-primary-500: 193 127 62; /* YOUR BASE (#C17F3E) */
--color-primary-600: 208 147 82; /* Lighter (Hover State in Dark) */
--color-primary-700: 220 171 113; /* Bright (Active State in Dark) */
--color-primary-800: 232 201 157; /* Highlight Tint */
--color-primary-900: 243 228 206; /* Near-Cream Tint */
--color-primary-950: 250 243 233; /* Glow Tint */
--color-no-950: 255 255 255; /* white */
--color-no-900: 242 242 242;
@@ -318,7 +294,7 @@
--color-green-200: 187 247 208;
--color-green-300: 134 239 172;
--color-green-400: 74 222 128;
--color-green-500: 34 197 94; /* standard green */
/*--color-green-500: 34 197 94; !* standard green *!*/
--color-green-600: 22 163 74;
--color-green-700: 21 128 61;
--color-green-800: 22 101 52;