public void Run(Styles styles, ITypographyOptions options, VerticalRhythm vr)
{
string rhythm1 = vr.Rhythm(1);
string blockMarginBottom;
if (float.TryParse(options.BlockMarginBottom, out float result))
{
blockMarginBottom = vr.Rhythm(result);
}
else if (!string.IsNullOrWhiteSpace(options.BlockMarginBottom))
{
blockMarginBottom = options.BlockMarginBottom;
}
else
{
blockMarginBottom = rhythm1;
}
styles.Add("tt,code", $@"
background-color: {vr.Gray(96)};
border-radius: 3px;
font-family: ""SFMono - Regular"", Consolas, ""Roboto Mono"" ,""Droid Sans Mono"", ""Liberation Mono"", Menlo, Courier, monospace;
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
");
styles.Add("pre", $@"
background: {vr.Gray(96)};
border-radius: 3px;
line-height: 1.42;
overflow: auto;
word-wrap: normal;
padding: {blockMarginBottom};
");
styles.Add("pre code", @"
background: none;
line-height: 1.42;
");
styles.Add("code:before,code:after,tt:before,tt:after", @"
letter-spacing: -0.2em;
content: "" "";
");
styles.Add("pre code:before,pre code:after,pre tt:before,pre tt:after", @"
content: none;
");
}
protected void OnChangeSelected(UIChangeEventArgs e)
{
Selected = (string)e.Value;
ITypographyOptions theme = Typography.ThemeForName(Selected);
Fontsize = Typography.Unitless(theme.BaseFontSize) + ".00";
Lineheight = theme.BaseLineHeight;
Ratio = theme.ScaleRatio.ToString();
Spacing = theme.BlockMarginBottom;
HeaderFont = theme.HeaderFontFamily[0];
BodyFont = theme.BodyFontFamily[0];
HeaderWeights = GetWeightForDropdown(HeaderFont);
HeaderWeight = theme.HeaderWeight;
BodyWeights = GetWeightForDropdown(BodyFont);
BodyWeight = theme.BodyWeight;
BoldWeights = GetWeightForDropdown(BodyFont);
BoldWeight = theme.BoldWeight;
}
public ITypographyOptions ThemeForName(string name)
{
ITypographyOptions theme = null;
List <TypeInfo> themes = (from type in Assembly.GetAssembly(_themeType).DefinedTypes
where type.ImplementedInterfaces.Contains(_themeType) &&
!type.IsAbstract &&
type.Name != "VerticalRhythmOptions"
select type).ToList();
foreach (TypeInfo type in themes)
{
if (GetTitle(type).ToLower() == name.ToLower())
{
theme = (ITypographyOptions)Activator.CreateInstance(type, null);
break;
}
}
return(theme);
}
protected override void OnInitialized()
{
ITypographyOptions themeClass = Theme != null?TypographyService.ThemeForName(Theme) : new DefaultTypographyOptions();
if (themeClass == null)
{
themeClass = new DefaultTypographyOptions();
}
if (BaseFontSize != "16px")
{
themeClass.BaseFontSize = BaseFontSize;
}
if (BaseLineHeight != "1.45")
{
themeClass.BaseLineHeight = BaseLineHeight;
}
if (ScaleRatio.HasValue)
{
themeClass.ScaleRatio = ScaleRatio;
}
if (HeaderColor != "inherit")
{
themeClass.HeaderColor = HeaderColor;
}
if (BodyColor != "hsla(0,0%,0%,0.8)")
{
themeClass.BodyColor = BodyColor;
}
if (HeaderWeight != "bold")
{
themeClass.HeaderWeight = HeaderWeight;
}
if (BodyWeight != "normal")
{
themeClass.BodyWeight = BodyWeight;
}
if (BoldWeight != "bold")
{
themeClass.BoldWeight = BoldWeight;
}
if (BlockMarginBottom != "1")
{
themeClass.BlockMarginBottom = BlockMarginBottom;
}
if (IncludeNormalize.HasValue)
{
themeClass.IncludeNormalize = IncludeNormalize;
}
if (HeaderFontFamily != "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif")
{
List <string> headerFontFamily = HeaderFontFamily.Split(',').ToList();
themeClass.HeaderFontFamily = headerFontFamily;
}
if (BodyFontFamily != "georgia,serif")
{
List <string> bodyFontFamily = BodyFontFamily.Split(',').ToList();
themeClass.BodyFontFamily = bodyFontFamily;
}
if (Plugins != null)
{
//For now, plugins are in the Plugins namespace, but in the future they could be external
themeClass.Plugins = new List <IPlugin>();
string[] plugins = Plugins.Split(',');
foreach (string pluginname in plugins)
{
IPlugin plugin = PluginForName(pluginname);
if (plugin != null)
{
themeClass.Plugins.Add(plugin);
}
}
}
//Load all styles of the listed fonts
if (!string.IsNullOrWhiteSpace(GoogleFonts))
{
if (themeClass.GoogleFonts == null)
{
themeClass.GoogleFonts = new List <GoogleFont>();
}
string[] fonts = GoogleFonts.Split(',');
foreach (string fontname in fonts)
{
Font font = GetFont(fontname.Trim());
if (font == null)
{
continue;
}
List <string> styles = font.Weights.Select(w =>
{
w = w.Replace("regular", "400");
if (w == "italic")
{
w = "400i";
}
w = w.Replace("italic", "i");
return(w);
}).ToList();
GoogleFont gf = new GoogleFont
{
Name = font.Family,
Styles = styles
};
themeClass.GoogleFonts.Add(gf);
}
}
TypographyService.ApplyTypography(themeClass);
}
public async Task ApplyTypography(ITypographyOptions options)
{
Styles styles = new Styles();
VerticalRhythm vr = new VerticalRhythm(new VerticalRhythmOptions(options));
VerticalRhythm = vr;
BaseLine baseLine = vr.EstablishBaseline();
string rhythm1 = vr.Rhythm(1);
//Not sure if html section is correct see:
//https://github.com/KyleAMathews/typography.js/blob/master/packages/typography/src/utils/createStyles.js#L55-L61
string bodyFontFamily = string.Join(",", options.BodyFontFamily.Select(f => WrapFontFamily(f)));
string headerFontFamily = string.Join(",", options.HeaderFontFamily.Select(f => WrapFontFamily(f)));
styles.Add("html", $@"
font-size: {baseLine.FontSize};
font-family: {bodyFontFamily};
line-height: {baseLine.LineHeight}em;
box-sizing: border-box;
overflow-y: scroll;
");
// box-sizing reset.
styles.Add(new List <string>
{
"*",
"*:before",
"*:after"
}, @"
box-sizing: inherit;
");
// Base body styles.
styles.Add("body", $@"
color: {options.BodyColor};
font-family: {bodyFontFamily};
font-weight: {options.BodyWeight};
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
-ms-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
-webkit-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
");
// Make images responsive.
styles.Add("img", "max-width: 100%;");
// All block elements get one rhythm of bottom margin by default
// or whatever is passed in as option.
string blockMarginBottom = "";
if (float.TryParse(options.BlockMarginBottom, out float result))
{
blockMarginBottom = vr.Rhythm(result);
}
else if (!string.IsNullOrWhiteSpace(options.BlockMarginBottom))
{
blockMarginBottom = options.BlockMarginBottom;
}
else
{
blockMarginBottom = rhythm1;
}
// Reset margin/padding to 0.
styles.Add(new List <string>
{
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hgroup",
"ul",
"ol",
"dl",
"dd",
"p",
"figure",
"pre",
"table",
"fieldset",
"blockquote",
"form",
"noscript",
"iframe",
"img",
"hr",
"address"
}, $@"
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: {blockMarginBottom};
");
// Basic blockquote styles
styles.Add("blockquote", $@"
margin-right: {rhythm1};
margin-bottom: {blockMarginBottom};
margin-left: {rhythm1};
");
// b, strong.
styles.Add(new List <string> {
"b",
"strong",
"dt",
"th"
}, $@"
font-weight: {options.BoldWeight};
");
// hr.
styles.Add("hr", $@"
background: {vr.Gray(80)};
border: none;
height: 1px;
margin-bottom: calc({blockMarginBottom} - 1px);
");
// ol, ul.
styles.Add(new List <string>
{
"ol",
"ul"
}, $@"
list-style-position: outside;
list-style-image: none;
margin-left: {rhythm1};
");
// li.
styles.Add("li", $@"
margin-bottom: calc({blockMarginBottom} / 2);
");
// Remove default padding on list items.
styles.Add(new List <string>
{
"ol li",
"ul li"
}, @"
padding-left: 0;
");
// children ol, ul.
styles.Add(new List <string>
{
"li > ol",
"li > ul"
}, $@"
margin-left: {rhythm1};
margin-bottom: calc({blockMarginBottom} / 2);
margin-top: calc({blockMarginBottom} / 2);
");
// Remove margin-bottom on the last-child of a few block elements
// The worst offender of this seems to be markdown => html compilers
// as they put paragraphs within LIs amoung other oddities.
styles.Add(new List <string> {
"blockquote *:last-child",
"li *:last-child",
"p *:last-child"
}, @"
margin-bottom: 0;
");
// Ensure li > p is 1/2 margin — this is another markdown => compiler oddity.
styles.Add("li > p", $@"
margin-bottom: calc({blockMarginBottom} / 2);
");
// Make generally smaller elements, smaller.
BaseLine smaller = vr.AdjustFontSizeTo("85%");
styles.Add(new List <string> {
"code",
"kbd",
"pre",
"samp"
}, $@"
{smaller}
");
// Abbr, Acronym.
styles.Add(new List <string> {
"abbr",
"acronym"
}, $@"
border-bottom: 1px dotted {vr.Gray(50)};
cursor: help;
");
styles.Add("abbr[title]", $@"
border-bottom: 1px dotted {vr.Gray(50)};
cursor: help;
text-decoration: none;
");
// Table styles.
BaseLine tableBaseLine = vr.AdjustFontSizeTo(options.BaseFontSize, null, null);
styles.Add("table", $@"
{tableBaseLine}
border-collapse: collapse;
width: 100%;
");
styles.Add("thead", @"
text-align: left;
");
string rhythmTwoThirds = vr.Rhythm(2 / 3f);
string rhythmHalf = vr.Rhythm(1 / 2f);
styles.Add(new List <string>
{
"td",
"th"
}, $@"
text-align: left;
border-bottom: 1px solid {vr.Gray(88)};
font-feature-settings: ""tnum"";
-moz-font-feature-settings: ""tnum"";
-ms-font-feature-settings: ""tnum"";
-webkit-font-feature-settings: ""tnum"";
padding-left: {rhythmTwoThirds};
padding-right:{rhythmTwoThirds};
padding-top: {rhythmHalf};
padding-bottom: calc({rhythmHalf} - 1px);
");
styles.Add("th:first-child,td:first-child", @"
padding-left: 0;
");
styles.Add("th:last-child,td:last-child", @"
padding-right: 0;
");
// Create styles for headers.
styles.Add(new List <string>
{
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
}, $@"
color: {options.HeaderColor};
font-family: {headerFontFamily};
font-weight: {options.HeaderWeight};
text-rendering: optimizeLegibility;
");
// Set header sizes.
BaseLine h1 = vr.Scale(5 / 5f);
BaseLine h2 = vr.Scale(3 / 5f);
BaseLine h3 = vr.Scale(2 / 5f);
BaseLine h4 = vr.Scale(0 / 5f);
BaseLine h5 = vr.Scale(-1 / 5f);
BaseLine h6 = vr.Scale(-1.5f / 5f);
styles.Add("h1", $@"
{h1}
");
styles.Add("h2", $@"
{h2}
");
styles.Add("h3", $@"
{h3}
");
styles.Add("h4", $@"
{h4}
");
styles.Add("h5", $@"
{h5}
");
styles.Add("h6", $@"
{h6}
");
// TODO add support for Breakpoints here. (Missing in Typography.js)
// Call plugins if any.
if (options.Plugins != null)
{
foreach (IPlugin plugin in options.Plugins)
{
plugin.Run(styles, options, vr);
}
}
// Call OverrideStyles function on options (if set).
options.OverrideStyles?.Invoke(styles, vr, options);
// Call overrideThemeStyles function on options (if set).
options.OverrideThemeStyles?.Invoke(styles, vr, options);
//Write styles
//First clear old styles
await _styled.ClearStylesAsync();
// Set Google fonts
if (options.GoogleFonts != null)
{
List <BlazorStyled.GoogleFont> list = options.GoogleFonts.Select(font => new BlazorStyled.GoogleFont {
Name = font.Name, Styles = font.Styles
}).ToList();
await _styled.AddGoogleFontsAsync(list);
}
if (options.IncludeNormalize.HasValue && options.IncludeNormalize.Value)
{
await _styled.CssAsync(_mixins.Normalize() + styles.ToString());
}
else
{
await _styled.CssAsync(styles.ToString());
}
}
public VerticalRhythmOptions()
{
_typographyOptions = new DefaultTypographyOptions();
}
public VerticalRhythmOptions(ITypographyOptions typographyOptions)
{
_typographyOptions = typographyOptions;
}
protected void OnClick()
{
ITypographyOptions theme = Typography.ThemeForName(Selected);
theme.BaseFontSize = Fontsize + "px";
theme.BaseLineHeight = Lineheight;
theme.ScaleRatio = double.Parse(Ratio);
theme.BlockMarginBottom = Spacing;
if (UseCodePlugin)
{
theme.Plugins = new List <IPlugin> {
new CodePlugn()
};
}
if (theme.HeaderFontFamily[0] != HeaderFont)
{
Font headerFont = GetFont(HeaderFont);
if (headerFont != null)
{
theme.HeaderFontFamily = new List <string> {
HeaderFont, headerFont.Category
};
theme.HeaderWeight = HeaderWeight != "regular" ? HeaderWeight : "400";
if (theme.GoogleFonts == null)
{
theme.GoogleFonts = new List <GoogleFont>();
}
theme.GoogleFonts.Add(new GoogleFont {
Name = HeaderFont, Styles = new List <string> {
theme.HeaderWeight
}
});
//TODO: Remove old font here
}
}
if (theme.BodyFontFamily[0] != BodyFont)
{
Font bodyFont = GetFont(BodyFont);
if (bodyFont != null)
{
theme.BodyFontFamily = new List <string> {
BodyFont, bodyFont.Category
};
theme.BodyWeight = BodyWeight != "regular" ? BodyWeight : "400";
theme.BoldWeight = BoldWeight != "regular" ? BoldWeight : "400";
if (theme.GoogleFonts == null)
{
theme.GoogleFonts = new List <GoogleFont>();
}
theme.GoogleFonts.Add(new GoogleFont {
Name = BodyFont, Styles = new List <string> {
"400", "400i", theme.BoldWeight, theme.BoldWeight + "i"
}
});
//TODO: Remove old font here
}
}
Typography.ApplyTypography(theme);
}
