-
Notifications
You must be signed in to change notification settings - Fork 243
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #433 from reveloper/weekly_update_48
Weekly update 48
- Loading branch information
Showing
17 changed files
with
198 additions
and
248 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
|
||
# TMA Design Guidelines | ||
|
||
:::info | ||
Starting with version **6.10**, Telegram has updated the color palette for Mini Apps: a couple of old ones were fixed, and new ones were added. | ||
::: | ||
|
||
For context let's remember the history of updates. | ||
|
||
|
||
|
||
Changelog. | ||
1. The `bg_color` and `secondary_bg_color` have been updated. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_1.png) | ||
|
||
|
||
What are the reasons: | ||
|
||
• These colors were originally intended for use on page backgrounds, not UI controls. | ||
|
||
• Therefore, for consistency, they have been updated. | ||
|
||
• To color the backgrounds of different sections and cards, section_bg_color was added. | ||
|
||
To improve the appearance of your applications, you should slightly adjust the use of color variables. | ||
|
||
Above is a clear example that explains exactly what will change for iOS. There should be no changes on Android. | ||
|
||
|
||
|
||
New colors. | ||
Also, many new colors were added. Most of them are most noticeable on Android. Therefore, the examples below will be shown based on Android, but are relevant for all platforms. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_2.png) | ||
|
||
2. For Mini Apps, the ability to use Telegram header colors has become available. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_3.png) | ||
|
||
|
||
3. The token accent_text_color has become available, which is useful for any accent elements in your applications. Previously, everyone used the less suitable dark link_color. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_4.png) | ||
|
||
4. For all secondary cell labels, it's now better to use `subtitle_text_color`. This will allow for more contrasting label, improving the accessibility of your applications. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_5.png) | ||
|
||
|
||
5. For section headers of cards, there is now a dedicated token: `section_header_text_color`. | ||
|
||
![](/img/docs/tma-design-guidelines/tma-design_6.png) | ||
|
||
|
||
6. For cells whose pressing will lead to a destructive action, you can now use `destructive_text_color` instead of custom ones. | ||
|
||
|
||
<p align="center"> | ||
<br /> | ||
<img width="360" src="/img/docs/tma-design-guidelines/tma-design_7.png" alt="" /> | ||
<br /> | ||
</p> | ||
|
||
|
||
|
||
7. A reasonable question arises: how should `link_color` and `hint_color` be used now? | ||
|
||
I recommend using them as colors for hint sections under the sections, and the link color for such backgrounds as `secondary_bg_color`. | ||
|
||
|
||
## See Also | ||
|
||
* [Original Source](https://telegra.ph/Changes-in-Color-Variables-for-Telegram-Mini-Apps-11-20) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.