From 67a78b7cae8efa7fb2ffc72f63c5c65e30a93a00 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 11:50:18 -0400 Subject: [PATCH 1/6] docs(theming): update the global css variables references ionic-team/ionic#16003 references ionic-team/ionic#15989 --- src/content/theming/advanced.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/content/theming/advanced.md b/src/content/theming/advanced.md index 54b3241062d..d9541efbea2 100755 --- a/src/content/theming/advanced.md +++ b/src/content/theming/advanced.md @@ -60,25 +60,24 @@ The application colors are used in multiple places in Ionic. These are useful fo | Name | Description | | ---------------------------------------- | --------------------------------------------------- | -| `--ion-backdrop-color` | Color the backdrop component | +| `--ion-backdrop-color` | Color the Backdrop component | | `--ion-overlay-background-color` | Background color of the overlays | | `--ion-border-color` | Border color | | `--ion-box-shadow-color` | Box shadow color | -| `--ion-tabbar-background-color` | Background color of the tabbar | -| `--ion-tabbar-background-color-focused` | Background color of the focused tabbar | -| `--ion-tabbar-border-color` | Border color of the tabbar | -| `--ion-tabbar-text-color` | Text color of the tabbar | -| `--ion-tabbar-text-color-active` | Text color of the active tab | -| `--ion-toolbar-background-color` | Background color of the toolbar | -| `--ion-toolbar-border-color` | Border color of the toolbar | -| `--ion-toolbar-color-inactive` | Color of the toolbar | -| `--ion-toolbar-color-active` | Color of the active toolbar | -| `--ion-toolbar-text-color` | Text color of the toolbar | -| `--ion-item-background-color` | Background color of the item | -| `--ion-item-background-color-active` | Background color of the active item | -| `--ion-item-border-color` | Border color of the item | -| `--ion-item-text-color` | Text color of the item | -| `--ion-placeholder-text-color` | Text color of the item placeholder | +| `--ion-tab-bar-background` | Background of the Tab bar | +| `--ion-tab-bar-background-focused` | Background of the focused Tab bar | +| `--ion-tab-bar-border-color` | Border color of the Tab bar | +| `--ion-tab-bar-color` | Color of the Tab bar | +| `--ion-tab-bar-color-activated` | Color of the active Tab | +| `--ion-toolbar-background` | Background of the Toolbar | +| `--ion-toolbar-border-color` | Border color of the Toolbar | +| `--ion-toolbar-color` | Color of the components in the Toolbar | +| `--ion-toolbar-color-activated` | Color of the activated components in the Toolbar | +| `--ion-item-background` | Background of the Item | +| `--ion-item-background-activated` | Background of the activated Item | +| `--ion-item-border-color` | Border color of the Item | +| `--ion-item-color` | Color of the components in the Item | +| `--ion-placeholder-text-color` | Color of the placeholder in inputs | ### Stepped Colors From 18dfe5782cb9ed5e4270ffabc2d8ed65a89f58b9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 11:52:20 -0400 Subject: [PATCH 2/6] docs(theming): fix placeholder var --- src/content/theming/advanced.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/theming/advanced.md b/src/content/theming/advanced.md index d9541efbea2..25c488cf082 100755 --- a/src/content/theming/advanced.md +++ b/src/content/theming/advanced.md @@ -77,7 +77,7 @@ The application colors are used in multiple places in Ionic. These are useful fo | `--ion-item-background-activated` | Background of the activated Item | | `--ion-item-border-color` | Border color of the Item | | `--ion-item-color` | Color of the components in the Item | -| `--ion-placeholder-text-color` | Color of the placeholder in inputs | +| `--ion-placeholder-color` | Color of the placeholder in inputs | ### Stepped Colors From 02bf04a243e3693ca3d8ea24fe780cb2a11581fb Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 11:55:08 -0400 Subject: [PATCH 3/6] docs(theming): update verbiage --- src/content/theming/advanced.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/theming/advanced.md b/src/content/theming/advanced.md index 25c488cf082..07269a0915c 100755 --- a/src/content/theming/advanced.md +++ b/src/content/theming/advanced.md @@ -60,7 +60,7 @@ The application colors are used in multiple places in Ionic. These are useful fo | Name | Description | | ---------------------------------------- | --------------------------------------------------- | -| `--ion-backdrop-color` | Color the Backdrop component | +| `--ion-backdrop-color` | Color of the Backdrop component | | `--ion-overlay-background-color` | Background color of the overlays | | `--ion-border-color` | Border color | | `--ion-box-shadow-color` | Box shadow color | @@ -68,7 +68,7 @@ The application colors are used in multiple places in Ionic. These are useful fo | `--ion-tab-bar-background-focused` | Background of the focused Tab bar | | `--ion-tab-bar-border-color` | Border color of the Tab bar | | `--ion-tab-bar-color` | Color of the Tab bar | -| `--ion-tab-bar-color-activated` | Color of the active Tab | +| `--ion-tab-bar-color-activated` | Color of the activated Tab | | `--ion-toolbar-background` | Background of the Toolbar | | `--ion-toolbar-border-color` | Border color of the Toolbar | | `--ion-toolbar-color` | Color of the components in the Toolbar | From 77861e7b669d18430c729be30129abeaf29a0b87 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 12:03:25 -0400 Subject: [PATCH 4/6] docs(theming): document the margin/padding vars --- src/content/theming/advanced.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/content/theming/advanced.md b/src/content/theming/advanced.md index 07269a0915c..00a749291c6 100755 --- a/src/content/theming/advanced.md +++ b/src/content/theming/advanced.md @@ -144,19 +144,21 @@ While the previously mentioned variables are useful for changing the colors of a ### Application Variables -| Name | Description | -| ---------------------------------------- | -------------------------------------------------- | -| `--ion-font-family` | Font family of the app | -| `--ion-statusbar-padding` | Statusbar padding top of the app | -| `--ion-safe-area-top` | Adjust the safe area inset top of the app | -| `--ion-safe-area-right` | Adjust the safe area inset right of the app | -| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | -| `--ion-safe-area-left` | Adjust the safe area inset left of the app | +| Name | Description | +| -----------------------------------------| ------------------------------------------------------------------------------------------------| +| `--ion-font-family` | Font family of the app | +| `--ion-statusbar-padding` | Statusbar padding top of the app | +| `--ion-safe-area-top` | Adjust the safe area inset top of the app | +| `--ion-safe-area-right` | Adjust the safe area inset right of the app | +| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | +| `--ion-safe-area-left` | Adjust the safe area inset left of the app | +| `--ion-margin` | Adjust the margin of the [Margin attributes](/docs/layout/css-utilities#element-margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](/docs/layout/css-utilities#element-padding) | ### Grid Variables | Name | Description | -| ---------------------------------------- | -------------------------------------------------- | +| -----------------------------------------| ---------------------------------------------------| | `--ion-grid-columns` | Number of columns in the grid | | `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints | | `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints | From facd022446dc13147e3f7019610d317a53ac3b27 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 12:11:53 -0400 Subject: [PATCH 5/6] docs(layout): update to the proper css variables --- src/content/layout/css-utilities.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/layout/css-utilities.md b/src/content/layout/css-utilities.md index a9bb60813bf..894060d5759 100644 --- a/src/content/layout/css-utilities.md +++ b/src/content/layout/css-utilities.md @@ -185,7 +185,7 @@ The table below shows the default behavior, where `{modifier}` is any of the fol The padding attribute sets the padding area of an element. The padding area is the space between the content of the element and its border. -The default amount of `padding` to be applied is `16px` and is set by the `--content-padding` variable. Each mode can have a different value for padding by setting `--content-ios-padding`, or `--content-md-padding`. See [CSS Variables](/docs/theming/css-variables) for more information on how to change these values. +The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](/docs/theming/css-variables) section for more information on how to change these values. ```html @@ -253,7 +253,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--con The margin area extends the border area with an empty area used to separate the element from its neighbors. -The default amount of `margin` to be applied is `16px` and is set by the `--content-margin` variable. Each mode can have a different value for margin by setting `--content-ios-margin`, or `--content-md-margin`. See [CSS Variables](/docs/theming/css-variables) for more information on how to change these values. +The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](/docs/theming/css-variables) section for more information on how to change these values. ```html From 6f05edc2d1f08a97eb530096860a28f86c974970 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 14 Nov 2018 16:21:25 -0500 Subject: [PATCH 6/6] docs(theming): update advanced to include adding a color closes #159 --- src/content/theming/advanced.md | 62 +++++++++++++++++++++++++++++++-- src/styles/pages/theming.scss | 8 +++++ 2 files changed, 68 insertions(+), 2 deletions(-) diff --git a/src/content/theming/advanced.md b/src/content/theming/advanced.md index 6715958b25a..91e0a772fbc 100755 --- a/src/content/theming/advanced.md +++ b/src/content/theming/advanced.md @@ -1,10 +1,14 @@ --- +initialTab: 'preview' +inlineHtmlPreviews: true previousText: 'Color Generator' previousUrl: '/docs/layout/color-generator' nextText: 'Publishing an app' nextUrl: '/docs/publishing/app-store' --- + + # Advanced Theming

@@ -15,11 +19,19 @@ CSS-based theming enables apps to customize the colors quickly by loading a CSS Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic. -A color can be applied to an Ionic component via the `color` attribute. Notice in the example below that the button with the `color` set to `light` has a different background and text color. +A color can be applied to an Ionic component in order to change the default colors using the `color` attribute. Notice in the buttons below that the text and background changes based on the `color` set. When there is no `color` set on the button it uses the `primary` color by default. ```html Default +Primary +Secondary +Tertiary +Success +Warning +Danger Light +Medium +Dark ``` ### Layered Colors @@ -28,6 +40,8 @@ Each color consists of the following properties: a `base`, `contrast`, `shade`, +### Modifying Colors + To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to `#006600` (green), set the following CSS properties: ```css @@ -47,8 +61,52 @@ When `secondary` is applied to a button, not only is the base color (`#006600`) Not sure how to get the variation colors from the base color? Try out our [Color Generator](/docs/theming/color-generator) that calculates all of the variations and provides code to copy/paste into an app! -See the [CSS Variables documentation](/docs/theming/css-variables#setting-values) for more information on how to set CSS variables. +See the [CSS Variables documentation](/docs/theming/css-variables) for more information on CSS variables. + +### Adding Colors + +To add a new color, create a class that defines all of the variations using CSS variables for that color. The class should be written in the format `.ion-color-{COLOR}` where `{COLOR}` is the name of the color to add. For example, to add a color called `favorite`, the following class could be added: + +```css +.ion-color-favorite { + --ion-color-base: #69bb7b; + --ion-color-base-rgb: 105,187,123; + --ion-color-contrast: #ffffff; + --ion-color-contrast-rgb: 255,255,255; + --ion-color-shade: #5ca56c; + --ion-color-tint: #78c288; +} +``` + +Once the class is added, the color can be used on any Ionic component that supports the `color` property. An example of using the `favorite` color on an Ionic button is below. + +```html +Favorite +``` + +It's important to note that adding the class above does not automatically create the Ionic CSS variables for use in an application's stylesheets. This means that the variations beginning with `--ion-color-favorite` **do not exist** by adding the `.ion-color-favorite` class. These should be declared separately for use in an application: + +```css +:root { + --ion-color-favorite: #69bb7b; + --ion-color-favorite-rgb: 105,187,123; + --ion-color-favorite-contrast: #ffffff; + --ion-color-favorite-contrast-rgb: 255,255,255; + --ion-color-favorite-shade: #5ca56c; + --ion-color-favorite-tint: #78c288; +} +``` + +Now the `favorite` color can be used in CSS like below to set the `background` and `color` on a `div`. + +```css +div { + background: var(--ion-color-favorite); + color: var(--ion-color-favorite-contrast); +} +``` +See the [CSS Variables documentation](/docs/theming/css-variables) for more information on CSS variables. ## Themes diff --git a/src/styles/pages/theming.scss b/src/styles/pages/theming.scss index e69de29bb2d..3b7f2a34dbc 100644 --- a/src/styles/pages/theming.scss +++ b/src/styles/pages/theming.scss @@ -0,0 +1,8 @@ +.ion-color-favorite { + --ion-color-base: #69bb7b; + --ion-color-base-rgb: 105,187,123; + --ion-color-contrast: #ffffff; + --ion-color-contrast-rgb: 255,255,255; + --ion-color-shade: #5ca56c; + --ion-color-tint: #78c288; +} \ No newline at end of file