kyleledbetter

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
$primary: md-palette($md-orange, 800);
$accent:  md-palette($md-light-blue, 600, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-red, 600);

kyleledbetter

// A light blue and orange theme
.light-blue-orange {
    $primary2: md-palette($md-light-blue);
    $accent2:  md-palette($md-orange, 800);
    $warn2:    md-palette($md-red, 600);

    $light-blue-orange: md-light-theme($primary2, $accent2, $warn2);

    @include angular-material-theme($light-blue-orange);   
}

kyleledbetter

@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-orange, 800);
$accent:  mat-palette($mat-light-blue, 600, 100, 800);
$warn:    mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

kyleledbetter

@import "theme";
// You can add global styles to this file that will cascade like normal CSS

// Active icon color in list nav
md-nav-list {
    [md-list-item].active {
        md-icon[md-list-avatar] {
            background-color: mat-color($accent);
            color: mat-color($accent, default-contrast)
        }

kyleledbetter

/**
 * Applies styles for users in high contrast mode. Note that this only applies
 * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
 * attribute, however Chrome handles high contrast differently.
 */
/* Theme for the ripple elements.*/
/** The mixins below are shared between md-menu and md-select */
/**
 * This mixin adds the correct panel transform styles based
 * on the direction that the menu panel opens.

kyleledbetter

Product Requirements Doc

Our application leverages the latest innovations in React 19 and Next.js 15 (App Router) to deliver powerful real-time collaboration features. User authentication and database management are powered by Supabase, with data being transitioned from Neon Postgres to Supabase Postgres and fully integrated through Drizzle ORM. We utilize the Vercel AI SDK (referenced in /documentation/ai-sdk) to orchestrate AI-driven interactions, and NextAuth.js to optionally authenticate users with oauth2 connecting third-party software assets.

Implementation Plan

1. Use React 19 & Next.js 15
   • Ensure the project dependencies match the versions in the package.json snippet provided ("react": "19.0.0-rc-...", "next": "15.0.3-canary.2").
   • Check the configuration of Next.js App Router in the /app directory, verifying that routes align with Next.js 15 standards.

• Ensure all dependencies are compatible with the versions of React and Next.js specified.

kyleledbetter

Supabase Database Architecture

Security & Compliance Requirements

SOC II Compliance

• All sensitive data must be encrypted at rest
• Audit logging for all data access and modifications
• Role-based access control (RBAC) with principle of least privilege
• Data backup and recovery procedures
• Regular security assessments and monitoring