Skip to content

Commit

Permalink
docs: Fixes after Lint markdown files was enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
agneszitte committed Dec 13, 2023
1 parent b1056cc commit e94c369
Show file tree
Hide file tree
Showing 31 changed files with 211 additions and 77 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Uno.Themes

<p align="center">
<img src="doc/assets/themes-design-systems.png">
<img src="doc/assets/themes-design-systems.png" alt="Themes design systems" />
</p>

[![Open Uno.Themes in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/unoplatform/uno.themes)
Expand Down
5 changes: 5 additions & 0 deletions doc/cupertino-controls-styles.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
---
uid: Uno.Themes.Cupertino.Styles
---

# Cupertino Controls Styles

Control|Style Key
-|-
`Button`|CupertinoButtonStyle<br/>CupertinoContainedButtonStyle<br/>CupertinoDatePickerFlyoutButtonStyle
Expand Down
8 changes: 4 additions & 4 deletions doc/cupertino-getting-started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
uid: uno.themes.cupertino.getstarted
uid: Uno.Themes.Cupertino.GetStarted
---

# Uno.Cupertino

<p align="center">
<img src="assets/cupertino-design-system.png">
<img src="assets/cupertino-design-system.png" alt="Cupertino design system" />
</p>

# Uno.Cupertino

Uno Cupertino is an add-on package that lets you apply [Cupertino - Human Interface Guideline styling](https://developer.apple.com/design/human-interface-guidelines) to your application with a few lines of code.

## Getting Started
Expand Down
40 changes: 21 additions & 19 deletions doc/fluent-getting-started.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
uid: uno.themes.fluent.getstarted
uid: Uno.Themes.Fluent.GetStarted
---

# Fluent-styled controls

<p align="center">
<img src="assets/fluent-design-system.png">
<img src="assets/fluent-design-system.png" alt="Fluent design system" />
</p>

# Fluent-styled controls

Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).
Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).
The details below explain how to use them in your app.

## Upgrading existing Uno apps to use Fluent styles
Expand All @@ -24,27 +24,29 @@ The step-by-step process to enable Fluent design styles within an existing Uno P
1. In only the `UWP` head project of your solution, if you have one, install the [WinUI 2 NuGet package](https://www.nuget.org/packages/Microsoft.UI.Xaml). This step is the same as required for WinUI 2 UWP apps.

1. Within the shared project used by all platform heads, add the `XamlControlsResources` resource dictionary to your application resources inside `App.xaml`. This step is the same as required for WinUI 2 UWP apps.

```xml
<Application>
<Application.Resources>
<Application>
<Application.Resources>
<!-- Load WinUI resources -->
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
```

Or, if you have other existing application-scope resources, add `XamlControlsResources` at the top (before other resources) as a merged dictionary:

```xml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- Load WinUI resources -->
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
</ResourceDictionary>
</Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
</ResourceDictionary>
</Application.Resources>
```

1. In all platform head projects except UWP the Fluent control styles require the Uno Fluent Assets icon font to display correctly. [Follow the instructions here](https://platform.uno/docs/articles/uno-fluent-assets.html) to upgrade your app to use this font. This step is required because the Uno Platform uses a cross-platform ready default font within its styles different from UWP's *Segoe MDL2 Assets*.
11 changes: 6 additions & 5 deletions doc/lightweight-styling.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
uid: uno.themes.lightweightstyling
uid: Uno.Themes.LightweightStyling
---

# Lightweight Styling

[Lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling) is a way to customize the appearance of XAML controls by **overriding** their default brushes, fonts, and numeric properties. Lightweight styles are changed by providing alternate resources with the same key. All Uno Material styles support the capability to be customized through resource overrides without the need to redefine the style.
Expand Down Expand Up @@ -172,25 +173,25 @@ The general pattern used for mapping the Lightweight Styling resource keys to C#
| Name Part | Description |
| --- | --- |
| `control` | Name of the control type (Button, TextBox, CheckBox, etc.) |
| `variant` | **(Optional) Defaults to `Default`** Certain styles have multiple variants. Ex: For Button we have variants such as: Outlined, Text, Filled |
| `variant` | **(Optional) Defaults to `Default`** Certain styles have multiple variants. Ex: For Button we have variants such as: Outlined, Text, Filled |
| `member-path` | The property or the nested property to assign value to. (Foreground, Background, Placeholder.Foreground, etc.) |
| `visual-state` | **(Optional) Defaults to `Default`** Specifies which `VisualState` that this resource will be applied to (PointerOver, Checked, Disabled, etc.) |

For example, the following resource keys are used with `FilledButtonStyle`, `HyperlinkButtonStyle`, and `CheckBoxStyle` from Uno Material:

##### Filled Button
#### Filled Button

- `Theme.Button.Resources.Filled.Foreground.Default`
- `Theme.Button.Resources.Filled.Foreground.Pressed`
- `Theme.Button.Resources.Filled.Foreground.PointerOver`

##### HyperlinkButton (Default)
#### HyperlinkButton (Default)

- `Theme.HyperlinkButton.Resources.Default.Foreground.Default`
- `Theme.HyperlinkButton.Resources.Default.Foreground.Pressed`
- `Theme.HyperlinkButton.Resources.Default.Foreground.PointerOver`

##### CheckBox (Default)
#### CheckBox (Default)

- `Theme.CheckBox.Resources.Default.Foreground.Checked`
- `Theme.CheckBox.Resources.Default.Foreground.CheckedPressed`
Expand Down
5 changes: 4 additions & 1 deletion doc/material-colors.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
---
uid: uno.themes.material.colors
uid: Uno.Themes.Material.Colors
---

# Material Colors and Brushes

## Colors

| Key | LightValue | DarkValue |
| -------------------------- | ---------- | --------- |
| PrimaryColor | #5946D2 | #C7BFFF |
Expand Down Expand Up @@ -41,6 +42,7 @@ uid: uno.themes.material.colors
| OutlineVariantColor | #C9C5D0 | #57545D |

## Opacities

| Key | Value |
| ------------------ | ----- |
| HoverOpacity | 0.08 |
Expand All @@ -54,6 +56,7 @@ uid: uno.themes.material.colors
| DisabledLowOpacity | 0.12 |

## Brushes

| Key | Color | Opacity |
| ------------------------------------- | -------------------------- | ------------------ |
| PrimaryBrush | PrimaryColor | 1 |
Expand Down
8 changes: 6 additions & 2 deletions doc/material-controls-extensions.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
uid: Uno.Themes.Material.Extensions
---

# Material Control Extensions

## Icon
Expand Down Expand Up @@ -118,11 +122,11 @@ Applying the surface tint for elevated controls is optional and must be explicit

The above XAML will produce the following result:

![](assets/material-elevation-buttons.png)
![Uno Material Elevation Buttons with Tint Enabled](assets/material-elevation-buttons.png)

If we were to alter the XAML above and set `um:ControlExtensions.IsTintEnabled="False"` on each of the buttons, we would see elevated buttons without tints:

![](assets/material-elevation-buttons-shadow-only.png)
![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)

### Supported Controls

Expand Down
7 changes: 6 additions & 1 deletion doc/material-controls-styles.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
# Material Controls Styles
---
uid: Uno.Themes.Material.Styles
---

# Material Controls Styles

Control|Style Key|IsDefaultStyle*
-|-|-
AppBarButton|AppBarButtonStyle|True
Expand Down
11 changes: 9 additions & 2 deletions doc/material-dsp.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
---
uid: Uno.Material.DSP
uid: Uno.Themes.Material.DSP
---

# Using the DSP Tooling in Uno.Material

## Introduction

Is it possible to automate the creation of the Material Design color palette? Yes, it is. Uno.Material provides a tooling to generate the color palette from the official Material Design color palette. This tooling is available in the [Uno.Dsp.Cli](https://nuget.org/packages/Uno.Dsp.Cli) and [Uno.Dsp.Tasks](https://nuget.org/packages/Uno.Dsp.Tasks) NuGet packages. The following instructions will cover the Uno.Dsp.Tasks version, which is more automatic.

> [!NOTE]
> Make sure you are referencing the generated XAML file in your
> application's `App.xaml` file, as shown in the following example:
>
> ```xml
> <MaterialTheme xmlns="using:Uno.Material"
> ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
> ```
>
> More details [In the _Manual Color Overrides_ section of the Getting Started page](xref:uno.themes.material.getstarted)
## The Uno.Dsp.Tasks NuGet package
This package will be automatically present in the project after [creating a new Uno Platform project](https://aka.platform.uno/get-started) specifying the _Material_ theme. It is also possible to add it manually to an existing Uno Platform project by adding the following line to the _PackageReference_ section of the _csproj_ file:
* Add a nuget package reference:
```xml
<PackageReference Include="Uno.Dsp.Tasks" Version="[latest version]" />
```
* The package is already present when you select _Material_ theme during project creation:
![](assets/material-theme-selection-wizard.png)
![Selection of Material theme when creating a project using the Uno Template Wizard](assets/material-theme-selection-wizard.png)

## Generating a custom color palette and export as DSP file

1. Navigate to the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) and select the colors you want to use for your application.
2. Locate the _Export_ button and pick the _material Tokens (DSP)_ format.

Expand All @@ -37,6 +43,7 @@ This package will be automatically present in the project after [creating a new
5. Build your application. The `ColorPaletterOverride.xaml` file will be automatically updated with the colors present in the DSP zip file.

## More flexibility

This will generate the file at each build, potentially overriding any changes you made to the file. If you want to keep it that way, you can simply remove the `ColorPaletteOverride.zip` file from the `Styles` folder, the file won't get overwritten anymore.

Alternatively, you can also use the [Uno.Dsp.Cli](https://nuget.org/packages/Uno.Dsp.Cli) package to generate the file from the command line. This will allow you to generate the file only when you want to, and not at each build.
10 changes: 6 additions & 4 deletions doc/material-getting-started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
uid: uno.themes.material.getstarted
uid: Uno.Themes.Material.GetStarted
---

# Uno.Material

<p align="center">
<img src="assets/material-design-system.png">
<img src="assets/material-design-system.png" alt="Material design system" />
</p>

# Uno.Material

The Uno.Material library is available as NuGet packages that can be added to any new or existing Uno solution.
Uno Material lets you apply [Material Design 3](https://m3.material.io/) styling to your application with just a few lines of code.

Expand Down Expand Up @@ -94,6 +94,7 @@ If your application is based on the older solution template that includes a shar
## Customization

### Color Overrides using _Material Theme Builder_ and DSP format

It is possible to use the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) to generate a custom color palette derived from your own basic colors. The generated palette is provided in the [DSP format](https://m3.material.io/styles/color/the-color-system/color-dsp) and can be used to override the default Uno.Material colors.

The tooling required to generate the _Material Colors Override_ file from a DSP package (zip file) will be present by default when creating a _Uno Extensions_ project with support for Uno.Material.
Expand All @@ -103,6 +104,7 @@ The tooling required to generate the _Material Colors Override_ file from a DSP
Follow this link to get [more Information about the DSP tooling](xref:Uno.Material.DSP).

### Manual Color Overrides

Use this when you want to specify MANUALLY each colors.

1. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialColorsOverride.xaml`
Expand Down
49 changes: 27 additions & 22 deletions doc/material-migration.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
uid: uno.themes.material.migration
uid: Uno.Themes.Material.Migration
---

# Updating to Uno.Material v3
Expand Down Expand Up @@ -339,6 +339,7 @@ MaterialToggleSwitchOnButtonBrush|**_REMOVED_**|PrimaryBrush
MaterialToggleSwitchHeaderMargin|**_REMOVED_**|0,0,12,0

# Updating to Uno.Material v2

Starting with version 2.0.0 of the [Uno.Material](https://www.nuget.org/packages/Uno.Material/2.0.0) and [Uno.Material.WinUI](https://www.nuget.org/packages/Uno.Material.WinUI/2.0.0) packages, users can now take advantage of the new [Material Design 3](https://m3.material.io/) design system from Google.
Along with the new Material Design 3 styles, our Uno.Material NuGet packages will continue to support the previous Material Design 2 styles. In order to achieve this backward compatibility, we have had to make some changes to the way Uno.Material is initialized within your `App.xaml`.

Expand All @@ -351,49 +352,53 @@ Along with the new Material Design 3 styles, our Uno.Material NuGet packages wil
- Migrate app to reference the new v2 styles

## Continue Using v1 Styles

> [!WARNING]
> In order to continue using the v1 styles, some changes are required in your `App.xaml`.
The Uno.Material v2 NuGet package contains both sets of v1 and v2 styles. Within your `App.xaml`, you will need to replace the references to `MaterialColors` and `MaterialResouces` with `MaterialColorsV1` and `MaterialResourcesV1`. `MaterialFonts` remains unchanged.

## Migrating to v2 Styles

Both `MaterialColors` and `MaterialResources` will now always initialize the latest version of the Material styles. It is also possible to directly reference the `MaterialColorsV2` and `MaterialResourcesV2` ResourceDictionaries if needed.

The v2 styles introduce a new naming system for its resource keys. Refer to the [Material Styles Matrix](material-controls-styles.md) for the updated style keys. In addition to the new style keys, the Uno.Material color palette and text resources have also been updated to align with the [Material Design 3 Color System](https://m3.material.io/styles/color/the-color-system/key-colors-tones) and the [Material Design 3 Typography Guidelines](https://m3.material.io/styles/typography/type-scale-tokens).

### Color Update

A new color palette has been created for v2, meaning any color palette overrides ResourceDictionary in your app must be updated with the new resource keys. An example of the new color palette can be seen in the new [Uno.Material default palette](https://github.com/unoplatform/Uno.Themes/blob/master/src/library/Uno.Material/Styles/Application/v2/SharedColorPalette.xaml). For more information on the updated colors, you can refer to the "Colors and Themes" section of the [Material 3 Migration Guide](https://material.io/blog/migrating-material-3).

> [!NOTE]
> As of v2, the Brush resources have been relocated to ThemeDictionaries. To reference these Brush resources, use the `ThemeResource` binding.
> More information on theme resources can be found [here](https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-theme-resources)
### Typography Updates

Text styles have also been modified in v2. There are no 1-to-1 mapping between v1 and v2 text styles in terms of font-sizes and usages. The "Typography" section of the [Material 3 Migration Guide](https://material.io/blog/migrating-material-3) can be helpful for choosing the right style.

Below is a table that is not a strict guideline, but, is provided to you as a suggestion of mapping text styles from v1 to v2:

| Previous Style | New Style |
|-------------------- |------------------------- |
| MaterialHeadline1 | MaterialDisplaySmall |
| MaterialHeadline2 | MaterialHeadlineLarge |
| MaterialHeadline3 | MaterialHeadlineMedium |
| MaterialHeadline4 | MaterialHeadlineSmall |
| MaterialHeadline5 | MaterialTitleLarge |
| MaterialSubtitle1 | MaterialTitleMedium |
| MaterialSubtitle2 | MaterialTitleSmall |
| MaterialBody1 | MaterialBodyLarge |
| MaterialBody2 | MaterialBodyMedium |
| MaterialCaption | MaterialBodySmall |
| MaterialButtonText | MaterialLabelLarge |
| MaterialOverline | MaterialLabelMedium |
| N/A | MaterialLabelSmall |
| N/A | MaterialLabelExtraSmall |
| N/A | MaterialCaptionLarge |
| N/A | MaterialCaptionMedium |
| N/A | MaterialCaptionSmall |
| N/A | MaterialDisplayLarge |
| N/A | MaterialDisplayMedium |
| Previous Style | New Style |
|--------------------|-------------------------|
| MaterialHeadline1 | MaterialDisplaySmall |
| MaterialHeadline2 | MaterialHeadlineLarge |
| MaterialHeadline3 | MaterialHeadlineMedium |
| MaterialHeadline4 | MaterialHeadlineSmall |
| MaterialHeadline5 | MaterialTitleLarge |
| MaterialSubtitle1 | MaterialTitleMedium |
| MaterialSubtitle2 | MaterialTitleSmall |
| MaterialBody1 | MaterialBodyLarge |
| MaterialBody2 | MaterialBodyMedium |
| MaterialCaption | MaterialBodySmall |
| MaterialButtonText | MaterialLabelLarge |
| MaterialOverline | MaterialLabelMedium |
| N/A | MaterialLabelSmall |
| N/A | MaterialLabelExtraSmall |
| N/A | MaterialCaptionLarge |
| N/A | MaterialCaptionMedium |
| N/A | MaterialCaptionSmall |
| N/A | MaterialDisplayLarge |
| N/A | MaterialDisplayMedium |

### Notable Style Key Changes

Expand Down
7 changes: 6 additions & 1 deletion doc/styles/Button.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
---
uid: Uno.Themes.Styles.Button
---

# Button Control

## Styles

Style Key|IsDefaultStyle*
Expand Down Expand Up @@ -177,4 +182,4 @@ ElevatedButtonMargin|Thickness|0,0,0,1
ElevatedButtonDisabledMargin|Thickness|0
ButtonContentMargin|Thickness|8,0
ButtonMargin|Thickness|0
ButtonCornerRadius|CornerRadius|20
ButtonCornerRadius|CornerRadius|20
Loading

0 comments on commit e94c369

Please sign in to comment.