-
diff --git a/templates/react-javascript/src/index.css b/templates/react-javascript/src/index.css
index 3bfaa65a..c720aca3 100644
--- a/templates/react-javascript/src/index.css
+++ b/templates/react-javascript/src/index.css
@@ -1,6 +1,13 @@
-/* trussworks component styles */
-@import "@trussworks/react-uswds/lib/uswds.css";
-@import "@trussworks/react-uswds/lib/index.css";
+/* Main CSS Entry Point */
+/*
+ * Theme CSS imports (USWDS, theme-components, theme-overrides) are
+ * automatically injected by the RADFish Vite plugin into index.html.
+ *
+ * This file is for developer-specific styles only.
+ */
+
+/* Developer's page-level custom styles */
+@import "./styles/style.css";
/* normalize css */
body {
@@ -21,6 +28,30 @@ body {
width: 100%;
}
+.header-logo-link {
+ display: flex;
+ align-items: center;
+}
+
+.header-logo {
+ margin-top: 10px;
+ max-width: 210px;
+ width: 100%;
+}
+
+.usa-navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+@media (max-width: 63.99em) {
+ .header-logo {
+ max-width: 110px;
+ }
+}
+
@media (min-width: 64em) {
.usa-nav__primary button[aria-expanded=false] span:after {
background: white;
diff --git a/templates/react-javascript/src/index.jsx b/templates/react-javascript/src/index.jsx
index 5ed01d1f..bd0efb23 100644
--- a/templates/react-javascript/src/index.jsx
+++ b/templates/react-javascript/src/index.jsx
@@ -1,12 +1,15 @@
import React from "react";
import ReactDOM from "react-dom/client";
-import "./styles/theme.css";
import App from "./App";
import { Application } from "@nmfs-radfish/radfish";
const root = ReactDOM.createRoot(document.getElementById("root"));
-const app = new Application();
+const app = new Application({
+ serviceWorker: {
+ url: "/service-worker.js",
+ },
+});
app.on("ready", async () => {
root.render(
diff --git a/templates/react-javascript/src/pages/Home.jsx b/templates/react-javascript/src/pages/Home.jsx
index 2a993a26..85dc0bd0 100644
--- a/templates/react-javascript/src/pages/Home.jsx
+++ b/templates/react-javascript/src/pages/Home.jsx
@@ -1,24 +1,81 @@
+/**
+ * Home.jsx - Welcome Page
+ *
+ * This is the default home page for your RADFish application.
+ * Replace this content with your own!
+ */
+
import "../index.css";
-import React from "react";
import { Button } from "@trussworks/react-uswds";
import { Link } from "react-router-dom";
function HomePage() {
return (
- /styles/theme.scss (Section 1)
+ * - RADFish components → themes//styles/theme.scss (Section 2)
+ * - react-uswds overrides → themes//styles/theme.scss (Section 3)
+ * - Page/layout styles → THIS FILE
+ *
+ * Examples:
+ */
+
+/* Page-specific layouts
+.dashboard-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+*/
+
+/* Custom application components
+.fish-data-card {
+ background: var(--radfish-background);
+ border: 1px solid var(--radfish-border-light);
+ padding: 1.5rem;
+}
+
+.catch-summary-badge {
+ background-color: var(--radfish-primary);
+ color: white;
+ padding: 0.25rem 0.75rem;
+ border-radius: 4px;
+}
+*/
diff --git a/templates/react-javascript/src/styles/theme.css b/templates/react-javascript/src/styles/theme.css
deleted file mode 100644
index 92b1e2d3..00000000
--- a/templates/react-javascript/src/styles/theme.css
+++ /dev/null
@@ -1,37 +0,0 @@
-:root {
- --noaa-dark-blue: #0054a4;
- --noaa-light-blue: #0093d0;
- --noaa-yellow-one: #fff3cd;
- --noaa-yellow-two: #ffeeba;
- --noaa-yellow-three: #856404;
- --noaa-accent-color: #00467f;
- --noaa-text-color: #333;
- --noaa-error-color: #af292e;
- --noaa-button-hover: #0073b6;
- --noaa-label-color: #0054a4;
- --noaa-border-dark: #565c65;
- --noaa-border-light: #ddd;
-}
-
-body {
- font-family:
- Arial Narrow,
- sans-serif;
- color: var(--noaa-text-color);
- background-color: #f4f4f4;
- line-height: 1.6;
- border-radius: 4px;
-}
-
-.header-container {
- background: var(--noaa-dark-blue);
-}
-
-.header-title {
- color: white;
-}
-
-/* Minimum size for NOAA logo must be 72px (0.75 in) */
-.header-logo {
- width: 72px;
-}
diff --git a/templates/react-javascript/themes/noaa-theme/assets/favicon.ico b/templates/react-javascript/themes/noaa-theme/assets/favicon.ico
new file mode 100644
index 00000000..6220d9e7
Binary files /dev/null and b/templates/react-javascript/themes/noaa-theme/assets/favicon.ico differ
diff --git a/templates/react-javascript/themes/noaa-theme/assets/icon-512.png b/templates/react-javascript/themes/noaa-theme/assets/icon-512.png
new file mode 100644
index 00000000..3bb3ed58
Binary files /dev/null and b/templates/react-javascript/themes/noaa-theme/assets/icon-512.png differ
diff --git a/templates/react-javascript/themes/noaa-theme/assets/logo.png b/templates/react-javascript/themes/noaa-theme/assets/logo.png
new file mode 100644
index 00000000..871ba56e
Binary files /dev/null and b/templates/react-javascript/themes/noaa-theme/assets/logo.png differ
diff --git a/templates/react-javascript/themes/noaa-theme/styles/theme.scss b/templates/react-javascript/themes/noaa-theme/styles/theme.scss
new file mode 100644
index 00000000..edfd91a4
--- /dev/null
+++ b/templates/react-javascript/themes/noaa-theme/styles/theme.scss
@@ -0,0 +1,242 @@
+/**
+ * NOAA Fisheries Brand Theme
+ *
+ * This single file contains all theme configuration:
+ * 1. USWDS Token Variables ($variables) - extracted by the RADFish plugin for USWDS configuration
+ * 2. CSS Custom Properties (:root) - additional NOAA-specific variables
+ * 3. Component Overrides - custom styles for USWDS/RADFish components
+ *
+ * NOAA Palette → USWDS Token Mapping:
+ * NOAA Dark Blue (Reflex Blue #0055A4) → primary-*
+ * NOAA Light Blue (Process Blue #0093D0) → secondary-*
+ * URCHIN (Purples) → accent-cool-*
+ * CRUSTACEAN (Orange) → accent-warm-*
+ * SEAGRASS (Greens) → success-*
+ * CORAL (Reds) → error-*
+ * Neutrals → base-*
+ */
+
+// =============================================================================
+// SECTION 1: USWDS TOKEN VARIABLES
+// These $variables are extracted by the RADFish plugin and fed to USWDS.
+// They configure the design system colors but don't produce CSS output directly.
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// BASE COLORS - NOAA Neutrals
+// -----------------------------------------------------------------------------
+$base-lightest: #ffffff;
+$base-lighter: #e8e8e8;
+$base-light: #d0d0d0;
+$base: #71767a; // USWDS gray-50 (better contrast)
+$base-dark: #7b7b7b;
+$base-darker: #4a4a4a; // Darkened for AA contrast with base-lighter links
+$base-darkest: #333333;
+
+// -----------------------------------------------------------------------------
+// PRIMARY - NOAA Dark Blue (Reflex Blue)
+// Main brand color from NOAA Fisheries Primary Palette
+// -----------------------------------------------------------------------------
+$primary-lighter: #b2def1; // 15% tint
+$primary-light: #59b9e0; // 30% tint
+$primary: #0055a4; // Reflex Blue - NOAA Dark Blue (main brand)
+$primary-vivid: #0055a4; // Reflex Blue
+$primary-dark: #00467f; // Navy Blue (Pantone 541)
+$primary-darker: #002d4d; // Darker Navy
+
+// -----------------------------------------------------------------------------
+// SECONDARY - NOAA Light Blue (Process Blue)
+// From NOAA Fisheries Primary Palette
+// -----------------------------------------------------------------------------
+$secondary-lighter: #d9eff8; // 15% tint
+$secondary-light: #59b9e0; // 30% tint
+$secondary: #007eb5; // Darkened Process Blue for AA contrast
+$secondary-vivid: #0093d0; // Process Blue (original)
+$secondary-dark: #006a99; // Darker for AA contrast with white text
+$secondary-darker: #00557a; // Darkest Process Blue
+
+// -----------------------------------------------------------------------------
+// ACCENT-COOL - URCHIN (Purples)
+// -----------------------------------------------------------------------------
+$accent-cool-lighter: #c9c9ff; // Light tint
+$accent-cool-light: #9f9fff; // Mid tint
+$accent-cool: #5a5ae6; // Darkened for AA contrast with white text
+$accent-cool-dark: #625bc4; // PMS 2725
+$accent-cool-darker: #575195; // PMS 7670
+
+// -----------------------------------------------------------------------------
+// ACCENT-WARM - CRUSTACEAN (Oranges)
+// -----------------------------------------------------------------------------
+$accent-warm-lighter: #ffd9b3; // Light tint
+$accent-warm-light: #ffb366; // Mid tint
+$accent-warm: #ff8300; // PMS 151
+$accent-warm-dark: #b54d00; // Darkened for AA contrast with white text
+$accent-warm-darker: #bc4700; // PMS 1525
+
+// -----------------------------------------------------------------------------
+// STATE COLORS
+// -----------------------------------------------------------------------------
+
+// INFO - WAVES (Teal)
+$info-lighter: #e0f7f8;
+$info-light: #5de0e6;
+$info: #1ecad3; // PMS 319
+$info-dark: #008998; // PMS 321
+$info-darker: #007078; // PMS 322
+
+// ERROR - CORAL (Red)
+$error-lighter: #ffe5e4;
+$error-light: #ff7a73;
+$error: #d02c2f; // PMS 711
+$error-dark: #b2292e; // PMS 1805
+$error-darker: #8b1f24;
+
+// WARNING - CRUSTACEAN (Orange)
+$warning-lighter: #fff3e0;
+$warning-light: #ffd9b3;
+$warning: #ff8300; // PMS 151
+$warning-dark: #d65f00; // PMS 717
+$warning-darker: #bc4700; // PMS 1525
+
+// SUCCESS - SEAGRASS (Greens)
+$success-lighter: #e8f5d6; // Light tint
+$success-light: #b8e67d; // Mid tint
+$success: #93d500; // PMS 375
+$success-dark: #4c9c2e; // PMS 362
+$success-darker: #007934; // PMS 356
+
+// -----------------------------------------------------------------------------
+// DISABLED STATE
+// -----------------------------------------------------------------------------
+$disabled-light: #e8e8e8;
+$disabled: #d0d0d0;
+$disabled-dark: #9a9a9a;
+
+
+// =============================================================================
+// SECTION 2: CSS CUSTOM PROPERTIES
+// These extend the USWDS theme tokens for NOAA-specific needs.
+// Available throughout your application via var(--noaa-*).
+// =============================================================================
+
+:root {
+ // ---------------------------------------------------------------------------
+ // NOAA PRIMARY BRAND COLORS (Direct Access)
+ // For cases where you need exact brand colors
+ // ---------------------------------------------------------------------------
+ --noaa-process-blue: #0093D0; // NOAA Light Blue
+ --noaa-reflex-blue: #0055A4; // NOAA Dark Blue
+ --noaa-navy-blue: #00467F; // PMS 541
+
+ // ---------------------------------------------------------------------------
+ // REGIONAL WEB COLORS
+ // For region-specific styling, badges, and indicators
+ // ---------------------------------------------------------------------------
+ --noaa-region-national: #0055A4; // Blue (Reflex Blue)
+ --noaa-region-west-coast: #4C9C2E; // Green (PMS 362)
+ --noaa-region-southeast: #B2292E; // Red (PMS 1805)
+ --noaa-region-alaska: #FF8300; // Orange (PMS 151)
+ --noaa-region-pacific-islands: #625BC4; // Purple (PMS 2725)
+ --noaa-region-mid-atlantic: #625BC4; // Purple (PMS 2725)
+
+ // ---------------------------------------------------------------------------
+ // THEME PALETTE QUICK ACCESS
+ // All six NOAA theme palettes for easy reference
+ // ---------------------------------------------------------------------------
+
+ // OCEANS (mapped to primary-*)
+ --noaa-oceans-light: #0093D0;
+ --noaa-oceans: #0055A4;
+ --noaa-oceans-dark: #00467F;
+
+ // WAVES (mapped to accent-cool-*)
+ --noaa-waves-light: #1ECAD3;
+ --noaa-waves: #008998;
+ --noaa-waves-dark: #007078;
+
+ // SEAGRASS (mapped to success-*)
+ --noaa-seagrass-light: #93D500;
+ --noaa-seagrass: #4C9C2E;
+ --noaa-seagrass-dark: #007934;
+
+ // CRUSTACEAN (mapped to accent-warm-*)
+ --noaa-crustacean-light: #FF8300;
+ --noaa-crustacean: #D65F00;
+ --noaa-crustacean-dark: #BC4700;
+
+ // CORAL (mapped to secondary-*)
+ --noaa-coral-light: #FF4438;
+ --noaa-coral: #D02C2F;
+ --noaa-coral-dark: #B2292E;
+}
+
+
+// =============================================================================
+// SECTION 3: COMPONENT OVERRIDES
+// Customize RADFish and USWDS components here.
+//
+// Available CSS variables (injected by RADFish plugin):
+// var(--radfish-color-primary) - Primary brand color
+// var(--radfish-color-primary-dark) - Darker primary
+// var(--radfish-color-secondary) - Secondary color
+// var(--radfish-color-secondary-dark) - Darker secondary
+// var(--radfish-color-accent-cool) - Cool accent (teal)
+// var(--radfish-color-accent-warm) - Warm accent (orange)
+// var(--radfish-color-base-lightest) - Lightest gray
+// var(--radfish-color-error) - Error red
+// var(--radfish-color-success) - Success green
+// var(--radfish-color-warning) - Warning orange
+//
+// Available react-uswds components to override:
+// Layout & Navigation: usa-header, usa-footer, usa-sidenav, usa-breadcrumb
+// Forms & Inputs: usa-button, usa-input, usa-checkbox, usa-radio, usa-select
+// Content & Display: usa-card, usa-alert, usa-table, usa-list, usa-accordion
+// Interactive: usa-modal, usa-tooltip, usa-pagination, usa-language-selector
+//
+// See: https://designsystem.digital.gov/components/overview/
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// HEADER
+// -----------------------------------------------------------------------------
+
+/* Header Background */
+header.usa-header {
+ // background-color: var(--radfish-color-primary);
+}
+
+/* Header Logo Width - Minimum 72px for agency logos */
+
+// -----------------------------------------------------------------------------
+// EXAMPLE OVERRIDES (uncomment to use)
+// -----------------------------------------------------------------------------
+
+/* Example: Regional badge styling */
+/*
+.region-badge {
+ padding: 0.25rem 0.75rem;
+ border-radius: 4px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: white;
+}
+
+.region-badge--national { background-color: var(--noaa-region-national); }
+.region-badge--west-coast { background-color: var(--noaa-region-west-coast); }
+.region-badge--southeast { background-color: var(--noaa-region-southeast); }
+.region-badge--alaska { background-color: var(--noaa-region-alaska); }
+.region-badge--pacific-islands { background-color: var(--noaa-region-pacific-islands); }
+.region-badge--mid-atlantic { background-color: var(--noaa-region-mid-atlantic); }
+*/
+
+/* Example: Custom button styles */
+/* .usa-button {
+ border-radius: 8px;
+ font-weight: 600;
+} */
+
+/* Example: Custom card styles */
+/* .usa-card {
+ border-color: color("base-light");
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+} */
diff --git a/templates/react-javascript/vite.config.js b/templates/react-javascript/vite.config.js
index e5d836a4..1c09487a 100644
--- a/templates/react-javascript/vite.config.js
+++ b/templates/react-javascript/vite.config.js
@@ -1,11 +1,58 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";
+import { radFishThemePlugin } from "./plugins/vite-plugin-radfish-theme.js";
-export default defineConfig((env) => ({
+/**
+ * RADFish Theme Configuration
+ *
+ * IMPORTANT: Change theme settings in ONE place:
+ * themes/noaa-theme/styles/theme.scss
+ *
+ * The radFishThemePlugin automatically:
+ * - Parses theme.scss and generates _uswds-generated.scss
+ * - Injects CSS variables into index.html
+ * - Updates index.html meta tags
+ * - Generates manifest.json (dev + build)
+ *
+ * Usage:
+ * radFishThemePlugin("noaa-theme") // Use default NOAA theme
+ * radFishThemePlugin("noaa-theme", { app: {...} }) // With app config overrides
+ *
+ * Available themes (in themes/ folder):
+ * - noaa-theme: Default NOAA branding with USWDS colors
+ */
+
+// Define config overrides here (app name, description)
+// NOTE: Colors automatically come from themes//styles/theme.scss (Section 1)
+const configOverrides = {
+ app: {
+ name: "RADFISH Boilerplate",
+ shortName: "RADFISH Boilerplate",
+ description: "Offline-first fisheries data collection built with RADFish",
+ },
+};
+
+export default defineConfig({
base: "/",
+ css: {
+ preprocessorOptions: {
+ scss: {
+ includePaths: ["node_modules/@uswds/uswds/packages"],
+ // Suppress USWDS deprecation warnings about global built-in functions
+ // These are from USWDS using map-merge() which will be fixed in Dart Sass 3.0.0
+ quietDeps: true,
+ },
+ },
+ },
plugins: [
+ // RADFish theme plugin - provides:
+ // - import.meta.env.RADFISH_* constants
+ // - CSS variable injection
+ // - manifest.json generation on build
+ radFishThemePlugin("noaa-theme", configOverrides),
react(),
+ // VitePWA for service worker
VitePWA({
devOptions: {
enabled: process.env.NODE_ENV === "development",
@@ -16,68 +63,8 @@ export default defineConfig((env) => ({
strategies: "injectManifest",
srcDir: "src",
filename: "service-worker.js",
- manifest: {
- short_name: "RADFish",
- name: "RADFish React Boilerplate",
- icons: [
- {
- src: "icons/radfish.ico",
- sizes: "512x512 256x256 144x144 64x64 32x32 24x24 16x16",
- type: "image/x-icon",
- },
- {
- src: "icons/radfish-144.ico",
- sizes: "144x144 64x64 32x32 24x24 16x16",
- type: "image/x-icon",
- },
- {
- src: "icons/radfish-144.ico",
- type: "image/icon",
- sizes: "144x144",
- purpose: "any",
- },
- {
- src: "icons/radfish-192.ico",
- type: "image/icon",
- sizes: "192x192",
- purpose: "any",
- },
- {
- src: "icons/radfish-512.ico",
- type: "image/icon",
- sizes: "512x512",
- purpose: "any",
- },
- {
- src: "icons/144.png",
- type: "image/png",
- sizes: "144x144",
- purpose: "any",
- },
- {
- src: "icons/144.png",
- type: "image/png",
- sizes: "144x144",
- purpose: "maskable",
- },
- {
- src: "icons/192.png",
- type: "image/png",
- sizes: "192x192",
- purpose: "maskable",
- },
- {
- src: "icons/512.png",
- type: "image/png",
- sizes: "512x512",
- purpose: "maskable",
- },
- ],
- start_url: ".",
- display: "standalone",
- theme_color: "#000000",
- background_color: "#ffffff",
- },
+ // manifest.json is generated by radFishThemePlugin (dev + build)
+ manifest: false,
}),
],
server: {
@@ -89,4 +76,4 @@ export default defineConfig((env) => ({
setupFiles: "./src/__tests__/setup.js",
environment: "jsdom",
},
-}));
+});
- RADFish Application
- setExpanded((prvExpanded) => !prvExpanded)}
- label="Menu"
+ {/* Header - Uses USWDS Extended Header component */}
+
+
- Home
- ,
- ]}
- mobileExpanded={isExpanded}
- onToggleMobileNav={() =>
- setExpanded((prvExpanded) => !prvExpanded)
- }
- >
+
+
+
+
+ 
-
-
- 
-
+
-
- Edit src/App.js and save to reload.
-
- - - -
-
+
);
}
diff --git a/templates/react-javascript/src/styles/style.css b/templates/react-javascript/src/styles/style.css
new file mode 100644
index 00000000..54f8a9dd
--- /dev/null
+++ b/templates/react-javascript/src/styles/style.css
@@ -0,0 +1,37 @@
+/**
+ * Developer Page-Level Custom Styles
+ *
+ * Add your application-specific page and layout styles here.
+ * This file is for styling YOUR OWN pages/layouts, NOT theme config or component overrides.
+ *
+ * For different types of customization:
+ * - USWDS theme colors → themes/Welcome to RADFish
+ ++ You're ready to start building your fisheries data collection application. + This template includes everything you need to get started. +
+ +Quick Start
+-
+
-
+ Edit
vite.config.jsto change app name and description +
+ -
+ Edit
src/App.jsxto modify the header and navigation +
+ -
+ Edit
src/pages/Home.jsxto change this page +
+ -
+ Replace images in
themes/noaa-theme/assets/to change logo and favicon +
+
What's Included
+-
+
- + USWDS Components - U.S. Web Design System via react-uswds + +
- + Offline Storage - IndexedDB for offline-first data collection + +
- + Theming - Customizable NOAA brand colors and styles + +
- + PWA Ready - Progressive Web App support for mobile deployment + +
Resources
++ + + {" "} + + + {" "} + + + {" "} + + + +
+