constants.js + themes.js Compile-time

Compile-time constants shared across all layers. No functions, no logic — just exported values. constants.js defines labels, colors, and templates. themes.js defines CSS variable token sets for each UI theme.

Parent

core/

Imported by

courseModel.js, semGrid.js, gradRequirements.js, PlannerContext.jsx, Header.jsx, ThemeContext.jsx

constants.js exports

Export	Type	Used by	Purpose
`DEFAULT_START_YEAR`	number (2026)	PlannerContext	Default entry year for new plans
`NUM_YEARS`	number (5)	semGrid	How many years to generate in the full grid
`SUBJECT_PALETTE`	string[25]	courseModel	CSS hex colors for the subject color hash
`TYPE_BG`	object	SemRow, SummerRow	CSS variable names for semester background colors per type
`REL_STYLE`	object	RelationLines, Header legend	SVG line styles (color, dasharray, label, arrowhead) per relationship type
`NUPATH_LABELS`	object	GradPanel, InfoPanel	Maps NUPath code → full attribute name (e.g. "AD" → "Analyzing and Using Data")
`COOP_TERMS`	object[]	BankPanel, SemRow	Pre-defined 4-month and 6-month co-op block templates
`INTERNSHIP_TERMS`	object[]	BankPanel, SemRow	Pre-defined 2-month and 4-month internship block templates
`WORK_TERMS`	object	PlannerContext	Combined co-op + internship definitions keyed by template ID
`SEMESTER_TYPES`	string[4]	semGrid	["fall", "spring", "sumA", "sumB"]

REL_STYLE — relationship line styles

export const REL_STYLE = {
  prerequisite:        { color: '#e74c3c', dash: '',     label: 'Prereq',       arrow: true  },
  corequisite:         { color: '#f39c12', dash: '4,3',  label: 'Coreq',        arrow: true  },
  'prerequisite-viol': { color: '#e74c3c', dash: '6,2',  label: 'Prereq (unmet)', arrow: true  },
  'corequisite-viol':  { color: '#f39c12', dash: '6,2',  label: 'Coreq (unmet)',  arrow: false },
  substitution:        { color: '#3498db', dash: '2,4',  label: 'Substitution',  arrow: false },
};

themes.js exports

Each theme is a plain object mapping CSS variable names to values. ThemeContext injects these onto document.documentElement at runtime.

Export	Type	Purpose
`dark`	object (~100 CSS vars)	Default dark theme token set
`light`	object (~100 CSS vars)	Light theme token set
`THEMES`	`{ dark, light, ... }`	All available themes — ThemeContext iterates keys
`THEME_LABELS`	`{ dark: "Dark", ... }`	Human-readable theme names for the UI

Key CSS variable groups

// Backgrounds
--bg-app, --bg-surface, --bg-surface-2, --bg-card

// Text hierarchy (1 = most prominent)
--text-1, --text-2, --text-3, --text-4, --text-5, --text-6

// Borders
--border-1, --border-2, --border-3

// Semester type colors
--sel-fall-bg, --sel-fall-border, --sel-fall-text
--sel-spr-bg,  --sel-spr-border,  --sel-spr-text

// Status colors
--active, --success, --error, --warn, --warn-bright

// Scrollbar
--scrollbar-thumb, --scrollbar-track

💡

Adding a theme: Copy the dark object, adjust values, export it, add to THEMES and THEME_LABELS. ThemeContext and Header will pick it up automatically with no other changes needed.