Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: rename themes to palettes #3521

Merged
merged 11 commits into from
Mar 20, 2024
Merged

docs: rename themes to palettes #3521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
859b5b8
feat: rename themes to palettes
sean-perkins Mar 13, 2024
08f8ed4
Merge remote-tracking branch 'origin/main' into sp/theme-palettes
sean-perkins Mar 20, 2024
95d21be
update package lock
liamdebeasi Mar 20, 2024
c150031
chore: load from next tag
liamdebeasi Mar 20, 2024
7071623
fix: use correct step color tokens
liamdebeasi Mar 20, 2024
f737853
docs: system dark theme demo works
liamdebeasi Mar 20, 2024
daacac0
docs: class dark demo works
liamdebeasi Mar 20, 2024
e7dab22
docs: high contrast always demo works
liamdebeasi Mar 20, 2024
3259b70
docs: class demo works
liamdebeasi Mar 20, 2024
c9732b6
docs: system demo works
liamdebeasi Mar 20, 2024
d8ed60e
lint
liamdebeasi Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions docs/theming/dark-mode.md
View file
Open in desktop

Large diffs are not rendered by default.

118 changes: 59 additions & 59 deletions docs/theming/high-contrast-mode.md
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/theming/themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Ionic provides several global variables that are used throughout components to c

## Application Colors

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

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.

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

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.

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.
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.

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.

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).
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).

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.

Expand Down
4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html>

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

<body>
Expand Down
4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/html/index.withContent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html>

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

<body>
Expand Down
76 changes: 38 additions & 38 deletions static/code/stackblitz/v8/react/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 38 additions & 38 deletions static/code/stackblitz/v8/vue/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions static/usage/v8/theming/always-dark-mode/angular/styles_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@
@import '@ionic/angular/css/display.css';

/**
* Ionic Dark Theme
* Ionic Dark Palette
* -----------------------------------------------------
* For more information, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/

@import '@ionic/angular/css/themes/dark.always.css';
/* @import '@ionic/angular/css/themes/dark.class.css'; */
/* @import '@ionic/angular/css/themes/dark.system.css'; */
@import '@ionic/angular/css/palettes/dark.always.css';
/* @import '@ionic/angular/css/palettes/dark.class.css'; */
/* @import '@ionic/angular/css/palettes/dark.system.css'; */
```
2 changes: 1 addition & 1 deletion static/usage/v8/theming/always-dark-mode/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/themes/dark.always.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.always.css" />
</head>

<body>
Expand Down
Loading