Skip to content

Commit b0663ab

Browse files
jaredcbaumjaredcbaum
authored
Feat/style changes (ionic-team#2013)
* chore(): bump deps * chore(): Switch to recommended docusaurus tsconfig * chore(): Remove Logo from navbar * feat(): Swizzle components to make layout fit * feat(): framework picker basics done * chore(): bump deps * chore(): Switch to recommended docusaurus tsconfig * chore(): Remove Logo from navbar * feat(): Swizzle components to make layout fit * feat(): framework picker basics done * feat(): Add local storage hook, framework selector working globally * fix(build scripts): Allow frontmatter numbers, feat(table of contents): 2 positions and frontmatter toggle, other layout changes * feat(): More styles fixes and functionality * fix(): Styles * chore(): Bump theme dep * feat(api): Add inlineTOC, chore(): Layout and style changes * feat(search): Swizzled and styled, fix(code): no dark border * fix(tabs): Framework switcher working, feat(navbar): Active styles, other style fixes * feat(): Custom Version Selector, inline code styles, etc * feat(): Admonition styles * fix(): Navbar height * fix(): Small style changes * fix(uselocalstorage): Check environment * fix(useLocalStorage hook): return initial value on server * fix(): versionselector and framework selector styles * fix(): Major layout and styles changes, hideable navbar broken * fix(): restore container to window * chore(): split out and purged styles and tokens, toc styles, navbar changes * feat(): Navbar Icons section, chore(): Move icons to theme, theme toggle styles, other styles * fix(): Sidebar working on mobile * chore(): inline TOC styles updated, other styles * chore(): Style updates for admonitions, markdown, etc. * chore(): Table styles, submit an edit link in toc, etc styles * fix(docs-cards): Swap image on hover, move to module styles, encapsulation pill links, other styles * feat(code tabs): Styles done * feat(): Theming changes * chore(): Dial in dark mode styles * chore(): Fix markdown spacing, code colors and style, and broken image * fix(): Merge icon files, sidebar/navbar rem -> px, etc * chore(): Dial in dark mode styles * chore(): Local docusaurus theme * feat(): Sidebar Toggle, Backdrop, Sidebar State in preferences, chore(): Split out code to local theme * chore(): Small style changes
1 parent 30ab951 commit b0663ab

File tree

84 files changed

+6216
-1065
lines changed

Some content is hidden

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

84 files changed

+6216
-1065
lines changed

‎docs/components.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: UI Components | User Interface Application Building Components
33
description: Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface.
44
sidebar_label: UI Components
55
hide_table_of_contents: true
6+
container_width: 64rem
67
---
78

89
import DocsCard from '@site/src/components/DocsCard';

‎docs/developing/android.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Once installed, open Android Studio. The IDE should detect that the Android SDK
2929
By default, the latest stable SDK Platform is installed, which includes a collection of packages required to target that version of Android.
3030

3131
To install system images and other minor SDK platform packages, you may need to ensure **Show Package Details** is checked at the bottom of the SDK Manager.
32-
<img alt="Android Studio SDK Manager" src="/img/installation/android-studio-sdk.png" />
32+
![Android Studio SDK Manager](/img/installation/android-studio-sdk.png)
3333

3434
For future reference, the Android SDK can be managed with Android Studio in the **Configure** &raquo; **SDK Manager** menu of the Android Studio welcome screen or **Tools** &raquo; **SDK Manager** inside Android projects.
3535

@@ -107,54 +107,54 @@ Unfortunately, Cordova is not compatible with the latest version of Java.
107107

108108
<a href="https://gradle.org/" target="_blank">Gradle</a> is the build tool used in Android apps and must be installed separately. See the <a href="https://gradle.org/install/" target="_blank">install page</a> for details.
109109

110-
111110
## Project Setup
112111

113112
Before apps can be deployed to Android simulators and devices, the native project must be configured.
114113

115114
1. **Generate the native project, if it does not already exist.**
116115

117-
For Capacitor, run the following:
116+
For Capacitor, run the following:
118117

119-
```shell
120-
$ ionic capacitor add android
121-
```
118+
```shell
119+
$ ionic capacitor add android
120+
```
122121

123-
For Cordova, run the following:
122+
For Cordova, run the following:
124123

125-
```shell
126-
$ ionic cordova prepare android
127-
```
124+
```shell
125+
$ ionic cordova prepare android
126+
```
128127

129128
2. **Set the [Package ID](../reference/glossary.md#package-id).**
130129

131-
For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
132-
133-
For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
130+
For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
134131

132+
For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
135133

136134
## Running with Capacitor
137135

138136
Capacitor uses Android Studio to build and run apps to simulators and devices.
139137

140138
1. **Develop the Ionic app and sync it to the native project.**
141139

142-
With each meaningful change, Ionic apps must be built into web assets before the change can appear on Android simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
140+
With each meaningful change, Ionic apps must be built into web assets before the change can appear on Android simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
143141

144-
```shell
145-
$ ionic capacitor copy android
146-
```
142+
```shell
143+
$ ionic capacitor copy android
144+
```
147145

148146
2. **In Android Studio, click the Run button and then select the target simulator or device.**
149147

150148
![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png)
151149

152150
### Live reload
151+
153152
To start a live-reload server run the following command.
154153

155154
```shell
156155
$ ionic capacitor run android -l --host=YOUR_IP_ADDRESS
157156
```
157+
158158
When running on a device make sure the device and your development machine are connected to the same network.
159159

160160
## Running with Cordova

‎docs/index.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,19 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
2121
<intro-end />
2222

2323
<DocsCards>
24-
<DocsCard header="Installation Guide" href="intro/cli" icon="/icons/guide-installation-icon.svg" hover-icon="/icons/guide-installation-icon-hover.svg">
24+
<DocsCard header="Installation Guide" href="intro/cli" icon="/icons/guide-installation-icon.svg" hoverIcon="/icons/guide-installation-icon-hover.svg">
2525
<p>Step-by-step guides to setting up your system and installing the framework.</p>
2626
</DocsCard>
2727

28-
<DocsCard header="UI Components" href="components" icon="/icons/guide-components-icon.svg" hover-icon="/icons/guide-components-icon-hover.svg">
28+
<DocsCard header="UI Components" href="components" icon="/icons/guide-components-icon.svg" hoverIcon="/icons/guide-components-icon-hover.svg">
2929
<p>Dive into Ionic Framework's beautifully designed UI component library.</p>
3030
</DocsCard>
3131

32-
<DocsCard header="Native Functionality" href="native" icon="/icons/guide-native-icon.svg" hover-icon="/icons/guide-native-icon-hover.svg">
32+
<DocsCard header="Native Functionality" href="native" icon="/icons/guide-native-icon.svg" hoverIcon="/icons/guide-native-icon-hover.svg">
3333
<p>Integrate native device plugins, like Bluetooth, Maps, HealthKit, and more.</p>
3434
</DocsCard>
3535

36-
<DocsCard header="Theming" href="theming/basics" icon="/icons/guide-theming-icon.svg" hover-icon="/icons/guide-theming-icon-hover.svg">
36+
<DocsCard header="Theming" href="theming/basics" icon="/icons/guide-theming-icon.svg" hoverIcon="/icons/guide-theming-icon-hover.svg">
3737
<p>Learn to easily customize and modify your Ionic app's visual design to fit your brand.</p>
3838
</DocsCard>
3939
</DocsCards>

‎docs/native.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Native APIs - Build Open-Source Native Application Experiences
33
description: Build native application experiences with open-source Native APIs. Easily add native device functionality to any Ionic app with Capacitor or Cordova.
44
sidebar_label: Native APIs
55
hide_table_of_contents: true
6+
container_width: 58rem
67
---
78

89
import DocsCard from '@site/src/components/DocsCard';

‎docusaurus-theme/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎docusaurus-theme/.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": false,
4+
"jsxBracketSameLine": true,
5+
"printWidth": 80,
6+
"proseWrap": "never",
7+
"singleQuote": true,
8+
"trailingComma": "all"
9+
}

‎docusaurus-theme/package-lock.json

+106
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docusaurus-theme/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@ionic-internal/docusaurus-theme",
3+
"version": "4.0.0-0",
4+
"description": "Ionic theme for Docusaurus",
5+
"repository": {
6+
"type": "git",
7+
"url": "git+https://github.com/ionic-team/docusaurus-theme.git"
8+
},
9+
"scripts": {
10+
"test": "echo 'YOLO'",
11+
"shipit": "npx np",
12+
"prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\""
13+
},
14+
"license": "MIT",
15+
"main": "src/index.js",
16+
"peerDependencies": {
17+
"@docusaurus/core": ">=2.0.0-beta.0",
18+
"react": ">=16.8.0",
19+
"react-dom": ">=16.8.0"
20+
},
21+
"devDependencies": {
22+
"@ionic-internal/ionic-ds": "^8.0.0-1",
23+
"prettier": "^2.2.1"
24+
}
25+
}

‎docusaurus-theme/src/css/components/_admonition.scss

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
html[data-theme='light'] {
2+
--admonition-note-c-bg: var(--c-yellow-10);
3+
--admonition-info-c-bg: var(--c-blue-0);
4+
--admonition-tip-c-bg: var(--c-green-10);
5+
--admonition-caution-c-bg: var(--c-orange-10);
6+
--admonition-danger-c-bg: var(--c-red-0);
7+
8+
--admonition-code-note-c-bg: var(--c-yellow-30);
9+
--admonition-code-info-c-bg: var(--c-blue-10);
10+
--admonition-code-tip-c-bg: var(--c-green-20);
11+
--admonition-code-caution-c-bg: var(--c-orange-20);
12+
--admonition-code-danger-c-bg: var(--c-red-10);
13+
}
14+
15+
html[data-theme='dark'] {
16+
--admonition-note-c-bg: #241800;
17+
--admonition-info-c-bg: #000d24;
18+
--admonition-tip-c-bg: #00240a;
19+
--admonition-caution-c-bg: #240b00;
20+
--admonition-danger-c-bg: #240002;
21+
22+
--admonition-code-note-c-bg: #3d2900;
23+
--admonition-code-info-c-bg: #00163d;
24+
--admonition-code-tip-c-bg: #003d11;
25+
--admonition-code-caution-c-bg: #3d1200;
26+
--admonition-code-danger-c-bg: #3d0003;
27+
}
28+
29+
:root {
30+
--admonition-bar-note-c-bg: var(--c-yellow-80);
31+
--admonition-bar-info-c-bg: var(--c-blue-80);
32+
--admonition-bar-tip-c-bg: var(--c-green-80);
33+
--admonition-bar-caution-c-bg: var(--c-orange-80);
34+
--admonition-bar-danger-c-bg: var(--c-red-60);
35+
36+
--admonition-link-note-c: var(--c-yellow-90);
37+
--admonition-link-info-c: var(--c-blue-90);
38+
--admonition-link-tip-c: var(--c-green-90);
39+
--admonition-link-caution-c: var(--c-orange-90);
40+
--admonition-link-danger-c: var(--c-red-90);
41+
}
42+
43+
.admonition {
44+
position: relative;
45+
border: none;
46+
47+
--ifm-alert-color: var(--ifm-font-color-base);
48+
--ifm-alert-padding-horizontal: 2rem;
49+
--ifm-alert-padding-vertical: 1.5rem;
50+
51+
.admonition-heading h5 {
52+
text-transform: unset;
53+
54+
&:first-letter {
55+
text-transform: uppercase;
56+
}
57+
}
58+
59+
.admonition-content {
60+
p {
61+
a {
62+
color: var(--admonition-link-c);
63+
text-decoration: underline;
64+
}
65+
66+
code {
67+
background: var(--admonition-code-c-bg);
68+
}
69+
}
70+
}
71+
72+
&-icon {
73+
display: none;
74+
}
75+
76+
&-heading {
77+
font-size: 1rem;
78+
line-height: 1.6;
79+
}
80+
81+
&::before {
82+
content: '';
83+
position: absolute;
84+
z-index: 2;
85+
left: 0;
86+
top: 0;
87+
bottom: 0;
88+
width: 5px;
89+
background: var(--admonition-bar-c-bg);
90+
border-radius: 4px 0 0 4px;
91+
}
92+
&-note {
93+
--ifm-alert-background-color: var(--admonition-note-c-bg);
94+
--admonition-bar-c-bg: var(--admonition-bar-note-c-bg);
95+
--admonition-code-c-bg: var(--admonition-code-note-c-bg);
96+
--admonition-link-c: var(--admonition-link-note-c);
97+
}
98+
&-info {
99+
--ifm-alert-background-color: var(--admonition-info-c-bg);
100+
--admonition-bar-c-bg: var(--admonition-bar-info-c-bg);
101+
--admonition-code-c-bg: var(--admonition-code-info-c-bg);
102+
--admonition-link-c: var(--admonition-link-info-c);
103+
}
104+
&-tip {
105+
--ifm-alert-background-color: var(--admonition-tip-c-bg);
106+
--admonition-bar-c-bg: var(--admonition-bar-tip-c-bg);
107+
--admonition-code-c-bg: var(--admonition-code-tip-c-bg);
108+
--admonition-link-c: var(--admonition-link-tip-c);
109+
}
110+
&-caution {
111+
--ifm-alert-background-color: var(--admonition-caution-c-bg);
112+
--admonition-bar-c-bg: var(--admonition-bar-caution-c-bg);
113+
--admonition-code-c-bg: var(--admonition-code-caution-c-bg);
114+
--admonition-link-c: var(--admonition-link-caution-c);
115+
}
116+
&-danger {
117+
--ifm-alert-background-color: var(--admonition-danger-c-bg);
118+
--admonition-bar-c-bg: var(--admonition-bar-danger-c-bg);
119+
--admonition-code-c-bg: var(--admonition-code-danger-c-bg);
120+
--admonition-link-c: var(--admonition-link-danger-c);
121+
}
122+
}
123+
124+
.alert--secondary {
125+
color: var(--ifm-font-color-base);
126+
}

0 commit comments

Comments
 (0)