@rdlabo/ionic-theme-ios26 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +133 -0
  2. package/css/ionic-theme-ios26.css +422 -0
  3. package/css/ionic-theme-ios26.css.map +1 -0
  4. package/fesm2022/rdlabo-ionic-theme-ios26.mjs +4 -0
  5. package/fesm2022/rdlabo-ionic-theme-ios26.mjs.map +1 -0
  6. package/index.d.ts +3 -0
  7. package/package.json +22 -0
  8. package/src/assets/ion-button.scss +77 -0
  9. package/src/assets/ion-popover.scss +23 -0
  10. package/src/assets/ion-searchbar.scss +42 -0
  11. package/src/assets/ion-segment.scss +12 -0
  12. package/src/assets/ion-tabs.scss +60 -0
  13. package/src/assets/ios-design-dark.scss +28 -0
  14. package/src/assets/ios-design.scss +131 -0
  15. package/src/assets/ios-talk-room.scss +50 -0
  16. package/src/assets/ios-variables.scss +38 -0
package/README.md ADDED
@@ -0,0 +1,133 @@
1
+ # Ionic Theme iOS26
2
+
3
+ A CSS theme library that applies iOS26 design system to Ionic applications.
4
+
5
+ ## Overview
6
+
7
+ This library provides CSS files to apply the iOS26 design system used in real projects to Ionic applications. It customizes the appearance and behavior of Ionic components based on the latest iOS26 design guidelines.
8
+
9
+ > **⚠️ Under Development**: This library is currently in the development and consideration phase as an OSS project, based on files copied from real projects. We are working on API stability and documentation improvement before full-scale use.
10
+
11
+
12
+ ## Setup
13
+
14
+ > **⚠️ Warning**: This library is under development. API changes and breaking changes may occur before full-scale use.
15
+
16
+ ### 1. Installation
17
+
18
+ ```bash
19
+ npm install @rdlabo/ionic-theme-ios26
20
+ ```
21
+
22
+ ### 2. CSS File Import (Required)
23
+
24
+ Import the theme in your project's main CSS file (e.g., `src/styles.scss`) and set the `--max-safe-area` variable:
25
+
26
+ ```scss
27
+ @import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
28
+
29
+ /* Required: Safe area configuration */
30
+ :root {
31
+ --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
32
+ }
33
+ ```
34
+
35
+ > **Important**: The theme will not work correctly without the `--max-safe-area` setting. This configuration is mandatory.
36
+
37
+ ### 3. Framework-specific Configuration Examples
38
+
39
+ #### For Angular Projects
40
+
41
+ Add CSS file to `angular.json`:
42
+
43
+ ```json
44
+ {
45
+ "styles": [
46
+ "node_modules/@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css"
47
+ ]
48
+ }
49
+ ```
50
+
51
+ **Required**: Set `--max-safe-area` in `src/styles.scss`:
52
+
53
+ ```scss
54
+ :root {
55
+ --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
56
+ }
57
+ ```
58
+
59
+ #### For React Projects
60
+
61
+ Import CSS file in `index.js` or `App.js`:
62
+
63
+ ```javascript
64
+ import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
65
+ ```
66
+
67
+ **Required**: Set `--max-safe-area` in main CSS file:
68
+
69
+ ```css
70
+ :root {
71
+ --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
72
+ }
73
+ ```
74
+
75
+ #### For Vue.js Projects
76
+
77
+ Import CSS file in `main.js`:
78
+
79
+ ```javascript
80
+ import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
81
+ ```
82
+
83
+ **Required**: Set `--max-safe-area` in main CSS file:
84
+
85
+ ```css
86
+ :root {
87
+ --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
88
+ }
89
+ ```
90
+
91
+
92
+ ## Development Status
93
+
94
+ This library is currently in the development and consideration phase. We are working on the following tasks:
95
+
96
+ - [ ] API stabilization
97
+ - [ ] Documentation improvement
98
+ - [ ] Test coverage enhancement
99
+ - [ ] Performance optimization
100
+ - [ ] Community feedback collection
101
+
102
+ ## Developer Information
103
+
104
+ ### Build
105
+
106
+ ```bash
107
+ ng build ionic-theme-ios26
108
+ ```
109
+
110
+ ### Test
111
+
112
+ ```bash
113
+ ng test
114
+ ```
115
+
116
+ ## License
117
+
118
+ MIT License
119
+
120
+ ## Contributing
121
+
122
+ This project is under development. We welcome feedback and suggestions:
123
+
124
+ - Issue reporting
125
+ - Feature requests
126
+ - Documentation improvements
127
+ - Code review participation
128
+
129
+ ## Support
130
+
131
+ - **Under Development**: No formal support is provided
132
+ - **Feedback**: Please report issues on GitHub Issues page
133
+ - **Community**: Participate in developer community discussions
package/css/ionic-theme-ios26.css ADDED
@@ -0,0 +1,422 @@
1
+ @charset "UTF-8";
2
+ :root {
3
+ --system-dark-rgb: 0, 0, 0;
4
+ --system-light-rgb: 255, 255, 255;
5
+ --system-tab-active-rgb: 16, 16, 16;
6
+ --system-shadow-rgb: 224, 224, 224;
7
+ --system-background-rgb: 255, 255, 255;
8
+ --system-edge-rgb: 255, 255, 255;
9
+ }
10
+
11
+ .ion-palette-dark {
12
+ --system-dark-rgb: 255, 255, 255;
13
+ --system-light-rgb: 58, 58, 58;
14
+ --system-tab-active-rgb: 255, 255, 255;
15
+ --system-shadow-rgb: translarent;
16
+ --system-background-rgb: 0, 0, 0;
17
+ --system-edge-rgb: 80, 80, 80;
18
+ }
19
+
20
+ .ios ion-popover {
21
+ --backdrop-opacity: 0.04;
22
+ }
23
+ .ios ion-popover:not(.popover-exclude-content)::part(content) {
24
+ background: rgba(var(--system-light-rgb), 0.6);
25
+ backdrop-filter: saturate(240%) blur(6px);
26
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
27
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
28
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
29
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
30
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
31
+ transition: box-shadow 0.1s ease;
32
+ border-radius: 24px;
33
+ padding: 0;
34
+ }
35
+ .ios ion-popover ion-list {
36
+ background: transparent;
37
+ }
38
+ .ios ion-popover ion-list ion-item {
39
+ --background: transparent;
40
+ }
41
+
42
+ .ios .toolbar-searchbar::part(container) {
43
+ padding-top: 3px;
44
+ padding-bottom: 3px;
45
+ }
46
+ .ios ion-modal ion-searchbar:not(.area-searchbar) .searchbar-input-container {
47
+ margin: 0 6px;
48
+ }
49
+ .ios ion-searchbar:not(.area-searchbar) {
50
+ min-height: 60px;
51
+ padding: 0;
52
+ }
53
+ .ios ion-searchbar:not(.area-searchbar) ion-icon.searchbar-search-icon {
54
+ inset-inline-start: 12px;
55
+ }
56
+ .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container {
57
+ margin: 0 8px 0 16px;
58
+ align-self: center;
59
+ justify-self: center;
60
+ }
61
+ .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container input.searchbar-input {
62
+ min-height: 44px;
63
+ background: rgba(var(--system-light-rgb), 0.4);
64
+ backdrop-filter: saturate(240%) blur(6px);
65
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
66
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
67
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
68
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
69
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
70
+ transition: box-shadow 0.1s ease;
71
+ backdrop-filter: none;
72
+ border-radius: 20px;
73
+ padding-inline-start: 2.4rem !important;
74
+ }
75
+ .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container .searchbar-clear-button {
76
+ padding-inline-end: 2rem !important;
77
+ }
78
+
79
+ .ios app-talk-room .talk-system-message {
80
+ transform: translateY(-80px);
81
+ }
82
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar {
83
+ --border-width: 0;
84
+ --background: transparent;
85
+ }
86
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote {
87
+ position: absolute;
88
+ top: -56px;
89
+ }
90
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item {
91
+ padding: 8px 12px;
92
+ --inner-padding-end: 4px;
93
+ }
94
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar {
95
+ transform: translateX(-10px);
96
+ margin-right: 4px;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ }
101
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar ion-icon {
102
+ font-size: 1.6rem;
103
+ color: var(--ion-color-medium-tint);
104
+ }
105
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item::part(native) {
106
+ background: rgba(var(--system-light-rgb), 0.4);
107
+ backdrop-filter: saturate(240%) blur(6px);
108
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
109
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
110
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
111
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
112
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
113
+ transition: box-shadow 0.1s ease;
114
+ border-radius: 20px;
115
+ }
116
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field {
117
+ transition: width 0.5s ease;
118
+ --padding-start: 16px;
119
+ --padding-end: 16px;
120
+ }
121
+ .ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field label.textarea-wrapper {
122
+ background: rgba(var(--system-light-rgb), 0.4);
123
+ backdrop-filter: saturate(240%) blur(6px);
124
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
125
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
126
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
127
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
128
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
129
+ transition: box-shadow 0.1s ease;
130
+ margin: 8px 8px;
131
+ border-radius: 32px;
132
+ }
133
+
134
+ .ios ion-fab.inner-tab-bar {
135
+ right: calc(16px + var(--ion-safe-area-right, 0px));
136
+ bottom: var(--max-safe-area);
137
+ }
138
+ .ios ion-fab.inner-tab-bar ion-fab-button {
139
+ --background-activated: rgba(var(--system-light-rgb), 0.3);
140
+ }
141
+ .ios ion-fab.inner-tab-bar ion-fab-button::part(native) {
142
+ background: rgba(var(--system-light-rgb), 0.4);
143
+ backdrop-filter: saturate(240%) blur(6px);
144
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
145
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
146
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
147
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
148
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
149
+ transition: box-shadow 0.1s ease;
150
+ color: rgb(var(--system-dark-rgb));
151
+ }
152
+ .ios ion-tab-bar {
153
+ background: rgba(var(--system-light-rgb), 0.4);
154
+ backdrop-filter: saturate(240%) blur(6px);
155
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
156
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
157
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
158
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
159
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
160
+ transition: box-shadow 0.1s ease;
161
+ z-index: 2;
162
+ border-radius: 40px;
163
+ width: calc(100% - 56px - 16px - 16px - 4px - 16px);
164
+ max-width: 400px;
165
+ padding: 2px 2px;
166
+ bottom: var(--max-safe-area);
167
+ left: calc(16px + var(--ion-safe-area-left, 0px));
168
+ position: absolute;
169
+ margin: auto;
170
+ transition: transform 100ms ease-out;
171
+ will-change: transform;
172
+ }
173
+ .ios ion-tab-bar:active {
174
+ transform: scale(1.02);
175
+ }
176
+ .ios ion-tab-bar ion-tab-button {
177
+ background: rgba(var(--system-light-rgb), 0);
178
+ height: auto;
179
+ }
180
+ .ios ion-tab-bar ion-tab-button > ion-icon {
181
+ font-size: 30px;
182
+ }
183
+ .ios ion-tab-bar ion-tab-button::part(native) {
184
+ overflow: visible;
185
+ }
186
+ .ios ion-tab-bar ion-tab-button.tab-selected::part(native) {
187
+ backdrop-filter: blur(7px);
188
+ background: rgba(var(--system-tab-active-rgb), 0.1);
189
+ transition: background 0.2s ease;
190
+ border-radius: 32px;
191
+ }
192
+ .ios ion-tab-bar ion-tab-button.tab-selected.ion-activated::part(native) {
193
+ background: rgba(var(--system-shadow-rgb), 0.02);
194
+ }
195
+
196
+ .ios {
197
+ /**
198
+ * パフォーマンス対策。必ず背景が単色である限りは不要
199
+ */
200
+ }
201
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
202
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native) {
203
+ backdrop-filter: none !important;
204
+ }
205
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
206
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
207
+ .ios ion-buttons.liquid-glass-buttons ion-button {
208
+ max-height: inherit;
209
+ margin: 8px;
210
+ font-size: 1.05rem !important;
211
+ transition: transform 100ms ease-out;
212
+ will-change: transform;
213
+ }
214
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
215
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native),
216
+ .ios ion-buttons.liquid-glass-buttons ion-button::part(native) {
217
+ background: rgba(var(--system-light-rgb), 0.7);
218
+ backdrop-filter: saturate(240%) blur(6px);
219
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
220
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
221
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
222
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
223
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
224
+ transition: box-shadow 0.1s ease;
225
+ border-radius: 25px;
226
+ }
227
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).ion-activated,
228
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.ion-activated,
229
+ .ios ion-buttons.liquid-glass-buttons ion-button.ion-activated {
230
+ transform: scale(1.2);
231
+ box-shadow: none;
232
+ }
233
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline],
234
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline],
235
+ .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline] {
236
+ color: rgba(var(--ion-color-primary-rgb), 1);
237
+ transition: transform 100ms ease-out, color 50ms ease;
238
+ }
239
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native),
240
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native),
241
+ .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native) {
242
+ color: rgba(var(--ion-color-primary-rgb), 0.2);
243
+ }
244
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native)::after,
245
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native)::after,
246
+ .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native)::after {
247
+ transform: scale(1.2);
248
+ background: rgba(var(--system-light-rgb), 0.4);
249
+ backdrop-filter: saturate(240%) blur(6px);
250
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
251
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
252
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
253
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
254
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
255
+ transition: box-shadow 0.1s ease;
256
+ box-shadow: none;
257
+ }
258
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only::part(native), .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only::part(native),
259
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only::part(native),
260
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only::part(native),
261
+ .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only::part(native),
262
+ .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only::part(native) {
263
+ border-radius: 50%;
264
+ width: 44px;
265
+ height: 44px;
266
+ padding: 2px;
267
+ }
268
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon, .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon,
269
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon,
270
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon,
271
+ .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon,
272
+ .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon {
273
+ font-size: 1.4rem !important;
274
+ }
275
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon[name=close-outline], .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon[name=close-outline],
276
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon[name=close-outline],
277
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon[name=close-outline],
278
+ .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon[name=close-outline],
279
+ .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon[name=close-outline] {
280
+ font-size: 2rem !important;
281
+ }
282
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
283
+ .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
284
+ .ios ion-buttons.liquid-glass-buttons ion-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
285
+ padding: 0 16px;
286
+ min-height: 44px;
287
+ }
288
+
289
+ .ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment {
290
+ width: calc(100% - 16px);
291
+ border-radius: 16px;
292
+ }
293
+ .ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment ion-segment-button::part(indicator-background) {
294
+ border-radius: 16px;
295
+ }
296
+
297
+ .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting),
298
+ .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting) {
299
+ opacity: 1;
300
+ }
301
+ .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting)::part(native),
302
+ .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting)::part(native) {
303
+ opacity: 1;
304
+ }
305
+ .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated::part(native),
306
+ .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated::part(native) {
307
+ background: rgba(var(--system-tab-active-rgb), 0.25);
308
+ backdrop-filter: saturate(180%) blur(7px);
309
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
310
+ border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
311
+ transition: box-shadow 0.1s ease;
312
+ }
313
+ .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated ion-icon,
314
+ .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated ion-icon {
315
+ color: rgb(255, 255, 255) !important;
316
+ }
317
+ .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native),
318
+ .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native) {
319
+ color: var(--ion-color-primary-contrast) !important;
320
+ }
321
+
322
+ .ios ion-toast {
323
+ --border-radius: 24px;
324
+ }
325
+ .ios ion-card {
326
+ border-radius: 24px;
327
+ }
328
+ .ios ion-action-sheet {
329
+ --button-color: var(--ion-color-medium);
330
+ }
331
+ .ios .thread-fab ion-fab-button {
332
+ --background-activated: rgba(var(--system-light-rgb), 0.3);
333
+ }
334
+ .ios .thread-fab ion-fab-button::part(native) {
335
+ background: rgba(var(--system-light-rgb), 0.4);
336
+ backdrop-filter: saturate(240%) blur(6px);
337
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
338
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
339
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
340
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
341
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
342
+ transition: box-shadow 0.1s ease;
343
+ color: rgb(var(--system-dark-rgb));
344
+ }
345
+ .ios .thread-fab ion-fab-button ion-icon {
346
+ color: var(--ion-color-medium-shade);
347
+ }
348
+ .ios ion-item.suggest-seeking {
349
+ --padding-start: 16px !important;
350
+ }
351
+ .ios .can-go-back ion-header ion-toolbar:not(.md):first-child,
352
+ .ios .enable-back-button ion-header ion-toolbar:not(.md):first-child {
353
+ --border-width: 0;
354
+ }
355
+ .ios ion-header.header-translucent .header-background,
356
+ .ios ion-header.header-translucent .footer-background,
357
+ .ios ion-footer.footer-translucent .header-background,
358
+ .ios ion-footer.footer-translucent .footer-background {
359
+ backdrop-filter: none;
360
+ }
361
+ .ios ion-header.header-translucent ion-toolbar,
362
+ .ios ion-footer.footer-translucent ion-toolbar {
363
+ --border-width: 0;
364
+ --background: transparent;
365
+ }
366
+ .ios ion-header ion-toolbar:first-child {
367
+ padding-right: calc(var(--ion-safe-area-right) + 4px);
368
+ padding-left: calc(var(--ion-safe-area-left) + 4px);
369
+ }
370
+ .ios ion-content:not(:has(cdk-virtual-scroll-viewport)) {
371
+ --padding-bottom: calc(56px + var(--max-safe-area));
372
+ }
373
+ .ios .ion-page :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
374
+ margin-bottom: calc((56px + var(--max-safe-area)) * -1);
375
+ padding-bottom: calc(56px + var(--max-safe-area));
376
+ }
377
+ .ios .ion-page ion-content > ion-header > ion-toolbar:first-child {
378
+ --min-height: 66px;
379
+ }
380
+ .ios .ion-page.enable-back-button ion-content > ion-header > ion-toolbar:first-child, .ios .ion-page.ion-page.can-go-back ion-content > ion-header > ion-toolbar:first-child {
381
+ --min-height: auto;
382
+ }
383
+ .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *::part(native) {
384
+ box-shadow: none !important;
385
+ border-radius: 25px;
386
+ background: var(--ion-color-primary) !important;
387
+ border-color: var(--ion-color-primary-contrast) !important;
388
+ border-width: 1px !important;
389
+ }
390
+ .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated {
391
+ opacity: 0.4;
392
+ }
393
+ .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated ion-icon {
394
+ border-color: var(--ion-color-primary-contrast) !important;
395
+ }
396
+ .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated::part(native)::after {
397
+ background: transparent !important;
398
+ }
399
+ .ios app-photo-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native),
400
+ .ios app-editor-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native) {
401
+ box-shadow: none !important;
402
+ border-radius: 25px;
403
+ background: transparent !important;
404
+ border-width: 1px !important;
405
+ }
406
+ .ios .ion-page ion-content:not(.background-transparent)::after,
407
+ .ios ion-footer.footer-translucent::after {
408
+ content: "";
409
+ position: absolute;
410
+ bottom: 0;
411
+ width: 100%;
412
+ height: calc(56px + var(--max-safe-area));
413
+ box-shadow: inset 0 0 0 0 rgba(var(--system-background-rgb), 0), inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
414
+ pointer-events: none;
415
+ z-index: 1;
416
+ }
417
+ .ios app-editor-image.ion-page ion-content::after,
418
+ .ios app-photo-image.ion-page ion-content::after {
419
+ box-shadow: none !important;
420
+ }
421
+
422
+ /*# sourceMappingURL=ionic-theme-ios26.css.map */
package/css/ionic-theme-ios26.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/assets/ios-variables.scss","../src/assets/ion-popover.scss","../src/assets/ion-searchbar.scss","../src/assets/ios-talk-room.scss","../src/assets/ion-tabs.scss","../src/assets/ion-button.scss","../src/assets/ion-segment.scss","../src/assets/ios-design-dark.scss","../src/assets/ios-design.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACZA;EACE;;AAKE;EDUJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;ECjBM;EACA;;AAGJ;EACE;;AACA;EACE;;;ACfN;EACE;EACA;;AAKE;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;EFVN;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EEIM;EACA;EACA;;AAEF;EACE;;;ACjCJ;EACE;;AAGA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EHVR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGGU;;AAKJ;EACE;EACA;EACA;;AACA;EHrBR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGcU;EACA;;;ACxCV;EACE;EACA;;AACA;EAKE;;AAJA;EJYJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EInBM;;AAMN;EJIA;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EIXE;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EACE;;AAGF;EAIE;EACA;;AAJA;EACE;;AAIF;EACE;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACpDV;AACE;AAAA;AAAA;;AAKE;AAAA;EACE;;AAIJ;AAAA;AAAA;EAGE;EAKA;EAEA;EAEA;EACA;;AATA;AAAA;AAAA;ELEF;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKTI;;AAQF;AAAA;AAAA;EACE;EACA;;AAMF;AAAA;AAAA;EACE;EACA,YACE;;AAIF;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EL1BR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKmBQ;;AAOJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;;AAMJ;AAAA;AAAA;EACE;EACA;;;ACtEJ;EACE;EACA;;AAEA;EACE;;;ACFJ;AAAA;EACE;;AACA;AAAA;EACE;;AAKF;AAAA;EPmBJ;EACA;EACA;EACA;EACA;;AOpBI;AAAA;EACE;;AAKF;AAAA;EACE;;;ACZN;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EAQE;;AAPA;ERNJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EQDM;;AAEF;EACE;;AAON;EACE;;AAGF;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;AAIA;EACE;EACA;;AAEF;EACE;;AAKA;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;;AAGA;EACE;;AAQJ;AAAA;EACE;EACA;EACA;EACA;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;;AAEF;AAAA;EAEE","file":"ionic-theme-ios26.css"}
package/fesm2022/rdlabo-ionic-theme-ios26.mjs ADDED
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ //# sourceMappingURL=rdlabo-ionic-theme-ios26.mjs.map
package/fesm2022/rdlabo-ionic-theme-ios26.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rdlabo-ionic-theme-ios26.mjs","sources":["../../../projects/ionic-theme-ios26/src/rdlabo-ionic-theme-ios26.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
package/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ type dummy = {};
2
+
3
+ export type { dummy };
package/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@rdlabo/ionic-theme-ios26",
3
+ "version": "0.0.1",
4
+ "exports": {
5
+ "./css/*": {
6
+ "style": "./css/*"
7
+ },
8
+ "./package.json": {
9
+ "default": "./package.json"
10
+ },
11
+ ".": {
12
+ "types": "./index.d.ts",
13
+ "default": "./fesm2022/rdlabo-ionic-theme-ios26.mjs"
14
+ }
15
+ },
16
+ "sideEffects": false,
17
+ "module": "fesm2022/rdlabo-ionic-theme-ios26.mjs",
18
+ "typings": "index.d.ts",
19
+ "dependencies": {
20
+ "tslib": "^2.3.0"
21
+ }
22
+ }
package/src/assets/ion-button.scss ADDED
@@ -0,0 +1,77 @@
1
+ @use 'ios-variables';
2
+
3
+ .ios {
4
+ /**
5
+ * パフォーマンス対策。必ず背景が単色である限りは不要
6
+ */
7
+ .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
8
+ .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button {
9
+ &::part(native) {
10
+ backdrop-filter: none !important;
11
+ }
12
+ }
13
+
14
+ .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
15
+ .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
16
+ ion-buttons.liquid-glass-buttons ion-button {
17
+ max-height: inherit;
18
+ &::part(native) {
19
+ @include ios-variables.glass-background(0.7);
20
+ border-radius: 25px;
21
+ }
22
+ margin: 8px;
23
+
24
+ font-size: 1.05rem !important;
25
+
26
+ transition: transform 100ms ease-out;
27
+ will-change: transform;
28
+ &.ion-activated {
29
+ transform: scale(1.2);
30
+ box-shadow: none;
31
+ ion-icon {
32
+ // 色を指定しなくても半透明に
33
+ //color: var(--ion-color-medium-tint);
34
+ }
35
+ }
36
+ &[color='primary'][fill='outline'] {
37
+ color: rgba(var(--ion-color-primary-rgb), 1);
38
+ transition:
39
+ transform 100ms ease-out,
40
+ color 50ms ease;
41
+ }
42
+ &[color='primary'][fill='outline'].ion-activated {
43
+ &::part(native) {
44
+ color: rgba(var(--ion-color-primary-rgb), 0.2);
45
+ &::after {
46
+ transform: scale(1.2);
47
+ @include ios-variables.glass-background;
48
+ box-shadow: none;
49
+ }
50
+ }
51
+ }
52
+
53
+ &.button-has-icon-only,
54
+ &.back-button-has-icon-only {
55
+ &::part(native) {
56
+ border-radius: 50%;
57
+ width: 44px;
58
+ height: 44px;
59
+ padding: 2px;
60
+ }
61
+
62
+ ion-icon {
63
+ font-size: 1.4rem !important;
64
+ &[name='close-outline'] {
65
+ font-size: 2rem !important;
66
+ }
67
+ }
68
+ }
69
+
70
+ &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
71
+ &::part(native) {
72
+ padding: 0 16px;
73
+ min-height: 44px;
74
+ }
75
+ }
76
+ }
77
+ }
package/src/assets/ion-popover.scss ADDED
@@ -0,0 +1,23 @@
1
+ @use 'ios-variables';
2
+
3
+ .ios {
4
+ ion-popover {
5
+ --backdrop-opacity: 0.04;
6
+ &::part(arrow) {
7
+ //display: none;
8
+ }
9
+ &:not(.popover-exclude-content) {
10
+ &::part(content) {
11
+ @include ios-variables.glass-background(0.6);
12
+ border-radius: 24px;
13
+ padding: 0;
14
+ }
15
+ }
16
+ ion-list {
17
+ background: transparent;
18
+ ion-item {
19
+ --background: transparent;
20
+ }
21
+ }
22
+ }
23
+ }
package/src/assets/ion-searchbar.scss ADDED
@@ -0,0 +1,42 @@
1
+ @use 'ios-variables';
2
+
3
+ .ios {
4
+ .toolbar-searchbar::part(container) {
5
+ padding-top: 3px;
6
+ padding-bottom: 3px;
7
+ }
8
+
9
+ ion-modal {
10
+ ion-searchbar:not(.area-searchbar) {
11
+ .searchbar-input-container {
12
+ margin: 0 6px;
13
+ }
14
+ }
15
+ }
16
+
17
+ ion-searchbar:not(.area-searchbar) {
18
+ min-height: 60px;
19
+ padding: 0;
20
+
21
+ ion-icon.searchbar-search-icon {
22
+ inset-inline-start: 12px;
23
+ }
24
+
25
+ .searchbar-input-container {
26
+ margin: 0 8px 0 16px;
27
+ align-self: center;
28
+ justify-self: center;
29
+ input.searchbar-input {
30
+ min-height: 44px;
31
+ @include ios-variables.glass-background;
32
+ // Modal表示でのアイコン非表示の不具合の対応
33
+ backdrop-filter: none;
34
+ border-radius: 20px;
35
+ padding-inline-start: 2.4rem !important;
36
+ }
37
+ .searchbar-clear-button {
38
+ padding-inline-end: 2rem !important;
39
+ }
40
+ }
41
+ }
42
+ }
package/src/assets/ion-segment.scss ADDED
@@ -0,0 +1,12 @@
1
+ .ios {
2
+ ion-toolbar:not(.minimum-segment-toolbar) {
3
+ ion-segment {
4
+ width: calc(100% - 16px);
5
+ border-radius: 16px;
6
+
7
+ ion-segment-button::part(indicator-background) {
8
+ border-radius: 16px;
9
+ }
10
+ }
11
+ }
12
+ }
package/src/assets/ion-tabs.scss ADDED
@@ -0,0 +1,60 @@
1
+ @use 'ios-variables';
2
+
3
+ .ios {
4
+ ion-fab.inner-tab-bar {
5
+ right: calc(16px + var(--ion-safe-area-right, 0px));
6
+ bottom: var(--max-safe-area);
7
+ ion-fab-button {
8
+ &::part(native) {
9
+ @include ios-variables.glass-background;
10
+ color: rgb(var(--system-dark-rgb));
11
+ }
12
+ --background-activated: rgba(var(--system-light-rgb), 0.3);
13
+ }
14
+ }
15
+
16
+ ion-tab-bar {
17
+ @include ios-variables.glass-background;
18
+ z-index: 2;
19
+
20
+ border-radius: 40px;
21
+
22
+ width: calc(100% - 56px - 16px - 16px - 4px - 16px);
23
+ max-width: 400px;
24
+ padding: 2px 2px;
25
+ bottom: var(--max-safe-area);
26
+ left: calc(16px + var(--ion-safe-area-left, 0px));
27
+ position: absolute;
28
+ margin: auto;
29
+
30
+ transition: transform 100ms ease-out;
31
+ will-change: transform;
32
+ &:active {
33
+ transform: scale(1.02);
34
+ }
35
+
36
+ ion-tab-button {
37
+ & > ion-icon {
38
+ font-size: 30px;
39
+ }
40
+ background: rgba(var(--system-light-rgb), 0);
41
+ height: auto;
42
+ &::part(native) {
43
+ overflow: visible;
44
+ }
45
+
46
+ &.tab-selected {
47
+ &::part(native) {
48
+ backdrop-filter: blur(7px);
49
+ background: rgba(var(--system-tab-active-rgb), 0.1);
50
+ transition: background 0.2s ease;
51
+ border-radius: 32px;
52
+ }
53
+
54
+ &.ion-activated::part(native) {
55
+ background: rgba(var(--system-shadow-rgb), 0.02);
56
+ }
57
+ }
58
+ }
59
+ }
60
+ }
package/src/assets/ios-design-dark.scss ADDED
@@ -0,0 +1,28 @@
1
+ @use 'ios-variables';
2
+
3
+ .ion-palette-dark.ios {
4
+ .ion-page ion-header > ion-toolbar > ion-buttons *,
5
+ .ion-page ion-footer > ion-toolbar > ion-buttons * {
6
+ &:not(.link-setting) {
7
+ opacity: 1;
8
+ &::part(native) {
9
+ opacity: 1;
10
+ }
11
+ }
12
+
13
+ &.ion-activated {
14
+ &::part(native) {
15
+ @include ios-variables.glass-background-dark-active;
16
+ }
17
+ ion-icon {
18
+ color: rgb(255, 255, 255) !important;
19
+ }
20
+ }
21
+
22
+ &[color='primary'][fill='outline'] {
23
+ &::part(native) {
24
+ color: var(--ion-color-primary-contrast) !important;
25
+ }
26
+ }
27
+ }
28
+ }
package/src/assets/ios-design.scss ADDED
@@ -0,0 +1,131 @@
1
+ @use 'ios-variables';
2
+
3
+ @use 'ion-popover';
4
+ @use 'ion-searchbar';
5
+ @use 'ios-talk-room';
6
+ @use 'ion-tabs';
7
+ @use 'ion-button';
8
+ @use 'ion-segment';
9
+ @use 'ios-design-dark';
10
+
11
+ .ios {
12
+ ion-toast {
13
+ --border-radius: 24px;
14
+ }
15
+
16
+ ion-card {
17
+ border-radius: 24px;
18
+ }
19
+
20
+ ion-action-sheet {
21
+ --button-color: var(--ion-color-medium);
22
+ }
23
+
24
+ .thread-fab {
25
+ ion-fab-button {
26
+ &::part(native) {
27
+ @include ios-variables.glass-background;
28
+ color: rgb(var(--system-dark-rgb));
29
+ }
30
+ ion-icon {
31
+ color: var(--ion-color-medium-shade);
32
+ }
33
+ --background-activated: rgba(var(--system-light-rgb), 0.3);
34
+ }
35
+ }
36
+
37
+ // tweet action toolbar
38
+ ion-item.suggest-seeking {
39
+ --padding-start: 16px !important;
40
+ }
41
+
42
+ .can-go-back ion-header ion-toolbar:not(.md):first-child,
43
+ .enable-back-button ion-header ion-toolbar:not(.md):first-child {
44
+ --border-width: 0;
45
+ }
46
+ ion-header.header-translucent,
47
+ ion-footer.footer-translucent {
48
+ .header-background,
49
+ .footer-background {
50
+ backdrop-filter: none;
51
+ }
52
+ ion-toolbar {
53
+ --border-width: 0;
54
+ --background: transparent;
55
+ }
56
+ }
57
+ ion-header ion-toolbar:first-child {
58
+ padding-right: calc(var(--ion-safe-area-right) + 4px);
59
+ padding-left: calc(var(--ion-safe-area-left) + 4px);
60
+ }
61
+ ion-content:not(:has(cdk-virtual-scroll-viewport)) {
62
+ --padding-bottom: calc(56px + var(--max-safe-area));
63
+ }
64
+
65
+ .ion-page {
66
+ :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
67
+ margin-bottom: calc(calc(56px + var(--max-safe-area)) * -1);
68
+ padding-bottom: calc(56px + var(--max-safe-area));
69
+ }
70
+ ion-content > ion-header > ion-toolbar:first-child {
71
+ --min-height: 66px;
72
+ }
73
+
74
+ &.enable-back-button,
75
+ &.ion-page.can-go-back {
76
+ ion-content > ion-header > ion-toolbar:first-child {
77
+ --min-height: auto;
78
+ }
79
+ }
80
+ }
81
+
82
+ .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons * {
83
+ &::part(native) {
84
+ box-shadow: none !important;
85
+ border-radius: 25px;
86
+ background: var(--ion-color-primary) !important;
87
+ border-color: var(--ion-color-primary-contrast) !important;
88
+ border-width: 1px !important;
89
+ }
90
+ &.ion-activated {
91
+ opacity: 0.4;
92
+ ion-icon {
93
+ border-color: var(--ion-color-primary-contrast) !important;
94
+ }
95
+ &::part(native) {
96
+ &::after {
97
+ background: transparent !important;
98
+ }
99
+ }
100
+ }
101
+ }
102
+ app-photo-image,
103
+ app-editor-image {
104
+ &.ion-page ion-header > ion-toolbar > ion-buttons * {
105
+ &::part(native) {
106
+ box-shadow: none !important;
107
+ border-radius: 25px;
108
+ background: transparent !important;
109
+ border-width: 1px !important;
110
+ }
111
+ }
112
+ }
113
+
114
+ .ion-page ion-content:not(.background-transparent)::after,
115
+ ion-footer.footer-translucent::after {
116
+ content: '';
117
+ position: absolute;
118
+ bottom: 0;
119
+ width: 100%;
120
+ height: calc(56px + var(--max-safe-area));
121
+ box-shadow:
122
+ inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
123
+ inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
124
+ pointer-events: none;
125
+ z-index: 1;
126
+ }
127
+ app-editor-image.ion-page ion-content::after,
128
+ app-photo-image.ion-page ion-content::after {
129
+ box-shadow: none !important;
130
+ }
131
+ }
package/src/assets/ios-talk-room.scss ADDED
@@ -0,0 +1,50 @@
1
+ @use 'ios-variables';
2
+
3
+ .ios {
4
+ app-talk-room {
5
+ .talk-system-message {
6
+ transform: translateY(-80px);
7
+ }
8
+ ion-footer#talk-footer {
9
+ ion-toolbar {
10
+ --border-width: 0;
11
+ --background: transparent;
12
+ }
13
+ ion-toolbar.toolbar-blockquote {
14
+ position: absolute;
15
+ top: -56px;
16
+ ion-item {
17
+ padding: 8px 12px;
18
+ --inner-padding-end: 4px;
19
+ ion-avatar {
20
+ transform: translateX(-10px);
21
+ margin-right: 4px;
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ ion-icon {
26
+ font-size: 1.6rem;
27
+ color: var(--ion-color-medium-tint);
28
+ }
29
+ }
30
+ &::part(native) {
31
+ @include ios-variables.glass-background;
32
+ border-radius: 20px;
33
+ }
34
+ }
35
+ }
36
+ ion-toolbar.send-message {
37
+ ion-textarea.input-field {
38
+ transition: width 0.5s ease;
39
+ --padding-start: 16px;
40
+ --padding-end: 16px;
41
+ label.textarea-wrapper {
42
+ @include ios-variables.glass-background;
43
+ margin: 8px 8px;
44
+ border-radius: 32px;
45
+ }
46
+ }
47
+ }
48
+ }
49
+ }
50
+ }
package/src/assets/ios-variables.scss ADDED
@@ -0,0 +1,38 @@
1
+ :root {
2
+ --system-dark-rgb: 0, 0, 0;
3
+ --system-light-rgb: 255, 255, 255;
4
+ --system-tab-active-rgb: 16, 16, 16;
5
+ --system-shadow-rgb: 224, 224, 224;
6
+ --system-background-rgb: 255, 255, 255;
7
+ --system-edge-rgb: 255, 255, 255;
8
+ }
9
+
10
+ .ion-palette-dark {
11
+ --system-dark-rgb: 255, 255, 255;
12
+ --system-light-rgb: 58, 58, 58;
13
+ --system-tab-active-rgb: 255, 255, 255;
14
+ --system-shadow-rgb: translarent;
15
+ --system-background-rgb: 0, 0, 0;
16
+ --system-edge-rgb: 80, 80, 80;
17
+ }
18
+
19
+ @mixin glass-background($opacity: 0.4, $blur: 6px) {
20
+ background: rgba(var(--system-light-rgb), $opacity);
21
+ backdrop-filter: saturate(240%) blur($blur);
22
+ box-shadow:
23
+ inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2),
24
+ 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
25
+ border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
26
+ border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
27
+ border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
28
+ border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
29
+ transition: box-shadow 0.1s ease;
30
+ }
31
+
32
+ @mixin glass-background-dark-active($opacity: 0.25, $blur: 7px) {
33
+ background: rgba(var(--system-tab-active-rgb), $opacity);
34
+ backdrop-filter: saturate(180%) blur($blur);
35
+ box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
36
+ border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
37
+ transition: box-shadow 0.1s ease;
38
+ }