feat(plasma-theme-builder): Add generate hover / active state for tokens #1134

neretin-trike · 2024-03-20T17:19:43Z

Plasma Theme Builder

Добавлена генерация hover / active состояний для групп токенов.

What/why changed

Необходимо было добавить генерацию токенов.

🐤 Download canary assets:

borderRadius

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

shadow

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

color

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

spacing

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

typo

typo_mage_ios-swift--canary.1134.8504864222.swift
typo_mage_kotlin--canary.1134.8504864222.kt
typo_mage_react-native--canary.1134.8504864222.ts
typo_plasma_ios-swift--canary.1134.8504864222.swift
typo_plasma_kotlin--canary.1134.8504864222.kt
typo_plasma_react-native--canary.1134.8504864222.ts
typo_ruler_ios-swift--canary.1134.8504864222.swift
typo_ruler_kotlin--canary.1134.8504864222.kt
typo_ruler_react-native--canary.1134.8504864222.ts
typo_sage_ios-swift--canary.1134.8504864222.swift
typo_sage_kotlin--canary.1134.8504864222.kt
typo_sage_react-native--canary.1134.8504864222.ts
typo_sbermarket_ios-swift--canary.1134.8504864222.swift
typo_sbermarket_kotlin--canary.1134.8504864222.kt
typo_sbermarket_react-native--canary.1134.8504864222.ts
typo_soulmate_ios-swift--canary.1134.8504864222.swift
typo_soulmate_kotlin--canary.1134.8504864222.kt
typo_soulmate_react-native--canary.1134.8504864222.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-20T17:30:22Z

Theme Builder app deployed!

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

Salute-Eva · 2024-03-20T18:40:43Z

Documentation preview deployed!

github-actions · 2024-03-21T08:21:43Z

Theme Builder app deployed!

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

github-actions · 2024-03-21T08:34:10Z

Documentation preview deployed!

website/plasma-theme-builder/src/builder/createTheme.ts

TitanKuzmich · 2024-03-25T07:47:36Z

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

@@ -30,6 +30,13 @@ export const getHEXAColor = (clr: string) => {
    }
 };

+export const getHSLARawColor = (clr: string) => {
+    const alpha = Math.round(Color(clr).hsl().alpha() * 100) / 100;
+    const rounded = Number(alpha.toFixed(2));


Из-за округления не будет проблем с альфа?

хм, я думаю не должно быть с этим проблем

Yeti-or · 2024-03-26T21:56:56Z

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


-    width: 100%;
+/* TODO: Убрать это когда появится возможность стилизовать компонент */


…alue

neretin-trike requested review from Yeti-or, Yakutoc and kayman233 as code owners March 20, 2024 17:19

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

neretin-trike self-assigned this Mar 21, 2024

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

neretin-trike force-pushed the neretinaa/add-generate–tokens-state branch from 2d676e5 to e4c1aae Compare March 21, 2024 08:19

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

neretin-trike requested review from Irinkv and luizasok and removed request for kayman233 March 21, 2024 08:26

neretin-trike force-pushed the neretinaa/add-generate–tokens-state branch from e4c1aae to 4973dc1 Compare March 21, 2024 08:41

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

neretin-trike force-pushed the neretinaa/add-generate–tokens-state branch from 4973dc1 to 585a29d Compare March 21, 2024 09:22

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

luizasok approved these changes Mar 22, 2024

View reviewed changes

TitanKuzmich reviewed Mar 25, 2024

View reviewed changes

website/plasma-theme-builder/src/builder/createTheme.ts Outdated Show resolved Hide resolved

TitanKuzmich reviewed Mar 25, 2024

View reviewed changes

Yeti-or approved these changes Mar 26, 2024

View reviewed changes

Yeti-or reviewed Mar 26, 2024

View reviewed changes

Irinkv approved these changes Mar 27, 2024

View reviewed changes

neretin-trike added 2 commits April 1, 2024 11:32

feat(plasma-theme-builder): Add formulas for calcultae tokens state v…

e622e4b

…alue

feat(plasma-theme-builder): Add methods for calculate tokens state value

e4d0890

neretin-trike force-pushed the neretinaa/add-generate–tokens-state branch from 585a29d to 2dd1019 Compare April 1, 2024 06:35

neretin-trike temporarily deployed to internal April 1, 2024 06:35 — with GitHub Actions Inactive

neretin-trike added 2 commits April 1, 2024 11:39

feat(plasma-theme-builder): Add generate tokens state value

67a0600

fix(plasma-theme-builder): add temp views

d4f9c2c

neretin-trike force-pushed the neretinaa/add-generate–tokens-state branch from 2dd1019 to d4f9c2c Compare April 1, 2024 06:39

neretin-trike temporarily deployed to internal April 1, 2024 06:40 — with GitHub Actions Inactive

TitanKuzmich approved these changes Apr 1, 2024

View reviewed changes

neretin-trike added this pull request to the merge queue Apr 1, 2024

Merged via the queue into dev with commit 3f1aa25 Apr 1, 2024
32 checks passed

neretin-trike deleted the neretinaa/add-generate–tokens-state branch April 1, 2024 07:50

neretin-trike mentioned this pull request Apr 4, 2024

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

Merged

Salute-Eva mentioned this pull request Apr 10, 2024

Release by 10.04.2024 #1175

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): Add generate hover / active state for tokens #1134

feat(plasma-theme-builder): Add generate hover / active state for tokens #1134

neretin-trike commented Mar 20, 2024 •

edited by Salute-Eva

Loading

Salute-Eva commented Mar 20, 2024

Salute-Eva commented Mar 20, 2024

github-actions bot commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

TitanKuzmich Mar 25, 2024

neretin-trike Mar 27, 2024

Yeti-or Mar 26, 2024


		width: 100%;
		/* TODO: Убрать это когда появится возможность стилизовать компонент */

feat(plasma-theme-builder): Add generate hover / active state for tokens #1134

feat(plasma-theme-builder): Add generate hover / active state for tokens #1134

Conversation

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

Plasma Theme Builder

What/why changed

Salute-Eva commented Mar 20, 2024

Salute-Eva commented Mar 20, 2024

github-actions bot commented Mar 21, 2024

github-actions bot commented Mar 21, 2024

TitanKuzmich Mar 25, 2024

Choose a reason for hiding this comment

neretin-trike Mar 27, 2024

Choose a reason for hiding this comment

Yeti-or Mar 26, 2024

Choose a reason for hiding this comment

neretin-trike commented Mar 20, 2024 •

edited by Salute-Eva

Loading