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("}"); } }