daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Merge branch 'split-phase3-shared' into dev

Browse Source
This commit is contained in:
Daniel Harvey
2026-05-19 17:23:46 -04:00
parent bb6c393cc6 8b8796fc58
commit 0a0a1826ce
22 changed files with 360 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftCms/DeepDrftCms.csproj
+1
View File
@@ -22,6 +22,7 @@
<ItemGroup>
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
</ItemGroup>
</Project>
DeepDrftCms/Layout/CmsLayout.razor
+2 -38
View File
@@ -1,7 +1,8 @@
@rendermode InteractiveServer
@inherits LayoutComponentBase
@using DeepDrftShared.Client.Common
<MudThemeProvider IsDarkMode="false" Theme="@_theme" />
<MudThemeProvider IsDarkMode="false" Theme="@DeepDrftPalettes.Cms" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
@@ -31,40 +32,3 @@
<span class="dismiss">🗙</span>
</div>
@code {
// Light palette from MainLayout — keeps the CMS visually consistent with the public site.
private readonly MudTheme _theme = new()
{
PaletteLight = new PaletteLight
{
Primary = "#0D1B2A",
PrimaryDarken = "#162437",
Secondary = "#1A3C34",
Tertiary = "#3D7A68",
Background = "#FAFAF8",
BackgroundGray = "#F0F2F0",
Surface = "#FAFAF8",
AppbarBackground = "#0D1B2A",
AppbarText = "#FAFAF8",
TextPrimary = "#0D1B2A",
TextSecondary = "#8A9BB0",
Divider = "rgba(13,27,42,0.10)",
TableLines = "rgba(13,27,42,0.10)",
},
Typography = new Typography
{
Default = new DefaultTypography { FontFamily = new[] { "DM Sans", "sans-serif" } },
H1 = new H1Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H2 = new H2Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H3 = new H3Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H4 = new H4Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H5 = new H5Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H6 = new H6Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
Subtitle1 = new Subtitle1Typography{ FontFamily = new[] { "Geist Mono", "monospace" } },
Body1 = new Body1Typography { FontFamily = new[] { "DM Sans", "sans-serif" } },
Body2 = new Body2Typography { FontFamily = new[] { "DM Sans", "sans-serif" } },
Caption = new CaptionTypography { FontFamily = new[] { "Geist Mono", "monospace" } },
Button = new ButtonTypography { FontFamily = new[] { "Geist Mono", "monospace" } },
}
};
}
DeepDrftHome.sln
+14
View File
@@ -22,6 +22,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftCms", "DeepDrftCms\
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftManager", "DeepDrftManager\DeepDrftManager.csproj", "{E50071B2-A59F-4FB7-A435-5D966C538DDD}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftShared.Client", "DeepDrftShared.Client\DeepDrftShared.Client.csproj", "{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
@@ -164,6 +166,18 @@ Global
{E50071B2-A59F-4FB7-A435-5D966C538DDD}.Release|x64.Build.0 = Release|Any CPU
{E50071B2-A59F-4FB7-A435-5D966C538DDD}.Release|x86.ActiveCfg = Release|Any CPU
{E50071B2-A59F-4FB7-A435-5D966C538DDD}.Release|x86.Build.0 = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|Any CPU.Build.0 = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|x64.ActiveCfg = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|x64.Build.0 = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|x86.ActiveCfg = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Debug|x86.Build.0 = Debug|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|Any CPU.ActiveCfg = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|Any CPU.Build.0 = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|x64.ActiveCfg = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|x64.Build.0 = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|x86.ActiveCfg = Release|Any CPU
{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}.Release|x86.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
DeepDrftManager/Components/App.razor
+3 -3
View File
@@ -1,3 +1,4 @@
@using DeepDrftShared.Client.Components
<!DOCTYPE html>
<html lang="en">
@@ -5,10 +6,9 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Geist+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap" rel="stylesheet">
<DeepDrftFontLinks />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
<ImportMap />
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
<HeadOutlet />
DeepDrftManager/DeepDrftManager.csproj
+1
View File
@@ -20,6 +20,7 @@
<ProjectReference Include="..\DeepDrftCms\DeepDrftCms.csproj" />
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
</ItemGroup>
</Project>
DeepDrftWeb.Client/Common/DDIcons.cs → DeepDrftShared.Client/Common/DDIcons.cs
+1 -4
View File
@@ -1,10 +1,7 @@
namespace DeepDrftWeb.Client.Common;
namespace DeepDrftShared.Client.Common;
public static class DDIcons
{
/// <summary>
/// Charleston gas lamp lantern - uses currentColor for theming
/// </summary>
/// <summary>
/// Charleston gas lamp lantern - uses currentColor for theming
/// </summary>
DeepDrftShared.Client/Common/DeepDrftPalettes.cs
+152
View File
@@ -0,0 +1,152 @@
using MudBlazor;
namespace DeepDrftShared.Client.Common;
/// <summary>
/// Canonical MudBlazor theme for DeepDrft apps. Holds the wireframe light palette
/// (navy / green / warm off-white), the dark palette (navy ground / green-accent
/// / off-white), and the shared typography (Cormorant Garamond / Geist Mono / DM Sans).
///
/// <see cref="Default"/> is used by the public site (light+dark toggle).
/// <see cref="Cms"/> is used by the CMS host (light-only, solid navy AppBar for visual distinction).
/// Hosts decide light vs dark by toggling <c>IsDarkMode</c> on <c>MudThemeProvider</c>.
/// </summary>
// MudColor accepts string via implicit conversion, and MudTheme palette/typography
// properties are typed as nullable in MudBlazor. These assignments are valid but
// the nullable annotations trigger CS8601 as false positives.
#pragma warning disable CS8601
public static class DeepDrftPalettes
{
/// <summary>
/// The single MudTheme exposing both light and dark palettes plus typography.
/// Hosts pick a mode via <c>MudThemeProvider IsDarkMode</c>.
/// </summary>
public static MudTheme Default { get; } = new()
{
PaletteLight = Light,
PaletteDark = Dark,
Typography = Typography,
};
/// <summary>
/// CMS-specific MudTheme. Same as <see cref="Default"/> but with a solid navy AppBar
/// on the light palette to visually distinguish the admin surface from the public site.
/// </summary>
public static MudTheme Cms { get; } = new()
{
PaletteLight = CmsLight,
PaletteDark = Dark,
Typography = Typography,
};
// Wireframe light palette - navy / green / warm off-white
public static PaletteLight Light { get; } = new()
{
Primary = "#0D1B2A", // Navy - text, buttons
PrimaryDarken = "#162437", // Navy-mid - hover, elevated surfaces
Secondary = "#1A3C34", // Deep green - italic emphasis
Tertiary = "#3D7A68", // Green-accent - interactive hovers/active/icons
Background = "#FAFAF8", // Warm off-white
BackgroundGray = "#F0F2F0", // Slight warm gray for contrast
Surface = "#FAFAF8",
AppbarBackground = "rgba(250,250,248,0.88)",
AppbarText = "#0D1B2A",
TextPrimary = "#0D1B2A",
TextSecondary = "#8A9BB0", // Muted - secondary text, nav at rest
TextDisabled = "rgba(13,27,42,0.38)",
ActionDefault = "#8A9BB0",
ActionDisabled = "rgba(13,27,42,0.26)",
ActionDisabledBackground = "rgba(13,27,42,0.12)",
Divider = "rgba(13,27,42,0.10)",
DividerLight = "rgba(13,27,42,0.06)",
TableLines = "rgba(13,27,42,0.10)",
LinesDefault = "rgba(13,27,42,0.10)",
LinesInputs = "rgba(13,27,42,0.30)",
OverlayLight = "rgba(250,250,248,0.5)",
OverlayDark = "rgba(13,27,42,0.5)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// CMS light palette - same as Light but with a solid navy AppBar to distinguish
// the admin surface from the public site's semi-transparent off-white AppBar.
public static PaletteLight CmsLight { get; } = new()
{
Primary = Light.Primary,
PrimaryDarken = Light.PrimaryDarken,
Secondary = Light.Secondary,
Tertiary = Light.Tertiary,
Background = Light.Background,
BackgroundGray = Light.BackgroundGray,
Surface = Light.Surface,
AppbarBackground = "#0D1B2A", // Solid navy - CMS visual distinction
AppbarText = "#FAFAF8", // Off-white text on navy
TextPrimary = Light.TextPrimary,
TextSecondary = Light.TextSecondary,
TextDisabled = Light.TextDisabled,
ActionDefault = Light.ActionDefault,
ActionDisabled = Light.ActionDisabled,
ActionDisabledBackground = Light.ActionDisabledBackground,
Divider = Light.Divider,
DividerLight = Light.DividerLight,
TableLines = Light.TableLines,
LinesDefault = Light.LinesDefault,
LinesInputs = Light.LinesInputs,
OverlayLight = Light.OverlayLight,
OverlayDark = Light.OverlayDark,
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// Wireframe dark palette - navy ground / green-accent / off-white.
// Mirrors the light palette's vocabulary on a dark ground; the coral/lowcountry
// identity has been retired. On dark, green-accent (#3D7A68) becomes the primary
// interactive colour and off-white (#FAFAF8) becomes the secondary emphasis.
public static PaletteDark Dark { get; } = new()
{
Primary = "#3D7A68", // Green-accent - interactive colour on dark
PrimaryDarken = "#2A5C4F", // Green-light - hover/pressed
Secondary = "#FAFAF8", // Off-white - secondary emphasis
Tertiary = "#1A3C34", // Deep green - tertiary accent
Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground
Surface = "#162437", // Navy-mid - elevated cards/panels
AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy
AppbarText = "#FAFAF8",
DrawerBackground = "#162437", // Navy-mid
DrawerText = "#FAFAF8",
DrawerIcon = "#8A9BB0", // Muted
// TextPrimary (#FAFAF8) on Background (#0D1B2A): contrast ratio ~16.5:1 - passes WCAG AA (>=4.5:1)
TextPrimary = "#FAFAF8",
// TextSecondary (#8A9BB0) on Background (#0D1B2A): contrast ratio ~6.1:1 - passes WCAG AA for normal text
TextSecondary = "#8A9BB0",
TextDisabled = "rgba(250,250,248,0.38)",
ActionDefault = "#8A9BB0",
ActionDisabled = "rgba(250,250,248,0.26)",
ActionDisabledBackground = "rgba(250,250,248,0.12)",
Divider = "rgba(250,250,248,0.10)",
DividerLight = "rgba(250,250,248,0.06)",
TableLines = "rgba(250,250,248,0.10)",
LinesDefault = "rgba(250,250,248,0.10)",
LinesInputs = "rgba(250,250,248,0.30)",
OverlayLight = "rgba(13,27,42,0.5)",
OverlayDark = "rgba(0,0,0,0.7)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// Shared typography - Cormorant Garamond for display, Geist Mono for mono, DM Sans for body.
public static Typography Typography { get; } = new()
{
Default = new DefaultTypography { FontFamily = new[] { "DM Sans", "sans-serif" } },
H1 = new H1Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H2 = new H2Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H3 = new H3Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H4 = new H4Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
// Extended to H5/H6 beyond spec - keeps heading hierarchy consistent in Cormorant Garamond
H5 = new H5Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
H6 = new H6Typography { FontFamily = new[] { "Cormorant Garamond", "Georgia", "serif" } },
Subtitle1 = new Subtitle1Typography{ FontFamily = new[] { "Geist Mono", "monospace" } },
Body1 = new Body1Typography { FontFamily = new[] { "DM Sans", "sans-serif" } },
Body2 = new Body2Typography { FontFamily = new[] { "DM Sans", "sans-serif" } },
Caption = new CaptionTypography { FontFamily = new[] { "Geist Mono", "monospace" } },
Button = new ButtonTypography { FontFamily = new[] { "Geist Mono", "monospace" } },
};
}
#pragma warning restore CS8601
DeepDrftShared.Client/Components/DeepDrftFontLinks.razor
+6
View File
@@ -0,0 +1,6 @@
@* Google Fonts preconnects + stylesheet link for DeepDrft typography
(Cormorant Garamond / Geist Mono / DM Sans). Emitted once per HTML document
from each host's App.razor. *@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Geist+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap" rel="stylesheet">
DeepDrftWeb.Client/Controls/TrackCard.razor → DeepDrftShared.Client/Components/TrackCard.razor
+1 -1
View File
@@ -1,4 +1,4 @@
<MudCard Class="deepdrft-track-card-container"
<MudCard Class="deepdrft-track-card-container"
Elevation="4">
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
DeepDrftWeb.Client/Controls/TrackCard.razor.cs → DeepDrftShared.Client/Components/TrackCard.razor.cs
+2 -3
View File
@@ -1,9 +1,8 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components;
using DeepDrftModels.Entities;
using DeepDrftWeb.Client.Clients;
using MudBlazor;
namespace DeepDrftWeb.Client.Controls;
namespace DeepDrftShared.Client.Components;
public partial class TrackCard : ComponentBase
{
DeepDrftWeb.Client/Controls/TracksGallery.razor → DeepDrftShared.Client/Components/TracksGallery.razor
+1 -1
View File
@@ -1,4 +1,4 @@
<MudContainer MaxWidth="MaxWidth.Large" Class="tracks-gallery-container">
<MudContainer MaxWidth="MaxWidth.Large" Class="tracks-gallery-container">
<MudGrid Spacing="6" Justify="Justify.Center">
@foreach (var track in Tracks)
{
DeepDrftWeb.Client/Controls/TracksGallery.razor.cs → DeepDrftShared.Client/Components/TracksGallery.razor.cs
+2 -3
View File
@@ -1,8 +1,7 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components;
using DeepDrftModels.Entities;
using DeepDrftWeb.Client.Clients;
namespace DeepDrftWeb.Client.Controls;
namespace DeepDrftShared.Client.Components;
public partial class TracksGallery : ComponentBase
{
DeepDrftWeb.Client/Controls/TracksGallery.razor.css → DeepDrftShared.Client/Components/TracksGallery.razor.css
+1 -1
View File
@@ -1,4 +1,4 @@
.tracks-gallery-container {
.tracks-gallery-container {
padding: 16px;
height: 100%;
box-sizing: border-box;
DeepDrftShared.Client/DeepDrftShared.Client.csproj
+22
View File
@@ -0,0 +1,22 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net10.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.7" />
<PackageReference Include="MudBlazor" Version="8.15.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
</ItemGroup>
</Project>
DeepDrftShared.Client/_Imports.razor
+10
View File
@@ -0,0 +1,10 @@
@using System.Net.Http
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MudBlazor
@using DeepDrftShared.Client.Common
@using DeepDrftShared.Client.Components
DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+96
View File
@@ -0,0 +1,96 @@
/* DeepDrft design tokens — shared palette layer.
Consumed by both DeepDrftWeb (public site, light + dark) and the CMS host
(light only). Page-specific styling lives in the consuming host's own
stylesheet (e.g. DeepDrftWeb/wwwroot/styles/deepdrft-styles.css). */
/* Light theme - wireframe palette (navy / green / warm off-white) */
:root {
/* Wireframe tokens - source of truth */
--deepdrft-navy: #0D1B2A;
--deepdrft-navy-mid: #162437;
--deepdrft-green: #1A3C34;
--deepdrft-green-light: #2A5C4F;
--deepdrft-green-accent: #3D7A68;
--deepdrft-muted: #8A9BB0;
--deepdrft-white: #FAFAF8;
--deepdrft-border: rgba(13, 27, 42, 0.10);
--deepdrft-border-green: rgba(26, 60, 52, 0.20);
/* Wireframe font stack */
--deepdrft-font-display: "Cormorant Garamond", Georgia, serif;
--deepdrft-font-mono: "Geist Mono", monospace;
--deepdrft-font-body: "DM Sans", sans-serif;
/* Legacy palette aliases - mapped onto wireframe tokens.
Existing utility classes (.deepdrft-card-*, .deepdrft-chip-*, .deepdrft-text-*)
still reference these names; they will be retired in Phase 0.3/0.4 when
Home.razor is rewritten. Until then, alias to the closest wireframe colour. */
--deepdrft-primary: var(--deepdrft-navy);
--deepdrft-secondary: var(--deepdrft-green);
--deepdrft-tertiary: var(--deepdrft-green-accent);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces */
--deepdrft-surface: var(--deepdrft-white);
--deepdrft-background: var(--deepdrft-white);
--deepdrft-surface-alpha: rgba(250, 250, 248, 0.88);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-surface);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-white);
--gradient-accent: var(--deepdrft-navy);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-accent);
/* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*.
Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have
consumers and are scheduled for retirement in Phase 0.3/0.4. */
}
/* Dark theme - wireframe palette (navy ground / green-accent / off-white).
Mirrors the light palette's vocabulary on a dark ground. Same alias structure
as :root so utility classes (.deepdrft-chip-*, .deepdrft-border-*, .deepdrft-text-*)
resolve coherently across themes. */
.deepdrft-theme-dark {
/* Legacy palette aliases - mapped onto wireframe tokens.
On dark, green-accent becomes the primary interactive colour and
off-white becomes the secondary emphasis. */
--deepdrft-primary: var(--deepdrft-green-accent);
--deepdrft-secondary: var(--deepdrft-white);
--deepdrft-tertiary: var(--deepdrft-green);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces - navy ground, navy-mid elevated */
--deepdrft-surface: var(--deepdrft-navy-mid);
--deepdrft-background: var(--deepdrft-navy);
--deepdrft-surface-alpha: rgba(13, 27, 42, 0.92);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-white);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-navy);
--gradient-accent: var(--deepdrft-green-accent);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-light);
}
DeepDrftWeb.Client/DeepDrftWeb.Client.csproj
+1
View File
@@ -19,6 +19,7 @@
<ItemGroup>
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
</ItemGroup>
<ItemGroup>
DeepDrftWeb.Client/Layout/MainLayout.razor
+5 -120
View File
@@ -2,6 +2,7 @@
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
@using DeepDrftWeb.Client.Services
@using DeepDrftWeb.Client.Common
@using DeepDrftShared.Client.Common
@using Microsoft.AspNetCore.Components
@inherits LayoutComponentBase
@implements IDisposable
@@ -68,65 +69,12 @@
// Register to persist state when prerendering completes
_persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
// Palettes + typography live in DeepDrftShared.Client.Common.DeepDrftPalettes
// so the CMS host can reuse them. We wrap into ThemeManagerTheme to keep
// the MudBlazor.ThemeManager integration intact.
_themeManager = new ThemeManagerTheme
{
Theme =
{
PaletteDark = _darkPalette,
PaletteLight = _lightPalette,
Typography = new Typography()
{
Default = new DefaultTypography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
H1 = new H1Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H2 = new H2Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H3 = new H3Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H4 = new H4Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
// Extended to H5/H6 beyond spec — keeps heading hierarchy consistent in Cormorant Garamond
H5 = new H5Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H6 = new H6Typography()
{
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
Subtitle1 = new Subtitle1Typography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
},
Body1 = new Body1Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Body2 = new Body2Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Caption = new CaptionTypography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
},
Button = new ButtonTypography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
}
}
}
Theme = DeepDrftPalettes.Default,
};
StateHasChanged();
@@ -146,69 +94,6 @@
StateHasChanged();
}
// Wireframe light palette - navy / green / warm off-white
private readonly PaletteLight _lightPalette = new()
{
Primary = "#0D1B2A", // Navy - text, buttons
PrimaryDarken = "#162437", // Navy-mid - hover, elevated surfaces
Secondary = "#1A3C34", // Deep green - italic emphasis
Tertiary = "#3D7A68", // Green-accent - interactive hovers/active/icons
Background = "#FAFAF8", // Warm off-white
BackgroundGray = "#F0F2F0", // Slight warm gray for contrast
Surface = "#FAFAF8",
AppbarBackground = "rgba(250,250,248,0.88)",
AppbarText = "#0D1B2A",
TextPrimary = "#0D1B2A",
TextSecondary = "#8A9BB0", // Muted - secondary text, nav at rest
TextDisabled = "rgba(13,27,42,0.38)",
ActionDefault = "#8A9BB0",
ActionDisabled = "rgba(13,27,42,0.26)",
ActionDisabledBackground = "rgba(13,27,42,0.12)",
Divider = "rgba(13,27,42,0.10)",
DividerLight = "rgba(13,27,42,0.06)",
TableLines = "rgba(13,27,42,0.10)",
LinesDefault = "rgba(13,27,42,0.10)",
LinesInputs = "rgba(13,27,42,0.30)",
OverlayLight = "rgba(250,250,248,0.5)",
OverlayDark = "rgba(13,27,42,0.5)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// Wireframe dark palette - navy ground / green-accent / off-white
// Mirrors the light palette's vocabulary on a dark ground; the coral/lowcountry
// identity has been retired. On dark, green-accent (#3D7A68) becomes the primary
// interactive colour and off-white (#FAFAF8) becomes the secondary emphasis.
private readonly PaletteDark _darkPalette = new()
{
Primary = "#3D7A68", // Green-accent - interactive colour on dark
PrimaryDarken = "#2A5C4F", // Green-light - hover/pressed
Secondary = "#FAFAF8", // Off-white - secondary emphasis
Tertiary = "#1A3C34", // Deep green - tertiary accent
Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground
Surface = "#162437", // Navy-mid - elevated cards/panels
AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy
AppbarText = "#FAFAF8",
DrawerBackground = "#162437", // Navy-mid
DrawerText = "#FAFAF8",
DrawerIcon = "#8A9BB0", // Muted
// TextPrimary (#FAFAF8) on Background (#0D1B2A): contrast ratio ~16.5:1 - passes WCAG AA (≥4.5:1)
TextPrimary = "#FAFAF8",
// TextSecondary (#8A9BB0) on Background (#0D1B2A): contrast ratio ~6.1:1 - passes WCAG AA for normal text
TextSecondary = "#8A9BB0",
TextDisabled = "rgba(250,250,248,0.38)",
ActionDefault = "#8A9BB0",
ActionDisabled = "rgba(250,250,248,0.26)",
ActionDisabledBackground = "rgba(250,250,248,0.12)",
Divider = "rgba(250,250,248,0.10)",
DividerLight = "rgba(250,250,248,0.06)",
TableLines = "rgba(250,250,248,0.10)",
LinesDefault = "rgba(250,250,248,0.10)",
LinesInputs = "rgba(250,250,248,0.30)",
OverlayLight = "rgba(13,27,42,0.5)",
OverlayDark = "rgba(0,0,0,0.7)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// Theme wrapper class for CSS targeting
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
DeepDrftWeb.Client/Pages/TracksView.razor
-1
View File
@@ -1,6 +1,5 @@
@page "/tracks"
@rendermode InteractiveAuto
@using DeepDrftWeb.Client.Controls
<PageTitle>DeepDrft Track Gallery</PageTitle>
DeepDrftWeb.Client/_Imports.razor
+2
View File
@@ -10,4 +10,6 @@
@using MudBlazor.Services
@using MudBlazor.ThemeManager
@using DeepDrftWeb.Client.Common
@using DeepDrftShared.Client.Common
@using DeepDrftShared.Client.Components
@layout DeepDrftWeb.Client.Layout.MainLayout
DeepDrftWeb/Components/App.razor
+3 -3
View File
@@ -1,4 +1,5 @@
@using DeepDrftWeb.Services
@using DeepDrftShared.Client.Components
<!DOCTYPE html>
<html lang="en">
@@ -6,12 +7,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Geist+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap" rel="stylesheet">
<DeepDrftFontLinks />
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
<link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
<link rel="stylesheet" href="styles/deepdrft-styles.css" />
<ImportMap />
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+7 -94
View File
@@ -1,101 +1,14 @@
/* DeepDrft Global Styles - Simplified & Maintainable */
/* DeepDrft Global Styles - Simplified & Maintainable
Note: the palette / token layer (--deepdrft-*, --theme-*, --gradient-*, and the
.deepdrft-theme-dark override block) lives in DeepDrftShared.Client and is
served at _content/DeepDrftShared.Client/styles/deepdrft-tokens.css. Link that
file BEFORE this one in App.razor — every rule below depends on those tokens. */
/* =============================================================================
1. CSS VARIABLES - Theme System
1. PAGE BASELINE
============================================================================= */
/* Light theme - wireframe palette (navy / green / warm off-white) */
:root {
/* Wireframe tokens - source of truth */
--deepdrft-navy: #0D1B2A;
--deepdrft-navy-mid: #162437;
--deepdrft-green: #1A3C34;
--deepdrft-green-light: #2A5C4F;
--deepdrft-green-accent: #3D7A68;
--deepdrft-muted: #8A9BB0;
--deepdrft-white: #FAFAF8;
--deepdrft-border: rgba(13, 27, 42, 0.10);
--deepdrft-border-green: rgba(26, 60, 52, 0.20);
/* Wireframe font stack */
--deepdrft-font-display: "Cormorant Garamond", Georgia, serif;
--deepdrft-font-mono: "Geist Mono", monospace;
--deepdrft-font-body: "DM Sans", sans-serif;
/* Legacy palette aliases - mapped onto wireframe tokens.
Existing utility classes (.deepdrft-card-*, .deepdrft-chip-*, .deepdrft-text-*)
still reference these names; they will be retired in Phase 0.3/0.4 when
Home.razor is rewritten. Until then, alias to the closest wireframe colour. */
--deepdrft-primary: var(--deepdrft-navy);
--deepdrft-secondary: var(--deepdrft-green);
--deepdrft-tertiary: var(--deepdrft-green-accent);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces */
--deepdrft-surface: var(--deepdrft-white);
--deepdrft-background: var(--deepdrft-white);
--deepdrft-surface-alpha: rgba(250, 250, 248, 0.88);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-surface);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-white);
--gradient-accent: var(--deepdrft-navy);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-accent);
/* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*.
Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have
consumers and are scheduled for retirement in Phase 0.3/0.4. */
}
/* Dark theme - wireframe palette (navy ground / green-accent / off-white).
Mirrors the light palette's vocabulary on a dark ground. Same alias structure
as :root so utility classes (.deepdrft-chip-*, .deepdrft-border-*, .deepdrft-text-*)
resolve coherently across themes. */
.deepdrft-theme-dark {
/* Legacy palette aliases - mapped onto wireframe tokens.
On dark, green-accent becomes the primary interactive colour and
off-white becomes the secondary emphasis. */
--deepdrft-primary: var(--deepdrft-green-accent);
--deepdrft-secondary: var(--deepdrft-white);
--deepdrft-tertiary: var(--deepdrft-green);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces - navy ground, navy-mid elevated */
--deepdrft-surface: var(--deepdrft-navy-mid);
--deepdrft-background: var(--deepdrft-navy);
--deepdrft-surface-alpha: rgba(13, 27, 42, 0.92);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-white);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-navy);
--gradient-accent: var(--deepdrft-green-accent);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-light);
}
/* Base page colours — use MudBlazor's theme-injected variables so they
switch automatically when IsDarkMode toggles. The --mud-palette-background
and --mud-palette-text-primary variables are injected by MudThemeProvider