Skip to content

Commit b67993b

Browse files
authored
Merge pull request #42 from D-Shestak/patch-7
Update design-guidelines.mdx
2 parents c2baa4f + 55f315f commit b67993b

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

docs/v3/guidelines/dapps/tma/tutorials/design-guidelines.mdx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,59 @@
22
# TMA Design Guidelines
33

44
:::info
5-
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.
5+
Starting with version **6.10**, Telegram updated the Mini App color palette by fixing some old colors and adding new ones.
6+
67
:::
78

8-
For context let's remember the history of updates.
9+
For context, let's look back at the update history.
910

1011

1112

1213
Changelog.
13-
1. The `bg_color` and `secondary_bg_color` have been updated.
14+
1. `bg_color` and `secondary_bg_color` have been updated.
1415

1516
![](/img/docs/tma-design-guidelines/tma-design_1.png)
1617

1718

18-
What are the reasons:
19+
Reasons for These Changes:
1920

20-
• These colors were originally intended for use on page backgrounds, not UI controls.
21+
• These colors were originally intended for page backgrounds, not UI controls.
2122

22-
Therefore, for consistency, they have been updated.
23+
To maintain consistency, they have been updated.
2324

24-
To color the backgrounds of different sections and cards, section_bg_color was added.
25+
section_bg_color was introduced to color the backgrounds of different sections and cards.
2526

26-
To improve the appearance of your applications, you should slightly adjust the use of color variables.
27+
To enhance your app’s appearance, adjust how you use color variables.
2728

28-
Above is a clear example that explains exactly what will change for iOS. There should be no changes on Android.
29+
The example above clearly shows what will change on iOS. There should be no changes on Android.
2930

3031

3132

3233
New colors.
33-
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.
34+
Many new colors have been added with most being noticeable on Android. The examples focus on Android but apply to all platforms.
3435

3536
![](/img/docs/tma-design-guidelines/tma-design_2.png)
3637

37-
2. For Mini Apps, the ability to use Telegram header colors has become available.
38+
2. Telegram header colors has become available for Mini Apps.
3839

3940
![](/img/docs/tma-design-guidelines/tma-design_3.png)
4041

4142

42-
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.
43+
3. accent_text_color is now available for highlighting accent elements in your apps. Previously, everyone used the less suitable dark link_color.
4344

4445
![](/img/docs/tma-design-guidelines/tma-design_4.png)
4546

46-
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.
47+
4. For all secondary cell labels, use `subtitle_text_color` to create more contrast and improve the accessibility.
4748

4849
![](/img/docs/tma-design-guidelines/tma-design_5.png)
4950

5051

51-
5. For section headers of cards, there is now a dedicated token: `section_header_text_color`.
52+
5. A new token `section_header_text_color` is now available for section headers of cards.
5253

5354
![](/img/docs/tma-design-guidelines/tma-design_6.png)
5455

5556

56-
6. For cells whose pressing will lead to a destructive action, you can now use `destructive_text_color` instead of custom ones.
57+
6. For cells that trigger a destructive action, use `destructive_text_color` instead of custom color.
5758

5859

5960
<p align="center">
@@ -66,8 +67,7 @@ Also, many new colors were added. Most of them are most noticeable on Android. T
6667

6768
7. A reasonable question arises: how should `link_color` and `hint_color` be used now?
6869

69-
I recommend using them as colors for hint sections under the sections, and the link color for such backgrounds as `secondary_bg_color`.
70-
70+
Use `hint_color` for hint sections under different sections. For backgrounds like `secondary_bg_color`, use `link_color`.
7171

7272
## See Also
7373

0 commit comments

Comments
 (0)