Skip to content

Commit b5cbb23

Browse files
jaredcbaumjaredcbaum
committed
chore(): components -> theme
1 parent 205293c commit b5cbb23

File tree

362 files changed

+1080
-1153
lines changed

Some content is hidden

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

362 files changed

+1080
-1153
lines changed

‎docs/api.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
template: api-index
33
---
44

5-
import APIList from '@site/src/components/APIList';
5+
import APIList from '@theme/APIList';
66

77
# API Index
88

99
Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
1010

11-
<APIList/>
11+
<APIList/>

‎docs/components.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ hide_table_of_contents: true
66
container_width: 64rem
77
---
88

9-
import DocsCard from '@site/src/components/DocsCard';
10-
import DocsCards from '@site/src/components/DocsCards';
9+
import DocsCard from '@theme/DocsCard';
10+
import DocsCards from '@theme/DocsCards';
1111

1212
# UI Components
1313

‎docs/deployment/progressive-web-app.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ description: 'Ionic Applications are built with web technologies that run just a
44
sidebar_label: Progressive Web App (PWA)
55
---
66

7-
import DocsCard from '@site/src/components/DocsCard';
8-
import DocsCards from '@site/src/components/DocsCards';
7+
import DocsCard from '@theme/DocsCard';
8+
import DocsCards from '@theme/DocsCards';
99

1010
# Deploying a Progressive Web App
1111

‎docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import DocsButton from '@site/src/components/DocsButton';
1+
import DocsButton from '@theme/DocsButton';
22

33
# Creating a Photo Gallery with Device Storage
44

‎docs/developing/keyboard.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Codepen from '@site/src/components/Codepen';
1+
import Codepen from '@theme/Codepen';
22
import Tabs from '@theme/Tabs';
33
import TabItem from '@theme/TabItem';
44

‎docs/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ demoUrl: https://ionic-docs-demo.herokuapp.com/
99
demoSourceUrl: https://github.com/ionic-team/docs-demo
1010
---
1111

12-
import DocsCard from '@site/src/components/DocsCard';
13-
import DocsCards from '@site/src/components/DocsCards';
12+
import DocsCard from '@theme/DocsCard';
13+
import DocsCards from '@theme/DocsCards';
1414

1515
# Ionic Framework
1616

‎docs/intro/first-app.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
hide_table_of_contents: true
33
---
44

5-
import DocsCard from '@site/src/components/DocsCard';
6-
import DocsCards from '@site/src/components/DocsCards';
5+
import DocsCard from '@theme/DocsCard';
6+
import DocsCards from '@theme/DocsCards';
77

88
# Build Your First App Tutorial
99

‎docs/intro/next.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import DocsCard from '@site/src/components/DocsCard';
2-
import DocsCards from '@site/src/components/DocsCards';
1+
import DocsCard from '@theme/DocsCard';
2+
import DocsCards from '@theme/DocsCards';
33

44
# Next Steps
55

‎docs/layout/structure.md

+9-20
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
initialTab: 'preview'
33
---
44

5-
import DocsCard from '@site/src/components/DocsCard';
6-
import DocsCards from '@site/src/components/DocsCards';
5+
import DocsCard from '@theme/DocsCard';
6+
import DocsCards from '@theme/DocsCards';
77

88
# Structure
99

@@ -61,7 +61,7 @@ As you can see, a toolbar in a header appears above the content. Sometimes an ap
6161

6262
### Header and Footer
6363

64-
These can also be combined on one page to have a toolbar above *and* below the content.
64+
These can also be combined on one page to have a toolbar above _and_ below the content.
6565

6666
```html
6767
<ion-app>
@@ -134,15 +134,11 @@ A standard layout among mobile apps includes the ability to toggle a side [menu]
134134

135135
<ion-content>
136136
<ion-list>
137-
<ion-list-header>
138-
Navigate
139-
</ion-list-header>
137+
<ion-list-header> Navigate </ion-list-header>
140138
<ion-menu-toggle auto-hide="false">
141139
<ion-item button>
142-
<ion-icon slot="start" name='home'></ion-icon>
143-
<ion-label>
144-
Home
145-
</ion-label>
140+
<ion-icon slot="start" name="home"></ion-icon>
141+
<ion-label> Home </ion-label>
146142
</ion-item>
147143
</ion-menu-toggle>
148144
</ion-list>
@@ -176,14 +172,12 @@ A standard layout among mobile apps includes the ability to toggle a side [menu]
176172

177173
You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-menu-layout) and for React [here](https://stackblitz.com/edit/ionic-react-menu).
178174

179-
180175
## Split Pane Layout
181176

182177
A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
183178

184179
By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
185180

186-
187181
```html
188182
<ion-app>
189183
<ion-split-pane when="sm" content-id="main-content">
@@ -196,15 +190,11 @@ By default, the split pane view will show when the screen is larger than `768px`
196190

197191
<ion-content>
198192
<ion-list>
199-
<ion-list-header>
200-
Navigate
201-
</ion-list-header>
193+
<ion-list-header> Navigate </ion-list-header>
202194
<ion-menu-toggle auto-hide="false">
203195
<ion-item button>
204-
<ion-icon slot="start" name='home'></ion-icon>
205-
<ion-label>
206-
Home
207-
</ion-label>
196+
<ion-icon slot="start" name="home"></ion-icon>
197+
<ion-label> Home </ion-label>
208198
</ion-item>
209199
</ion-menu-toggle>
210200
</ion-list>
@@ -228,7 +218,6 @@ By default, the split pane view will show when the screen is larger than `768px`
228218
<h1>Main Content</h1>
229219
</ion-content>
230220
</div>
231-
232221
</ion-split-pane>
233222
</ion-app>
234223
```

‎docs/native.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ hide_table_of_contents: true
66
container_width: 58rem
77
---
88

9-
import DocsCard from '@site/src/components/DocsCard';
10-
import DocsCards from '@site/src/components/DocsCards';
9+
import DocsCard from '@theme/DocsCard';
10+
import DocsCards from '@theme/DocsCards';
1111
import { Helmet } from "react-helmet";
1212

1313
# Native APIs

‎docs/react.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ image: /img/meta/open-graph.png
77
description: Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
88
---
99

10-
import DocsCard from '@site/src/components/DocsCard';
11-
import DocsCards from '@site/src/components/DocsCards';
10+
import DocsCard from '@theme/DocsCard';
11+
import DocsCards from '@theme/DocsCards';
1212

1313
<div class='flex main-flex'>
1414
<div class="pull-left">

‎docs/reference/release-notes.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
title: Release Notes
33
---
44

5-
import ReleaseNotes from '@site/src/components/ReleaseNotes';
5+
import ReleaseNotes from '@theme/ReleaseNotes';
66

77
<ReleaseNotes />

‎docs/studio.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
hide_table_of_contents: true
33
---
44

5-
import DocsCard from '@site/src/components/DocsCard';
6-
import DocsCards from '@site/src/components/DocsCards';
5+
import DocsCard from '@theme/DocsCard';
6+
import DocsCards from '@theme/DocsCards';
77

88
# Welcome to Studio
99

1010
Ionic Studio is a fast and easy app builder that helps teams build and prototype apps with minimal coding.
1111

12-
Studio is designed to integrate into an existing developer workflow, rather than replace it, enabling developers and architects to build visually *or* drop down to code using their favorite tools.
12+
Studio is designed to integrate into an existing developer workflow, rather than replace it, enabling developers and architects to build visually _or_ drop down to code using their favorite tools.
1313

1414
Studio
1515
fully supports bringing code back into the tool, something virtually unheard of in the app development tools market.

‎docs/theming/advanced.md

+51-47
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ initialTab: 'preview'
44
inlineHtmlPreviews: true
55
---
66

7-
import CodeColor from '@site/src/components/CodeColor';
7+
import CodeColor from '@theme/CodeColor';
88

99
# Advanced Theming
1010

@@ -23,17 +23,25 @@ The `theme-color` meta controls the interface theme when running in a web browse
2323
The example below demonstrates how to use `theme-color` to style the browser interface on iOS 15.
2424

2525
```html
26-
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
27-
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
26+
<meta
27+
name="theme-color"
28+
media="(prefers-color-scheme: light)"
29+
content="#3880ff"
30+
/>
31+
<meta
32+
name="theme-color"
33+
media="(prefers-color-scheme: dark)"
34+
content="#eb445a"
35+
/>
2836
```
2937

30-
| Light Mode | Dark Mode |
31-
| ---------- | --------- |
38+
| Light Mode | Dark Mode |
39+
| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
3240
| <figure><img alt="Application with theme-color meta in light mode" src="/img/theming/theme-color-light.png" /></figure> | <figure><img alt="Application with theme-color meta in dark mode" src="/img/theming/theme-color-dark.png" /></figure> |
3341

3442
The `theme-color` meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.
3543

36-
Safari on iOS 15 and macOS will automatically determine an appropriate theme color to use, but adding this meta tag is useful if you need more control over the theme.
44+
Safari on iOS 15 and macOS will automatically determine an appropriate theme color to use, but adding this meta tag is useful if you need more control over the theme.
3745

3846
There is a small subset of colors that browsers will not use as they interfere with the browser interface. For example, setting `content="red"` will not work in Safari on macOS because that color interferes with the red close button in the toolbar. If you run into this situation, try altering your color selection slightly.
3947

@@ -49,34 +57,32 @@ While the application and stepped variables in the themes section are useful for
4957

5058
### Application Variables
5159

52-
| Name | Description |
53-
| -----------------------------------------| ------------------------------------------------------------------------------------------------|
54-
| `--ion-font-family` | Font family of the app |
55-
| `--ion-statusbar-padding` | Statusbar padding top of the app |
56-
| `--ion-safe-area-top` | Adjust the safe area inset top of the app |
57-
| `--ion-safe-area-right` | Adjust the safe area inset right of the app |
58-
| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app |
59-
| `--ion-safe-area-left` | Adjust the safe area inset left of the app |
60-
| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) |
61-
| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) |
60+
| Name | Description |
61+
| ------------------------- | ------------------------------------------------------------------------------------------ |
62+
| `--ion-font-family` | Font family of the app |
63+
| `--ion-statusbar-padding` | Statusbar padding top of the app |
64+
| `--ion-safe-area-top` | Adjust the safe area inset top of the app |
65+
| `--ion-safe-area-right` | Adjust the safe area inset right of the app |
66+
| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app |
67+
| `--ion-safe-area-left` | Adjust the safe area inset left of the app |
68+
| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) |
69+
| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) |
6270

6371
### Grid Variables
6472

65-
| Name | Description |
66-
| -----------------------------------------| ---------------------------------------------------|
67-
| `--ion-grid-columns` | Number of columns in the grid |
68-
| `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints |
69-
| `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints |
70-
| `--ion-grid-padding-md` | Padding of the grid for md breakpoints |
71-
| `--ion-grid-padding-lg` | Padding of the grid for lg breakpoints |
72-
| `--ion-grid-padding-xl` | Padding of the grid for xl breakpoints |
73-
| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
74-
| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
75-
| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
76-
| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
77-
| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
78-
79-
73+
| Name | Description |
74+
| ------------------------------ | ---------------------------------------------- |
75+
| `--ion-grid-columns` | Number of columns in the grid |
76+
| `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints |
77+
| `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints |
78+
| `--ion-grid-padding-md` | Padding of the grid for md breakpoints |
79+
| `--ion-grid-padding-lg` | Padding of the grid for lg breakpoints |
80+
| `--ion-grid-padding-xl` | Padding of the grid for xl breakpoints |
81+
| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
82+
| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
83+
| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
84+
| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
85+
| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
8086

8187
## Known Limitations with Variables
8288

@@ -90,14 +96,14 @@ There is not yet full <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/
9096
--violet: #8a2be2;
9197

9298
/* rgba(#8a2be2, .5) */
93-
color: rgba(var(--violet), .5) /* ERROR! Doesn't support hex. */
99+
color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
94100
}
95101

96102
.working {
97103
--violet-rgb: 138, 43, 226;
98104

99105
/* rgba(138, 43, 226, .5) */
100-
color: rgba(var(--violet-rgb), .5) /* WORKS! */
106+
color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
101107
}
102108
```
103109

@@ -110,12 +116,12 @@ Ionic uses colors with an opacity (alpha) in several components. In order for th
110116
```css
111117
:root {
112118
/* These examples use the same color: sienna. */
113-
--ion-text-color: #a0522d;
114-
--ion-text-color-rgb: 160, 82, 45;
119+
--ion-text-color: #a0522d;
120+
--ion-text-color-rgb: 160, 82, 45;
115121

116122
/* These examples use the same color: lightsteelblue. */
117-
--ion-background-color: #b0c4de;
118-
--ion-background-color-rgb: 176, 196, 222;
123+
--ion-background-color: #b0c4de;
124+
--ion-background-color-rgb: 176, 196, 222;
119125
}
120126
```
121127

@@ -127,7 +133,6 @@ body {
127133
}
128134
```
129135

130-
131136
### Variables in Media Queries
132137

133138
CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) are not currently supported, but there are open drafts to add [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) and [custom environment variables](https://drafts.csswg.org/css-env-1/) that would solve this problem! However, with the current state of support, the following will **not** work:
@@ -142,7 +147,6 @@ CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CS
142147
}
143148
```
144149

145-
146150
### Modifying CSS Color Variables
147151

148152
While it is possible to easily alter a color in Sass using its built-in functions, it is currently not as easy to modify colors set in CSS Variables. This can be accomplished in CSS by splitting the [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) channels and modifying each value, but it is complex and has missing functionality.
@@ -163,14 +167,14 @@ $text-lighter: lighten($text, 15);
163167

164168
After running through the Sass compiler, the colors will have the following values:
165169

166-
| Variable | Value |
167-
| --------------------| ----------------------------------------------------------|
168-
| `$background` | <CodeColor mode="md" value="#3880ff"></CodeColor> |
169-
| `$background-shade` | <CodeColor mode="md" value="#3171e0"></CodeColor> |
170-
| `$background-tint` | <CodeColor mode="md" value="#4c8dff"></CodeColor> |
171-
| `$text` | <CodeColor mode="md" value="#444444"></CodeColor> |
172-
| `$text-darker` | <CodeColor mode="md" value="#1e1e1e"></CodeColor> |
173-
| `$text-lighter` | <CodeColor mode="md" value="#6a6a6a"></CodeColor> |
170+
| Variable | Value |
171+
| ------------------- | ------------------------------------------------- |
172+
| `$background` | <CodeColor mode="md" value="#3880ff"></CodeColor> |
173+
| `$background-shade` | <CodeColor mode="md" value="#3171e0"></CodeColor> |
174+
| `$background-tint` | <CodeColor mode="md" value="#4c8dff"></CodeColor> |
175+
| `$text` | <CodeColor mode="md" value="#444444"></CodeColor> |
176+
| `$text-darker` | <CodeColor mode="md" value="#1e1e1e"></CodeColor> |
177+
| `$text-lighter` | <CodeColor mode="md" value="#6a6a6a"></CodeColor> |
174178

175179
However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
176180

‎docs/theming/basics.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: 'The definition of theming apps just got simplified. Ionic Framewor
44
sidebar_label: Basics
55
---
66

7-
import ColorAccordion from '@site/src/components/ColorAccordion';
7+
import ColorAccordion from '@theme/ColorAccordion';
88

99
# Theming Basics
1010

‎docs/theming/color-generator.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ hide_table_of_contents: true
33
demoUrl: /docs/demos/color-generator/index.html
44
---
55

6-
import ColorGenerator from '@site/src/components/ColorGenerator';
6+
import ColorGenerator from '@theme/ColorGenerator';
77

88
# Color Generator
99

0 commit comments

Comments
 (0)