private static void BorderColors(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Border Color Utilities");
frameworkCss.AppendLine("*/");
// Application colors
frameworkCss.AppendLine("");
frameworkCss.AppendLine($"/* Application Colors */");
foreach (PropertyInfo colorProperty in applicationColorProperties)
{
var colorName = colorProperty.Name.ToLower();
var colorValue = colorProperty.GetValue(settings.ApplicationColors).ToString();
frameworkCss.AppendLine($".border-{colorName} {{");
frameworkCss.AppendLine($" border-color: {colorValue.ToLower()};");
frameworkCss.AppendLine("}");
}
// Palette colors
foreach (var color in ColorPalette.ColorMaps)
{
frameworkCss.AppendLine("");
frameworkCss.AppendLine($"/* {color.Color} */");
foreach (var colorSaturation in color.ColorSaturations)
{
frameworkCss.AppendLine($".border-{color.Color.ToLower()}-{colorSaturation.Intensity} {{");
frameworkCss.AppendLine($" border-color: {colorSaturation.ColorValue.ToLower()};");
frameworkCss.AppendLine("}");
}
}
}
private static void TextSizes(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Text Size Utilities");
frameworkCss.AppendLine("*/");
foreach (var size in fontSizes)
{
frameworkCss.AppendLine($".text-{size.Key.ToLower()} {{");
frameworkCss.AppendLine($" font-size: {size.Value * settings.FontSizeDefault}{settings.FontUnits};");
frameworkCss.AppendLine("}");
}
}
/// <summary>
/// Builds the base framework.
/// </summary>
/// <returns></returns>
public static string BuildFramework(DownhillSettings settings)
{
// Get application color properties by reading the property names from the ApplicationColors class
PropertyInfo[] applicationColorProperties = typeof(ApplicationColors).GetProperties();
StringBuilder frameworkCss = new StringBuilder();
// Apply Reset First
frameworkCss.Append(resetStylesMobile);
// Alerts
AlertStyles(frameworkCss, settings, applicationColorProperties); /* somewhat mobile specific now */
// Text sizes
TextSizes(frameworkCss, settings, applicationColorProperties);
// Text colors
TextColors(frameworkCss, settings, applicationColorProperties);
// Background colors
BackgroundColors(frameworkCss, settings, applicationColorProperties);
// Build border color utilities
BorderColors(frameworkCss, settings, applicationColorProperties);
// Build Margin Utilties
Margins(frameworkCss, settings, applicationColorProperties);
// Build Padding Utilties
Paddings(frameworkCss, settings, applicationColorProperties);
// Build Border Width Utilities
BorderWidths(frameworkCss, settings, applicationColorProperties); /* somewhat mobile specific now */
// Add base styles that are not generated
if (settings.Platform == DownhillPlatform.Mobile)
{
frameworkCss.Append(baseStylesMobile);
}
else
{
frameworkCss.Append(baseStylesWeb);
}
return(CssUtilities.ParseCss(frameworkCss.ToString(), settings));
}
private static void TextSizes(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
// Mobile won't be using the text sizes. Instead it will use named sizes
if (settings.Platform == DownhillPlatform.Mobile)
{
return;
}
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Text Size Utilities");
frameworkCss.AppendLine("*/");
foreach (var size in settings.FontSizes)
{
frameworkCss.AppendLine($".text-{size.Key.ToLower()} {{");
frameworkCss.AppendLine($" font-size: {size.Value * settings.FontSizeDefault}{settings.FontUnits};");
frameworkCss.AppendLine("}");
}
}
private static void AlertStyles(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
frameworkCss.AppendLine("");
frameworkCss.AppendLine($"/* Alert Styles */");
// Base alert styles
frameworkCss.AppendLine($".alert {{");
frameworkCss.AppendLine($" margin: 0 0 12{settings.SpacingUnits} 0;");
frameworkCss.AppendLine("}");
// Color specific styles
foreach (PropertyInfo colorProperty in applicationColorProperties)
{
var colorName = colorProperty.Name.ToLower();
var colorValue = colorProperty.GetValue(settings.ApplicationColors).ToString();
CreateAlertByColor(colorProperty.Name.ToLower(), frameworkCss);
}
// Create one more for validation
CreateAlertByColor("validation", frameworkCss);
}
private static void BorderWidths(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
var borderWidths = settings.BorderWidths;
int borderWidthCount = borderWidths.Count;
frameworkCss.AppendLine("");
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Border Widths");
frameworkCss.AppendLine("*/");
for (int i = 0; i < borderWidthCount; i++)
{
if (borderWidths[i] == 1)
{
// When the unit is 1 then we drop the unit from the class name .border (not .border-1)
// This is the pattern of both Bootstrap and Tailwind
// Tailwind and Bootstrap deviate here from t vs top. Bootstrap uses the full 'top' but since
// Tailwind uses t AND Bootstrap used t for margins and padding, decided to use just t.
// Xamarin Forms 4.0 does not allow for separate widths on borders
// https://github.com/xamarin/Xamarin.Forms/blob/4.3.0/Xamarin.Forms.Core/Properties/AssemblyInfo.cs
// border (all)
frameworkCss.AppendLine($".border {{");
frameworkCss.AppendLine($" border-width: {borderWidths[i]}{settings.BorderUnits};");
frameworkCss.AppendLine("}");
}
else
{
// border- (all)
frameworkCss.AppendLine($".border-{i} {{");
frameworkCss.AppendLine($" border-width: {borderWidths[i]}{settings.BorderUnits};");
frameworkCss.AppendLine("}");
}
}
}
/// <summary>
/// Parses custom CSS to replace Downhill variables.
/// </summary>
/// <param name="baseStyles">The custom CSS.</param>
/// <returns></returns>
public static string ParseCss(string cssStyles, DownhillSettings settings)
{
// Variables are prefixed with ? (e.g. ?orange-100) to allow for using pre-processors such as Sass or Less
// Replace application colors
PropertyInfo[] applicationColorProperties = typeof(ApplicationColors).GetProperties();
foreach (PropertyInfo colorProperty in applicationColorProperties)
{
var value = colorProperty.GetValue(settings.ApplicationColors).ToString();
// Replace application color deviations (backgrounds/borders/notification text colors)
// These are based off of the bootstrap recipes
// Background
cssStyles = cssStyles.Replace($"?color-{colorProperty.Name.ToLower()}-background", MixThemeColor(value, -10));
// Border
cssStyles = cssStyles.Replace($"?color-{colorProperty.Name.ToLower()}-border", MixThemeColor(value, -9));
// Text
cssStyles = cssStyles.Replace($"?color-{colorProperty.Name.ToLower()}-text", MixThemeColor(value, 6));
var selector = $"?color-{colorProperty.Name.ToLower()}";
cssStyles = cssStyles.Replace(selector, value);
// If warning then also make a set for validation
if (colorProperty.Name == "Warning")
{
// Background
cssStyles = cssStyles.Replace($"?color-validation-background", MixThemeColor(value, -10));
// Border
cssStyles = cssStyles.Replace($"?color-validation-border", MixThemeColor(value, -9));
// Text
cssStyles = cssStyles.Replace($"?color-validation-text", MixThemeColor(value, 6));
}
}
// Replace palette colors
foreach (var color in ColorPalette.ColorMaps)
{
foreach (var colorSaturation in color.ColorSaturations)
{
var selector = $"?color-{color.Color.ToLower()}-{colorSaturation.Intensity}";
var value = colorSaturation.ColorValue;
cssStyles = cssStyles.Replace(selector, value);
}
}
// Run a few other replaces across the CSS
if (settings.Platform == DownhillPlatform.Mobile)
{
// Most Xamarin.Forms controls only support integer values for border-radius.
cssStyles = cssStyles.Replace("?radius-base", (( int )Math.Floor(settings.RadiusBase)).ToString());
}
else
{
cssStyles = cssStyles.Replace("?radius-base", settings.RadiusBase.ToString());
}
cssStyles = cssStyles.Replace("?font-size-default", settings.FontSizeDefault.ToString());
// Text and heading colors
cssStyles = cssStyles.Replace("?color-text", settings.TextColor);
cssStyles = cssStyles.Replace("?color-heading", settings.HeadingColor);
cssStyles = cssStyles.Replace("?color-background", settings.BackgroundColor);
// Note for future... Xamarin Forms doesn't like minified CSS (at least that that's created with the minified method below)
return(cssStyles);
}
private static void Paddings(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
var spacingValues = settings.SpacingValues;
frameworkCss.AppendLine("");
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Padding Utilities");
frameworkCss.AppendLine("*/");
// p- (all)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".p-{value.Key} {{");
frameworkCss.AppendLine($" padding: {value.Value};");
frameworkCss.AppendLine("}");
}
// pt- (top)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".pt-{value.Key} {{");
frameworkCss.AppendLine($" padding-top: {value.Value};");
frameworkCss.AppendLine("}");
}
// pb- (bottom)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".pb-{value.Key} {{");
frameworkCss.AppendLine($" padding-bottom: {value.Value};");
frameworkCss.AppendLine("}");
}
// pl- (left)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".pl-{value.Key} {{");
frameworkCss.AppendLine($" padding-left: {value.Value};");
frameworkCss.AppendLine("}");
}
// pr- (right)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".pr-{value.Key} {{");
frameworkCss.AppendLine($" padding-right: {value.Value};");
frameworkCss.AppendLine("}");
}
// px- (left and right)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".px-{value.Key} {{");
frameworkCss.AppendLine($" padding-left: {value.Value};");
frameworkCss.AppendLine($" padding-right: {value.Value};");
frameworkCss.AppendLine("}");
}
// py- (top and bottom)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".py-{value.Key} {{");
frameworkCss.AppendLine($" padding-top: {value.Value};");
frameworkCss.AppendLine($" padding-bottom: {value.Value};");
frameworkCss.AppendLine("}");
}
}
private static void Margins(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
var spacingValues = settings.SpacingValues;
frameworkCss.AppendLine("");
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Margin Utilities");
frameworkCss.AppendLine("*/");
// m- (all)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".m-{value.Key} {{");
frameworkCss.AppendLine($" margin: {value.Value};");
frameworkCss.AppendLine("}");
}
// mt- (top)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".mt-{value.Key} {{");
frameworkCss.AppendLine($" margin-top: {value.Value};");
frameworkCss.AppendLine("}");
}
// mb- (bottom)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".mb-{value.Key} {{");
frameworkCss.AppendLine($" margin-bottom: {value.Value};");
frameworkCss.AppendLine("}");
}
// ml- (left)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".ml-{value.Key} {{");
frameworkCss.AppendLine($" margin-left: {value.Value};");
frameworkCss.AppendLine("}");
}
// mr- (right)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".mr-{value.Key} {{");
frameworkCss.AppendLine($" margin-right: {value.Value};");
frameworkCss.AppendLine("}");
}
// mx- (left and right)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".mx-{value.Key} {{");
frameworkCss.AppendLine($" margin-right: {value.Value};");
frameworkCss.AppendLine($" margin-left: {value.Value};");
frameworkCss.AppendLine("}");
}
// my- (top and bottom)
foreach (var value in spacingValues)
{
frameworkCss.AppendLine($".my-{value.Key} {{");
frameworkCss.AppendLine($" margin-top: {value.Value};");
frameworkCss.AppendLine($" margin-bottom: {value.Value};");
frameworkCss.AppendLine("}");
}
}
private static void Paddings(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
int spacingValueCount = spacingValues.Length;
frameworkCss.AppendLine("");
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Padding Utilities");
frameworkCss.AppendLine("*/");
// p- (all)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".p-{i} {{");
frameworkCss.AppendLine($" padding: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// pt- (top)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".pt-{i} {{");
frameworkCss.AppendLine($" padding-top: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// pb- (bottom)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".pb-{i} {{");
frameworkCss.AppendLine($" padding-bottom: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// pl- (left)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".pl-{i} {{");
frameworkCss.AppendLine($" padding-left: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// pr- (right)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".pr-{i} {{");
frameworkCss.AppendLine($" padding-right: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// px- (left and right)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".px-{i} {{");
frameworkCss.AppendLine($" padding-left: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine($" padding-right: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// py- (top and bottom)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".py-{i} {{");
frameworkCss.AppendLine($" margin-top: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine($" margin-bottom: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
}
private static void Margins(StringBuilder frameworkCss, DownhillSettings settings, PropertyInfo[] applicationColorProperties)
{
int spacingValueCount = spacingValues.Length;
frameworkCss.AppendLine("");
frameworkCss.AppendLine("/*");
frameworkCss.AppendLine("// Margin Utilities");
frameworkCss.AppendLine("*/");
// m- (all)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".m-{i} {{");
frameworkCss.AppendLine($" margin: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// mt- (top)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".mt-{i} {{");
frameworkCss.AppendLine($" margin-top: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// mb- (bottom)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".mb-{i} {{");
frameworkCss.AppendLine($" margin-bottom: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// ml- (left)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".ml-{i} {{");
frameworkCss.AppendLine($" margin-left: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// mr- (right)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".mr-{i} {{");
frameworkCss.AppendLine($" margin-right: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// mx- (left and right)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".mx-{i} {{");
frameworkCss.AppendLine($" margin-left: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine($" margin-right: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
// my- (top and bottom)
for (int i = 0; i < spacingValueCount; i++)
{
frameworkCss.AppendLine($".my-{i} {{");
frameworkCss.AppendLine($" margin-top: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine($" margin-bottom: {spacingValues[i] * settings.SpacingBase}{settings.SpacingUnits};");
frameworkCss.AppendLine("}");
}
}