Tabs and Theme

skclusive · Jan 14, 2020 · bcc72f2 · bcc72f2
1 parent a7c89ef
commit bcc72f2
Show file tree

Hide file tree

Showing 52 changed files with 1,477 additions and 304 deletions.
diff --git a/AppBar/src/AppBar/AppBarStyle.razor b/AppBar/src/AppBar/AppBarStyle.razor
@@ -4,57 +4,57 @@
 <style data-name="AppBar">
 
     .AppBar-Root {
-    width: 100%;
-    display: flex;
-    z-index: var(--theme-zindex-appbar, 1100);
-    box-sizing: border-box;
-    flex-shrink: 0;
-    flex-direction: column;
+        width: 100%;
+        display: flex;
+        z-index: var(--theme-zindex-appbar, 1100);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        flex-direction: column;
     }
 
     .AppBar-Position-Fixed {
-    top: 0;
-    left: auto;
-    right: 0;
-    position: fixed;
+        top: 0;
+        left: auto;
+        right: 0;
+        position: fixed;
     }
 
     .AppBar-Position-Absolute {
-    top: 0;
-    left: auto;
-    right: 0;
-    position: absolute;
+        top: 0;
+        left: auto;
+        right: 0;
+        position: absolute;
     }
 
     .AppBar-Position-Sticky {
-    top: 0;
-    left: auto;
-    right: 0;
-    position: sticky;
+        top: 0;
+        left: auto;
+        right: 0;
+        position: sticky;
     }
 
     .AppBar-Position-Static {
-    position: static;
-    transform: translateZ(0);
+        position: static;
+        transform: translateZ(0);
     }
 
     .AppBar-Position-Relative {
-    position: relative;
+        position: relative;
     }
 
     .AppBar-Color-Default {
-    color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
-    background-color: var(--theme-palette-grey-background-default, #f5f5f5);
+        color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
+        background-color: var(--theme-palette-grey-background-default, #f5f5f5);
     }
 
     .AppBar-Color-Primary {
-    color: var(--theme-palette-primary-contrast-text, #fff);
-    background-color: var(--theme-palette-primary-main, #1976d2);
+        color: var(--theme-palette-primary-contrast-text, #fff);
+        background-color: var(--theme-palette-primary-main, #1976d2);
     }
 
     .AppBar-Color-Secondary {
-    color: var(--theme-palette-secondary-contrast-text, #fff);
-    background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
+        color: var(--theme-palette-secondary-contrast-text, #fff);
+        background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
     }
 
 </style>
diff --git a/Button/src/Button/ButtonStyle.razor b/Button/src/Button/ButtonStyle.razor
@@ -35,10 +35,7 @@
     }
 
     .Button-Root.Button-Disabled {
-        color: var(
-            --theme-palette-action-disabled,
-            var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26))
-        );
+        color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
     }
 
     @media (hover: none) {
@@ -150,7 +147,7 @@
     }
 
     .Button-Contained {
-        color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87));
+        color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
         box-shadow: var(
             --theme-shadow2,
             0px 3px 1px -2px rgba(0, 0, 0, 0.2),

diff --git a/Button/src/ButtonStyles/ButtonStyles.razor b/Button/src/ButtonStyles/ButtonStyles.razor
@@ -2,8 +2,8 @@
 @inherits StaticComponentBase
 
 <ButtonBaseStyle />
+<FabStyle />
 <IconButtonStyle />
 <RippleStyle />
 <TouchRippleStyle />
-<ButtonStyle />
-<FabStyle />
+<ButtonStyle />
diff --git a/Button/src/IconButton/IconButtonStyle.razor b/Button/src/IconButton/IconButtonStyle.razor
@@ -5,7 +5,7 @@
 
     .IconButton-Root {
         flex: 0 0 auto;
-        color: rgba(0, 0, 0, 0.54);
+        color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54));
         padding: 12px;
         overflow: visible;
         font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem);

diff --git a/Core/src/Core.csproj b/Core/src/Core.csproj
@@ -16,14 +16,14 @@
     <RepositoryUrl>https://github.com/skclusive/Skclusive.Material.Component</RepositoryUrl>
   </PropertyGroup>
 
-  <!-- <ItemGroup>
+  <ItemGroup>
     <PackageReference Include="Skclusive.Core.Component" Version="1.2.0" />
     <PackageReference Include="Skclusive.Script.DomHelpers" Version="1.2.0" />
-  </ItemGroup> -->
+  </ItemGroup>
 
-  <ItemGroup>
+  <!-- <ItemGroup>
     <ProjectReference Include="..\..\..\Skclusive.Core.Component\src\Component.csproj" Version="1.2.0" />
     <ProjectReference Include="..\..\..\Skclusive.Script.DomHelpers\src\DomHelpers\DomHelpers.csproj" Version="1.2.0" />
-  </ItemGroup>
+  </ItemGroup> -->
 </Project>
 
diff --git a/Dialog/src/DialogContent/DialogContentStyle.razor b/Dialog/src/DialogContent/DialogContentStyle.razor
@@ -16,8 +16,8 @@
 
     .DialogContent-Dividers {
         padding: 16px 24px;
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+        border-top: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
+        border-bottom: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
     }
 
 </style>
diff --git a/Drawer/src/Drawer/DrawerStyle.razor b/Drawer/src/Drawer/DrawerStyle.razor
@@ -49,19 +49,19 @@
     }
 
     .Drawer-Paper-Anchor-Docked-Left {
-        border-right: 1px solid rgba(255, 255, 255, 0.12);
+        border-right: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
     }
 
     .Drawer-Paper-Anchor-Docked-Top {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+        border-bottom: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
     }
 
     .Drawer-Paper-Anchor-Docked-Right {
-        border-left: 1px solid rgba(255, 255, 255, 0.12);
+        border-left: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
     }
 
     .Drawer-Paper-Anchor-Docked-Bottom {
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
+        border-top: 1px solid var(--theme-palette-divider, rgba(0, 0, 0, 0.12));
     }
 
 </style>
diff --git a/Icon/src/SvgIcon/SvgIconStyle.razor b/Icon/src/SvgIcon/SvgIconStyle.razor
@@ -15,23 +15,23 @@
     }
 
     .SvgIcon-Color-Primary {
-        color: #2196f3;
+        color: var(--theme-palette-primary-main, #1976d2);
     }
 
     .SvgIcon-Color-Secondary {
-        color: rgb(225, 0, 80);
+        color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
     }
 
     .SvgIcon-Color-Action {
-        color: rgba(0, 0, 0, 0.54);
+        color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54));
     }
 
     .SvgIcon-Color-Disabled {
-        color: rgba(0, 0, 0, 0.26);
+        color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
     }
 
     .SvgIcon-Color-Error {
-        color: #f44336;
+        color: var(--theme-palette-error-main, #f44336);
     }
 
 </style>
diff --git a/Input/src/InputAdornment/InputAdornment.cs b/Input/src/InputAdornment/InputAdornment.cs
@@ -15,7 +15,7 @@ public InputAdornmentComponent() : base("InputAdornment")
         public string Component { set; get; } = "div";
 
         [Parameter]
-        public Position Position { set; get; } = Position.Start;
+        public InputPosition Position { set; get; } = InputPosition.Start;
 
         [Parameter]
         public bool DisablePointerEvents { set; get; }
@@ -63,7 +63,7 @@ protected override IEnumerable<string> Classes
         }
     }
 
-    public enum Position
+    public enum InputPosition
     {
         Start,
 

diff --git a/Input/src/InputBase/InputBase.cs b/Input/src/InputBase/InputBase.cs
@@ -2,7 +2,6 @@
 using System.Collections.Generic;
 using System.Threading.Tasks;
 using Skclusive.Material.Form;
-using Skclusive.Material.Core;
 using Skclusive.Core.Component;
 
 namespace Skclusive.Material.Input

diff --git a/Material/src/Material.csproj b/Material/src/Material.csproj
@@ -53,6 +53,7 @@
     <ProjectReference Include="..\..\Dialog\src\Dialog.csproj" Version="1.0.5-preview1" />
     <ProjectReference Include="..\..\Popover\src\Popover.csproj" Version="1.0.5-preview1" />
     <ProjectReference Include="..\..\Menu\src\Menu.csproj" Version="1.0.5-preview1" />
+    <ProjectReference Include="..\..\Tab\src\Tab.csproj" Version="1.0.5-preview1" />
   </ItemGroup>
 
 </Project>
diff --git a/Material/src/MaterialExtension.cs b/Material/src/MaterialExtension.cs
@@ -1,5 +1,4 @@
-using Microsoft.AspNetCore.Components.Builder;
-using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection;
 using Skclusive.Material.Script;
 using Skclusive.Script.DomHelpers;
 

diff --git a/Material/src/MaterialStyles.razor b/Material/src/MaterialStyles.razor
@@ -1,4 +1,4 @@
-<ThemeLightStyle />
+<ThemeStyles />
 <AvatarStyle />
 <BadgeStyle />
 <BaselineStyle />
@@ -22,4 +22,5 @@
 <DrawerStyle />
 <DialogStyles />
 <PopoverStyle />
-<MenuStyles />
+<MenuStyles />
+<TabStyles />
diff --git a/Material/src/MaterialThemeDetector.razor b/Material/src/MaterialThemeDetector.razor
@@ -0,0 +1,39 @@
+@implements IDisposable
+@inject DetectThemeHelper DetectThemeHelper
+
+<MaterialThemeStyle
+    Theme="@Theme" />
+
+@code
+{
+    private Theme Theme { set; get; } = Theme.Light;
+
+    private IDisposable TimeoutDisposal { set; get; }
+
+    protected override Task OnInitializedAsync()
+    {
+        DetectThemeHelper.OnChange += OnThemeChanged;
+
+        TimeoutDisposal = ExecutionPlan.Delay(500, () => {
+            _ = DetectThemeHelper.RegisterAsync();
+        });
+
+        return Task.CompletedTask;
+    }
+
+    protected void OnThemeChanged(object sender, Theme theme)
+    {
+        Theme = theme;
+
+        StateHasChanged();
+    }
+
+    public void Dispose()
+    {
+        TimeoutDisposal?.Dispose();
+
+        DetectThemeHelper.OnChange -= OnThemeChanged;
+
+        _ = DetectThemeHelper.UnRegisterAsync();
+    }
+}
diff --git a/Material/src/MaterialThemeStyle.razor b/Material/src/MaterialThemeStyle.razor
@@ -0,0 +1,13 @@
+@if (Theme == Theme.Dark)
+{
+    <ThemeDarkStyle />
+} else
+{
+    <ThemeLightStyle />
+}
+
+@code
+{
+    [Parameter]
+    public Theme Theme { set; get; } = Theme.Light;
+}
diff --git a/Material/src/_Imports.razor b/Material/src/_Imports.razor
@@ -37,5 +37,6 @@
 @using Skclusive.Material.Dialog
 @using Skclusive.Material.Popover
 @using Skclusive.Material.Menu
+@using Skclusive.Material.Tab
 
 @using Skclusive.Script.DomHelpers
diff --git a/Menu/src/MenuItem/MenuItem.razor b/Menu/src/MenuItem/MenuItem.razor
@@ -16,5 +16,5 @@
     OnClick="@HandleClickAsync"
     OnKeyDown="@HandleKeyDownAsync"
     @attributes="Attributes">
-    @Index @_TabIndex @_AutoFocus @MenuContext.ActiveIndex @ChildContent
+    @ChildContent
 </ListItem>
diff --git a/Menu/src/MenuItem/MenuItemStyle.razor b/Menu/src/MenuItem/MenuItemStyle.razor
@@ -6,16 +6,22 @@
     .MenuItem-Root {
         width: auto;
         overflow: hidden;
-        font-size: 1rem;
         box-sizing: border-box;
         min-height: 48px;
-        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-        font-weight: 400;
         line-height: 1.5;
         padding-top: 6px;
         white-space: nowrap;
-        letter-spacing: 0.00938em;
         padding-bottom: 6px;
+        font-size: var(--theme-typography-body1-font-size, 1rem);
+        font-family: var(
+            --theme-typography-body1-font-family,
+            "Roboto",
+            "Helvetica",
+            "Arial",
+            sans-serif
+        );
+        font-weight: var(--theme-typography-body1-font-weight, 400);
+        letter-spacing: var(--theme-typography-body1-letter-spacing, 0.00938em);
     }
 
     @media (min-width:600px) {
@@ -25,12 +31,12 @@
     }
 
     .MenuItem-Dense {
-        font-size: 0.875rem;
         min-height: auto;
-        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-        font-weight: 400;
-        line-height: 1.43;
-        letter-spacing: 0.01071em;
+        font-size: var(--theme-typography-body2-font-size, 0.875rem);
+        font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif);
+        font-weight: var(--theme-typography-body2-font-weight, 400);
+        line-height: var(--theme-typography-body2-line-height, 1.43);
+        letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em);
     }
 
     .MenuItem-Selected {