#74

src/BlazorStyled/IGlobalStyles.cs

@@ -0,0 +1,7 @@
+namespace BlazorStyled
+{
+    public interface IGlobalStyles
+    {
+        string this[string globalClassName] { get; set; }
+    }
+}

src/BlazorStyled/IStyled.cs

@@ -14,5 +14,6 @@ public interface IStyled
         IStyled WithId(string id);
         void SetThemeValue(string name, string value);
         IEnumerable<KeyValuePair<string, string>> GetThemeValues();
+        IGlobalStyles GlobalStyles { get; }
     }
 }

src/BlazorStyled/Internal/GlobalStyles.cs

@@ -0,0 +1,29 @@
+using BlazorStyled.Stylesheets;
+
+namespace BlazorStyled
+{
+    public class GlobalStyles : IGlobalStyles
+    {
+        private string _id;
+        private IStyleSheet _styleSheet;
+
+        internal GlobalStyles(string id, IStyleSheet styleSheet)
+        {
+            _id = id;
+            _styleSheet = styleSheet;
+        }
+
+        public string this[string globalClassName]
+        {
+            get
+            {
+                return _styleSheet.GlobalStyle(_id, globalClassName);
+            }
+
+            set
+            {
+                _styleSheet.AddOrUpdateGlobalStyle(_id, globalClassName, value);
+            }
+        }
+    }
+}

src/BlazorStyled/Internal/InternalGlobalStyles.cs

@@ -0,0 +1,38 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace BlazorStyled.Internal
+{
+    internal class InternalGlobalStyles : IGlobalStyles
+    {
+        private IDictionary<string, string> _globalStyles = new Dictionary<string, string>();
+
+        public string this[string globalClassName]
+        {
+            get
+            {
+                if(_globalStyles.ContainsKey(globalClassName))
+                {
+                    return _globalStyles[globalClassName];
+                }
+                else
+                {
+                    return String.Empty;
+                }
+            }
+
+            set
+            {
+                if(_globalStyles.ContainsKey(globalClassName))
+                {
+                    _globalStyles[globalClassName] = value;
+                }
+                else
+                {
+                    _globalStyles.Add(globalClassName, value);
+                }
+            }
+        }
+    }
+}

src/BlazorStyled/Internal/StyledImpl.cs

@@ -11,17 +11,20 @@ internal class StyledImpl : IStyled
         private const string DEFAULT = "Default";
         private readonly IStyleSheet _styleSheet;
         private readonly string _id;
+        private readonly IGlobalStyles _globalStyles;
 
-        public StyledImpl(IStyleSheet styleSheet)
+        public IGlobalStyles GlobalStyles => _globalStyles;
+
+        public StyledImpl(IStyleSheet styleSheet) : this(styleSheet, DEFAULT)
         {
-            _styleSheet = styleSheet;
-            _id = DEFAULT;
+
         }
 
         private StyledImpl(IStyleSheet styleSheet, string id)
         {
             _styleSheet = styleSheet;
             _id = id;
+            _globalStyles = new GlobalStyles(_id, _styleSheet);
         }
 
         public string Css(string className, string css)

src/BlazorStyled/Styled.cs

@@ -27,6 +27,7 @@ public class Styled : ComponentBase, IDisposable
         [Parameter] public bool IsKeyframes { get; set; }
         [Parameter] public PseudoClasses PseudoClass { get; set; } = PseudoClasses.None;
         [Parameter] public EventCallback<string> ClassnameChanged { get; set; }
+        [Parameter] public string GlobalStyle { get; set; }
         [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> ComposeAttributes { get; set; }
 
         [Inject] private IStyled StyledService { get; set; }
@@ -118,6 +119,10 @@ private async Task ProcessParameters()
                     await NotifyChanged(classname);
                 }
             }
+            if(GlobalStyle != null & classname != null)
+            {
+                StyledService.GlobalStyles[GlobalStyle] = classname;
+            }
         }
 
         private IList<string> GetComposeClasses()

src/BlazorStyled/Stylesheets/IStyleSheet.cs

@@ -16,14 +16,16 @@ internal interface IStyleSheet
         IList<IRule> GetRules(string id, string selector);
         IEnumerable<IRule> GetRulesWithoutImport();
         IDisposable Subscribe(IObserver<RuleContext> observer);
-        void SetThemeValue(string Id, string name, string value);
-        IEnumerable<KeyValuePair<string, string>> GetThemeValues(string Id);
+        void SetThemeValue(string id, string name, string value);
+        IEnumerable<KeyValuePair<string, string>> GetThemeValues(string id);
         bool ScriptRendered { get; }
         ValueTask<bool> BecomeScriptTag();
         void UnbecomeScriptTag();
         bool ScriptRendering { get; }
         ValueTask<bool> BecomingScriptTag();
         void UnbecomingScriptTag();
         Queue<RuleContext> Storage { get; set; }
+        string GlobalStyle(string id, string globalClassName);
+        void AddOrUpdateGlobalStyle(string id, string globalClassName, string className);
     }
 }

src/BlazorStyled/Stylesheets/StyleSheet.cs

@@ -298,6 +298,18 @@ public IDisposable Subscribe(IObserver<RuleContext> observer)
             }
             return new RuleUnsubscriber<RuleContext>(_ruleObservers, observer);
         }
+
+        public string GlobalStyle(string id, string globalClassName)
+        {
+            StyleSheetMetadata styleSheetMetadata = GetStyleSheetForId(id);
+            return styleSheetMetadata.GlobalStyles[globalClassName];
+        }
+
+        public void AddOrUpdateGlobalStyle(string id, string globalClassName, string className)
+        {
+            StyleSheetMetadata styleSheetMetadata = GetStyleSheetForId(id);
+            styleSheetMetadata.GlobalStyles[globalClassName] = className;
+        }
     }
 
     internal class RuleUnsubscriber<RuleContext> : IDisposable

src/BlazorStyled/Stylesheets/StylesheetMetadata.cs

@@ -10,5 +10,6 @@ internal class StyleSheetMetadata
         public IDictionary<string, IRule> Classes { get; set; } = new Dictionary<string, IRule>();
         public IDictionary<string, IDictionary<string, IRule>> Elements { get; set; } = new Dictionary<string, IDictionary<string, IRule>>();
         public Theme Theme { get; } = new Theme();
+        public InternalGlobalStyles GlobalStyles = new InternalGlobalStyles();
     }
 }

src/SampleCore/Pages/API.razor

@@ -1,6 +1,6 @@
 @page "/api"
 
-<h3>API</h3>
+<h1>API</h1>
 
 <p>
     BlazorStyled's tag syntax is easy to use and works in most cases, but sometimes you might want to access BlazorStyled's API Directly. For example, if you are using a code behind MVVM class,
@@ -9,15 +9,15 @@
 
 <h4>AddGoogleFonts(List&lt;GoogleFont> googleFonts)</h4>
 
-<p>Adds an <code>@@import</code> to the top of your css with the google font css</p>
+<p>Adds an <code>@@import</code> to the top of your css with the Google font css</p>
 
 <h4>ClearStyles()</h4>
 
 <p>Will clear all the current styles for the style sheet</p>
 
 <h4>Css(string css)</h4>
 
-<p>You can either pass a set od rule definations and get back a class name or a set of html element rules.</p>
+<p>You can either pass a set of rule definitions and get back a class name or a set of html element rules.</p>
 
 <h4>Css(string classname, string css)</h4>
 
@@ -45,4 +45,10 @@
 
 <h4>IEnumerable&lt;KeyValuePair&lt;string, string>> GetThemeValues()</h4>
 
-<p>Returns all the theme values</p>
+<p>Returns all the theme values</p>
+
+<h4>IGlobalStyles GlobalStyles { get; }</h4>
+
+<p><code>GlobalStyles</code> allow saving a global style to use later: <code>Styled.GlobalStyles["MyClassname"] = classname;</code></p>
+
+<p>It can later be retrieved by: <code>Styled.GlobalStyles["MyClassname"];</code> </p>

src/SampleCore/Pages/Basic.razor

@@ -19,7 +19,7 @@
 
 <PrettyCode CodeFile="_content/SampleCore/basic1.html" />
 
-<p>Because your CSS is embeded in your C# code you can you use variables inside of your CSS:</p>
+<p>Because your CSS is embedded in your C# code you can you use variables inside of your CSS:</p>
 
 <button @onclick="@(x => click(" red"))">Make the paragraph red</button>
 
@@ -35,7 +35,7 @@
 
 <p>
     Sometimes you may need to use a specific class name or html element (Selector).
-    Call <code>IStyled.Css(string className, string css)</code> to define css rules with a sepecfic selector.
+    Call <code>IStyled.Css(string className, string css)</code> to define css rules with a specific selector.
     For example, the code below is from <code>NavMenu.razor</code> to sample project. It sets a class for the menu on the left of the website which uses <code>NavLink</code>.
     <code>NavLink</code> in turn sets the classname <code>active</code>, therefore the code below uses the selector <code>active</code>.
 </p>

src/SampleCore/Pages/Compose.razor

@@ -12,7 +12,7 @@
 
 <h1>Class Composition</h1>
 
-<p><code>&lt;Styled /></code> allows you to compose multipile classes into one element. Let's begin with an example:</p>
+<p><code>&lt;Styled /></code> allows you to compose multiple classes into one element. Let's begin with an example:</p>
 
 <div class="@div">
     Some text
@@ -22,7 +22,7 @@
 
 <PrettyCode CodeFile="_content/SampleCore/compose1.html" HighlightLines="6-9" />
 
-<p>The highlighted line shows how to compone css classes. First, define the classes you plan to use. This is done in lines 1-9. Compose them together using the attribute
+<p>The highlighted line shows how to compose css classes. First, define the classes you plan to use. This is done in lines 1-9. Compose them together using the attribute
     <code>Compose[any string here]</code>. In this example <code>ComposeBigFont</code> on line 6. You may compose any number of classes together.</p>
 
 <h3>Conditional Class Composition</h3>

src/SampleCore/Pages/GlobalStyles.razor

@@ -0,0 +1,19 @@
+@page "/globalStyles"
+@inject IStyled Styled
+
+<h1>Global Styles</h1>
+
+<p>
+    Global styles allows you to define a style and use it again later in a different component.
+    Assign a name ("ColorHotPink" in the example below) for the style in the <code>GlobalStyle</code> property in the <code>&lt;Styled /></code>.
+    For example, the below snippet is defined in <code>MainLayout.cs</code>:
+</p>
+
+<PrettyCode CodeFile="_content/SampleCore/globalstyles1.html" Title="MainLayout.cs" />
+
+<p>Once the style is defined as a Global Style you may use it in another component by injecting <code>IStyled</code> and 
+    accessing <code>Styled.GlobalStyles</code>. For example:</p>
+
+<p class="@Styled.GlobalStyles["ColorHotPink"]">This paragraph is hot pink because the it uses a global style that defines it to be hot pink.</p>
+
+<PrettyCode CodeFile="_content/SampleCore/globalstyles2.html" />

src/SampleCore/Pages/Media.razor

@@ -22,7 +22,7 @@
 
 <h3>Alternate Syntax</h3>
 
-<p>Depending on your preffered style, the above can also be achieved with:</p>
+<p>Depending on your preferred style, the above can also be achieved with:</p>
 
 <PrettyCode CodeFile="_content/SampleCore/media4.html" />
 

src/SampleCore/Pages/Motivation.razor

@@ -9,9 +9,9 @@
 
 
 <ul class="@ul">
-    <li>Maintain your css inside your component instead of a seperate file</li>
+    <li>Maintain your css inside your component instead of a separate file</li>
     <li>Eliminate all collisions - no need to use !important</li>
-    <li>No need to worry about depoying css files - great for libraries</li>
+    <li>No need to worry about deploying css files - great for libraries</li>
     <li>css are C# strings - use variables instead of solutions like sass</li>
 </ul>
 
@@ -33,7 +33,7 @@
 <ul class="@ul">
     <li>BlazorCss: <a href="https://github.com/tomlm/BlazorCss">https://github.com/tomlm/BlazorCss</a> - Adds intellisense to Css rules to Styled tags created by <a href="https://github.com/tomlm">@@tomlm</a></li>
     <li>BlazorPrettyCode <a href="https://github.com/chanan/BlazorPrettyCode">https://github.com/chanan/BlazorPrettyCode</a> - CSHtml source code component for Blazor documentation (used on this site)</li>
-    <li>BlazorTypography <a href="https://github.com/chanan/BlazorTypography">https://github.com/chanan/BlazorTypography</a> - Sets up some basic typography styles for making awesomly readble sites (used on this site)</li>
+    <li>BlazorTypography <a href="https://github.com/chanan/BlazorTypography">https://github.com/chanan/BlazorTypography</a> - Sets up some basic typography styles for making awesomely readable sites (used on this site)</li>
 </ul>
 
 @code {

src/SampleCore/Pages/Nested.razor

@@ -58,7 +58,7 @@
 
 <h3>Alternate Syntax</h3>
 
-<p>Depending on your preffered style, the above can also be achieved with:</p>
+<p>Depending on your preferred style, the above can also be achieved with:</p>
 
 <PrettyCode CodeFile="_content/SampleCore/index1.html" />
 

src/SampleCore/Pages/Test.razor

@@ -1,66 +1,6 @@
 @page "/test"
 @inject IStyled Styled
 
-<section class="@_currentSlideClass">
-    TEST
-</section>
-
-<Styled @bind-Classname="@_slide">
-    label: section;
-    display: none;
-    position: absolute;
-    width: 100%;
-    padding: 20px 0px;
-    pointer-events: auto;
-    z-index: 10;
-    -webkit-transform-style: flat;
-    transform-style: flat;
-    transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-    transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-    -webkit-perspective: 600px;
-    perspective: 600px;
-</Styled>
-
-<Styled @bind-Classname="@_center">
-    min-height: 0 !important;
-</Styled>
-
-<Styled @bind-Classname="@_present">
-    label: present;
-    display: block;
-    z-index: 11;
-    opacity: 1;
-</Styled>
-
-<Styled @bind-Classname="@_notPresent">
-    label: not-present;
-    pointer-events: none;
-    opacity: 0;
-</Styled>
-
-<Styled @bind-Classname="@_future">
-    label: future;
-</Styled>
-
-<Styled @bind-Classname="@_past">
-    label: past;
-</Styled>
-
-<Styled @bind-Classname="@_currentSlideClass"
-        Compose1="@_slide"
-        Compose2="@_center"
-        Compose3="@_present"
-        Compose4="@_notPresent"
-        Compose5="@_future"
-        Compose6="@_past"
-        Compose3If="@(Index == CurrentSlide)"
-        Compose4If="@(Index != CurrentSlide)"
-        Compose5If="@(Index > CurrentSlide)"
-        Compose6If="@(Index < CurrentSlide)" />
-
-@code {
-    private string _currentSlideClass, _slide, _center, _present, _notPresent, _future, _past;
-
-    public int Index { get; set; } = 5;
-    public int CurrentSlide { get; set; } = 5;
-}
+<div class="@Styled.GlobalStyles["ColorRed"]">
+    Test
+</div>

src/SampleCore/Shared/MainLayout.razor

@@ -123,6 +123,11 @@
     margin-right: 20px;
 </Styled>
 
+<Styled GlobalStyle="ColorHotPink">
+    label: color-hotpink;
+    color: hotpink;
+</Styled>
+
 <div class="@container">
     <div class="@navColumn">
         <div class="@topNav"><h1 class="@brand">BlazorStyled</h1></div>