refactor(split): extract DeepDrftShared.Client RCL with shared atoms
TrackCard, TracksGallery, DDIcons, DeepDrftPalettes (Default+Cms), DeepDrftFontLinks, and palette CSS tokens extracted. Both hosts and DeepDrftCms reference the shared RCL.
This commit is contained in:
Daniel Harvey
@@ -22,6 +22,7 @@
|
|||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
||||||
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
|
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
|
||||||
|
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
@using DeepDrftShared.Client.Common
|
||||||
|
|
||||||
<MudThemeProvider IsDarkMode="false" Theme="@_theme" />
|
<MudThemeProvider IsDarkMode="false" Theme="@DeepDrftPalettes.Cms" />
|
||||||
<MudPopoverProvider />
|
<MudPopoverProvider />
|
||||||
<MudDialogProvider />
|
<MudDialogProvider />
|
||||||
<MudSnackbarProvider />
|
<MudSnackbarProvider />
|
||||||
@@ -31,40 +32,3 @@
|
|||||||
<span class="dismiss">🗙</span>
|
<span class="dismiss">🗙</span>
|
||||||
</div>
|
</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" } },
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -22,6 +22,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftCms", "DeepDrftCms\
|
|||||||
EndProject
|
EndProject
|
||||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftManager", "DeepDrftManager\DeepDrftManager.csproj", "{E50071B2-A59F-4FB7-A435-5D966C538DDD}"
|
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftManager", "DeepDrftManager\DeepDrftManager.csproj", "{E50071B2-A59F-4FB7-A435-5D966C538DDD}"
|
||||||
EndProject
|
EndProject
|
||||||
|
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DeepDrftShared.Client", "DeepDrftShared.Client\DeepDrftShared.Client.csproj", "{50439EFE-0F45-4CE0-AB1D-4DEA87622E73}"
|
||||||
|
EndProject
|
||||||
Global
|
Global
|
||||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||||
Debug|Any CPU = Debug|Any CPU
|
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|x64.Build.0 = Release|Any CPU
|
||||||
{E50071B2-A59F-4FB7-A435-5D966C538DDD}.Release|x86.ActiveCfg = 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
|
{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
|
EndGlobalSection
|
||||||
GlobalSection(SolutionProperties) = preSolution
|
GlobalSection(SolutionProperties) = preSolution
|
||||||
HideSolutionNode = FALSE
|
HideSolutionNode = FALSE
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@using DeepDrftShared.Client.Components
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
@@ -5,10 +6,9 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<DeepDrftFontLinks />
|
||||||
<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">
|
|
||||||
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
|
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
|
||||||
<ImportMap />
|
<ImportMap />
|
||||||
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
|
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
|
||||||
<HeadOutlet />
|
<HeadOutlet />
|
||||||
|
|||||||
@@ -20,6 +20,7 @@
|
|||||||
<ProjectReference Include="..\DeepDrftCms\DeepDrftCms.csproj" />
|
<ProjectReference Include="..\DeepDrftCms\DeepDrftCms.csproj" />
|
||||||
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
|
<ProjectReference Include="..\DeepDrftData\DeepDrftData.csproj" />
|
||||||
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
||||||
|
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -1,10 +1,7 @@
|
|||||||
namespace DeepDrftWeb.Client.Common;
|
namespace DeepDrftShared.Client.Common;
|
||||||
|
|
||||||
public static class DDIcons
|
public static class DDIcons
|
||||||
{
|
{
|
||||||
/// <summary>
|
|
||||||
/// Charleston gas lamp lantern - uses currentColor for theming
|
|
||||||
/// </summary>
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Charleston gas lamp lantern - uses currentColor for theming
|
/// Charleston gas lamp lantern - uses currentColor for theming
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@@ -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
|
||||||
@@ -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">
|
||||||
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
<MudCard Class="deepdrft-track-card-container"
|
<MudCard Class="deepdrft-track-card-container"
|
||||||
Elevation="4">
|
Elevation="4">
|
||||||
|
|
||||||
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
||||||
+2
-3
@@ -1,9 +1,8 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using DeepDrftModels.Entities;
|
using DeepDrftModels.Entities;
|
||||||
using DeepDrftWeb.Client.Clients;
|
|
||||||
using MudBlazor;
|
using MudBlazor;
|
||||||
|
|
||||||
namespace DeepDrftWeb.Client.Controls;
|
namespace DeepDrftShared.Client.Components;
|
||||||
|
|
||||||
public partial class TrackCard : ComponentBase
|
public partial class TrackCard : ComponentBase
|
||||||
{
|
{
|
||||||
+1
-1
@@ -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">
|
<MudGrid Spacing="6" Justify="Justify.Center">
|
||||||
@foreach (var track in Tracks)
|
@foreach (var track in Tracks)
|
||||||
{
|
{
|
||||||
+2
-3
@@ -1,8 +1,7 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using DeepDrftModels.Entities;
|
using DeepDrftModels.Entities;
|
||||||
using DeepDrftWeb.Client.Clients;
|
|
||||||
|
|
||||||
namespace DeepDrftWeb.Client.Controls;
|
namespace DeepDrftShared.Client.Components;
|
||||||
|
|
||||||
public partial class TracksGallery : ComponentBase
|
public partial class TracksGallery : ComponentBase
|
||||||
{
|
{
|
||||||
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
.tracks-gallery-container {
|
.tracks-gallery-container {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -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>
|
||||||
@@ -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
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@
|
|||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
||||||
|
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
|
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
|
||||||
@using DeepDrftWeb.Client.Services
|
@using DeepDrftWeb.Client.Services
|
||||||
@using DeepDrftWeb.Client.Common
|
@using DeepDrftWeb.Client.Common
|
||||||
|
@using DeepDrftShared.Client.Common
|
||||||
@using Microsoft.AspNetCore.Components
|
@using Microsoft.AspNetCore.Components
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
@implements IDisposable
|
@implements IDisposable
|
||||||
@@ -68,65 +69,12 @@
|
|||||||
// Register to persist state when prerendering completes
|
// Register to persist state when prerendering completes
|
||||||
_persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
|
_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
|
_themeManager = new ThemeManagerTheme
|
||||||
{
|
{
|
||||||
Theme =
|
Theme = DeepDrftPalettes.Default,
|
||||||
{
|
|
||||||
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"}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
@@ -146,69 +94,6 @@
|
|||||||
StateHasChanged();
|
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
|
// Theme wrapper class for CSS targeting
|
||||||
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
|
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
@page "/tracks"
|
@page "/tracks"
|
||||||
@rendermode InteractiveAuto
|
@rendermode InteractiveAuto
|
||||||
@using Microsoft.AspNetCore.Authorization
|
@using Microsoft.AspNetCore.Authorization
|
||||||
@using DeepDrftWeb.Client.Controls
|
|
||||||
@attribute [AllowAnonymous]
|
@attribute [AllowAnonymous]
|
||||||
|
|
||||||
<PageTitle>DeepDrft Track Gallery</PageTitle>
|
<PageTitle>DeepDrft Track Gallery</PageTitle>
|
||||||
|
|||||||
@@ -11,4 +11,6 @@
|
|||||||
@using MudBlazor.Services
|
@using MudBlazor.Services
|
||||||
@using MudBlazor.ThemeManager
|
@using MudBlazor.ThemeManager
|
||||||
@using DeepDrftWeb.Client.Common
|
@using DeepDrftWeb.Client.Common
|
||||||
|
@using DeepDrftShared.Client.Common
|
||||||
|
@using DeepDrftShared.Client.Components
|
||||||
@layout DeepDrftWeb.Client.Layout.MainLayout
|
@layout DeepDrftWeb.Client.Layout.MainLayout
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
@using DeepDrftWeb.Services
|
@using DeepDrftWeb.Services
|
||||||
|
@using DeepDrftShared.Client.Components
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
@@ -6,12 +7,11 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<DeepDrftFontLinks />
|
||||||
<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">
|
|
||||||
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
|
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
|
||||||
<link href=@Assets["_content/MudBlazor/MudBlazor.min.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["DeepDrftWeb.styles.css"]"/>
|
||||||
|
<link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
|
||||||
<link rel="stylesheet" href="styles/deepdrft-styles.css" />
|
<link rel="stylesheet" href="styles/deepdrft-styles.css" />
|
||||||
<ImportMap />
|
<ImportMap />
|
||||||
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
|
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
|
||||||
|
|||||||
@@ -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
|
/* Base page colours — use MudBlazor's theme-injected variables so they
|
||||||
switch automatically when IsDarkMode toggles. The --mud-palette-background
|
switch automatically when IsDarkMode toggles. The --mud-palette-background
|
||||||
and --mud-palette-text-primary variables are injected by MudThemeProvider
|
and --mud-palette-text-primary variables are injected by MudThemeProvider
|
||||||
|
|||||||
Reference in New Issue
Block a user