diff --git a/DeepDrftCms/DeepDrftCms.csproj b/DeepDrftCms/DeepDrftCms.csproj index 9bc49dc..c28e329 100644 --- a/DeepDrftCms/DeepDrftCms.csproj +++ b/DeepDrftCms/DeepDrftCms.csproj @@ -22,6 +22,7 @@ + diff --git a/DeepDrftCms/Layout/CmsLayout.razor b/DeepDrftCms/Layout/CmsLayout.razor index 2a830b9..619e6fe 100644 --- a/DeepDrftCms/Layout/CmsLayout.razor +++ b/DeepDrftCms/Layout/CmsLayout.razor @@ -1,7 +1,8 @@ @rendermode InteractiveServer @inherits LayoutComponentBase +@using DeepDrftShared.Client.Common - + @@ -31,40 +32,3 @@ 🗙 -@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" } }, - } - }; -} diff --git a/DeepDrftHome.sln b/DeepDrftHome.sln index 74b85ff..18d5afd 100644 --- a/DeepDrftHome.sln +++ b/DeepDrftHome.sln @@ -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 diff --git a/DeepDrftManager/Components/App.razor b/DeepDrftManager/Components/App.razor index 3f117cd..846da47 100644 --- a/DeepDrftManager/Components/App.razor +++ b/DeepDrftManager/Components/App.razor @@ -1,3 +1,4 @@ +@using DeepDrftShared.Client.Components @@ -5,10 +6,9 @@ - - - + + diff --git a/DeepDrftManager/DeepDrftManager.csproj b/DeepDrftManager/DeepDrftManager.csproj index 78c0b25..e5f7a8c 100644 --- a/DeepDrftManager/DeepDrftManager.csproj +++ b/DeepDrftManager/DeepDrftManager.csproj @@ -20,6 +20,7 @@ + diff --git a/DeepDrftWeb.Client/Common/DDIcons.cs b/DeepDrftShared.Client/Common/DDIcons.cs similarity index 89% rename from DeepDrftWeb.Client/Common/DDIcons.cs rename to DeepDrftShared.Client/Common/DDIcons.cs index b5ffbda..11fecb6 100644 --- a/DeepDrftWeb.Client/Common/DDIcons.cs +++ b/DeepDrftShared.Client/Common/DDIcons.cs @@ -1,10 +1,7 @@ -namespace DeepDrftWeb.Client.Common; +namespace DeepDrftShared.Client.Common; public static class DDIcons { - /// - /// Charleston gas lamp lantern - uses currentColor for theming - /// /// /// Charleston gas lamp lantern - uses currentColor for theming /// @@ -25,4 +22,4 @@ public static class DDIcons """; -} \ No newline at end of file +} diff --git a/DeepDrftShared.Client/Common/DeepDrftPalettes.cs b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs new file mode 100644 index 0000000..830c295 --- /dev/null +++ b/DeepDrftShared.Client/Common/DeepDrftPalettes.cs @@ -0,0 +1,152 @@ +using MudBlazor; + +namespace DeepDrftShared.Client.Common; + +/// +/// 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). +/// +/// is used by the public site (light+dark toggle). +/// is used by the CMS host (light-only, solid navy AppBar for visual distinction). +/// Hosts decide light vs dark by toggling IsDarkMode on MudThemeProvider. +/// +// 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 +{ + /// + /// The single MudTheme exposing both light and dark palettes plus typography. + /// Hosts pick a mode via MudThemeProvider IsDarkMode. + /// + public static MudTheme Default { get; } = new() + { + PaletteLight = Light, + PaletteDark = Dark, + Typography = Typography, + }; + + /// + /// CMS-specific MudTheme. Same as but with a solid navy AppBar + /// on the light palette to visually distinguish the admin surface from the public site. + /// + 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 diff --git a/DeepDrftShared.Client/Components/DeepDrftFontLinks.razor b/DeepDrftShared.Client/Components/DeepDrftFontLinks.razor new file mode 100644 index 0000000..5b171de --- /dev/null +++ b/DeepDrftShared.Client/Components/DeepDrftFontLinks.razor @@ -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. *@ + + + diff --git a/DeepDrftWeb.Client/Controls/TrackCard.razor b/DeepDrftShared.Client/Components/TrackCard.razor similarity index 78% rename from DeepDrftWeb.Client/Controls/TrackCard.razor rename to DeepDrftShared.Client/Components/TrackCard.razor index 03879a4..f86b6f1 100644 --- a/DeepDrftWeb.Client/Controls/TrackCard.razor +++ b/DeepDrftShared.Client/Components/TrackCard.razor @@ -1,6 +1,6 @@ - - + @if (!string.IsNullOrEmpty(TrackModel?.ImagePath)) {
@@ -12,49 +12,49 @@ Elevation="0"> } - + - +
- @TrackModel?.TrackName - - @TrackModel?.Artist
- +
@if (!string.IsNullOrEmpty(TrackModel?.Album)) { - @TrackModel.Album } - + @if (!string.IsNullOrEmpty(TrackModel?.Genre)) { - @TrackModel.Genre }
- +
@if (TrackModel?.ReleaseDate.HasValue == true) { - @TrackModel.ReleaseDate.Value.Year @@ -63,13 +63,13 @@ {
} - -
- + - - \ No newline at end of file + + diff --git a/DeepDrftWeb.Client/Controls/TrackCard.razor.cs b/DeepDrftShared.Client/Components/TrackCard.razor.cs similarity index 82% rename from DeepDrftWeb.Client/Controls/TrackCard.razor.cs rename to DeepDrftShared.Client/Components/TrackCard.razor.cs index 592bd45..ace2198 100644 --- a/DeepDrftWeb.Client/Controls/TrackCard.razor.cs +++ b/DeepDrftShared.Client/Components/TrackCard.razor.cs @@ -1,16 +1,15 @@ -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 { [Parameter] public required TrackEntity TrackModel { get; set; } [Parameter] public EventCallback OnPlay { get; set; } [Parameter] public bool IsPlaying { get; set; } = false; - + private string PlayPauseIcon => IsPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow; private async Task PlayClick() @@ -20,4 +19,4 @@ public partial class TrackCard : ComponentBase await OnPlay.InvokeAsync(TrackModel); } } -} \ No newline at end of file +} diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor b/DeepDrftShared.Client/Components/TracksGallery.razor similarity index 81% rename from DeepDrftWeb.Client/Controls/TracksGallery.razor rename to DeepDrftShared.Client/Components/TracksGallery.razor index 29e0a80..499c078 100644 --- a/DeepDrftWeb.Client/Controls/TracksGallery.razor +++ b/DeepDrftShared.Client/Components/TracksGallery.razor @@ -1,4 +1,4 @@ - + @foreach (var track in Tracks) { @@ -9,4 +9,4 @@ } - \ No newline at end of file + diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor.cs b/DeepDrftShared.Client/Components/TracksGallery.razor.cs similarity index 83% rename from DeepDrftWeb.Client/Controls/TracksGallery.razor.cs rename to DeepDrftShared.Client/Components/TracksGallery.razor.cs index e4dfad8..42b2ec5 100644 --- a/DeepDrftWeb.Client/Controls/TracksGallery.razor.cs +++ b/DeepDrftShared.Client/Components/TracksGallery.razor.cs @@ -1,15 +1,14 @@ -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 { [Parameter] public IEnumerable Tracks { get; set; } = []; [Parameter] public TrackEntity? SelectedTrack { get; set; } [Parameter] public EventCallback SelectedTrackChanged { get; set; } - + private async Task HandlePlayClick(TrackEntity track) { if (SelectedTrack == track) return; @@ -21,4 +20,4 @@ public partial class TracksGallery : ComponentBase await SelectedTrackChanged.InvokeAsync(track); } } -} \ No newline at end of file +} diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor.css b/DeepDrftShared.Client/Components/TracksGallery.razor.css similarity index 67% rename from DeepDrftWeb.Client/Controls/TracksGallery.razor.css rename to DeepDrftShared.Client/Components/TracksGallery.razor.css index 9ac440b..2e29688 100644 --- a/DeepDrftWeb.Client/Controls/TracksGallery.razor.css +++ b/DeepDrftShared.Client/Components/TracksGallery.razor.css @@ -1,5 +1,5 @@ -.tracks-gallery-container { +.tracks-gallery-container { padding: 16px; height: 100%; box-sizing: border-box; -} \ No newline at end of file +} diff --git a/DeepDrftShared.Client/DeepDrftShared.Client.csproj b/DeepDrftShared.Client/DeepDrftShared.Client.csproj new file mode 100644 index 0000000..aa30580 --- /dev/null +++ b/DeepDrftShared.Client/DeepDrftShared.Client.csproj @@ -0,0 +1,22 @@ + + + + net10.0 + enable + enable + + + + + + + + + + + + + + + + diff --git a/DeepDrftShared.Client/_Imports.razor b/DeepDrftShared.Client/_Imports.razor new file mode 100644 index 0000000..c0645ff --- /dev/null +++ b/DeepDrftShared.Client/_Imports.razor @@ -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 diff --git a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css new file mode 100644 index 0000000..cff7af1 --- /dev/null +++ b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css @@ -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); +} diff --git a/DeepDrftWeb.Client/DeepDrftWeb.Client.csproj b/DeepDrftWeb.Client/DeepDrftWeb.Client.csproj index 390b9bf..8cdd5d3 100644 --- a/DeepDrftWeb.Client/DeepDrftWeb.Client.csproj +++ b/DeepDrftWeb.Client/DeepDrftWeb.Client.csproj @@ -19,6 +19,7 @@ + diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index 1e87ab1..1702f4b 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -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,70 +69,17 @@ // 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(); } - + private ThemeManagerTheme _themeManager; public bool _themeManagerOpen = false; @@ -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"; diff --git a/DeepDrftWeb.Client/Pages/TracksView.razor b/DeepDrftWeb.Client/Pages/TracksView.razor index bf79b53..d270cbf 100644 --- a/DeepDrftWeb.Client/Pages/TracksView.razor +++ b/DeepDrftWeb.Client/Pages/TracksView.razor @@ -1,6 +1,5 @@ @page "/tracks" @rendermode InteractiveAuto -@using DeepDrftWeb.Client.Controls DeepDrft Track Gallery diff --git a/DeepDrftWeb.Client/_Imports.razor b/DeepDrftWeb.Client/_Imports.razor index ca3ba07..39ebe5c 100644 --- a/DeepDrftWeb.Client/_Imports.razor +++ b/DeepDrftWeb.Client/_Imports.razor @@ -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 \ No newline at end of file diff --git a/DeepDrftWeb/Components/App.razor b/DeepDrftWeb/Components/App.razor index 506f2cb..e1b9f22 100644 --- a/DeepDrftWeb/Components/App.razor +++ b/DeepDrftWeb/Components/App.razor @@ -1,4 +1,5 @@ @using DeepDrftWeb.Services +@using DeepDrftShared.Client.Components @@ -6,12 +7,11 @@ - - - + + diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css index fdc024a..e93e4a8 100644 --- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -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