From f4e2cb8cb22bea88f871e05b2c4540ed96a15951 Mon Sep 17 00:00:00 2001 From: Andy Stark <30621568+therealandeeee@users.noreply.github.com> Date: Mon, 12 Feb 2018 18:21:14 +0000 Subject: [PATCH] [ADF-2262] Updated theming docs (#2917) * [ADF-2262] Updated theming docs * [ADF-2262] Replaced new theming doc with a modified version of the original --- docs/docassets/images/ThemeSwatches.png | Bin 0 -> 6871 bytes docs/theming.md | 31 +++++++++++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 docs/docassets/images/ThemeSwatches.png diff --git a/docs/docassets/images/ThemeSwatches.png b/docs/docassets/images/ThemeSwatches.png new file mode 100644 index 0000000000000000000000000000000000000000..07a631b2062a254fef07185e43edaab6a639350c GIT binary patch literal 6871 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 JFB3Be{4eAuw{idg literal 0 HcmV?d00001 diff --git a/docs/theming.md b/docs/theming.md index bf404c5ae7..a7ff89b0f1 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -1,4 +1,29 @@ -# Theming your Alfresco ADF app +# Theming an ADF app + +The [Material Design](https://material.io/guidelines/material-design/introduction.html) +specification doesn't specify a single color scheme. Instead it uses the concept +of color **themes** to allow designers some flexibility in their choice of colors. + +A theme is a palette based around two main colors: the **primary** color (used widely +throughout the app) and the **accent** color (used mainly for highlighting and calling +out specific UI elements). Each of these colors is defined in a number of shades. For +example, a blue/orange theme could define shades like the following: + +![Theme swatches](docassets/images/ThemeSwatches.png) + +Each shade is related to a particular purpose or set of purposes within the app. So for +example, the shade that works best for text isn't necessarily the same shade you would use +for flat areas of color. Material Design provides a number of +[standard themes](https://material.io/guidelines/style/color.html#color-themes) +with shades that are carefully chosen for each purpose within the UI. The CSS files are +designed so that the names are consistent between themes (so the same "purpose" will always +have the same class name across CSS files). This makes it easy to switch themes simply by +changing a few CSS definitions. Material Design also defines the relationship between +the different shades, so you can calculate your own color values or, more straightforwardly, use +an [online palette design tool](http://mcg.mbitson.com/). + +See the [Material Design Style page](https://material.io/guidelines/style/color.html#) for +more information about color concepts. ## Using a pre-built theme @@ -20,7 +45,7 @@ Available pre-built themes: * `adf-pink-bluegrey.css` * `adf-purple-green.css` -If you're using Angular CLI you can include one of the prebuilt theme in your `styles.scss` file: +If you're using Angular CLI you can include one of the prebuilt themes in your `styles.scss` file: ```css @import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css'; ``` @@ -32,7 +57,7 @@ Or you can add it directly in your index.html ## Defining a custom theme -When you want more customization than a pre-built theme offers, you can create your own theme file. You need to include the packages only what you really use in your application. +When you want more customization than a pre-built theme offers, you can create your own theme file. You only need to include the packages you actually use in your application. ```scss /*