| | | 1 | | namespace Allyaria.Theming.ThemeTypes; |
| | | 2 | | |
| | | 3 | | /// <summary> |
| | | 4 | | /// Represents the internal core theme engine responsible for generating CSS strings based on Allyaria’s theming |
| | | 5 | | /// definitions, including component-level, document-level, and global visual styles. |
| | | 6 | | /// </summary> |
| | | 7 | | /// <remarks> |
| | | 8 | | /// <para> |
| | | 9 | | /// This class composes CSS dynamically by mapping <see cref="ComponentType" />, <see cref="ThemeType" />, and |
| | | 10 | | /// <see cref="ComponentState" /> values through the theming pipeline. The resulting CSS is applied via Blazor |
| | | 11 | | /// component rendering or injected globally through <see cref="IThemingService" />. |
| | | 12 | | /// </para> |
| | | 13 | | /// <para> |
| | | 14 | | /// The <see cref="Theme" /> class is internal and used by higher-level abstractions such as |
| | | 15 | | /// <see cref="ThemingService" /> and <see cref="ThemeBuilder" />. It supports accessibility features such as reduce |
| | | 16 | | /// motion and visible focus indicators, and automatically includes high-contrast adjustments where applicable. |
| | | 17 | | /// </para> |
| | | 18 | | /// </remarks> |
| | | 19 | | internal sealed class Theme |
| | | 20 | | { |
| | | 21 | | /// <summary> |
| | | 22 | | /// Internal reference to the <see cref="ThemeComponent" /> used to construct the CSS output for all theming targets |
| | | 23 | | /// </summary> |
| | 49 | 24 | | private ThemeComponent _component = new(); |
| | | 25 | | |
| | | 26 | | /// <summary>Generates a reusable CSS rule that enforces consistent box sizing across all elements.</summary> |
| | | 27 | | /// <returns>A CSS string that ensures all elements, including pseudo-elements, inherit box sizing.</returns> |
| | 4 | 28 | | private static string GetBoxSizingCss() => "*,*::before,*::after{box-sizing:inherit;}"; |
| | | 29 | | |
| | | 30 | | /// <summary>Builds the CSS string for a specific themed component based on its type, state, and prefix.</summary> |
| | | 31 | | /// <param name="prefix">The CSS selector or class prefix for the component.</param> |
| | | 32 | | /// <param name="componentType">The <see cref="ComponentType" /> representing the element type.</param> |
| | | 33 | | /// <param name="themeType">The <see cref="ThemeType" /> defining the active theme variant.</param> |
| | | 34 | | /// <param name="componentState">The <see cref="ComponentState" /> defining the current visual state.</param> |
| | | 35 | | /// <returns>A formatted CSS string scoped to the provided prefix and theme parameters.</returns> |
| | | 36 | | public string GetComponentCss(string prefix, |
| | | 37 | | ComponentType componentType, |
| | | 38 | | ThemeType themeType, |
| | | 39 | | ComponentState componentState) |
| | | 40 | | { |
| | 68 | 41 | | var css = ToCss(componentType: componentType, themeType: themeType, componentState: componentState); |
| | | 42 | | |
| | 68 | 43 | | return string.IsNullOrWhiteSpace(value: prefix) |
| | 68 | 44 | | ? css |
| | 68 | 45 | | : $"{prefix.Trim()}{{{css}}}"; |
| | | 46 | | } |
| | | 47 | | |
| | | 48 | | /// <summary> |
| | | 49 | | /// Builds a complete CSS string representing document-wide theming styles, including global variables, base resets, |
| | | 50 | | /// typography, focus outlines, and accessibility rules. |
| | | 51 | | /// </summary> |
| | | 52 | | /// <param name="themeType">The <see cref="ThemeType" /> for which to generate document styles.</param> |
| | | 53 | | /// <returns>A full CSS string suitable for document-level injection.</returns> |
| | | 54 | | public string GetDocumentCss(ThemeType themeType) |
| | | 55 | | { |
| | 4 | 56 | | var builder = new StringBuilder(); |
| | | 57 | | |
| | 4 | 58 | | builder.Append(value: GetRootCss()); |
| | 4 | 59 | | builder.Append(value: GetGlobalCss(themeType: themeType)); |
| | 4 | 60 | | builder.Append(value: GetBoxSizingCss()); |
| | 4 | 61 | | builder.Append(value: GetFocusCss(themeType: themeType)); |
| | 4 | 62 | | builder.Append(value: GetReducedMotionCss()); |
| | 4 | 63 | | builder.Append(value: GetTextCss(themeType: themeType)); |
| | 4 | 64 | | builder.Append(value: GetLinkCss(themeType: themeType)); |
| | | 65 | | |
| | 4 | 66 | | return builder.ToString(); |
| | | 67 | | } |
| | | 68 | | |
| | | 69 | | /// <summary>Generates the CSS rules for focus-visible outlines and focusable elements.</summary> |
| | | 70 | | /// <param name="themeType">The current <see cref="ThemeType" /> being rendered.</param> |
| | | 71 | | /// <returns>A CSS string defining focus outlines for global and interactive elements.</returns> |
| | | 72 | | private string GetFocusCss(ThemeType themeType) |
| | | 73 | | { |
| | 4 | 74 | | var globalFocus = GetComponentCss( |
| | 4 | 75 | | prefix: ":focus-visible", |
| | 4 | 76 | | componentType: ComponentType.GlobalFocus, |
| | 4 | 77 | | themeType: themeType, |
| | 4 | 78 | | componentState: ComponentState.Focused |
| | 4 | 79 | | ); |
| | | 80 | | |
| | 4 | 81 | | var whereFocus = GetComponentCss( |
| | 4 | 82 | | prefix: ":where(a,button,input,textarea,select,[tabindex]):focus-visible", |
| | 4 | 83 | | componentType: ComponentType.GlobalFocus, |
| | 4 | 84 | | themeType: themeType, |
| | 4 | 85 | | componentState: ComponentState.Focused |
| | 4 | 86 | | ); |
| | | 87 | | |
| | 4 | 88 | | return $"{globalFocus}{whereFocus}"; |
| | | 89 | | } |
| | | 90 | | |
| | | 91 | | /// <summary>Generates global CSS for base elements like <c>html</c> and <c>body</c>.</summary> |
| | | 92 | | /// <param name="themeType">The current <see cref="ThemeType" /> being rendered.</param> |
| | | 93 | | /// <returns>A CSS string for global page-level elements.</returns> |
| | | 94 | | private string GetGlobalCss(ThemeType themeType) |
| | | 95 | | { |
| | 4 | 96 | | var html = GetComponentCss( |
| | 4 | 97 | | prefix: "html", |
| | 4 | 98 | | componentType: ComponentType.GlobalHtml, |
| | 4 | 99 | | themeType: themeType, |
| | 4 | 100 | | componentState: ComponentState.Default |
| | 4 | 101 | | ); |
| | | 102 | | |
| | 4 | 103 | | var body = GetComponentCss( |
| | 4 | 104 | | prefix: "body", |
| | 4 | 105 | | componentType: ComponentType.GlobalBody, |
| | 4 | 106 | | themeType: themeType, |
| | 4 | 107 | | componentState: ComponentState.Default |
| | 4 | 108 | | ); |
| | | 109 | | |
| | 4 | 110 | | return $"{html}{body}"; |
| | | 111 | | } |
| | | 112 | | |
| | | 113 | | /// <summary>Generates link-specific CSS rules, including states for default, focused, pressed, and visited.</summar |
| | | 114 | | /// <param name="themeType">The active <see cref="ThemeType" />.</param> |
| | | 115 | | /// <returns>A CSS string containing anchor element theming rules.</returns> |
| | | 116 | | private string GetLinkCss(ThemeType themeType) |
| | | 117 | | { |
| | 4 | 118 | | var builder = new StringBuilder(); |
| | | 119 | | |
| | 4 | 120 | | builder.Append( |
| | 4 | 121 | | value: GetComponentCss( |
| | 4 | 122 | | prefix: "a", |
| | 4 | 123 | | componentType: ComponentType.Link, |
| | 4 | 124 | | themeType: themeType, |
| | 4 | 125 | | componentState: ComponentState.Default |
| | 4 | 126 | | ) |
| | 4 | 127 | | ); |
| | | 128 | | |
| | 4 | 129 | | builder.Append( |
| | 4 | 130 | | value: GetComponentCss( |
| | 4 | 131 | | prefix: "a:focus-visible", |
| | 4 | 132 | | componentType: ComponentType.Link, |
| | 4 | 133 | | themeType: themeType, |
| | 4 | 134 | | componentState: ComponentState.Focused |
| | 4 | 135 | | ) |
| | 4 | 136 | | ); |
| | | 137 | | |
| | 4 | 138 | | builder.Append( |
| | 4 | 139 | | value: GetComponentCss( |
| | 4 | 140 | | prefix: "a:active", |
| | 4 | 141 | | componentType: ComponentType.Link, |
| | 4 | 142 | | themeType: themeType, |
| | 4 | 143 | | componentState: ComponentState.Pressed |
| | 4 | 144 | | ) |
| | 4 | 145 | | ); |
| | | 146 | | |
| | 4 | 147 | | builder.Append( |
| | 4 | 148 | | value: GetComponentCss( |
| | 4 | 149 | | prefix: "a:visited", |
| | 4 | 150 | | componentType: ComponentType.Link, |
| | 4 | 151 | | themeType: themeType, |
| | 4 | 152 | | componentState: ComponentState.Visited |
| | 4 | 153 | | ) |
| | 4 | 154 | | ); |
| | | 155 | | |
| | 4 | 156 | | return builder.ToString(); |
| | | 157 | | } |
| | | 158 | | |
| | | 159 | | /// <summary>Generates a CSS block that disables animations and transitions when users prefer reduced motion.</summa |
| | | 160 | | /// <returns>A CSS string applying <c>prefers-reduced-motion</c> adjustments for accessibility.</returns> |
| | | 161 | | private static string GetReducedMotionCss() |
| | 4 | 162 | | => "@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}html,body{scro |
| | | 163 | | |
| | | 164 | | /// <summary>Generates the <c>:root</c> CSS variables section containing theme-wide color and style tokens.</summary |
| | | 165 | | /// <returns>A CSS string containing variable declarations for the current theme.</returns> |
| | 4 | 166 | | private string GetRootCss() => $":root{{{ToCssVars()}}}"; |
| | | 167 | | |
| | | 168 | | /// <summary>Generates text and heading CSS rules based on the current theme type.</summary> |
| | | 169 | | /// <param name="themeType">The <see cref="ThemeType" /> being rendered.</param> |
| | | 170 | | /// <returns>A concatenated CSS string for paragraph and heading elements.</returns> |
| | | 171 | | private string GetTextCss(ThemeType themeType) |
| | | 172 | | { |
| | 4 | 173 | | var builder = new StringBuilder(); |
| | | 174 | | |
| | 4 | 175 | | builder.Append( |
| | 4 | 176 | | value: GetComponentCss( |
| | 4 | 177 | | prefix: "p", |
| | 4 | 178 | | componentType: ComponentType.Text, |
| | 4 | 179 | | themeType: themeType, |
| | 4 | 180 | | componentState: ComponentState.Default |
| | 4 | 181 | | ) |
| | 4 | 182 | | ); |
| | | 183 | | |
| | 4 | 184 | | builder.Append( |
| | 4 | 185 | | value: GetComponentCss( |
| | 4 | 186 | | prefix: "h1", |
| | 4 | 187 | | componentType: ComponentType.Heading1, |
| | 4 | 188 | | themeType: themeType, |
| | 4 | 189 | | componentState: ComponentState.Default |
| | 4 | 190 | | ) |
| | 4 | 191 | | ); |
| | | 192 | | |
| | 4 | 193 | | builder.Append( |
| | 4 | 194 | | value: GetComponentCss( |
| | 4 | 195 | | prefix: "h2", |
| | 4 | 196 | | componentType: ComponentType.Heading2, |
| | 4 | 197 | | themeType: themeType, |
| | 4 | 198 | | componentState: ComponentState.Default |
| | 4 | 199 | | ) |
| | 4 | 200 | | ); |
| | | 201 | | |
| | 4 | 202 | | builder.Append( |
| | 4 | 203 | | value: GetComponentCss( |
| | 4 | 204 | | prefix: "h3", |
| | 4 | 205 | | componentType: ComponentType.Heading3, |
| | 4 | 206 | | themeType: themeType, |
| | 4 | 207 | | componentState: ComponentState.Default |
| | 4 | 208 | | ) |
| | 4 | 209 | | ); |
| | | 210 | | |
| | 4 | 211 | | builder.Append( |
| | 4 | 212 | | value: GetComponentCss( |
| | 4 | 213 | | prefix: "h4", |
| | 4 | 214 | | componentType: ComponentType.Heading4, |
| | 4 | 215 | | themeType: themeType, |
| | 4 | 216 | | componentState: ComponentState.Default |
| | 4 | 217 | | ) |
| | 4 | 218 | | ); |
| | | 219 | | |
| | 4 | 220 | | builder.Append( |
| | 4 | 221 | | value: GetComponentCss( |
| | 4 | 222 | | prefix: "h5", |
| | 4 | 223 | | componentType: ComponentType.Heading5, |
| | 4 | 224 | | themeType: themeType, |
| | 4 | 225 | | componentState: ComponentState.Default |
| | 4 | 226 | | ) |
| | 4 | 227 | | ); |
| | | 228 | | |
| | 4 | 229 | | builder.Append( |
| | 4 | 230 | | value: GetComponentCss( |
| | 4 | 231 | | prefix: "h6", |
| | 4 | 232 | | componentType: ComponentType.Heading6, |
| | 4 | 233 | | themeType: themeType, |
| | 4 | 234 | | componentState: ComponentState.Default |
| | 4 | 235 | | ) |
| | 4 | 236 | | ); |
| | | 237 | | |
| | 4 | 238 | | return builder.ToString(); |
| | | 239 | | } |
| | | 240 | | |
| | | 241 | | /// <summary>Updates this theme by applying the provided <see cref="ThemeUpdater" />.</summary> |
| | | 242 | | /// <param name="updater">The <see cref="ThemeUpdater" /> describing the update to apply.</param> |
| | | 243 | | /// <returns>The modified <see cref="Theme" /> instance (for chaining).</returns> |
| | | 244 | | public Theme Set(ThemeUpdater updater) |
| | | 245 | | { |
| | 5626 | 246 | | _component = _component.Set(updater: updater); |
| | | 247 | | |
| | 5626 | 248 | | return this; |
| | | 249 | | } |
| | | 250 | | |
| | | 251 | | /// <summary>Builds the CSS rules for a specific combination of component, theme, and state.</summary> |
| | | 252 | | /// <param name="componentType">The <see cref="ComponentType" /> to generate CSS for.</param> |
| | | 253 | | /// <param name="themeType">The <see cref="ThemeType" /> to apply.</param> |
| | | 254 | | /// <param name="componentState">The <see cref="ComponentState" /> representing the current UI state.</param> |
| | | 255 | | /// <returns>A CSS string containing the computed declarations.</returns> |
| | | 256 | | private string ToCss(ComponentType componentType, ThemeType themeType, ComponentState componentState) |
| | 68 | 257 | | => _component.BuildCss( |
| | 68 | 258 | | builder: new CssBuilder(), |
| | 68 | 259 | | navigator: ThemeNavigator.Initialize |
| | 68 | 260 | | .SetComponentTypes(componentType) |
| | 68 | 261 | | .SetThemeTypes(themeType) |
| | 68 | 262 | | .SetComponentStates(componentState) |
| | 68 | 263 | | ) |
| | 68 | 264 | | .ToString(); |
| | | 265 | | |
| | | 266 | | /// <summary>Builds CSS variable declarations for all theme properties.</summary> |
| | | 267 | | /// <returns>A CSS string containing root-level variable definitions.</returns> |
| | | 268 | | private string ToCssVars() |
| | 4 | 269 | | => _component |
| | 4 | 270 | | .BuildCss( |
| | 4 | 271 | | builder: new CssBuilder(), navigator: ThemeNavigator.Initialize, varPrefix: StyleDefaults.VarPrefix |
| | 4 | 272 | | ) |
| | 4 | 273 | | .ToString(); |
| | | 274 | | } |