Skip to content

Commit a29c3e8

Browse files
sean-perkinsliamdebeasi
sean-perkins
and
liamdebeasi
authored
docs: rename themes to palettes (#3521)
 Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
1 parent 85a0ea9 commit a29c3e8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+540
-543
lines changed

‎docs/theming/dark-mode.md‎

Lines changed: 43 additions & 43 deletions
Large diffs are not rendered by default.

‎docs/theming/high-contrast-mode.md‎

Lines changed: 59 additions & 59 deletions
Large diffs are not rendered by default.

‎docs/theming/themes.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Ionic provides several global variables that are used throughout components to c
1717

1818
## Application Colors
1919

20-
The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.
20+
The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand.
2121

2222
It is important to note that the background and text color variables also require a rgb variable to be set in <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
2323

@@ -54,11 +54,11 @@ It is important to note that the background and text color variables also requir
5454

5555
After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.
5656

57-
While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
57+
While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker palette.
5858

5959
In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be <CodeColor color="#404040">#404040</CodeColor>, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using <CodeColor color="#f2f2f2">#f2f2f2</CodeColor>. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.
6060

61-
Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the [high contrast theme](./high-contrast-mode).
61+
Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the [high contrast palette](./high-contrast-mode).
6262

6363
By default, the Ionic text stepped colors start at the default text color value <CodeColor color="#000000">#000000</CodeColor> and mix with the background color value <CodeColor color="#ffffff">#ffffff</CodeColor> using an increasing percentage. The Ionic background stepped colors start at the default background color value <CodeColor color="#ffffff">#ffffff</CodeColor> and mix with the text color value <CodeColor color="#000000">#000000</CodeColor> using an increasing percentage. The full list of stepped colors is shown in the generator below.
6464

‎static/code/stackblitz/v8/html/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<html>
22

33
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/ionic.bundle.css" />
4+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
5+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
66
</head>
77

88
<body>

‎static/code/stackblitz/v8/html/index.withContent.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<html>
22

33
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/ionic.bundle.css" />
4+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
5+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
66
</head>
77

88
<body>

‎static/code/stackblitz/v8/react/package-lock.json‎

Lines changed: 38 additions & 38 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/code/stackblitz/v8/vue/package-lock.json‎

Lines changed: 38 additions & 38 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/usage/v8/theming/always-dark-mode/angular/styles_css.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727
@import '@ionic/angular/css/display.css';
2828

2929
/**
30-
* Ionic Dark Theme
30+
* Ionic Dark Palette
3131
* -----------------------------------------------------
3232
* For more information, please see:
3333
* https://ionicframework.com/docs/theming/dark-mode
3434
*/
3535

36-
@import '@ionic/angular/css/themes/dark.always.css';
37-
/* @import '@ionic/angular/css/themes/dark.class.css'; */
38-
/* @import '@ionic/angular/css/themes/dark.system.css'; */
36+
@import '@ionic/angular/css/palettes/dark.always.css';
37+
/* @import '@ionic/angular/css/palettes/dark.class.css'; */
38+
/* @import '@ionic/angular/css/palettes/dark.system.css'; */
3939
```

‎static/usage/v8/theming/always-dark-mode/demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script src="../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/themes/dark.always.css" />
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.always.css" />
1212
</head>
1313

1414
<body>

0 commit comments

Comments
 (0)