feat(plasma-theme-builder): Actualize default tokens #1127

neretin-trike · 2024-03-18T14:52:37Z

Plasma Theme Builder

произведён рефакторинг методов, которые генерируют токены
актуализированы базовые токены, которые генерируются сервисом ThemeBuilder
добавлена новая группа outline, используемая в обводках / рамках

What/why changed

Необходимо было произвести актуализацию токенов, т.к. добавилось много новых + обновились старые

🐤 Download canary assets:

borderRadius

borderRadius_caldera_online_react-native--canary.1127.8374885890.ts
borderRadius_caldera_react-native--canary.1127.8374885890.ts
borderRadius_default_react-native--canary.1127.8374885890.ts
borderRadius_flamingo_react-native--canary.1127.8374885890.ts
borderRadius_plasma_b2c_react-native--canary.1127.8374885890.ts
borderRadius_plasma_web_react-native--canary.1127.8374885890.ts
borderRadius_sberHealth_react-native--canary.1127.8374885890.ts
borderRadius_sbermarket_business_react-native--canary.1127.8374885890.ts
borderRadius_sbermarket_metro_react-native--canary.1127.8374885890.ts
borderRadius_sbermarket_react-native--canary.1127.8374885890.ts
borderRadius_sbermarket_selgros_react-native--canary.1127.8374885890.ts
borderRadius_sbermarket_wlbusiness_react-native--canary.1127.8374885890.ts
borderRadius_sberonline_react-native--canary.1127.8374885890.ts
borderRadius_sberprime_react-native--canary.1127.8374885890.ts
borderRadius_sdds_serv_react-native--canary.1127.8374885890.ts
borderRadius_stylesSalute_react-native--canary.1127.8374885890.ts

color

color_caldera_ios-swift--canary.1127.8374885890.swift
color_caldera_kotlin--canary.1127.8374885890.kt
color_caldera_online_ios-swift--canary.1127.8374885890.swift
color_caldera_online_kotlin--canary.1127.8374885890.kt
color_caldera_online_react-native--canary.1127.8374885890.ts
color_caldera_online_xml--canary.1127.8374885890.xml
color_caldera_react-native--canary.1127.8374885890.ts
color_caldera_xml--canary.1127.8374885890.xml
color_default_ios-swift--canary.1127.8374885890.swift
color_default_kotlin--canary.1127.8374885890.kt
color_default_react-native--canary.1127.8374885890.ts
color_default_xml--canary.1127.8374885890.xml
color_flamingo_ios-swift--canary.1127.8374885890.swift
color_flamingo_kotlin--canary.1127.8374885890.kt
color_flamingo_react-native--canary.1127.8374885890.ts
color_flamingo_xml--canary.1127.8374885890.xml
color_plasma_b2c_ios-swift--canary.1127.8374885890.swift
color_plasma_b2c_kotlin--canary.1127.8374885890.kt
color_plasma_b2c_react-native--canary.1127.8374885890.ts
color_plasma_b2c_xml--canary.1127.8374885890.xml
color_plasma_web_ios-swift--canary.1127.8374885890.swift
color_plasma_web_kotlin--canary.1127.8374885890.kt
color_plasma_web_react-native--canary.1127.8374885890.ts
color_plasma_web_xml--canary.1127.8374885890.xml
color_sberHealth_ios-swift--canary.1127.8374885890.swift
color_sberHealth_kotlin--canary.1127.8374885890.kt
color_sberHealth_react-native--canary.1127.8374885890.ts
color_sberHealth_xml--canary.1127.8374885890.xml
color_sbermarket_business_ios-swift--canary.1127.8374885890.swift
color_sbermarket_business_kotlin--canary.1127.8374885890.kt
color_sbermarket_business_react-native--canary.1127.8374885890.ts
color_sbermarket_business_xml--canary.1127.8374885890.xml
color_sbermarket_ios-swift--canary.1127.8374885890.swift
color_sbermarket_kotlin--canary.1127.8374885890.kt
color_sbermarket_metro_ios-swift--canary.1127.8374885890.swift
color_sbermarket_metro_kotlin--canary.1127.8374885890.kt
color_sbermarket_metro_react-native--canary.1127.8374885890.ts
color_sbermarket_metro_xml--canary.1127.8374885890.xml
color_sbermarket_react-native--canary.1127.8374885890.ts
color_sbermarket_selgros_ios-swift--canary.1127.8374885890.swift
color_sbermarket_selgros_kotlin--canary.1127.8374885890.kt
color_sbermarket_selgros_react-native--canary.1127.8374885890.ts
color_sbermarket_selgros_xml--canary.1127.8374885890.xml
color_sbermarket_wlbusiness_ios-swift--canary.1127.8374885890.swift
color_sbermarket_wlbusiness_kotlin--canary.1127.8374885890.kt
color_sbermarket_wlbusiness_react-native--canary.1127.8374885890.ts
color_sbermarket_wlbusiness_xml--canary.1127.8374885890.xml
color_sbermarket_xml--canary.1127.8374885890.xml
color_sberonline_ios-swift--canary.1127.8374885890.swift
color_sberonline_kotlin--canary.1127.8374885890.kt
color_sberonline_react-native--canary.1127.8374885890.ts
color_sberonline_xml--canary.1127.8374885890.xml
color_sberprime_ios-swift--canary.1127.8374885890.swift
color_sberprime_kotlin--canary.1127.8374885890.kt
color_sberprime_react-native--canary.1127.8374885890.ts
color_sberprime_xml--canary.1127.8374885890.xml
color_sdds_serv_ios-swift--canary.1127.8374885890.swift
color_sdds_serv_kotlin--canary.1127.8374885890.kt
color_sdds_serv_react-native--canary.1127.8374885890.ts
color_sdds_serv_xml--canary.1127.8374885890.xml
color_stylesSalute_ios-swift--canary.1127.8374885890.swift
color_stylesSalute_kotlin--canary.1127.8374885890.kt
color_stylesSalute_react-native--canary.1127.8374885890.ts
color_stylesSalute_xml--canary.1127.8374885890.xml

shadow

shadow_caldera_online_react-native--canary.1127.8374885890.ts
shadow_caldera_react-native--canary.1127.8374885890.ts
shadow_default_react-native--canary.1127.8374885890.ts
shadow_flamingo_react-native--canary.1127.8374885890.ts
shadow_plasma_b2c_react-native--canary.1127.8374885890.ts
shadow_plasma_web_react-native--canary.1127.8374885890.ts
shadow_sberHealth_react-native--canary.1127.8374885890.ts
shadow_sbermarket_business_react-native--canary.1127.8374885890.ts
shadow_sbermarket_metro_react-native--canary.1127.8374885890.ts
shadow_sbermarket_react-native--canary.1127.8374885890.ts
shadow_sbermarket_selgros_react-native--canary.1127.8374885890.ts
shadow_sbermarket_wlbusiness_react-native--canary.1127.8374885890.ts
shadow_sberonline_react-native--canary.1127.8374885890.ts
shadow_sberprime_react-native--canary.1127.8374885890.ts
shadow_sdds_serv_react-native--canary.1127.8374885890.ts
shadow_stylesSalute_react-native--canary.1127.8374885890.ts

spacing

spacing_caldera_online_react-native--canary.1127.8374885890.ts
spacing_caldera_react-native--canary.1127.8374885890.ts
spacing_default_react-native--canary.1127.8374885890.ts
spacing_flamingo_react-native--canary.1127.8374885890.ts
spacing_plasma_b2c_react-native--canary.1127.8374885890.ts
spacing_plasma_web_react-native--canary.1127.8374885890.ts
spacing_sberHealth_react-native--canary.1127.8374885890.ts
spacing_sbermarket_business_react-native--canary.1127.8374885890.ts
spacing_sbermarket_metro_react-native--canary.1127.8374885890.ts
spacing_sbermarket_react-native--canary.1127.8374885890.ts
spacing_sbermarket_selgros_react-native--canary.1127.8374885890.ts
spacing_sbermarket_wlbusiness_react-native--canary.1127.8374885890.ts
spacing_sberonline_react-native--canary.1127.8374885890.ts
spacing_sberprime_react-native--canary.1127.8374885890.ts
spacing_sdds_serv_react-native--canary.1127.8374885890.ts
spacing_stylesSalute_react-native--canary.1127.8374885890.ts

typo

typo_mage_ios-swift--canary.1127.8374885890.swift
typo_mage_kotlin--canary.1127.8374885890.kt
typo_mage_react-native--canary.1127.8374885890.ts
typo_plasma_ios-swift--canary.1127.8374885890.swift
typo_plasma_kotlin--canary.1127.8374885890.kt
typo_plasma_react-native--canary.1127.8374885890.ts
typo_ruler_ios-swift--canary.1127.8374885890.swift
typo_ruler_kotlin--canary.1127.8374885890.kt
typo_ruler_react-native--canary.1127.8374885890.ts
typo_sage_ios-swift--canary.1127.8374885890.swift
typo_sage_kotlin--canary.1127.8374885890.kt
typo_sage_react-native--canary.1127.8374885890.ts
typo_sbermarket_ios-swift--canary.1127.8374885890.swift
typo_sbermarket_kotlin--canary.1127.8374885890.kt
typo_sbermarket_react-native--canary.1127.8374885890.ts
typo_soulmate_ios-swift--canary.1127.8374885890.swift
typo_soulmate_kotlin--canary.1127.8374885890.kt
typo_soulmate_react-native--canary.1127.8374885890.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2024-03-18T15:24:18Z

Documentation preview deployed!

Salute-Eva · 2024-03-19T06:37:08Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1127/

Salute-Eva · 2024-03-19T06:58:38Z

Documentation preview deployed!

utils/plasma-tokens-utils/src/types.ts

ArthurIvanov

Всё ок

Salute-Eva · 2024-03-20T14:33:38Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1127/

Salute-Eva · 2024-03-20T14:54:23Z

Documentation preview deployed!

...uilder/themeTokenGetters/controlsSurfacesTokenGetters/getSurfaceTransparentPositiveTokens.ts

...uilder/themeTokenGetters/controlsSurfacesTokenGetters/getSurfaceTransparentTertiaryTokens.ts

Yeti-or · 2024-03-21T06:26:25Z

website/plasma-theme-builder/src/hooks/useDefaultThemeData.ts

-    const normalizedThemeData = useMemo(() => getNormalizeThemeSections(defaultThemeData), [defaultThemeData]);
-
-    return normalizedThemeData;
+    return useMemo(() => createTheme(defaultConfig), []);


а зачем тут useMemo ?

просто хук useDefaultThemeData лежит в main файле, и вызывается на каждый ререндер (по-хорошему это нужно будет переделать), поэтому чтобы не делать тыщу раз большой объём вычислений замемоизировал

Yeti-or · 2024-03-21T06:28:15Z

website/plasma-theme-builder/src/builder/themeTokenGetters/surface/index.ts

+    surfaceAccentMinorGradient: getSurfaceAccentMinorGradientTokens,
+    surfaceTransparentAccent: getSurfaceTransparentAccentTokens,
+    surfaceTransparentAccentGradient: getSurfaceTransparentAccentGradientTokens,
+    surfacePromo: getSurfacePromoTokens,


surfacePromo у нас в базовой теме теперь ??

ага, но как я и говорил вчера - эти токены отключены по умолчанию

просто разные продукты иногда называют эти токены по-разному (например surfacePromoMAIN), и чтобы не было такого разнообразия (и неконсистетности), мы сами даём пользователям названия

Yeti-or · 2024-03-21T06:29:32Z

website/plasma-theme-builder/src/utils/tokens.tsx

+    comment,
+    darkValue,
+    lightValue,
+    darkSubGroup = 'onDark',


а почему тут то onDark то просто dark ??

это только для background группы. Уже очень давно именно в этой группе мы сделал dark / light, т.к. это более семантически корректно. Ну то есть onDark бэграунд не может быть (это насколько я помню, мне Гена объяснял тогда)

Yeti-or · 2024-03-21T06:31:26Z

utils/plasma-tokens-utils/src/types.ts

+    | 'outlinePromoMinor'
+    | 'outlinePromoMinorGradient'
+    | 'outlineInfo'
+    | 'outlinePositiveMinor'


интересный нейминиг
то primary / secondary
то _ / minor

=/

Yeti-or · 2024-03-21T06:32:12Z

website/plasma-theme-builder/src/components/GradientTokenValue/GradientTokenValue.tsx

@@ -33,10 +32,6 @@ const GradientTokenLayers = styled.div`

 const StyledTextArea = styled(TextArea)`
    flex: 1;
-
-    textarea {


вот вот
и почему наши пользоватлеи так делали ?

ну да :C Я помню, как тогда говорил о том, что в textArea нельзя высоту никак менять, поэтому костылял

website/plasma-theme-builder/src/components/Token/Token.tsx

...rc/builder/themeTokenGetters/controlsSurfacesTokenGetters/getSurfaceTransparentCardTokens.ts

website/plasma-theme-builder/src/utils/color.tsx

…tokens from `text` group

… from `text` group

github-actions · 2024-03-21T12:17:59Z

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1127/

…roup

github-actions · 2024-03-21T12:52:04Z

Documentation preview deployed!

neretin-trike requested review from Yeti-or, Yakutoc and kayman233 as code owners March 18, 2024 14:52

neretin-trike temporarily deployed to internal March 18, 2024 14:52 — with GitHub Actions Inactive

neretin-trike force-pushed the neretinaa/actualize-default-tokens branch from 88b3dc6 to 83a750e Compare March 19, 2024 06:34

neretin-trike temporarily deployed to internal March 19, 2024 06:34 — with GitHub Actions Inactive

neretin-trike requested review from ArthurIvanov and gibushnev March 19, 2024 06:44

ArthurIvanov reviewed Mar 19, 2024

View reviewed changes

utils/plasma-tokens-utils/src/types.ts Outdated Show resolved Hide resolved

ArthurIvanov approved these changes Mar 19, 2024

View reviewed changes

neretin-trike self-assigned this Mar 20, 2024

neretin-trike force-pushed the neretinaa/actualize-default-tokens branch from 83a750e to 80feb61 Compare March 20, 2024 14:30

neretin-trike temporarily deployed to internal March 20, 2024 14:30 — with GitHub Actions Inactive

Yeti-or approved these changes Mar 21, 2024

View reviewed changes

Yakutoc reviewed Mar 21, 2024

View reviewed changes

...rc/builder/themeTokenGetters/controlsSurfacesTokenGetters/getSurfaceTransparentCardTokens.ts Outdated Show resolved Hide resolved

Yakutoc reviewed Mar 21, 2024

View reviewed changes

website/plasma-theme-builder/src/utils/color.tsx Show resolved Hide resolved

neretin-trike added the plasma-theme-builder label Mar 21, 2024

neretin-trike added 3 commits March 21, 2024 17:15

feat(plasma-theme-builder,plasma-tokens-utils): Remove transparent …

4a7b780

…tokens from `text` group

feat(plasma-theme-builder,plasma-tokens-utils): Remove opacity option…

3e37f42

… from `text` group

feat(plasma-theme-builder): Rename groups of tokens to actual name

c727d18

neretin-trike force-pushed the neretinaa/actualize-default-tokens branch from 80feb61 to 55aaa56 Compare March 21, 2024 12:15

neretin-trike temporarily deployed to internal March 21, 2024 12:15 — with GitHub Actions Inactive

neretin-trike added 6 commits March 21, 2024 17:20

feat(plasma-theme-builder): Update tokens creators for text group

27cf50f

feat(plasma-theme-builder): Update tokens creators for surface group

6d25968

feat(plasma-theme-builder): Update tokens creators for overlay group

7299bca

feat(plasma-theme-builder): Update tokens creators for background g…

5f2d873

…roup

feat(plasma-theme-builder): Add tokens creators for outline group

a626878

fix(plasma-theme-builder): Fix styling problems

382f8a7

neretin-trike force-pushed the neretinaa/actualize-default-tokens branch from 55aaa56 to 382f8a7 Compare March 21, 2024 12:25

neretin-trike temporarily deployed to internal March 21, 2024 12:25 — with GitHub Actions Inactive

neretin-trike added this pull request to the merge queue Mar 21, 2024

Merged via the queue into dev with commit d062edc Mar 21, 2024
32 checks passed

neretin-trike deleted the neretinaa/actualize-default-tokens branch March 21, 2024 21:11

Salute-Eva mentioned this pull request Mar 27, 2024

Release by 27.03.2024 #1151

Merged

neretin-trike mentioned this pull request Apr 4, 2024

feat(plasma-tokens,plasma-theme-builder): Add tokens to existed themes #1165

Merged

This was referenced Jul 24, 2024

Release by 24.07.2024 #1316

Closed

Release by 24.07.2024 #1317

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(plasma-theme-builder): Actualize default tokens #1127

feat(plasma-theme-builder): Actualize default tokens #1127

neretin-trike commented Mar 18, 2024 •

edited by Salute-Eva

Loading

Salute-Eva commented Mar 18, 2024

Salute-Eva commented Mar 19, 2024

Salute-Eva commented Mar 19, 2024

ArthurIvanov left a comment

Salute-Eva commented Mar 20, 2024

Salute-Eva commented Mar 20, 2024

Yeti-or Mar 21, 2024

neretin-trike Mar 21, 2024

Yeti-or Mar 21, 2024

neretin-trike Mar 21, 2024 •

edited

Loading

neretin-trike Mar 21, 2024 •

edited

Loading

Yeti-or Mar 21, 2024

neretin-trike Mar 21, 2024

Yeti-or Mar 21, 2024

Yeti-or Mar 21, 2024

neretin-trike Mar 21, 2024

github-actions bot commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

feat(plasma-theme-builder): Actualize default tokens #1127

feat(plasma-theme-builder): Actualize default tokens #1127

Conversation

neretin-trike commented Mar 18, 2024 • edited by Salute-Eva Loading

Plasma Theme Builder

What/why changed

Salute-Eva commented Mar 18, 2024

Salute-Eva commented Mar 19, 2024

Salute-Eva commented Mar 19, 2024

ArthurIvanov left a comment

Choose a reason for hiding this comment

Salute-Eva commented Mar 20, 2024

Salute-Eva commented Mar 20, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neretin-trike Mar 21, 2024 • edited Loading

Choose a reason for hiding this comment

neretin-trike Mar 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

neretin-trike commented Mar 18, 2024 •

edited by Salute-Eva

Loading

neretin-trike Mar 21, 2024 •

edited

Loading

neretin-trike Mar 21, 2024 •

edited

Loading